Hello everyone, today we are going to create Number Facts App. It is a fun API project which gives you random facts about the numbers that a user input. For this project we'll be working with JS and AJAX/Fetch API concept to send and retrieve data from a server asynchronously without interfering with the display and behaviour of existing page.
I've learnt these concepts by making this fun project.
API url that we are going to use in this project is http://numbersapi.com/ .
Our final project will look like this
HTML
So, basically our interface is going to look like this
Now you are free to use Bootstrap classes to design it or you may start from scratch just like me.
<div class="row">
<div id="header">
<h1>Number Facts</h1>
</div>
<div id="instruction">
<p>Enter a number and get random facts</p>
</div>
<div id="box">
<input type="number" id="numberInput" placeholder="Enter any number....">
</div>
<div>
<br>
</div>
<div id="fact">
<h4>
Number Fact
</h4>
<p id="factText"></p>
<div>
<br>
</div>
</div>
</div>
CSS
Now it's time to design our web page. So, I basically do a little CSS that is enough for this project. And as always you're free to do experiments with this.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #264653;
display: grid;
place-items: center;
}
.developer-name{
margin-top: 30px;
font-size: 30px;
opacity: 0.3;
}
#fact{
display: none;
}
h1{
color: #5c0bb9;
z-index: 1;
font-family: 'Fredoka One', cursive;
}
.row{
margin-top: 15%;
background: #a8dadc;
width: 50vw;
height: max-content;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px #a8dadc;
}
#header{
display: grid;
place-items: center;
}
#instruction{
margin-left: 6%;
font-weight: bolder;
}
#fact{
margin-left: 3%;
font-weight: bolder;
}
#box{
display: grid;
place-items: center;
margin-top: 3%;
}
input[type=number]{
background: transparent;
width: 70%;
height: 150%;
}
#fact{
margin-top: 4%;
}
#factText{
margin-top: 2%;
}
JavaScript
The most important part of this project. So, first take a look at JS part and I'll be explaining in last.
let fact = document.querySelector('#fact');
let factText = document.querySelector('#factText');
let numberInput = document.querySelector('#numberInput');
Firstly we defined variables. Now, we have to add addEventListener to numberInput to get the input and run a function whenever user input a number
numberInput.addEventListener('input',getFactFetch);
From this point we have 2 ways either we use Fetch API or use AJAX. I'll be providing code for both ways.
Fetch API
function getFactFetch(){
let number = numberInput.value;
fetch('http://numbersapi.com/'+number)
.then(response => response.text())
.then(data => {
if (number !='') {
fact.style.display = 'block';
factText.innerHTML = data;
}else {
fact.style.display = 'none';
}
})
.catch(err => console.log(err));
}
We defined the getFactFetch().
• First we get the value of numberInput.
• Then use fetch() and put the API url in parentheses.
• Then we check the condition if there is any number input run
fact.style.display = 'block';
factText.innerHTML = data;
• And if there is no number input this code will execute
fact.style.display = 'none';
• .catch() is used to show error if there is any.
AJAX
First change the function getFactFetch to getFActAjax
function getFactAjax(){
let number = numberInput.value;
let xhr = new XMLHttpRequest();
xhr.open('GET','http://numbersapi.com/'+number);
xhr.onload = function(){
if (this.status == 200 && number != '') {
fact.style.display = 'block';
factText.innerHTML = this.responseText;
}if(this.status == 200 && number == '') {
fact.style.display = 'none';
}
}
xhr.send();
}
If you have any doubt or you don't know the AJAX and Fetch API concept I'll suggest you to check out this video by Traversy Media
And another important point:-
This will work perfectly on your local host but if you want to it to deploy and use a browser like Chrome or FireFox then this will not work due to Mixed content
Top comments (0)