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.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more