Open ToddSpainhour opened 4 years ago
WHEN the page loads THEN i should see a block titled "Eat" in the upper left corner AND it should have two buttons AND one should say "Healthy Food" AND the other should say "Unhealthy Food" AND it shouls display the "Fullness" score
import the printToDom functionality from utils.js
add private variable called "full" (simply the behind the scenes starting value for this field?) This full variable shouldn't be allowed to go higher than 100
add the domString code
in the domString code add...
name of quadrant which is "Eat"
a "Healthy Food" button named healthy-food-button
a "Unhealthy Food" button named unhealthy-food-button
add a functions that manipulates the "Eat" number that's displayed.
one function, called eatUnhealthyFood()
should decrease the fullness score by -3
the other function, called eatHealthyFood()
should increase the fullness score by +10
add an event listener to the "Healthy Food" button that runs eatHealthyFood()
the results should reprint each time a button is clicked
export everything (as one?) to the main.js file and put in the init()
The Eat component should appear in the upper left quadrant. It should have a private variable called full. This variable should be set to 100 on page load. This module should have 2 buttons. One should be a healthy food that adds 10 to full when pressed. The other button should be an unhealthy food that subtracts 3 from full when pushed.
The quadrant should display the name, fullness score, and the two buttons. Each time a button is clicked the quadrant should be re-drawn to show the correct fullness score. The Full score should NEVER be larger than 100.