added initial wk 9

maa17019 · Mar 22, 2021 · 5c1b7dc · 5c1b7dc
1 parent 019661f
commit 5c1b7dc
Show file tree

Hide file tree

Showing 9 changed files with 245 additions and 0 deletions.
diff --git a/week-9/.DS_Store b/week-9/.DS_Store
diff --git a/week-9/.vscode/settings.json b/week-9/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/week-9/stopwatch/.DS_Store b/week-9/stopwatch/.DS_Store
diff --git a/week-9/stopwatch/index.html b/week-9/stopwatch/index.html
@@ -0,0 +1,28 @@
+<!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</title>
+    <style>
+        p {
+          font-family: sans-serif;
+        }
+        button{
+            margin: 5px;
+        }
+        .clock{
+           margin-left: 25px;
+           margin-bottom: 15px;
+           font-size: 30px;
+        }
+      </style>
+</head>
+<body>
+    <p class="clock"></p>
+  <p> <button class="start">Start</button>  <button class="stop">Stop</button>  <button class="reset">Reset</button>
+
+    <script src = "js/main.js"></script> 
+</body>
+</html>
diff --git a/week-9/stopwatch/js/main.js b/week-9/stopwatch/js/main.js
@@ -0,0 +1,53 @@
+    // Define a counter variable for the number of seconds and set it to zero.
+    let secondCount = 0;
+    // Define a global to store the interval when it is active.
+    let stopWatch;
+    // Store a reference to the display paragraph in a variable
+    const displayPara = document.querySelector('.clock');
+
+    // Function to calculate the current hours, minutes, and seconds, and display the count
+    function displayCount() {
+      // Calculate current hours, minutes, and seconds
+      let hours = Math.floor(secondCount/3600);
+      let minutes = Math.floor((secondCount % 3600)/60);
+      let seconds = Math.floor(secondCount % 60)
+
+      // Display a leading zero if the values are less than ten
+      let displayHours = (hours < 10) ? '0' + hours : hours;
+      let displayMinutes = (minutes < 10) ? '0' + minutes : minutes;
+      let displaySeconds = (seconds < 10) ? '0' + seconds : seconds;
+
+      // Write the current stopwatch display time into the display paragraph
+      displayPara.textContent = displayHours + ':' + displayMinutes + ':' + displaySeconds;
+
+      // Increment the second counter by one
+      secondCount++;
+    }
+
+    // Store references to the buttons in constants
+    const startBtn = document.querySelector('.start');
+    const stopBtn = document.querySelector('.stop');
+    const resetBtn = document.querySelector('.reset');
+
+    // When the start button is pressed, start running displayCount() once per second using setInterval()
+    startBtn.addEventListener('click', () => {
+      stopWatch = setInterval(displayCount, 1000);
+      startBtn.disabled = true;
+    });
+
+    // When the stop button is pressed, clear the interval to stop the count.
+    stopBtn.addEventListener('click', () => {
+      clearInterval(stopWatch);
+      startBtn.disabled = false;
+    });
+
+    // When the reset button is pressed, set the counter back to zero, then immediately update the display
+    resetBtn.addEventListener('click', () => {
+      clearInterval(stopWatch);
+      startBtn.disabled = false;
+      secondCount = 0;
+      displayCount();
+    });
+
+    // Run displayCount() once as soon as the page loads so the clock is displayed
+    displayCount();
diff --git a/week-9/working-web-form/.DS_Store b/week-9/working-web-form/.DS_Store
diff --git a/week-9/working-web-form/css/form.css b/week-9/working-web-form/css/form.css
@@ -0,0 +1,74 @@
+h1 {
+    margin-top: 0;
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+form {
+    margin: 0 auto;
+    width: 350px;
+    padding: 1em;
+    border: 1px solid #CCC;
+    border-radius: 1em;
+}
+
+div+div {
+    margin-top: 1em;
+}
+
+label span {
+    display: inline-block;
+    width: 80px;
+    text-align: left;
+}
+
+input, textarea {
+    font: 1em sans-serif;
+    width: 250px;
+    box-sizing: border-box;
+    border: 1px solid #999;
+}
+
+input[type=checkbox], input[type=radio] {
+    width: auto;
+    border: none;
+}
+
+input:focus, textarea:focus {
+    border-color: #000;
+}
+
+textarea {
+    vertical-align: top;
+    height: 5em;
+    resize: vertical;
+}
+
+fieldset {
+    width: 250px;
+    box-sizing: border-box;
+    margin-left: 136px;
+    border: 1px solid #999;
+}
+
+button {
+    margin: 20px 0 0 124px;
+}
+
+label {
+  position: relative;
+}
+
+label em {
+  position: absolute;
+  right: 5px;
+  top: 20px;
+}
+#warning {
+    text-align: center;
+    color:rgb(190, 0, 0);
+}
diff --git a/week-9/working-web-form/index.html b/week-9/working-web-form/index.html
@@ -0,0 +1,39 @@
+<!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>Web Form That Works</title>
+    <link href="css/form.css" rel="stylesheet">
+</head>
+<body>
+
+    <form>
+        <h1>Web form that works!</h1>
+        <h4>*Fill in all fields</h2>
+            <p>
+              <label for="name"><span>Name:* </span></label> <!--Name-->
+              <input type="text" id="name" name="username">
+            </p>
+            <p>
+              <label for="mail"><span>E-mail:* </span></label> <!--Email-->
+              <input type="email" id="mail" name="usermail">
+            </p>
+            <p>
+              <label for="subject"><span>Subject:* </span></label> <!--Subject-->
+              <input type="text" id="subject" name="subject">
+            </p>
+            <p>
+              <label for="message"><span>Message:* </span></label> <!--Message-->
+              <input type="text" id="message" name="message">
+            </p>
+
+            <strong><p id= "warning"></p></strong> <!--Warning to fill in all fields-->
+
+            <button type="submit">Submit</button>
+    </form>
+
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/week-9/working-web-form/js/main.js b/week-9/working-web-form/js/main.js
@@ -0,0 +1,48 @@
+let form = document.querySelector("form");
+let namee = document.getElementById("name");
+let mail = document.getElementById("mail");
+let subject = document.getElementById("subject");
+let message = document.getElementById("message");
+
+let warning = document.querySelector("#warning");
+
+/*let allValues = [
+  namee.value === "",
+  mail.value === "",
+  subject.value === "",
+  message.value === ""
+];*/
+
+form.addEventListener("submit", function (event) {
+  if ((namee.value === "" || mail.value === "") && (subject.value === "" || message.value === "")){
+    event.preventDefault();
+    warning.innerHTML = "You must fill in ALL fields!" ;
+    namee.style.borderColor = "red";
+    mail.style.borderColor = "red";
+    subject.style.borderColor = "red";
+    message.style.borderColor = "red";
+  }
+else if (namee.value === "") {
+    event.preventDefault();
+    warning.innerHTML = "You must fill in the NAME field!" ;
+    //form.style.borderColor = "red";
+    namee.style.borderColor = "red";
+  } else if (mail.value === "") {
+    event.preventDefault();
+    warning.innerHTML = "You must fill in the EMAIL field!"; 
+    //form.style.borderColor = "red";
+    mail.style.borderColor = "red";
+  } else if (subject.value === "") {
+    event.preventDefault();
+    warning.innerHTML = "You must fill in the SUBJECT field!"; 
+    //form.style.borderColor = "red";
+    subject.style.borderColor = "red";
+  } else if (message.value === "") {
+    event.preventDefault();
+    warning.innerHTML = "You must fill in the MESSAGE field!"; 
+    //form.style.borderColor = "red";
+    message.style.borderColor = "red";
+  } 
+});
+
+/*Adding FormSpree API*/