Skip to content

Commit

Permalink
comments added
Browse files Browse the repository at this point in the history
  • Loading branch information
@MM-Nazari
MM-Nazari authored Jan 6, 2024
1 parent d00d19f commit 5cc436c
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 110 deletions.
75 changes: 38 additions & 37 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,65 @@
body {
background-image: url('../image/gender.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: url('../image/gender.jpg'); /* sets the background image for the entire body */
background-repeat: no-repeat; /* prevents the background image from repeating */
background-size: cover; /* ensures that the background image covers the entire background */
background-position: center; /* positions the background image at the center */
}

.box{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
.box {
display: flex; /* sets the box to use the flexbox layout */
justify-content: center; /* aligns the content of the box horizontally to the center */
align-items: center; /* aligns the content of the box vertically to the center */
height: 100vh; /* sets the height of the box to be 100% of the viewport height */
}

.container {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
border: 2px solid black;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.85);
display: flex; /* sets the container to use the flexbox layout */
justify-content: center; /* aligns the content of the container horizontally to the center */
align-items: center; /* aligns the content of the container vertically to the center */
height: 50vh; /* sets the height of the container to be 50% of the viewport height */
border: 2px solid black; /* adds a 2px solid black border around the container */
box-sizing: border-box; /* includes the border and padding in the container's total width and height */
background-color: rgba(255, 255, 255, 0.85); /* sets the background color of the container with 85% opacity */
}

.left-column {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 20px;
display: flex; /* Specifies the element as a flex container */
flex-direction: column; /* Sets the direction of the flex container's main axis to be vertical */
justify-content: center; /* Aligns the flex items along the vertical axis at the center */
align-items: flex-start; /* Aligns the flex items along the horizontal axis at the start */
padding: 20px; /* Adds 20 pixels of padding to all sides of the element */
}

.right-column {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 20px;
/*width:200px;*/
display: flex; /* Specifies the element as a flex container */
flex-direction: column; /* Sets the direction of the flex container's main axis to be vertical */
justify-content: center; /* Aligns the flex items along the vertical axis at the center */
align-items: flex-start; /* Aligns the flex items along the horizontal axis at the start */
padding: 20px; /* Adds 20 pixels of padding to all sides of the element */
/*width:200px;*/ /* Optionally sets the width of the element to 200 pixels */
}

.radio-group {
display: flex;
align-items: center;
display: flex; /* Specifies the element as a flex container */
align-items: center; /* Aligns the flex items along the horizontal axis at the center */
}

.radio-group label {
margin-right: 10px;
margin-right: 10px; /* Adds 10 pixels of margin to the right side of the label elements within the radio-group */
}

input {
margin: 10px;
margin: 10px; /* Adds 10 pixels of margin to all sides of the input elements */
}

button{
margin: 10px;
button {
margin: 10px; /* Adds 10 pixels of margin to all sides of the button elements */
}

h2 {
margin: 10px;
margin: 10px; /* Adds 10 pixels of margin to all sides of the h2 elements */
}

label{
margin: 10px;
}
label {
margin: 10px; /* Adds 10 pixels of margin to all sides of the label elements */
}
113 changes: 79 additions & 34 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gender Prediction WebPage</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">

<!DOCTYPE html> <!-- This line declares the document type and version of HTML -->

<html lang="en"> <!-- This tag defines the beginning of the HTML document and sets the language to English -->

<head> <!-- This tag contains meta-information about the HTML document and links to external resources -->

<meta charset="UTF-8"> <!-- This meta tag specifies the character encoding for the document -->

<title>Gender Prediction WebPage</title> <!-- This tag sets the title of the HTML document -->

<link rel="stylesheet" type="text/css" href="css/styles.css"> <!-- This tag links the HTML document to an external stylesheet -->

</head>
<body>
<div class="box">
<div class="container">
<div class="left-column">
<h2>Mr. or Ms. ?</h2>
<form id="myForm" onsubmit="handleSubmit(event)">
<label for="name">Name:</label>
<input type="text" onchange="savedStorage(event)" id="textInput" name="textInput" maxlength = "255" pattern="[A-Za-z\s]*" required>
<div class="radio-group">
<label>
<input type="radio" value="male" id="male radio" name="apiOption" >
Male

<body> <!-- This tag contains the content of the HTML document -->

<div class="box"> <!-- This tag creates a container with the class "box" -->

<div class="container"> <!-- This tag creates a container with the class "container" -->

<div class="left-column"> <!-- This tag creates a container with the class "left-column" -->

<h2>Mr. or Ms. ?</h2> <!-- This tag creates a heading with the text "Mr. or Ms. ?" -->

<form id="myForm" onsubmit="handleSubmit(event)"> <!-- This tag creates a form with the id "myForm" and specifies the submission event handler -->

<label for="name">Name:</label> <!-- This tag creates a label for an input field with the id "name" -->

<input type="text" onchange="savedStorage(event)" id="textInput" name="textInput" maxlength = "255" pattern="[A-Za-z\s]*" required> <!-- This tag creates a text input field with the id "textInput" and specifies event handlers, attributes, and restrictions -->

<div class="radio-group"> <!-- This tag creates a container with the class "radio-group" for radio buttons -->

<label> <!-- This tag creates a label for a radio button -->

<input type="radio" value="male" id="male radio" name="apiOption" > <!-- This tag creates a radio button with the value "male" and the id "male radio" within the group "apiOption" -->

Male <!-- This text is displayed as the label for the radio button -->

</label>

</div>

<div class="radio-group">
<label>
<input type="radio" value="female" id="female radio" name="apiOption" >
Female
<div class="radio-group"> <!-- This tag creates another container with the class "radio-group" for radio buttons -->

<label> <!-- This tag creates a label for a radio button -->

<input type="radio" value="female" id="female radio" name="apiOption" > <!-- This tag creates a radio button with the value "female" and the id "female radio" within the group "apiOption" -->

Female <!-- This text is displayed as the label for the radio button -->

</label>

</div>
<button type="submit" id="prediction">Submit</button>


<button type="submit" id="prediction">Submit</button> <!-- This tag creates a submit button with the id "prediction" -->

</form>
<button onclick="handleSave(event)" id="save">Save</button>

<button onclick="handleSave(event)" id="save">Save</button> <!-- This tag creates a button with an onclick event handler and the id "save" -->

</div>

<div class="right-column" >
<h2>Prediction</h2>
<p id="response gender"></p>
<p id="response probability"></p>
<h2>Saved Answer</h2>
<p id="saved"></p>
<button id="clear" onclick="handleClear(event)">Clear</button>
<div class="right-column" > <!-- This tag creates a container with the class "right-column" -->

<h2>Prediction</h2> <!-- This tag creates a heading with the text "Prediction" -->

<p id="response gender"></p> <!-- This tag creates an empty paragraph element with the id "response gender" -->

<p id="response probability"></p> <!-- This tag creates an empty paragraph element with the id "response probability" -->

<h2>Saved Answer</h2> <!-- This tag creates a heading with the text "Saved Answer" -->

<p id="saved"></p> <!-- This tag creates an empty paragraph element with the id "saved" -->

<button id="clear" onclick="handleClear(event)">Clear</button> <!-- This tag creates a button with the id "clear" and an onclick event handler -->

</div>
<script type="text/javascript" src="js/script.js"></script>

<script type="text/javascript" src="js/script.js"></script> <!-- This tag links the HTML document to an external JavaScript file -->

</div>

</div>

</body>
</html>

</html>




109 changes: 70 additions & 39 deletions js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,92 +1,123 @@

function handleSave(){

// Getting the value of the text input field
let textInput = document.getElementById('textInput').value;
// Getting the paragraph element for response gender
let paragraphInput = document.getElementById('response gender');
// Checking if the male radio button is checked
let radioMale = document.getElementById('male radio').checked;
// Checking if the female radio button is checked
let radioFemale = document.getElementById('female radio').checked;

// If male radio button is checked, store the text input with value "male" in the local storage
if (radioMale == true){
localStorage.setItem(textInput.value, "male");
}
// If female radio button is checked, store the text input with value "female" in the local storage
else if (radioFemale == true){
localStorage.setItem(textInput.value, "female");
}
// If neither male nor female radio is checked
else{
// Check if the paragraph input contains specific error message
if (paragraphInput.textContent == "The name provided doesn't exist in API database.") {
// Set the response gender paragraph to an error message
document.getElementById('response gender').innerHTML = "The name provided doesn't exist in API database.";
// Clear the response probability paragraph
document.getElementById('response probability').innerHTML = "";
}
// If the paragraph input is empty
else if (paragraphInput.textContent == ""){
// Set the response gender paragraph to a different error message
document.getElementById('response gender').innerHTML = "There is no name provided by API to store.";
// Clear the response probability paragraph
document.getElementById('response probability').innerHTML = "";
}
// If none of the above conditions are met
else {
// Store the text input value with the content of the response gender paragraph in the local storage
localStorage.setItem(textInput.value, paragraphInput.textContent);
}
}

// Call a function to handle the saved storage
savedStorage();
}

function handleClear(){
// Clear all items from local storage
localStorage.clear();
// Update the text content of an element with the id "saved" to notify the user that local storage has been cleared
document.getElementById("saved").innerText = "Local storage has been cleared";
}

function handleSubmit(event) {
// Prevent the default form submission behavior
event.preventDefault();
// Get the value of the text input with the id "textInput"
let textInput = document.getElementById('textInput').value;
// Check whether the "male" radio button is checked
let radioMale = document.getElementById('male radio').checked;
// Check whether the "female" radio button is checked
let radioFemale = document.getElementById('female radio').checked;


fetch('https://api.genderize.io/?name=' + textInput, {
method: "GET"
// Make a GET request to the genderize API with the provided text input
fetch('https://api.genderize.io/?name=' + textInput, {
method: "GET"
})
// Handle the response from the API
.then(response => {
// Check if the response is not OK, throw an error
if (!response.ok) {
throw new Error('Network response was not ok');
}
// Parse the response as JSON
return response.json();
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
if (JSON.stringify(data.gender) == "null"){
document.getElementById('response gender').innerHTML = "The name provided doesn't exist in API database.";
document.getElementById('response probability').innerHTML = "";
}
else{
const responseElementGender = document.getElementById('response gender');
responseElementGender.innerHTML = JSON.stringify(data.gender);

const responseElementProbability = document.getElementById('response probability');
responseElementProbability.innerHTML = JSON.stringify(data.probability);
}
})
.catch(error => console.error('Error:', error));

}


// Handle the data received from the API
.then(data => {
// Check if the gender value in the response data is null
if (JSON.stringify(data.gender) == "null"){
// Update the HTML content of an element with the id "response gender" to show that the name doesn't exist in the API database
document.getElementById('response gender').innerHTML = "The name provided doesn't exist in the API database.";
// Clear the HTML content of an element with the id "response probability"
document.getElementById('response probability').innerHTML = "";
}
else{
// Update the HTML content of an element with the id "response gender" to show the gender from the API response
const responseElementGender = document.getElementById('response gender');
responseElementGender.innerHTML = JSON.stringify(data.gender);

// Update the HTML content of an element with the id "response probability" to show the probability from the API response
const responseElementProbability = document.getElementById('response probability');
responseElementProbability.innerHTML = JSON.stringify(data.probability);
}
})
// Handle any errors that occurred during the fetch or data processing
.catch(error => console.error('Error:', error));
}

// Add an event listener to the form with the id "myForm" to handle the form submission
document.getElementById('myForm').addEventListener('submit', handleSubmit);

function savedStorage(){
function savedStorage() {
let textInput = document.getElementById('textInput').value;
// Check if local storage is supported
// Retrieves the value entered in the input field with the id 'textInput'

if (typeof(Storage) !== "undefined") {
// Retrieve the item from local storage
var savedItem = localStorage.getItem(textInput.value);
// Checks if local storage is supported by the current browser
var savedItem = localStorage.getItem(textInput.value);
// Retrieves the item with key as the value of the text input from local storage

// Display the item
if (savedItem) {
document.getElementById("saved").innerText = savedItem;
} else {
document.getElementById("saved").innerText = "No item found in local storage.";
}
if (savedItem) {
document.getElementById("saved").innerText = savedItem;
// Displays the retrieved item in an element with id 'saved' if it exists in local storage
} else {
document.getElementById("saved").innerText = "No item found in local storage.";
// Displays a message indicating no item was found in local storage
}
} else {
document.getElementById("saved").innerText = "Local storage is not supported.";
// Displays a message indicating that local storage is not supported in the current browser
}

}
Expand Down

0 comments on commit 5cc436c

Please sign in to comment.