add Form validation & graphics

5 years ago · 40bed56cbc
parent d474603508
commit 40bed56cbc
11 changed files with 308 additions and 0 deletions
--- a/FormValidation/index.html
+++ b/FormValidation/index.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>My Sample Password Validation</title>
+    <script src="validate.js"></script>
+    <!-- My sample pages -->
+  </head>
+  <body>
+
+    <form method="POST" action="..." onsubmit="return checkForm(this);">
+    <p>Username: <input type="text" name="username"></p>
+    <p>Password: <input type="password" name="pwd1"></p>
+    <p>Confirm Password: <input type="password" name="pwd2"></p>
+    <p><input type="submit"></p>
+    </form>
+
+</body>
--- a/FormValidation/validate.js
+++ b/FormValidation/validate.js
@ -0,0 +1,39 @@
+function checkPassword(str)
+  {
+    var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/;
+    return re.test(str);
+  }
+  /*
+    matches a string of six or more characters;
+    that contains at least one digit (\d is shorthand for [0-9]);
+    at least one lowercase character; and
+    at least one uppercase character:
+  */
+
+
+  function checkForm(form)
+  {
+    if(form.username.value == "") {
+      alert("Error: Username cannot be blank!");
+      form.username.focus();
+      return false;
+    }
+    re = /^\w+$/; //\w is shorthand for 'any letter, number or the underscore character'.
+    if(!re.test(form.username.value)) {
+      alert("Error: Username must contain only letters, numbers and underscores!");
+      form.username.focus();
+      return false;
+    }
+    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
+      if(!checkPassword(form.pwd1.value)) {
+        alert("The password you have entered is not valid!");
+        form.pwd1.focus();
+        return false;
+      }
+    } else {
+      alert("Error: Please check that you've entered and confirmed your password!");
+      form.pwd1.focus();
+      return false;
+    }
+    return true;
+  }
--- a/graphics/imgstyle.css
+++ b/graphics/imgstyle.css
@ -0,0 +1,6 @@
+circle {
+    fill: blue;
+    stroke: red;
+    stroke-width: 2px;
+}
+line { stroke: red;}
--- a/graphics/svgImages.html
+++ b/graphics/svgImages.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="imgstyle.css">
+    </head>
+
+<body>
+
+<svg width=300 height=300>
+   <circle cx="50" cy="50" r="10" />
+   <line x1="80" y1="20" x2="80" y2="130"></line>
+   <rect x="100" y="80" width="55" height="30"></rect>
+   <polygon points="210,100, 230,100, 220,80"></polygon>
+</svg> 
+
+</body>
+</html>
--- a/graphics/svgScale.html
+++ b/graphics/svgScale.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+   
+<head>
+   
+</head>
+<body>
+
+        <svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
+                <!-- uniform scale -->
+                <circle cx="0" cy="0" r="10" fill="blue"
+                        transform="scale(4)" />
+               
+                <!-- vertical scale -->
+                <circle cx="0" cy="0" r="10" fill="green"
+                        transform="scale(1,4)" />
+               
+                <!-- horizontal scale -->
+                <circle cx="0" cy="0" r="10" fill="yellow"
+                        transform="scale(4,1)" />
+               
+                <!-- No scale -->
+                <circle cx="0" cy="0" r="10" fill="black" />
+              </svg>
+
+
+</body>
--- a/graphics/svgTranslate.html
+++ b/graphics/svgTranslate.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+
+   
+<head>
+    
+</head>
+<body>
+
+<svg width=300 height=300>">
+  <!-- Demo for text and defalut values for x,y -->
+  <text x="50" y="20">Translate Demo</text> 
+  <rect width="40" height="40" fill="pink" />
+
+  <!-- No translation -->
+  <rect x="50" y="50" width="40" height="40" fill="green" />
+ 
+  <!-- Horizontal translation -->
+  <rect x="50" y="50" width="40" height="40" fill="blue"
+        transform="translate(50)" />
+ 
+  <!-- Vertical translation -->
+  <rect x="50" y="50" width="40" height="40" fill="red"
+        transform="translate(0 50)" />
+ 
+  <!-- Both horizontal and vertical translation -->
+  <rect x="50" y="50" width="40" height="40" fill="yellow"
+         transform="translate(50,50)" />
+</svg>
+
+
+
+
+</body>
--- a/index3.html
+++ b/index3.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>My Sample Pages</title>
+    <link rel="stylesheet" href="mystyle2.css">
+    <script src="myscripts2.js"></script>
+    <!-- My sample pages -->
+  </head>
+  <body>
+    
+    <h1 id="largeGreen"> MY COMPANY </h1>
+    <h2 id="h1ref"> Welcome to DevToolKit 1 course </h2>
+    <p> This is our first class! </p>
+    <p class = "info"> Follow my code!</p>
+    <a id="myLink" href="http://www.anuflora.com">Game Analytics</a>
+    <p class = "info button"> My Bank Pte Ltd </p> 
+    <!--
+    <button class = "button" onclick="myFunction()">click me1</button>
+    <button class = "button" onclick="changeContent()">click me2</button>
+    -->
+
+    <!--fancy buttons    -->
+    
+    <button class = "button button1" onclick="myFunction()">click me</button>
+    <button class = "button button2" onclick="changeContent()">click me</button>
+    
+    <svg width="200" height="200">
+        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
+        <circle cx="150" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
+    </svg>
+  </body>
+</html>
--- a/myscripts2.js
+++ b/myscripts2.js
@ -1,8 +1,10 @@
 //alert ('hello world'); 
 function myFunction() {
    
+    // getElementById() to get by elements
    document.getElementById("h1ref").style.backgroundColor = "greenyellow";
    //document.querySelector(".info").style.color = "green";
+    // querySelectorAll() to get class
    myArray = document.querySelectorAll(".info");
    myArray.forEach(function(items) {
         items.style.color ="green";
--- a/playground/d3sample.js
+++ b/playground/d3sample.js
@ -0,0 +1,68 @@
+chart = {
+    replay;
+  
+    const svg = d3.create("svg")
+        .attr("viewBox", [0, 0, width, height]);
+  
+    const l = length(line(data));
+    
+    svg.append("g")
+        .call(xAxis);
+    
+    svg.append("g")
+        .call(yAxis);
+    
+    svg.append("path")
+        .datum(data)
+        .attr("fill", "none")
+        .attr("stroke", "black")
+        .attr("stroke-width", 2.5)
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-linecap", "round")
+        .attr("stroke-dasharray", `0,${l}`)
+        .attr("d", line)
+      .transition()
+        .duration(5000)
+        .ease(d3.easeLinear)
+        .attr("stroke-dasharray", `${l},${l}`);
+    
+        // draw dots?
+    svg.append("g")
+        .attr("fill", "white")
+        .attr("stroke", "black")
+        .attr("stroke-width", 2)
+      .selectAll("circle")
+      .data(data)
+      .join("circle")
+        .attr("cx", d => x(d.x))
+        .attr("cy", d => y(d.y))
+        .attr("r", 3);
+    //
+    const label = svg.append("g")
+        .attr("font-family", "sans-serif")
+        .attr("font-size", 10)
+      .selectAll("g")
+      .data(data)
+      .join("g")
+        .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`)
+        .attr("opacity", 0);
+    
+    label.append("text")
+        .text(d => d.name)
+        .each(function(d) {
+          const t = d3.select(this);
+          switch (d.orient) {
+            case "top": t.attr("text-anchor", "middle").attr("dy", "-0.7em"); break;
+            case "right": t.attr("dx", "0.5em").attr("dy", "0.32em").attr("text-anchor", "start"); break;
+            case "bottom": t.attr("text-anchor", "middle").attr("dy", "1.4em"); break;
+            case "left": t.attr("dx", "-0.5em").attr("dy", "0.32em").attr("text-anchor", "end"); break;
+          }
+        })
+        .call(halo);
+    
+    label.transition()
+        .delay((d, i) => length(line(data.slice(0, i + 1))) / l * (5000 - 125))
+        .attr("opacity", 1);
+    
+    return svg.node();
+  }
--- a/playground/formValidation.html
+++ b/playground/formValidation.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>My Sample Password Validation</title>
+    <!-- link rel="stylesheet" href="mystyle.css" -->
+    <script src="validate.js"></script>
+    <!-- My sample pages -->
+  </head>
+  <body>
+    
+    <form method="POST" action="..." onsubmit="return checkForm(this);">
+    <p>Username: <input type="text" name="username"></p>
+    <p>Password: <input type="password" name="pwd1"></p>
+    <p>Confirm Password: <input type="password" name="pwd12"></p>
+    <p><input type="submit"></p>
+
+
+    </form>
+  </body>
+</html>
--- a/playground/validate.js
+++ b/playground/validate.js
@ -0,0 +1,39 @@
+function checkForm(form){
+    console.log("checkForm");
+    alert("chckForm");
+    // check non-empty
+    if (form.username.value == ""){
+        form.username.focus();
+        return false;
+    }
+    re=/^\w+$/;  // \w is shorthand for any letter, number or the underscore character
+    if (!re.test(form.username.value)){
+        alert("Error: Username must contain only letters, numbers and underscare!");
+        form.username.focus();
+        return false;
+    }
+    alert("confirm");
+    // confirm password
+    if (form.pwd1.value != "" && form.pwd1.value == form.pwd2.value){
+        if (!checkPassword(form.pwd1.value)){
+            alert("Invalid Password");
+            form.pwd1.focus();
+            return false;
+        }
+        // pass
+    }
+    else {
+        alert("Error: Password mismatch");
+        form.pwd1.focus();
+        return false;
+    }
+    //pass
+    alert("pass");
+    return true;
+
+}
+
+function checkPassword(value)
+{
+    return false;
+}