Skip to content

Commit f9f4009

Browse files
ayeeerubenayeeeruben
committed
finished lab4
1 parent 9b63d05 commit f9f4009

10 files changed

Lines changed: 259 additions & 30 deletions

File tree

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎lab4/index.html‎

Lines changed: 34 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,45 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Document</title>
8+
<link href="style.css" rel="stylesheet">
89
</head>
910
<body>
1011
<h1> Sign Up Form </h1>
12+
<div class="box">
13+
<fieldset>
14+
<legend>Sign Up</legend>
15+
First Name: <input type="text"><br>
16+
Last Name: <input type="text"><br>
17+
Email: <input type="text"><br>
18+
Phone Number:<input type="text"><br><br>
19+
Zip Code: <input type="text" id="zipcodesInput"><br>
20+
<p id="zipError"></p>
21+
<br>
22+
City: <span id="city"></span>
23+
<br>
24+
<br>
25+
Latitude: <span id="latitude"></span>
26+
<br>
27+
<br>
28+
Longitude: <span id="longitude"></span>
29+
<br>
30+
<br>
31+
State: <select id="statesSelect"> <option>Select One</option></select><br>
32+
Select a County: <select id="countySelect"></select><br>
1133

12-
<fieldset>
13-
<legend>Sign Up</legend>
14-
First Name: <input type="text"><br>
15-
Last Name: <input type="text"><br>
16-
Email: <input type="text"><br>
17-
Phone Number:<input type="text"><br><br>
18-
Zip Code: <input type="text" id="zipcodesInput"><br>
19-
City: <p id="city"></p>
20-
<br>
21-
Latitude: <p id="latitude"></p>
22-
<br>
23-
Longitude: <p id="longitude"></p>
24-
<br><br>
25-
State: <select id="statesSelect"></select><br>
26-
Select a County: <select></select><br>
27-
28-
Desired Username: <input type="text" id="usernameInput">
29-
<p id="userText"></p>
30-
<br>
31-
Password: <input type="password" id="passInput">
32-
<p id="suggestPassword"></p>
33-
<br>
34-
Type Password Again: <input type="password"><br>
35-
<input type="submit" value="Sign up!">
36-
</fieldset>
34+
Desired Username: <input type="text" id="usernameInput">
35+
<p id="userText"></p>
36+
<br>
37+
Password: <input type="password" id="passInput" title="Suggested password: myP@ssw0rd">
38+
<p id="suggestPassword"></p>
39+
<br>
40+
Retype Password: <input type="password" id="rePassInput">
41+
<p id="noMatch"></p>
42+
<br>
43+
<input type="submit" value="Sign up!" id="submit">
44+
</fieldset>
3745

46+
</div>
3847
<script src="script.js"></script>
3948
</body>
4049
</html>

‎lab4/script.js‎

