I hate

met18001 · Mar 27, 2020 · 9a92c88 · 9a92c88
1 parent 8218248
commit 9a92c88
Show file tree

Hide file tree

Showing 3 changed files with 183 additions and 0 deletions.
diff --git a/week-9/form.html b/week-9/form.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Contact Form</title>
+
+</head>
+<body>
+    <form  onsubmit="return false"; action="https://formspree.io/mgezqgzj"  method="POST" class="form" id='myForm' >
+
+        <input type="text"   onkeyup="formBlur(this)" id="username" placeholder="Name" name="username">
+
+        <p id="p-user"></p>
+
+        <input type="subject" onkeyup="formBlur(this)" id="subject" placeholder="Subject" name="subject">
+
+        <p id="p-subject" ></p>
+
+
+        <input type="email"     onkeyup="formBlur(this)"   id="email"    placeholder="Email" name="email">
+
+         <p id="p-email" ></p>
+
+
+        <textarea id="textarea" onkeyup="formBlur(this)" rows="4" cols="40" placeholder="message" name="message" ></textarea>
+
+        <p id="p-textarea"></p>
+
+        <button   onclick="actionForm()" id="my-form-button" >Submit</button>
+
+        <p id="my-form-status"></p>
+
+        </form>
+<script>
+
+function actionForm()
+    {
+    var username  =    document.getElementById('username'),
+        subject  =    document.getElementById('subject'),
+        email     =    document.getElementById('email'),
+        textarea  =    document.getElementById('textarea');
+        if(username.value == "")
+        {
+         document.getElementById('p-user').textContent    = "* Please input your name";  
+         document.getElementById('username').style.border = "1px solid red";
+        }
+        if(subject.value == "")
+        {
+         document.getElementById('p-subject').textContent = "* Please input your subject";
+         document.getElementById('subject').style.border = "1px solid red";
+        }
+
+        if(email.value == "")
+        {
+         document.getElementById('p-email').textContent = "* Please input your email"; 
+         document.getElementById('email').style.border = "1px solid red";
+        }
+
+        if(textarea.value == "")
+        {
+         document.getElementById('p-textarea').textContent = "* Please input your message "; 
+          document.getElementById('textarea').style.border = "1px solid red";
+        }
+
+    }    
+
+
+    function formBlur(input)
+    {
+        if(input.value != '')
+        {
+          input.nextElementSibling.textContent  = "";
+          input.style.border = '2px  solid green';
+        }  
+    }
+
+
+    const encodeFormData = (data) => {
+    return Object.keys(data)
+        .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
+        .join('&');
+        encodeFormData(formData);
+    };
+
+
+const myForm = document.getElementById('myForm');
+
+myForm.addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    const formData = new FormData(this);
+
+    fetch("https://formspree.io/mgezqgzj", {
+      method: 'POST',
+      headers: {'Content-Type': 'application/x-www-form-url-encoded', 'Accept': 'application/json'},
+      body: formData
+    })
+    .then(response => console.log(response))
+    .catch(error => console.log(error))
+});
+
+
+
+
+</script>
+</body>
+
+</html>
diff --git a/week-9/login.php b/week-9/login.php
@@ -0,0 +1,4 @@
+<?php
+
+
+var_dump($_POST);
diff --git a/week-9/stopwatch.html b/week-9/stopwatch.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>setInterval stopwatch</title>
+    <style>
+      p {
+        font-family: sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <p class="clock"></p>
+    <p><button class="start">Start</button><button class="stop">Stop</button><button class="reset">Reset</button></p>
+    <script>
+      // 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();
+    </script>
+  </body>
+</html>