beanz Magazine

The Emoji Generator

Frank Behrens on Flickr

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.

Learn More

Emoji Generator (Conditionals) Program

https://repl.it/@brivera/EmojiConditionals

Emoji Generator (Switch Statements) Program

https://repl.it/@brivera/EmojiSwitchStatements

Emojis for the Web (Reference Chart)

https://www.w3schools.com/charsets/ref_emoji_smileys.asp

JavaScript Conditions

https://www.w3schools.com/js/js_if_else.asp

JavaScript Switch Statements

https://www.w3schools.com/js/js_switch.asp

Also In The April 2021 Issue

Are you an avid bird watcher and/or interested in nature conservation? Then the ebird app may be perfect for you!

Learn how you can trace the origins of pixel art all the way back to the mid-1800s!

Learn how to use conditional statements to generate different emojis!

Quantum experiments, ripples and particle waves! Get ready to learn more about the weird world of quantum physics!

No need to douse your computer in holy water, these daemons are friendly!

Learn how Limor Fried turned her tinkering hobby into a multi-million dollar company!

What is a qbit and how can it potentially change the world? Find out as we explore quantum computing!

An interview with the creator of the small internet community rawtext.club!

Complete your at-home art museum experience by creating a tour!

Class is back in session and this time we will be learning the basics of soldering!

Learn how our ancestors calculated complex problems prior to modern computing technology!

Interesting stories about computer science, software programming, and technology for April 2021.

Links from the bottom of all the April 2021 articles, collected in one place for you to print, share, or bookmark.