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>
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;
}
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 🤔 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.
Top comments (0)