diff --git a/FormValidation/index.html b/FormValidation/index.html
new file mode 100644
index 0000000..3943b00
--- /dev/null
+++ b/FormValidation/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+ My Sample Password Validation
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/FormValidation/validate.js b/FormValidation/validate.js
new file mode 100644
index 0000000..bd4426e
--- /dev/null
+++ 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;
+ }
\ No newline at end of file
diff --git a/graphics/imgstyle.css b/graphics/imgstyle.css
new file mode 100644
index 0000000..27582c5
--- /dev/null
+++ b/graphics/imgstyle.css
@@ -0,0 +1,6 @@
+circle {
+ fill: blue;
+ stroke: red;
+ stroke-width: 2px;
+}
+line { stroke: red;}
\ No newline at end of file
diff --git a/graphics/svgImages.html b/graphics/svgImages.html
new file mode 100644
index 0000000..d7fd69d
--- /dev/null
+++ b/graphics/svgImages.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/graphics/svgScale.html b/graphics/svgScale.html
new file mode 100644
index 0000000..9c75023
--- /dev/null
+++ b/graphics/svgScale.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/graphics/svgTranslate.html b/graphics/svgTranslate.html
new file mode 100644
index 0000000..3bec088
--- /dev/null
+++ b/graphics/svgTranslate.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index3.html b/index3.html
new file mode 100644
index 0000000..775f2ec
--- /dev/null
+++ b/index3.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+ My Sample Pages
+
+
+
+
+
+
+ MY COMPANY
+ Welcome to DevToolKit 1 course
+ This is our first class!
+ Follow my code!
+ Game Analytics
+ My Bank Pte Ltd
+
+
+
+
+
+
+
+
+
+
diff --git a/myscripts2.js b/myscripts2.js
index f5af6f1..6d0d2fe 100644
--- 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";
diff --git a/playground/d3sample.js b/playground/d3sample.js
new file mode 100644
index 0000000..0c78643
--- /dev/null
+++ 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();
+ }
\ No newline at end of file
diff --git a/playground/formValidation.html b/playground/formValidation.html
new file mode 100644
index 0000000..09ab8f3
--- /dev/null
+++ b/playground/formValidation.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+ My Sample Password Validation
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/validate.js b/playground/validate.js
new file mode 100644
index 0000000..53e4c5c
--- /dev/null
+++ 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;
+}
\ No newline at end of file