33 - Emoji Generator, for loop practice (JS lessons)
๐ Task: Emoji Generator
Build an "Emoji Generator" application.
The user enters a number from 1 to 15 and picks an emoji type via a <select>.
After clicking the button:
- Use a
for loop to display the chosen number of selected emoji
- Use
if to validate the range
- If the number is less than 1 or greater than 15 โ show an error message
- Use
switch or if to pick the emoji
๐๏ธ Select options:
- Happy ๐
- Sad ๐ข
- Cool ๐
- Angry ๐ก
๐ How it works:
- Read the number from the input
- Use
if to check that the number is between 1 and 15
- If invalid โ display an error:
<p class="error">Please enter a number from 1 to 15</p>
- Run a
for loop from 1 to the entered number
- On each iteration append the selected emoji to the previous value using
+=
๐งช Examples:
- Input: 5 + Happy ๐ โ ๐๐๐๐๐
- Input: 3 + Angry ๐ก โ (previous) ๐ก๐ก๐ก
- Input: 10 + Cool ๐ โ (previous) ๐๐๐๐๐๐๐๐๐๐
๐ HTML structure of the result:
- Container
div class="emoji-row"
- Emoji must be added inside the container
<div class="emoji-row">
๐๐๐๐๐๐๐
</div>
๐ Important:
- The
for loop controls only the quantity of emoji
- The
select controls only the type
- Range validation must be done with
if