Add Products Component [1.5h]

[YaronMiro]

Description:

• Add a product => Interface with the following properties:
• id => number
• title => string
• quantity => number
• price => string
• complete => boolean
• description => string (Limit max-length to 30 characters)

Products Template

• Add HTML Template to list the products
  • Add new product => input text"
  • Toggle product checked status => input checkbox
  • Delete => button

List Styling:

• List main title color => ‫‪#ffffff‬‬
• Limit the height and add overflow to scroll.
• width => 300px

List product Styling:

• padding up/down => 5px
• padding left/right => 10px
• light text color => ‫‪‫‪#999999‬‬‬‬
• light border color => ‫‪#d3d3d3‬‬
• text color => #000000

[YaronMiro]

Reference Images:

[YaronMiro]

• Fix product styling (Edit, Delete, Checked)

Wrong Alignment

when resizing down or displaying on Firefox make sure that the input text gets smaller and the delete button stays spread to the right and the and mark button stays spread to the left.

Correct Alignment