DEV Community

Rohit Sharma
Rohit Sharma

Posted on

4 1

Create 'What's your Age' with Agify API

Hello Everyone , Today I'm sharing how I created a fun API project that predicts your Age by your name (not exact). I used Agify API for this project.

Take a look at our project

HTML

We need a input:text to get input from user and a button so we can run function on click. So, here is the html part


<body>
    <div class="container">
        <div class="row">
            <div id="header">
                <h1>What's Your Age</h1>
            </div>
            <div id="instruction">
                <p> Enter Your Name to Predict Your Age</p>
            </div>
            <div id="box">
                <input type="text"  id="nameInput"><br><br>
                <button id="btn"> <p>Let'me Predict Your Age</p> </button>
            </div><br>
            <div id="output">

            </div>
            <br><br>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS

You can style as you wish. This is how styled the web page (I know it's not looking that much pretty).

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 62.5%;

}
body{
    background: #eaf655;
}
.row{
    height: max-content;
}
.container{
    display: grid;
    place-items: center;
}
#header{
    margin-top: 20%;
    font-size: 7rem;
    color: #023e8a;
    z-index: 1;
}
#instruction{
    margin-top: 20%;
    font-size: 3rem;
    font-weight: bold;
}
#box{
    display: grid;
}
input[type=text]{
    height: 2.8rem;
    margin-top: 4%;
    font-size: 2rem;
}
button{
    height: 2.8rem;
    border-radius: 2rem;
    background: rgb(242,79,241);
    background: linear-gradient(342deg, rgba(242,79,241,1) 0%, rgba(0,237,255,1) 70%);

}
button:hover{
    transform: scale(1.1);
    transition-duration: 0.5s;
    transition-timing-function: linear;
}
button p{
    font-size: 2rem;
}
#output{
    display: none;
    font-size: 2rem;
    z-index: 1;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript

IMPORTANT POINTS TO REMEMBER:-

So, first of all we must know the how API url looks like. For this project the demo url is https://api.agify.io?name=michael.

Okay, Now if we change name=michael to any other name let say my name (Rohit) . So, the API call url is https://api.agify.io?name=Rohit i.e. each time we have to change this value and run the function to get the Age of user.

When we use fetch() it always return a string. So, we have to convert that string into array. For that we use JSON.parse()

var output = document.getElementById('output')
document.getElementById('btn').addEventListener('click',predictName);
let name = document.getElementById('nameInput');
document.getElementById('nameInput').addEventListener('change',checkName)
function predictName(){
         let name = nameInput.value;

         fetch('https://api.agify.io?name='+name,{ method:'GET'})
         .then(function(response){return response.json();})
         .then(data => {
             if (name != '') {
                output.innerHTML = "I guess &#129300 your age is " + data.age;
                output.style.display = 'block';
                 console.log(data.age);
             }else{
                output.style.display = 'none'; 
             }


         })
         .catch(err => console.log(err));
     }

 function checkName(){
     let name = nameInput.value;
     if (name == '') {
        output.style.display = 'none'; 
     }
}
Enter fullscreen mode Exit fullscreen mode

If you like the post then show some love to it.

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video