ToddSpainhour
commented
4 years ago User Story
AC (acceptance code)
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
Dev Notes
-
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.