saramontasser/project-1

project-1's Issues

[PHASE-3] The search functionality isn't working

[PHASE-3] The carousel buttons should match udemy design or at least look similar to it

Your Design

[PHASE-2] Checkout These alternatives for filtering (SUGGESTION)

check the javascript filter method here

Or you can use a library called lodash to do that for you you can find it here

[PHASE-2] Add a README file describing how to run the project

you should add a README file detailing how anyone could run the project in the repository. I suggest initializing npm in the project so that I can have a package.json file so I can just type
npm install
then it will install all the project dependencies.

[PHASE-2] The navbar isn't responsive in extra large screens

[GENERAL] Checkout the guidelines for git commit messages

https://docs.google.com/document/d/1Zx3uHyx7ZxxYEI2pU2PnOUsuxhmN2loHplkTwmFkpFM/edit#heading=h.cbmrnm98u358

[PHASE-3] The course selection bar isn't working

[PHASE-2] Please follow the guidelines for comments in JS files

you can find the guidelines for comments here

[PHASE-2] CSS class naming

please refer to the css guidelines about ID and class naming you can find it here.

[PHASE-2] Create React like component instead of accessing all of these html elements in the js file

for example, the end result after you create the course component will look like this in HTML

<li class="course">
  <img src="imgs/python1.jpeg" alt="course image">
    <h3 class="course-title">Learn Python: The Complete Python Programming Course</h3>
    <p class="instructor">Avinash Jain , The Codex</p>
    <div class="rating-container">
      <span class="rating">4.4</span>
      <i class="fa-solid fa-star"></i>
      <i class="fa-solid fa-star"></i>
      <i class="fa-solid fa-star"></i>
      <i class="fa-solid fa-star"></i>
      <i class="fa-solid fa-star-half"></i>
      <span class="raters-number"> (1,284) </span>
    </div>
    <div class="price-container">
      <span class="new-price">E£199.99 </span>
      <span class="old-price">E£679.99</span>
    </div>
    <span class="best-seller">Bestseller</span>
</li>

I suggest you create this component one time as a string with dynamic content as if it is a react component and you give it its properties:

<li class="course">
  <img src=`{course.imageUrl}` alt="course image">
    <h3 class="course-title">{course.title}</h3>
    <p class="instructor">{course.instructor}</p>
    <div class="rating-container">
      <span class="rating">{course.rating}</span>
      <i class="fa-solid fa-star"></i>
      <i class="fa-solid fa-star"></i>
      <i class="fa-solid fa-star"></i>
      <i class="fa-solid fa-star"></i>
      <i class="fa-solid fa-star-half"></i>
      <span class="raters-number"> {course.raters_no} </span>
    </div>
    <div class="price-container">
      <span class="new-price">{course.newPrice} </span>
      <span class="old-price">{course.oldPrice}</span>
    </div>
    <span class="best-seller">Bestseller</span>
</li>

[PHASE-3] There is no need to fetch the courses every time you search for a course

You should fetch the courses for one time at first then apply your filters on these courses. For example, if you want to display only python courses you should filter the courses and create a new one with only python courses then render these courses.

check the javascript filter method here

Or you can use a library called lodash to do that for you you can find it here