Create a number facts app using JavaScript

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