init

2020-01-29 12:56:06 +01:00
commit 04efff0d15
51 changed files with 1673 additions and 0 deletions
--- a/html/tasks/chapter_6/task3_kvitter/custom.css
+++ b/html/tasks/chapter_6/task3_kvitter/custom.css
@@ -0,0 +1,66 @@
+
+#mainBody {
+
+  background-color: rgb(80, 80, 80);
+  margin: auto;
+  width: 60%;
+  padding: 10%;
+  height: max-content;
+
+}
+
+form {
+  margin: auto;
+  width: 60%;
+}
+
+textarea {
+  resize: none;
+  
+  border: 2px solid lightseagreen;
+  border-radius: 1em;
+  padding: 0.5em;
+
+  display: block;
+  margin : 0 auto;
+
+  font-size: 20px;
+
+  width: 8em; /*https://www.w3schools.com/css/css3_transitions.asp*/
+  -webkit-transition: width 0.4s ease-in-out;
+  transition: width 0.4s ease-in-out;
+}
+  
+/* When the input field gets focus, change its width to 100% */
+textarea:focus {
+  width: 100%;
+}
+
+input[type=submit] {
+
+  border: 2px solid red;
+  background-color: rgb(255, 173, 173);
+  border-radius: 4em;
+  text-align: center;
+  font-size: large;
+
+  margin: 0 auto;
+  width: 12%;
+
+  cursor: pointer;
+
+  -webkit-transition: width 0.2s ease-in-out;
+  transition: width 0.2s ease-in-out;
+
+}
+
+input[type=submit]:hover {
+  background-color: rgb(253, 138, 138);
+
+  width: 15%;
+}
+
+.error {
+  color: red;
+  visibility: hidden;
+}
--- a/html/tasks/chapter_6/task3_kvitter/oppgave.html
+++ b/html/tasks/chapter_6/task3_kvitter/oppgave.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>Kvitter</title>
+        <link rel="stylesheet" href="../../../../resources/css/main.css">
+        <link rel="stylesheet" href="./custom.css">
+        <script async src="./script.js"></script>
+    </head>
+    <body>
+        
+        <h1>Kvitter - Skriv innlegg</h1>
+
+        <div id=mainBody>
+
+            <form id=postData autocomplete="off">
+
+                <textarea id="postText"
+                    rows="5"
+                    cols="10"
+                    maxlength="100"
+                    wrap="soft"
+                    placeholder="Skriv noe her!" 
+                    autofocus
+                    required></textarea>
+                <p style="text-align: right;"><span id="charNum"></span>/100</p>
+
+                <h2>Captcha</h2>
+
+                <p id="captchaQuestion"></p>
+
+                <input type="number" pattern="[0-10]" id="captchaAnswer" required><br>
+                <p class="error" id="captchaError"> Du svarte feil. Prøv igjen.</p> <br>
+                Hvilken dag er det i dag? <input type="date" id="date"> <br>
+                <p class="error" id=dateError>Feil dato. Prøv igjen.</p>
+                <input type="submit" value="Post">
+
+            </form>
+
+        </div>
+    </body>
+</html>
--- a/html/tasks/chapter_6/task3_kvitter/script.js
+++ b/html/tasks/chapter_6/task3_kvitter/script.js
@@ -0,0 +1,67 @@
+var postData = document.getElementById("postData");
+var postText = document.getElementById("postText");
+var charNum = document.getElementById("charNum");
+var captchaDate = document.getElementById("date");
+var dateError = document.getElementById("dateError");
+var captchaText = document.getElementById("captchaQuestion");
+var captchaAnswer = document.getElementById("captchaAnswer");
+var captchaError = document.getElementById("captchaError");
+
+let captchaNum;
+
+captchaText.onload = generateCaptcha();
+
+postData.onsubmit=function(evt){
+    evt.preventDefault();
+
+    if (!checkCaptcha()) {
+        captchaError.style.visibility = "visible";
+        generateCaptcha();
+        return false;
+    }
+    if (!checkDate()) {
+        dateError.style.visibility = "visible";
+        return false;
+    }
+
+    clearPost();
+    
+}
+
+postText.oninput=function(){
+charNum.innerHTML = postText.value.length;
+}
+
+
+function generateCaptcha() {
+    let Num1 = Math.ceil(Math.random()*5);
+    let Num2 = Math.ceil(Math.random()*5);
+    captchaNum = Num1+Num2;
+    captchaText.innerHTML = (String(Num1) + " + " + String(Num2));
+}
+
+function checkCaptcha() {
+    return (captchaAnswer.value == captchaNum) ? true : false;
+}
+
+function checkDate() {
+    var today = new Date();
+
+    var month = String(today.getMonth()+1);
+    if (month.length != 2) {
+        month = "0" + month;
+    }
+
+    var date = today.getFullYear() + "-" + month + "-" + today.getDate();
+    return (date == captchaDate.value) ? true : false;
+}
+
+function clearPost() {
+    postText.value = "";
+    captchaError.style.visibility = "hidden";
+    dateError.style.visibility = "hidden";
+    date.value = "";
+    captchaAnswer.value = "";
+    charNum.innerHTML = "0";
+    generateCaptcha();
+}