diff --git a/Existing_API_Collection/Genderize_API/README.md b/Existing_API_Collection/Genderize_API/README.md new file mode 100644 index 0000000..469d6e0 --- /dev/null +++ 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) \ No newline at end of file diff --git a/Existing_API_Collection/Genderize_API/female.svg b/Existing_API_Collection/Genderize_API/female.svg new file mode 100644 index 0000000..2900749 --- /dev/null +++ b/Existing_API_Collection/Genderize_API/female.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Existing_API_Collection/Genderize_API/image.png b/Existing_API_Collection/Genderize_API/image.png new file mode 100644 index 0000000..d417f17 Binary files /dev/null and b/Existing_API_Collection/Genderize_API/image.png differ diff --git a/Existing_API_Collection/Genderize_API/index.html b/Existing_API_Collection/Genderize_API/index.html new file mode 100644 index 0000000..5c476ea --- /dev/null +++ b/Existing_API_Collection/Genderize_API/index.html @@ -0,0 +1,34 @@ + + + + + Predict Gender By Name + + + + + + +
+

Predict Gender By Name

+
+ + +
+
+
+
+
+
+ + + + diff --git a/Existing_API_Collection/Genderize_API/male.svg b/Existing_API_Collection/Genderize_API/male.svg new file mode 100644 index 0000000..ad82b39 --- /dev/null +++ b/Existing_API_Collection/Genderize_API/male.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Existing_API_Collection/Genderize_API/script.js b/Existing_API_Collection/Genderize_API/script.js new file mode 100644 index 0000000..e7ae77e --- /dev/null +++ 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 = `

${data.name}

${data.gender}

Probability: ${data.probability}

`; + 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 new file mode 100644 index 0000000..222ca19 --- /dev/null +++ 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; +}