Hello everyone. Welcome to today’s tutorial from Coding Artist. In today’s tutorial, we will build a Number Trivia App. To create this project, we need HTML, CSS and javascript.
For this project, we will be using the Numbers API.
The project consists of a search bar. The user enters a desired number into the input field and hits the ‘Get Fact’ button. Once the user clicks the button, a fact related to the number is displayed.
Alternatively, the user can click on the ‘Get Random Fact’ button. Once the user clicks on this button, a random number is selected. Following this, we display a fact corresponding to that number.
We also validate the user input. If the user enters a number less than 0 or greater than 300, we display an error message. Also, if the user leaves the input field empty, we show the error message.
This project is suitable for javascript intermediates as it covers some advanced topics like fetch(). If you are interested in improving your skills by building projects, you can check out this playlist.
This playlist from my youtube channel consists of more than 80 javascript projects. The difficulty of these projects varies from beginner to quite advanced.
Video Tutorial:
If you prefer to learn by watching a video tutorial rather than reading this blog post, check out the video below. Also, subscribe to my youtube channel where I post a new tutorial every alternate day.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. The project folder is called – Number Trivia App. Inside this folder, we have three files – index.html, style.css and script.js.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Number Trivia App</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="search-container">
<input type="num" placeholder="Number" id="num" />
<button id="get-fact-btn">Get Fact</button>
</div>
<button id="ran-fact-btn">Get Random Fact</button>
<div class="fact"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we add styling to our elements using CSS. Now copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #566fff;
}
.container {
background-color: #ffffff;
width: 95vw;
font-size: 16px;
max-width: 31.25em;
padding: 3.5em 2.5em;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
border-radius: 0.6em;
box-shadow: 0 1.2em 3em rgba(0, 4, 52, 0.2);
}
.search-container {
display: flex;
justify-content: space-between;
}
.container input,
.container button {
font-size: 1.25em;
outline: none;
border: none;
border-radius: 0.4em;
}
.container input {
width: 40%;
border: 1px solid #bdbdbf;
padding: 0.6em;
}
.container button {
width: 55%;
background-color: #566fff;
color: #ffffff;
font-weight: 500;
padding: 0.7em;
cursor: pointer;
}
#ran-fact-btn {
width: 100%;
margin-top: 1em;
}
.fact {
background-color: #ffffff;
box-shadow: 0 0 1.2em rgba(0, 4, 52, 0.1);
margin: 3em auto 0 auto;
padding: 2.8em 1.8em;
border-radius: 0.6em;
border: none;
border-bottom: 0.6em solid #566fff;
display: none;
}
.fact h2 {
font-size: 2.8em;
color: #181a34;
}
.fact p {
font-size: 1.15em;
font-weight: 400;
color: #50526b;
line-height: 1.8em;
text-align: justify;
margin-top: 0.8em;
}
p.msg {
text-align: center;
font-weight: 500;
color: #181a34;
}
Javascript:
Finally, we add functionality to this project using Javascript. Once again, copy the code below and paste it into your script file.
let getFactBtn = document.getElementById("get-fact-btn");
let ranFactBtn = document.getElementById("ran-fact-btn");
let fact = document.querySelector(".fact");
let url = "http://numbersapi.com/";
let fetchFact = (num) => {
let finalUrl = url + num;
fetch(finalUrl)
.then((resp) => resp.text())
.then((data) => {
fact.style.display = "block";
fact.innerHTML = `<h2>${num}</h2>
<p>${data}</p>`;
document.querySelector(".container").append(fact);
});
};
let getFact = () => {
let num = document.getElementById("num").value;
//Check if input number is not empty
//If not empty
if (num) {
//Check if number lies between 0 and 300
//if Yes fetch the fact
if (num >= 0 && num <= 300) {
fetchFact(num);
}
//If number is less than 0 or greater than 300 display error message.
else {
fact.style.display = "block";
fact.innerHTML = `<p class="msg"> Please enter a number between 0 to 300.</p>`;
}
}
//If input number is empty display error message
else {
fact.style.display = "block";
fact.innerHTML = `<p class="msg">The input field cannot be empty</p>`;
}
};
let getRandomFact = () => {
//Random number between 0 to 300
let num = Math.floor(Math.random() * 301);
fetchFact(num);
};
getFactBtn.addEventListener("click", getFact);
ranFactBtn.addEventListener("click", getRandomFact);
window.addEventListener("load", getRandomFact);
If you face any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below. Also, feel free to drop your suggestions and feedback in the comments below.
Happy Coding!
