From 857a206a1a18b8ca691febd9ca2a4e6b8601967f Mon Sep 17 00:00:00 2001
From: yikth <netyth@gmail.com>
Date: Wed, 2 Sep 2020 14:59:18 +0800
Subject: [PATCH] try Q5 & Q6

---
 Day1Exercise/Q5/index.html     | 24 ++++++++++++++++++++++++
 Day1Exercise/Q6/index.html     | 25 +++++++++++++++++++++++++
 Day1Exercise/README.md         | 23 ++++++++++++++++++++++-
 asignmentQ4and5solution/HM3.js | 12 ++++++------
 4 files changed, 77 insertions(+), 7 deletions(-)
 create mode 100644 Day1Exercise/Q5/index.html
 create mode 100644 Day1Exercise/Q6/index.html
diff --git a/Day1Exercise/Q5/index.html b/Day1Exercise/Q5/index.html
new file mode 100644
index 0000000..3365d88
--- /dev/null
+++ b/Day1Exercise/Q5/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Gallery</title>
+</head>
+
+<body>
+    <h1>Image gallery example</h1>
+
+    <div class="full-img">
+        <img class="displayed-img" src="images/pic1.jpg">
+        <div class="overlay"></div>
+        <button class="dark">Darken</button>
+    </div>
+
+    <div class="thumb-bar">
+
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Day1Exercise/Q6/index.html b/Day1Exercise/Q6/index.html
new file mode 100644
index 0000000..4c5b28e
--- /dev/null
+++ b/Day1Exercise/Q6/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Banks</title>
+    <script>
+        function addBank(){
+            var node = document.createElement("LI");                 // Create a <li> node
+            var textnode = document.createTextNode("MyDigi");         // Create a text node
+            node.appendChild(textnode);                              // Append the text to <li>
+            document.getElementById("banks").appendChild(node);     // Append <li> to <ul> with id="myList"         
+        }
+    </script>
+</head>
+<body>
+    <ul id="banks">
+        <li>DBS</li>
+        <li>UOB</li>
+        <li>OCBC</li>
+        <li>Citi</li>
+    </ul>
+    <button onclick="addBank()">Add</button>
+</body>
+</html>
\ No newline at end of file
diff --git a/Day1Exercise/README.md b/Day1Exercise/README.md
index a8e54cf..4e2bbec 100644
--- a/Day1Exercise/README.md
+++ b/Day1Exercise/README.md
@@ -48,4 +48,25 @@ Create code to reverse a string
 
 ## Self Assessment
 
-[Self Assessment](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator)
\ No newline at end of file
+[Self Assessment](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator)
+
+## Image Gallery
+
+[Image](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery)
+
+## Bank List
+
+* Create an HTML document which shows a list of Banks. [use, <UL> <LI> to create the list).
+
+```html
+<ul>
+  <li>DBS</li>
+  <li>UOB</li>
+  <li>OCBC</li>
+  <li>Citi</li>
+</ul>
+```
+* Write a javaScript function addNew(), which when called through a button-click in the HTML page, adds a new bank to the list in the HTML document.
+* New bank to add. “MYDigi bank”
+
+Tips: use “ appendChild() ” to ac a new child to list.
\ No newline at end of file
diff --git a/asignmentQ4and5solution/HM3.js b/asignmentQ4and5solution/HM3.js
index 72c8ba6..ae12986 100644
--- a/asignmentQ4and5solution/HM3.js
+++ b/asignmentQ4and5solution/HM3.js
@@ -6,25 +6,25 @@ const overlay = document.querySelector('.overlay');
 
 //Looping image
 
-for(let i = 1; i <= 5; i++) {
+for (let i = 1; i <= 5; i++) {
   const newImage = document.createElement('img');
   newImage.setAttribute('src', 'pic' + i + '.jpg');
   thumbBar.appendChild(newImage);
-  newImage.onclick = function(e) {
+  newImage.onclick = function (e) {
     displayedImage.src = e.target.src;
   }
 }
 
 //Adding darken effect and revert option
 
-btn.onclick = function() {
+btn.onclick = function () {
   const btnClass = btn.getAttribute('class');
-  if(btnClass === 'dark') {
-    btn.setAttribute('class','light');
+  if (btnClass === 'dark') {
+    btn.setAttribute('class', 'light');
     btn.textContent = 'Lighten';
     overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
   } else {
-    btn.setAttribute('class','dark');
+    btn.setAttribute('class', 'dark');
     btn.textContent = 'Darken';
     overlay.style.backgroundColor = 'rgba(0,0,0,0)';
   }
