Create 'What's your Age' with Agify API
Tags: webdev, javascript, beginners, tutorial
Published: 2021-12-07 15:28:39

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](https://agify.io) for this project.

Take a look at our project
{% youtube m4cNzrB_RKQ %}

##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 

```html

<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>
```

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

```css
*{
    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;
}
```

##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()`

```javascript
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'; 
     }
}
```
If you like the post then show some love to it.