Final Project: Emoji Mood Selector
Emoji mood selector
Add three buttons labeled “Happy 😀,” “Neutral 😐,” and “Sad 😞”.
When the user clicks a button, update a
<p>tag (id="mood-display") to show the selected mood emoji.
Below are some hints to help you get started:
Hints:
1️⃣ What should change when a button is clicked?→ The mood emoji inside <p id="mood-display"> should update.
2️⃣ How do we listen for a button click?→ Use addEventListener("click", function() {...}) on each button.
3️⃣ How do we update text inside an element?→ Use .textContent to modify what’s inside moodDisplay.
Write your code in the widget below:
Good job with this challenge!
If you need further help solving it, see the next lesson for the solution.
Final Project: Emoji Mood Selector
Emoji mood selector
Add three buttons labeled “Happy 😀,” “Neutral 😐,” and “Sad 😞”.
When the user clicks a button, update a
<p>tag (id="mood-display") to show the selected mood emoji.
Below are some hints to help you get started:
Hints:
1️⃣ What should change when a button is clicked?→ The mood emoji inside <p id="mood-display"> should update.
2️⃣ How do we listen for a button click?→ Use addEventListener("click", function() {...}) on each button.
3️⃣ How do we update text inside an element?→ Use .textContent to modify what’s inside moodDisplay.
Write your code in the widget below:
Good job with this challenge!
If you need further help solving it, see the next lesson for the solution.