nus-fintech-sg
/
DevToolKit1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

try Q5 & Q6

Browse Source
main
yikth 5 years ago
parent 7fd5ae6684
commit 857a206a1a
4 changed files with 77 additions and 7 deletions
Show Stats Download Patch File Download Diff File

24
Day1Exercise/Q5/index.html
Unescape Escape View File

@ -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>

25
Day1Exercise/Q6/index.html
Unescape Escape View File

@ -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>

21
Day1Exercise/README.md
Unescape Escape View File

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

12
asignmentQ4and5solution/HM3.js
Unescape Escape View File

@ -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)';
}

Write Preview
Loading…
Cancel
Save