Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Working Stopwatch & Working Web Form API
  • Loading branch information
plb18001 committed Mar 28, 2022
1 parent ac9b814 commit 57c2045
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 0 deletions.
20 changes: 20 additions & 0 deletions week-9/stopwatch/index.html
@@ -0,0 +1,20 @@
<!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>Stopwatch App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1>Week 9 Stopwatch</h1>
<button id="start">Start</button>
<button id="stop">Stop</button>
<p id="timer">Seconds Passed: </p>
</div>

<script src="main.js"></script>
</body>
</html>
21 changes: 21 additions & 0 deletions week-9/stopwatch/main.js
@@ -0,0 +1,21 @@
let startBtn = document.querySelector('#start')
let stopBtn = document.querySelector('#stop')
let intervalId;
let timer = document.querySelector('#timer')
let counter = 0;

function change(){
timer.innerHTML = "Seconds Passed: " + counter;
}

startBtn.addEventListener('click', function(){
intervalId = setInterval(function(){
console.log('1 second has passed')
counter += 1;
change();
}, 1000)
})

stopBtn.addEventListener('click', function(){
clearInterval(intervalId)
})
12 changes: 12 additions & 0 deletions week-9/stopwatch/style.css
@@ -0,0 +1,12 @@
#container {
border: solid;
border-radius: 3em;
padding: 1em;
display: inline-block;
text-align: center;
}

body {
display: flex;
justify-content: center;
}
57 changes: 57 additions & 0 deletions week-9/web form 2.0/emailForm.html
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Week 8 Part 2</title>
</head>
<body>
<form id="emailForm" action="https://formspree.io/f/xyyodebw" method="POST">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="email" placeholder="Email"><br>
<input type="text" name="subject" placeholder="Subject"><br>
<input type="text" name="message" placeholder="Message"><br>



<input type="submit" value="Send Message">
<p id="my-form-status"></p>
</form>



<script src="emailForm.js"></script>
<script>
var form = document.getElementById("emailForm");

async function handleSubmit(event) {
event.preventDefault();
var status = document.getElementById("my-form-status");
var data = new FormData(event.target);
fetch(event.target.action, {
method: form.method,
body: data,
headers: {
'Accept': 'application/json'
}
}).then(response => {
if (response.ok) {
status.innerHTML = "Thanks for your submission!";
form.reset()
} else {
response.json().then(data => {
if (Object.hasOwn(data, 'errors')) {
status.innerHTML = data["errors"].map(error => error["message"]).join(", ")
} else {
status.innerHTML = "Oops! There was a problem submitting your form"
}
})
}
}).catch(error => {
status.innerHTML = "Oops! There was a problem submitting your form"
});
}
form.addEventListener("submit", handleSubmit)
</script>
</body>
</html>

0 comments on commit 57c2045

Please sign in to comment.