Frontend Mentor - Interactive rating component solution

This is a solution to the Interactive rating component challenge on Frontend Mentor. Frontend Mentor challenges help me improve my coding skills by building realistic projects.

Table of contents

• Gif
  • Screenshot
  • Links
  • Built with
  • What I learned
  • Useful resources

Gif

Screenshot

Links

• Solution URL: Solution URL here
• Live Site URL: Live site URL here

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library

What I learned

see below:

<div className="TodoWrapper">
  <TodoForm addTodo={addTodo} />
  {todos.map((todo) => (
    <Todo
      key={todo.id}
      task={todo}
      toggleCompleted={toggleCompleted}
      deleteTodo={deleteTodo}
      todos={todos}
      setTodos={setTodos}
    />
  ))}
  <div className="itemsOutLine">
    <h3 className="items">
      {itemsLeft} {itemsLeft === 1 ? "item left" : "items left"}
    </h3>
    <button className="clearCompleted" onClick={clearCompletedTodos}>
      Clear Completed
    </button>
  </div>
</div>

Useful resources

• React.dev - This is an amazing web site which helped me finally understand jsx. I'd recommend it to anyone still learning this concept.