DEV Community

Cover image for Create a number facts app using JavaScript
Rohit Sharma
Rohit Sharma

Posted on

1 1

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

Simple Interface

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>
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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));
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

• And if there is no number input this code will execute

            fact.style.display = 'none';
Enter fullscreen mode Exit fullscreen mode

.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();
}
Enter fullscreen mode Exit fullscreen mode

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay