Hi everyone. Welcome to another new tutorial by Coding Artist. In this tutorial, we take a look at how to build the project ‘Predict Gender by Name’. To build this project we need HTML, CSS, and Javascript. Get ready to learn something fun and exciting today.
Video Tutorial:
For a better understanding of how we built the functionality of this project, I would advise you to watch the video below. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks, and tutorials related to HTML, CSS, and Javascript.
Project Folder Structure:
Let’s build the project folder structure before we begin writing the code. We create a project folder called ‘Predict Gender by Name’. Inside this folder, we have three files. These files are index.html, style.css, and script.js.
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Predict Gender By Name</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1 class="app-title">Predict Gender By Name</h1>
<div class="input-wrapper">
<input
type="text"
value="mitali"
id="name"
placeholder="Enter a name.."
/>
<button id="submit">Predict</button>
</div>
<div id="result">
<div id="wrapper"></div>
<div id="error"></div>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #7e5eff;
}
.container {
position: absolute;
background-color: #ffffff;
width: 90%;
max-width: 31.25em;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3em 2em;
border-radius: 0.5em;
}
.app-title {
font-weight: 400;
text-transform: uppercase;
text-align: center;
width: 80%;
position: relative;
margin: auto;
color: #020332;
letter-spacing: 0.2em;
}
.input-wrapper {
display: grid;
grid-template-columns: 9fr 3fr;
gap: 1em;
margin: 2.5em 0;
}
#name,
#submit {
font-size: 1em;
}
#name {
padding: 0.8em 0.5em;
border: 1px solid #020332;
border-radius: 0.5em;
}
#submit {
background-color: #7e5eff;
color: #ffffff;
border: none;
border-radius: 0.5em;
}
.female {
background-color: #ff5f96;
}
.male {
background-color: #5a72e9;
}
#info {
padding: 2em 1em;
text-align: center;
border-radius: 0.9em;
}
#result-name {
text-transform: capitalize;
font-weight: 500;
color: #edecec;
}
#gender-icon {
display: block;
width: 5em;
position: relative;
margin: 2em auto 1em auto;
}
#gender {
color: #ffffff;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.2em;
}
#prob {
letter-spacing: 0.2em;
font-weight: 500;
color: #edecec;
}
Javascript:
Finally, we add functionality using Javascript. Once again copy the code below and paste it into your script file.
The steps included in creating this project are:
- Variable declarations for API URL and references to HTML elements
- The user enters a name and clicks submit, the submit button makes a call to the ‘predictGender’ function.
- We first store the user’s input in a variable and append it to the URL
- Then we check if the name has length>0 and if the name has alphabet only
- If it is a valid name we use the ‘fetch’ method to make a GET request to the API
- We get the response with the JSON data in it
- Then we create a div where we display the name along with gender and the SVG icon for that specific gender.
let url = "https://api.genderize.io?name=";
let wrapper = document.getElementById("wrapper");
let predictGender = () => {
let name = document.getElementById("name").value;
let error = document.getElementById("error");
let finalURL = url + name;
console.log(name);
console.log(finalURL);
wrapper.innerHTML = "";
error.innerHTML = "";
//Check if input field is not empty and the entered name does not contain anything but alphabets.
if (name.length > 0 && /^[A-Za-z]+$/.test(name)) {
fetch(finalURL)
.then((resp) => resp.json())
.then((data) => {
console.log(data);
let div = document.createElement("div");
div.setAttribute("id", "info");
div.innerHTML = `<h2 id="result-name">${data.name}</h2><img src="" id="gender-icon"/> <h1 id="gender">${data.gender}</h1><h4 id="prob">Probability: ${data.probability}</h4>`;
wrapper.append(div);
if (data.gender == "female") {
div.classList.add("female");
document
.getElementById("gender-icon")
.setAttribute("src", "female.svg");
} else {
div.classList.add("male");
document
.getElementById("gender-icon")
.setAttribute("src", "male.svg");
}
});
document.getElementById("name").value = "";
} else {
error.innerHTML = "Enter a valid name with no spaces";
}
};
document.getElementById("submit").addEventListener("click", predictGender);
window.addEventListener("load", predictGender);
Go ahead and customize the project the way you like. If you have any queries, suggestions, or feedback comment below. Download the source code by clicking the ‘Download Code’ button below.
