Merge pull request #335 from aditya-bhaumik/genderize

[Existing api] : added genderize api
dishamodi0910 · Aug 5, 2024 · 2af4e41 · 2af4e41
2 parents d9a8476 + ef4e579
commit 2af4e41
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 0 deletions.
diff --git a/Existing_API_Collection/Genderize_API/README.md b/Existing_API_Collection/Genderize_API/README.md
@@ -0,0 +1,39 @@
+# Predict Gender By Name (Genderize API)
+
+A simple web application that predicts the gender of a person based on their name using the Genderize API.
+
+## Tech Stack
+
+- HTML
+
+- CSS
+
+- JS
+
+## API used
+
+[Genderize Api](https://genderize.io/)
+
+## Usage
+
+1. Clone the repository:
+
+2. Open the `index.html` file in your web browser.
+
+3. Enter a name in the input field and click on the predict button
+
+4. The application sends a request to the Genderize API.
+
+5. The predicted gender and probability are displayed on the web page.
+
+
+
+## Use case
+
+- User Demographics Analysis: Segment email subscribers by gender for targeted marketing campaigns.
+- Content Personalization: Recommend relevant content based on predicted gender.
+- Customer Service Enhancement: Tailor chatbot responses to provide a personalized user experience.
+
+## Screenshot
+
+![alt text](image.png)
diff --git a/Existing_API_Collection/Genderize_API/female.svg b/Existing_API_Collection/Genderize_API/female.svg
diff --git a/Existing_API_Collection/Genderize_API/image.png b/Existing_API_Collection/Genderize_API/image.png
diff --git a/Existing_API_Collection/Genderize_API/index.html b/Existing_API_Collection/Genderize_API/index.html
@@ -0,0 +1,34 @@
+<!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>
diff --git a/Existing_API_Collection/Genderize_API/male.svg b/Existing_API_Collection/Genderize_API/male.svg
diff --git a/Existing_API_Collection/Genderize_API/script.js b/Existing_API_Collection/Genderize_API/script.js
@@ -0,0 +1,40 @@
+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);
diff --git a/Existing_API_Collection/Genderize_API/style.css b/Existing_API_Collection/Genderize_API/style.css
@@ -0,0 +1,84 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+body {
+  background-color: #041e70;
+}
+.container {
+  position: absolute;
+  background-color: #8de19b;
+  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;
+}