Lines changed: 68 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
1+
let usps;
2+
let statesSelect = document.querySelector("#statesSelect");
23
async function setUpForm(){
34
try{
45
let statesResponse = await fetch("https://csumb.space/api/allStatesAPI.php");
@@ -9,7 +10,7 @@ async function setUpForm(){
910
let statesData = await statesResponse.json();
1011
console.log(statesData);
1112

12-
let statesSelect = document.querySelector("#statesSelect");
13+
1314

1415
for(let stateData of statesData){
1516
let stateOption = document.createElement("option");
@@ -19,6 +20,7 @@ async function setUpForm(){
1920

2021
statesSelect.appendChild(stateOption);
2122
}
23+
console.log(usps);
2224

2325
} catch(apiError){
2426
console.error(apiError);
@@ -39,7 +41,17 @@ async function zipCode(){
3941
let cityText = document.querySelector("#city");
4042
let latitudeText = document.querySelector("#latitude");
4143
let longitudeText = document.querySelector("#longitude");
42-
44+
let zipNotFound = document.querySelector("#zipError");
45+
if(!zipcodeData || !zipcodeData.city){
46+
console.log("ZIP not found");
47+
zipNotFound.textContent = "Zip Code Not Found";
48+
zipNotFound.style.color = "red";
49+
cityText.textContent = "";
50+
latitudeText.textContent = "";
51+
longitudeText.textContent = "";
52+
return;
53+
}
54+
zipNotFound.textContent = "";
4355
cityText.textContent = zipcodeData.city;
4456
latitudeText.textContent = zipcodeData.latitude;
4557
longitudeText.textContent = zipcodeData.longitude;
@@ -56,7 +68,7 @@ document.querySelector("#passInput").addEventListener("focus", passwordSuggestio
5668
async function passwordSuggestion(){
5769
try{
5870
let passSugResponse = await fetch("https://csumb.space/api/suggestedPassword.php?length=8");
59-
let passSugData = await passSugResponse.json();
71+
let passSugData = await passSugResponse.json();
6072

6173
let sugPass = document.querySelector("#suggestPassword");
6274

@@ -68,24 +80,75 @@ async function passwordSuggestion(){
6880
}
6981

7082
document.querySelector("#usernameInput").addEventListener("change",usernameChecker);
83+
let userCheck;
7184

7285
async function usernameChecker(){
7386
try{
74-
let userCheck = document.querySelector("#usernameInput").value;
87+
userCheck = document.querySelector("#usernameInput").value;
7588
console.log(userCheck)
7689
let userResponse = await fetch("https://csumb.space/api/usernamesAPI.php?username="+ userCheck);
7790
let userData = await userResponse.json();
7891
console.log(userData)
7992

8093
if(userData.available){
8194
document.querySelector("#userText").textContent = "available";
95+
document.querySelector("#userText").style.color = "green";
8296
}
8397
else{
8498
document.querySelector("#userText").textContent = "not available";
99+
document.querySelector("#userText").style.color = "red";
100+
85101
}
86102

87103

88104
}catch(error){
89105
console.error(error);
90106
}
107+
}
108+
statesSelect.addEventListener("change", counties);
109+
110+
async function counties(){
111+
try{
112+
let countySelect = document.querySelector("#countySelect");
113+
countySelect.innerHTML = "";
114+
let response = await fetch("https://csumb.space/api/countyListAPI.php?state=" + statesSelect.value);
115+
let data = await response.json();
116+
console.log(data);
117+
for(let countyData of data){
118+
let countyOption = document.createElement("option");
119+
countyOption.value = countyData.county;
120+
countyOption.textContent = countyData.county;
121+
countySelect.appendChild(countyOption);
122+
}
123+
}
124+
catch(error){
125+
console.log(error);
126+
}
127+
}
128+
129+
let submit = document.querySelector("#submit");
130+
131+
submit.addEventListener("click", onSubmit);
132+
133+
function onSubmit(){
134+
if(userCheck.length < 3){
135+
document.querySelector("#userText").textContent = "Must be Over 3 Characters!";
136+
document.querySelector("#userText").style.color = "red";
137+
}
138+
139+
let passInput = document.querySelector("#passInput").value;
140+
let rePassInput = document.querySelector("#rePassInput").value;
141+
142+
if(passInput.length < 6){
143+
document.querySelector("#noMatch").textContent = "Must be at Least 6 Characters!";
144+
document.querySelector("#noMatch").style.color = "red";
145+
}
146+
else if(passInput!== rePassInput){
147+
document.querySelector("#noMatch").textContent = "Passwords Do Not Match!";
148+
document.querySelector("#noMatch").style.color = "red";
149+
150+
}
151+
else{
152+
document.querySelector("#noMatch").textContent = "";
153+
}
91154
}

‎lab4/style.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
body{
2+
display: flex;
3+
flex-direction: column;
4+
text-align: center;
5+
justify-content: center;
6+
align-items: center;
7+
min-height: 100vh;
8+
margin: 0;
9+
background-color: rgb(229, 229, 229);
10+
}
11+
12+
.box{
13+
display: inline-block;
14+
flex-direction: column;
15+
align-items: center;
16+
border: 5px;
17+
text-align: left;
18+
padding: 20px;
19+
border-radius: 10px;
20+
background: white;
21+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
22+
}
23+
.box fieldset {
24+
width: fit-content;
25+
min-width: 300px;
26+
border: 2px solid #000;
27+
}
28+
#userText,
29+
#noMatch,
30+
#zipError,
31+
#suggestPassword {
32+
min-height: 1.2em;
33+
margin: 4px 0 0;
34+
}

‎lab5/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Midterm Practice</title>
8+
<link href="style.css?v=3" rel="stylesheet">
9+
</head>
10+
<body>
11+
<div class="box">
12+
<p id="quote">quote goes here</p>
13+
<button id="changeQuoteBtn">Change Quote</button>
14+
</div>
15+
<div class="img">
16+
<p id="info"></p>
17+
<img id="pic"></img>
18+
<br>
19+
<button id="authorInfoBtn">Author info</button>
20+
</div>
21+
22+
23+
<script src="script.js"></script>
24+
</body>
25+
</html>

‎lab5/script.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
let qData;
3+
//make sure to add this
4+
async function pageLoad(){
5+
let randomQuoteEL = document.querySelector("#quote");
6+
let qResponse = await fetch("https://csumb.space/api/famousQuotes/getRandomQuote.php");
7+
qData = await qResponse.json();
8+
console.log(qData);
9+
}
10+
//make sure to add this
11+
pageLoad();
12+
13+
let quoteText = document.querySelector("#quote");
14+
let changeQuoteBtn = document.querySelector("#changeQuoteBtn");
15+
changeQuoteBtn.addEventListener("click", chnageQuote);
16+
function chnageQuote(){
17+
quoteText.textContent = qData.quoteText;
18+
console.log(quoteText);
19+
}
20+
21+
let authorInfoBtn = document.querySelector("#authorInfoBtn");
22+
let authorInfo = document.querySelector("#info");
23+
let pic = document.querySelector("#pic");
24+
authorInfoBtn.addEventListener("click", displayInfoAndPic);
25+
26+
function displayInfoAndPic(){
27+
authorInfo.textContent = qData.bio;
28+
pic.src = qData.picture;
29+
}
30+
31+
async function changeBG(){
32+
let bgResponse = await fetch("https://api.unsplash.com/photos/random/?client_id=7756a1e81f817c186cf57294e1c19b37b49c54b8f34e7c499ee0ce5cd86cd16e&featured=true&query=flowers");
33+
let bgData = await bgResponse.json();
34+
console.log(bgData);
35+
console.log(bgData.urls.full)
36+
document.querySelector("body").style.backgroundImage = `url(${bgData.urls.full})`;
37+
console.log(bgData.urls.regular)
38+
}
39+
changeBG();
40+

‎lab5/style.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body{
2+
background-size: cover;
3+
}

‎practice/.DS_Store‎

0 Bytes
Binary file not shown.

‎practice/pixelbay/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Background Image</title>
8+
</head>
9+
<style>
10+
body{
11+
display: flex;
12+
text-align: center;
13+
justify-content: center;
14+
flex-direction: column;
15+
align-items: center;
16+
height: 80vh;
17+
background-size: cover;
18+
19+
}
20+
</style>
21+
<body>
22+
<div class="bg">
23+
<h1>Select Background</h1>
24+
<div>
25+
<select name="scenery" id="scenery">
26+
<option>Select One</option>
27+
<option>Ocean</option>
28+
<option>Mountains</option>
29+
<option>Space</option>
30+
<option>Clouds</option>
31+
<option>Flowers</option>
32+
</select>
33+
<button id="setBG">Set Background</button>
34+
</div>
35+
</div>
36+
<script src="script.js"></script>
37+
</body>
38+
</html>

‎practice/pixelbay/script.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
let setBG = document.querySelector("#setBG");
2+
let scenery = document.querySelector("#scenery");
3+
// let bg = document.querySelector("#bg");
4+
5+
scenery.addEventListener("change",setBackground);
6+
7+
async function setBackground(){
8+
try{
9+
let response = await fetch("https://pixabay.com/api/?key=20426927-497d14db9c234faf7d0df8317&per_page=50&orientation=horizontal&q=" + scenery.value);
10+
let data = await response.json();
11+
let random = Math.floor(Math.random() * 50) + 1;
12+
document.querySelector("body").style.backgroundImage = `url(${data.hits[random].webformatURL})`;
13+
}
14+
catch(error){
15+
console.log(error);
16+
}
17+
}

0 commit comments

Comments
 (0)