maaike's code samples

2021-09-04 21:22:51 +02:00
parent 0189d40676
commit b89b9dfb3f
70 changed files with 2737 additions and 0 deletions
@@ -0,0 +1,30 @@
+<html>
+  <style>
+    div {
+      background-color: purple;
+      width: 100px;
+      height: 100px;
+      position: absolute;
+    }
+  </style>
+  <body>
+    <button onclick="toTheRight()">Go right</button>
+    <div id="block"></div>
+
+    <script>
+      function toTheRight() {
+        let b = document.getElementById("block");
+        let x = 0;
+        setInterval(function () {
+          if (x === 600) {
+            clearInterval();
+          } else {
+            x++;
+            b.style.left = x + "px";
+          }
+        }, 2);
+        
+      }
+    </script>
+  </body>
+</html>
@@ -0,0 +1,46 @@
+<html>
+  <head>
+    <style>
+      .box {
+        height: 200px;
+        width: 200px;
+        padding: 20px;
+        margin: 0 50px;
+        display: inline-block;
+        border: 1px solid black;
+      }
+
+      #dragme {
+        background-color: red;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="box" ondrop="dDrop()" ondragover="nDrop()">
+      1
+      <div id="dragme" ondragstart="dStart()" draggable="true">
+        Drag Me Please!
+      </div>
+    </div>
+    <div class="box" ondrop="dDrop()" ondragover="nDrop()">2</div>
+   <script>
+      let holderItem;
+
+      function dStart() {
+        holderItem = event.target;
+      }
+
+      function nDrop() {
+        event.preventDefault();
+      }
+
+      function dDrop() {
+       // event.preventDefault();
+        if (event.target.className == "box") {
+          event.target.appendChild(holderItem);
+        }
+      }
+    </script>
+  </body>
+</html>
@@ -0,0 +1,10 @@
+<html>
+  <body>
+    <button type="button" onclick="triggerSomething()">Click</button>
+    <script>
+      function triggerSomething() {
+        console.dir(event.target);
+      }
+    </script>
+  </body>
+</html>
@@ -0,0 +1,21 @@
+<html>
+  <body>
+    <div id="welcome">Hi there!</div>
+    <form>
+      <input type="text" name="firstname" placeholder="First name" />
+      <input type="text" name="lastname" placeholder="Last name" />
+      <input type="button" onclick="sendInfo()" value="Submit" />
+    </form>
+    <script>
+      function sendInfo() {
+        console.dir(event);
+        let p = event.target.parentElement;
+        message("Welcome " + p.firstname.value + " " + p.lastname.value);
+      }
+
+      function message(m) {
+        document.getElementById("welcome").innerHTML = m;
+      }
+    </script>
+  </body>
+</html>
@@ -0,0 +1,8 @@
+<html>
+  <body>
+    <form action="anotherpage.html" method="get" onsubmit="doStuff()">
+      <input type="text" placeholder="name" name="name" />
+      <input type="submit" value="send" />
+    </form>
+  </body>
+</html>
@@ -0,0 +1,33 @@
+<html>
+  <body>
+    <div id="wrapper"></div>
+    <form action="anotherpage.html" method="get" onsubmit="return valForm()">
+      <input type="text" id="firstName" name="firstName" placeholder="First name" />
+      <input type="text" id="lastName" name="lastName" placeholder="Last name" />
+      <input type="text" id="age" name="age" placeholder="Age" />
+      <input type="submit" value="submit" />
+    </form>
+    <script>
+      function valForm() {
+        var p = event.target.children;
+        if (p.firstName.value == "") {
+          message("Need a first name!!");
+          return false;
+        }
+        if (p.lastName.value == "") {
+          message("Need a last name!!");
+          return false;
+        }
+        if (p.age.value == "") {
+          message("Need an age!!");
+          return false;
+        }
+        return true;
+      }
+
+      function message(m) {
+        document.getElementById("wrapper").innerHTML = m;
+      }
+    </script>
+  </body>
+</html>
@@ -0,0 +1,23 @@
+<html>
+  <body>
+    <body>
+      <div id="wrapper">JavaScript is fun!</div>
+      <input type="text" name="myNum1" onkeypress="numCheck()">
+      <input type="text" name="myNum2" onkeypress="numCheck2()">
+      <script>
+        function numCheck() {
+            message("Number: " + !isNaN(event.key));
+            return !isNaN(event.key);
+        }
+
+        function numCheck2() {
+            message("Not a number: " + isNaN(event.key));
+            return isNaN(event.key);
+        }
+
+        function message(m) {
+            document.getElementById('wrapper').innerHTML = m;
+        }
+      </script>
+  </body>
+</html>
@@ -0,0 +1,23 @@
+<html>
+  <body>
+    <body>
+      <div id="wrapper">JavaScript is fun!</div>
+      <input type="text" name="myNum1" onkeypress="return numCheck()" onpaste="return false">
+      <input type="text" name="myNum2" onkeypress="return numCheck2()" onpaste="return false">
+      <script>
+        function numCheck() {
+            message(!isNaN(event.key));
+            return !isNaN(event.key);
+        }
+
+        function numCheck2() {
+            message(isNaN(event.key));
+            return isNaN(event.key);
+        }
+
+        function message(m) {
+            document.getElementById('wrapper').innerHTML = m;
+        }
+      </script>
+  </body>
+</html>
@@ -0,0 +1,11 @@
+
+<html>
+  <body>
+    <div id="divvy" onmouseup="changeColor()" style="width: 100px; height: 100px; background-color: pink;">
+    <script>
+      function changeColor() {
+        document.getElementById("divvy").style.backgroundColor = "blue";
+      }
+    </script>
+  </body>
+</html>
@@ -0,0 +1,20 @@
+
+<html>
+  <body>
+    <div id="divvy" style="width: 100px; height: 100px; background-color: pink;">
+    <script>
+      window.onload = function donenow() {
+        console.log("hi");
+        document.getElementById("divvy").addEventListener("mousedown", function() { changeColor(this, "green"); });
+        document.getElementById("divvy").addEventListener("mouseup", function() { changeColor(this, "yellow"); });
+        document.getElementById("divvy").addEventListener("dblclick", function() { changeColor(this, "black"); });
+        document.getElementById("divvy").addEventListener("mouseout", function() { changeColor(this, "blue"); });
+      }
+      console.log("hi2");
+
+      function changeColor(el, color) {
+        el.style.backgroundColor = color;
+      }
+    </script>
+  </body>
+</html>
@@ -0,0 +1,29 @@
+<html>
+  <body>
+    <div id="welcome">Hi there!</div>
+    <form>
+      <input type="text" name="firstname" placeholder="First name" onchange="logEvent()" />
+      <input type="text" name="lastname" placeholder="Last name" onblur="logEvent()" />
+      <input type="button" onclick="sendInfo()" value="Submit" />
+    </form>
+    <script>
+      function logEvent() {
+        let p = event.target;
+        if (p.name == "firstname") {
+          message("First Name Changed to  " + p.value);
+        } else {
+          message("Last Name Changed to  " + p.value);
+        }
+      }
+
+      function sendInfo() {
+        let p = event.target.parentElement;
+        message("Welcome " + p.firstname.value + " " + p.lastname.value);
+      }
+
+      function message(m) {
+        document.getElementById("welcome").innerHTML = m;
+      }
+    </script>
+  </body>
+</html>
@@ -0,0 +1,13 @@
+
+<html>
+  <body>
+    <p id="unique" onclick="magic()">Click here for magic!</p>
+
+    <script>
+      document.getElementById("unique").onclick = function() { magic() };
+      document.getElementById("unique").addEventListener("click", magic);
+      document.getElementById("unique").addEventListener("click", function() { magic(arg1, arg2) });
+
+    </script>
+  </body>
+</html>