The Emoji Generator

By Bianca Rivera / Coding Concepts Articles for Kids / April 2021 Issue

Learn how to use conditional statements to generate different emojis!

You can create programs that allow your users to get different results based on decisions they make, using JavaScript’s conditional statements. In this tutorial, we will create two versions of the same Emoji Generator, using two different types of conditional statements (if – else if – else and switch conditional statements).

The Emoji Generator is created using the 3 languages that are the foundation of any website: HTML (for format and layout), CSS (for the “look and feel”) and JavaScript (for functionality and interactivity). Both versions of the Emoji Generator will allow users to select how they are feeling from a drop-down form, and after clicking a button, a matching emoji and short statement will be displayed.

To display emojis on a webpage, your browser must know what character set (encoding) to use. For HTML5 (the current HTML standard), the recommendation is to use the UTF-8 character set. To display emojis in HTML, you must specify the hexadecimal code of the symbol (which UTF-8 will know how to interpret). If you don’t know, hexadecimal code is used by humans to simplify binary codes used by computers, with each code representing a unique symbol or character.

Both versions of the program have nearly identical index.html files. Both use a simple form that provides users 5 feelings to choose from (Happy, Silly, Shocked, Tired and Grumpy). After a selection is made and the user clicks the form button, the selectFeeling() function is run in the script.js file. The 5 feelings are connected to option values that are used in the JavaScript files (for example, option value “h” is for Happy). Both programs use the document.getElementById() method to return the emoji and short phrase that has the corresponding option value. For example, if the user selects “Happy”, which is connected to option value “h”, the output displayed would be a smiling emoji and the words, “Happy Camper!”.

Where the differences occur are in the two programs’ JavaScript files. In the “Emoji_Conditionals” program, after the function selectFeeling() is called, a series of if – else if – else statements are run that will specify blocks of code to be executed when the player makes a decision. The Happy feeling is the first option, starting the if statement. If that option is not selected, the else if statements will run. If none of those options are selected, the else statement will run and the last feeling option, Grumpy, will be displayed.

In the “Emoji_SwitchStatements” program, after the function selectFeeling() is called, two variables are declared (created), output and feelings. In our example, there are 5 possible cases (blocks of code) that can be executed in the switch statement, feelings. Once the switch statement is evaluated and the matching feeling value is found, the feeling “case” will execute. Based on whatever was selected, that output will be displayed (the .innerHTML property will return, or display, the HTML content).

Just like if – else if – else statements, we can use switch statements to give users different results based on decisions they make. However, using switch statements is more efficient and error-proof, especially when you are providing users several options to choose from.