Skip to content

Commit a33939b

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1441 from Avdhesh-Varshney/guessGen
[SSoC 2.0] Guess Gender By Name Project Completed
2 parents f5f33a7 + b5b797c commit a33939b

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
@@ -982,6 +982,14 @@ const projects = [
982982
"description":"This website can find the number of leap years in between the ranges and enlist all the leap years between the range of years. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.",
983983
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Leap_Years_In_A_Range",
984984
"project-link":"Projects/Leap_Years_In_A_Range/index.html"
985+
},
986+
{
987+
"title":"Guess The Gender By Name",
988+
"tags":["HTML","CSS","JavaScript"],
989+
"img":"img/projects/Guess_The_Gender.png",
990+
"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.",
991+
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Guess%20The%20Gender%20By%20Name",
992+
"project-link":"Projects/Guess%20The%20Gender%20By%20Name/index.html"
985993
}
986994

987995
]

0 commit comments

Comments
 (0)