Skip to content

Commit 789678b

Browse files
Avdhesh-VarshneyAvdhesh-Varshney
committed
Guess Gender By Name 😎
1 parent 22e531e commit 789678b

9 files changed

Lines changed: 277 additions & 0 deletions

File tree

‎Projects/Guess The Gender By Name/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# **GUESS THE GENDER BY THE NAME**
2+
---
3+
4+
5+
## **Description 📃**
6+
- This project made by using HTML, CSS and JS
7+
- This project a api url to fetch the probability of that person is male or female
8+
- After converting that probability into percentage, data is shown to the user
9+
- Attractive and smooth user interface with fast functioning will provide a best user experience
10+
11+
<br>
12+
13+
14+
## **Tech Stack 🎮**
15+
- HTML
16+
- CSS
17+
- JS
18+
19+
<br>
20+
21+
22+
## **Screenshot 📸**
23+
24+
![Guess The Gender](https://github.com/TusharKesarwani/Front-End-Projects/assets/114330097/b8d63573-af00-4924-aa8c-c1dae99fc726)
25+
26+
<br>
27+
28+
29+
## **Author**
30+
31+
[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
32+
33+

‎Projects/Guess The Gender By Name/female.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/Guess The Gender By Name/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
8+
<!-- Logo of the website -->
9+
<link rel="shortcut icon" href="./logo.svg" type="image/x-icon">
10+
11+
<!-- Title of the website -->
12+
<title>Guess The Gender By Name</title>
13+
14+
<!-- Google Fonts -->
15+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet" />
16+
17+
<!-- Stylesheet -->
18+
<link rel="stylesheet" href="./style.css" />
19+
</head>
20+
21+
<body>
22+
<!-- Main container of the project -->
23+
<div class="container">
24+
<h1 class="app-title">
25+
<img src="./logo.svg" alt="Logo" class="app-logo">
26+
Guess The Gender By Name
27+
</h1>
28+
29+
<!-- Details of the app creator -->
30+
<h4 class="app-creator">
31+
Created by <a href="https://github.com/Avdhesh-Varshney">Avdhesh Varshney</a>
32+
</h4>
33+
34+
<!-- Taking text from the user -->
35+
<div class="input-wrapper">
36+
<input type="text" id="name" placeholder="Enter a name..." />
37+
<button id="submit">Guess</button>
38+
</div>
39+
40+
<!-- Showing the result after checking the name -->
41+
<div id="result">
42+
<div id="wrapper"></div>
43+
<div id="error"></div>
44+
</div>
45+
</div>
46+
47+
<!-- JavaScript -->
48+
<script src="./script.js"></script>
49+
</body>
50+
51+
</html>

‎Projects/Guess The Gender By Name/logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/Guess The Gender By Name/male.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/Guess The Gender By Name/script.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// Declaring the global variables
2+
let url = "https://api.genderize.io?name="; // Api used to guess the gender by name
3+
let wrapper = document.getElementById("wrapper");
4+
5+
// Arrow function to guess the gender by the name
6+
let guessGender = () => {
7+
let name = document.getElementById("name").value;
8+
let error = document.getElementById("error");
9+
let finalURL = url + name;
10+
11+
// After taking the name or function is triggered then input box and error pop-up will be empty
12+
wrapper.innerHTML = "";
13+
error.innerHTML = "";
14+
15+
//Check if input field is not empty and the entered name does not contain anything but alphabets.
16+
if (name.length > 0 && /^[A-Za-z]+$/.test(name)) {
17+
fetch(finalURL)
18+
.then((resp) => resp.json())
19+
.then((data) => {
20+
// After fetching the data from the json file, send this information to the user
21+
let div = document.createElement("div");
22+
div.setAttribute("id", "info");
23+
24+
// Calculating the probability in percentage
25+
let prob = Math.floor(data.probability * 100);
26+
div.innerHTML = `<h2 id="result-name">${data.name}</h2><img src="" id="gender-icon"/> <h1 id="gender">${data.gender}</h1><h4 id="prob">Probability: ${prob}%</h4>`;
27+
28+
wrapper.append(div);
29+
30+
// Showing the image according to the gender
31+
if (data.gender == "female") {
32+
div.classList.add("female");
33+
document
34+
.getElementById("gender-icon")
35+
.setAttribute("src", "female.svg");
36+
} else {
37+
div.classList.add("male");
38+
document
39+
.getElementById("gender-icon")
40+
.setAttribute("src", "male.svg");
41+
}
42+
});
43+
document
44+
.getElementById("name").value = "";
45+
} else {
46+
error.innerHTML = "Enter a valid name with no spaces";
47+
}
48+
};
49+
50+
// Functioning on click the submit button
51+
document.getElementById("submit").addEventListener("click", guessGender);
52+
53+
// Functioning of the pressing of the enter button
54+
document.addEventListener("keyup", (event) => {
55+
if (event.key === 'Enter') guessGender();
56+
});

‎Projects/Guess The Gender By Name/style.css‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/* Default settings */
2+
* {
3+
padding: 0;
4+
margin: 0;
5+
box-sizing: border-box;
6+
font-family: "Poppins", sans-serif;
7+
text-decoration: none;
8+
}
9+
10+
body {
11+
background-color: #7e5eff;
12+
}
13+
14+
/* Syling of the main box */
15+
.container {
16+
position: absolute;
17+
background-color: #ffffff;
18+
width: 90%;
19+
max-width: 31.25em;
20+
transform: translate(-50%, -50%);
21+
top: 50%;
22+
left: 50%;
23+
padding: 3em 2em;
24+
border-radius: 0.5em;
25+
}
26+
27+
/* Logo of the website */
28+
.app-logo {
29+
width: 10%;
30+
height: 10%;
31+
position: inherit;
32+
}
33+
34+
/* Title of the website */
35+
.app-title {
36+
font-weight: 400;
37+
text-transform: uppercase;
38+
text-align: center;
39+
width: 80%;
40+
position: relative;
41+
margin: auto;
42+
color: #020332;
43+
letter-spacing: 0.2em;
44+
}
45+
46+
/* Styling of the creator heading of the website */
47+
.app-creator {
48+
font-weight: 300;
49+
margin-top: 10px;
50+
text-align: center;
51+
color: #7e5eff;
52+
}
53+
54+
/* Styling the input box */
55+
.input-wrapper {
56+
display: grid;
57+
grid-template-columns: 9fr 3fr;
58+
gap: 1em;
59+
margin: 2.5em 0;
60+
}
61+
62+
#name,
63+
#submit {
64+
font-size: 1em;
65+
}
66+
67+
#name {
68+
padding: 0.8em 0.5em;
69+
border: 1px solid #020332;
70+
border-radius: 0.5em;
71+
}
72+
73+
/* Submit button styling */
74+
#submit {
75+
background-color: #7e5eff;
76+
color: #ffffff;
77+
border: none;
78+
border-radius: 0.5em;
79+
}
80+
81+
.female {
82+
background-color: #ff5f96;
83+
}
84+
85+
.male {
86+
background-color: #5a72e9;
87+
}
88+
89+
/* Styling of the showing information */
90+
#info {
91+
padding: 2em 1em;
92+
text-align: center;
93+
border-radius: 0.9em;
94+
}
95+
96+
#result-name {
97+
text-transform: capitalize;
98+
font-weight: 500;
99+
color: #edecec;
100+
}
101+
102+
#gender-icon {
103+
display: block;
104+
width: 5em;
105+
position: relative;
106+
margin: 2em auto 1em auto;
107+
}
108+
109+
#gender {
110+
color: #ffffff;
111+
font-weight: 400;
112+
text-transform: uppercase;
113+
letter-spacing: 0.2em;
114+
}
115+
116+
#prob {
117+
letter-spacing: 0.2em;
118+
font-weight: 500;
119+
color: #edecec;
120+
}
121+
122+
/* Styling of the error pop-up */
123+
#error {
124+
color: salmon;
125+
text-align: center;
126+
}

‎img/projects/Guess_The_Gender.png‎

46.5 KB
Loading

‎projects.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -974,6 +974,14 @@ const projects = [
974974
"description":"This website can convert the morse code into the text and text into the morse code. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.",
975975
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Morse%20Code%20Convertor",
976976
"project-link":"Projects/Morse%20Code%20Convertor/index.html"
977+
},
978+
{
979+
"title":"Guess The Gender By Name",
980+
"tags":["HTML","CSS","JavaScript"],
981+
"img":"img/projects/Guess_The_Gender.png",
982+
"description":"This website can guess the gender just by entering the name of the person. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed even on any device.",
983+
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Guess%20The%20Gender%20By%20Name",
984+
"project-link":"Projects/Guess%20The%20Gender%20By%20Name/index.html"
977985
}
978986

979987
]

0 commit comments

Comments
 (0)