done lab 4

ayeeeruben · ayeeeruben · commit 953bf3ca2df1 · 2025-09-25T17:34:40.000-07:00
diff --git a/.DS_Store b/.DS_Store
diff --git a/lab4/index.html b/lab4/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1> Sign Up Form </h1>
+
+    <fieldset>
+    <legend>Sign Up</legend>
+    First Name: <input type="text"><br> 
+    Last Name: <input type="text"><br> 
+    Email: <input type="text"><br> 
+    Phone Number:<input type="text"><br><br>
+    Zip Code: <input type="text" id="zipcodesInput"><br>
+    City: <p id="city"></p>
+    <br>
+    Latitude: <p id="latitude"></p>
+    <br>
+    Longitude: <p id="longitude"></p>
+    <br><br>
+    State:  <select id="statesSelect"></select><br>
+    Select a County: <select></select><br>
+
+    Desired Username: <input type="text" id="usernameInput">
+    <p id="userText"></p>
+    <br>
+    Password: <input type="password" id="passInput">
+    <p id="suggestPassword"></p>
+    <br>
+    Type Password Again: <input type="password"><br>
+    <input type="submit" value="Sign up!">
+    </fieldset>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/lab4/script.js b/lab4/script.js
@@ -0,0 +1,91 @@
+
+async function setUpForm(){
+    try{
+        let statesResponse = await fetch("https://csumb.space/api/allStatesAPI.php");
+        
+        if(!statesResponse.ok){
+            throw new Error("Response failed");
+        }
+        let statesData = await statesResponse.json();
+        console.log(statesData);
+
+        let statesSelect = document.querySelector("#statesSelect");
+
+        for(let stateData of statesData){
+            let stateOption = document.createElement("option");
+            stateOption.id = stateData.usps;
+            stateOption.value = stateData.usps;
+            stateOption.textContent = stateData.state;
+
+            statesSelect.appendChild(stateOption);
+        }
+
+    } catch(apiError){
+        console.error(apiError);
+    }
+
+}
+
+setUpForm();
+
+document.querySelector("#zipcodesInput").addEventListener("change", zipCode);
+
+async function zipCode(){
+    let userZip = document.querySelector("#zipcodesInput").value;
+    console.log(userZip);
+    try{
+        let zipcodeResponse = await fetch("https://csumb.space/api/cityInfoAPI.php?zip="+userZip);
+        let zipcodeData = await zipcodeResponse.json();
+        let cityText = document.querySelector("#city");
+        let latitudeText = document.querySelector("#latitude");
+        let longitudeText = document.querySelector("#longitude");
+
+        cityText.textContent = zipcodeData.city;
+        latitudeText.textContent = zipcodeData.latitude;
+        longitudeText.textContent = zipcodeData.longitude;
+
+    }catch(zipError){
+        console.error(zipError);
+    }
+
+
+}
+
+document.querySelector("#passInput").addEventListener("focus", passwordSuggestion);
+
+async function passwordSuggestion(){
+    try{
+        let passSugResponse = await fetch("https://csumb.space/api/suggestedPassword.php?length=8");
+        let  passSugData = await passSugResponse.json();
+
+        let sugPass = document.querySelector("#suggestPassword");
+
+        sugPass.textContent = passSugData.password;
+
+    }catch(error){
+        console.error(error);
+    }
+}
+
+document.querySelector("#usernameInput").addEventListener("change",usernameChecker);
+
+async function usernameChecker(){
+    try{
+        let userCheck = document.querySelector("#usernameInput").value;
+        console.log(userCheck)
+        let userResponse = await fetch("https://csumb.space/api/usernamesAPI.php?username="+ userCheck);
+        let userData = await userResponse.json();
+        console.log(userData)
+
+        if(userData.available){
+            document.querySelector("#userText").textContent = "available";
+        }
+        else{
+            document.querySelector("#userText").textContent = "not available";
+        }
+
+
+    }catch(error){
+        console.error(error);
+    }
+}
