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.
--- 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') {
+  if (btnClass === 'dark') {
-    btn.setAttribute('class','light');
+    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)';
  }