The goal of this project is to create a random emoji generator with a "click" button that generates a random emoji and displays its name tag. For example, the "cook" emoji is represented by a person holding a pen. We will use JavaScript to retrieve data from an API and CSS to style the website. To get the necessary API keys, we will apply to the Emoji API website.
Create these three files, copy the code into each one, then open index.html with Live Server.
random-emoji/ ├── index.html ├── style.css └── index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Random Emoji</title>
</head>
<body>
<h2>Random Emoji</h2>
<div class="section">
<button class="btn" id="btn">Click</button>
<p class="emoji-name" id="emoji-name">Emoji Name</p>
</div>
<script src="index.js"></script>
</body>
</html>
Continue your learning journey with these handpicked projects that share similar concepts and technologies
In this project, our aim is to build a modern tip calculator. The project's primary interface comprises a container labeled "Tip Calculator" with two input fields: one for the bill amount and the other for the tip percentage. The tip calculator has a modern design that is styled using CSS. We utilized JavaScript to obtain the values of the two input fields and calculate the total amount based on these values.
View project
In this project, we're developing a recipe book application that features a variety of recipes obtained through a free recipe API. We need an API key to access this API. Each time the page is refreshed, a new set of recipes with distinct ingredients will be displayed. Additionally, a link is provided to access the recipe website.
View project
In this project, we create a rock, paper, and scissors game. The computer will also choose a random option, and the results will be displayed. You can win, lose, or tie. Scores are tracked at the bottom. We'll use HTML for structure, CSS for a modern look, and JavaScript to generate the computer's choice and compare the results. This game is an interactive way to test your luck and strategy against a computer opponent.
View project