Unleash the Fun: Build an Exciting Emoji Project with JavaScript!

Table of Contents

1. Introduction
2. Setting Up the Project
3. Adding HTML Markup
4. Styling the Emoji Container
5. Implementing Hover Effect
6. Adding JavaScript Functionality
7. Retrieving Random Emojis
8. Testing and Customization
9. Pushing to GitHub
10. Conclusion

Introduction

Welcome to Project 21 of this course! In this video, we will be creating random emojis using HTML, CSS, and JavaScript. The goal is to display different emojis when hovering over a mouse pointer. Let's get started!

Setting Up the Project

To begin, create a folder and name it something like "Project21-RandomEmojis." Inside this folder, create three files: index.html, style.css, and app.js.

Adding HTML Markup

In the index.html file, start by declaring the doctype and linking the CSS and JavaScript files. Next, create a container element with an ID of "emoji".

Styling the Emoji Container

In the style.css file, select the body element and set its height to 100% and display to flex. This will ensure that everything is contained within the body and properly aligned. Set the background color to a gray shade.

Implementing Hover Effect

Increase the size of the emoji by selecting the emoji element and setting its font size to 10rem. Apply a grayscale filter of 1 initially to the emoji. Change the cursor to a pointer to indicate interaction. Add a transition property for smooth animations.

Adding JavaScript Functionality

In the app.js file, select the button element using document.querySelector(). Also, create a constant array of emojis with different emoji symbols.

Retrieving Random Emojis

When the button is hovered over, retrieve a random emoji from the array using JavaScript. Update the innerHTML of the button element to display the randomly selected emoji.

Testing and Customization

Test the project by hovering over the button and verifying that random emojis are displayed. Customize the code by modifying the array of emojis or changing the background color, as desired.

Pushing to GitHub

If you are familiar with using GitHub, you can push your code to a repository for version control and collaboration.

Conclusion

Congratulations on completing this project! Feel free to explore other ways to enhance the functionality or style of the random emojis. Have fun and continue learning!

Please note: The specific code implementation and details may vary depending on your development environment and preferences.