try Q5 & Q6

5 years ago · 857a206a1a
parent 7fd5ae6684
commit 857a206a1a
4 changed files with 77 additions and 7 deletions
--- a/Day1Exercise/Q5/index.html
+++ 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>
--- a/Day1Exercise/Q6/index.html
+++ 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>
--- a/Day1Exercise/README.md
+++ b/Day1Exercise/README.md
@ -49,3 +49,24 @@ Create code to reverse a string
 ## Self Assessment

 [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.