Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Got it in stock? What if I find one?
We are already processing the three properties from the loaded data. We need to process the fourth one: isAvailable
. This property stores a Boolean value that describes product availability. If the product is in stock, then the property contains true
, otherwise it contains false
.
Depending on the presence or absence of the product, the card must have one of the two additional classes: product--available
or product--unavailable
.
You have already solved this task, and that’s why you need to repeat the same steps by analogy with the first program. Here is a brief summary:
- set the variable to store the class name and write the default value into it;
- set up a check to see if the product is available;
- if the check fails, change the value in the variable;
- after the check, add the class of the variable to the product card.
After the function is completed, you need to test it. To do this, change the value of the isAvailable
property in the data object to false
. If everything is done correctly, the appearance of the card will change.
- index.html
- style.css
- script.js
Thanks! We’ll fix everything at once!
Click inside the mini browser to put the focus in this window.
- In the
createCard
function beforereturn
, create a variableavailabilityClass
with'product--available'
value. - After it, add a check to see if the product is out of stock.
- If the check works, override the value of
availabilityClass
to'product--unavailable'
. - After the check, add the
listItem
class fromavailabilityClass
. - In the
productInfo
object, change the value ofisAvailable
tofalse
.
Comments