Skip to content

Commit ec24379

Browse files
b00kworm4lyf3b00kworm4lyf3
committed
basic image display one, need to customize
1 parent b4b1371 commit ec24379

File tree

11 files changed

+213
-0
lines changed

11 files changed

+213
-0
lines changed

‎ica/ica11/chat.png‎

484 Bytes
Loading

‎ica/ica11/ica11.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Function start</title>
7+
<style>
8+
.msgBox {
9+
position: absolute;
10+
top: 50%;
11+
left: 50%;
12+
transform: translate(-50%,-50%);
13+
width: 242px;
14+
background: #eee;
15+
}
16+
17+
.msgBox p {
18+
line-height: 1.5;
19+
padding: 10px 20px;
20+
color: #333;
21+
padding-left: 82px;
22+
background-position: 25px center;
23+
background-repeat: no-repeat;
24+
}
25+
26+
.msgBox button {
27+
background: none;
28+
border: none;
29+
position: absolute;
30+
top: 0;
31+
right: 0;
32+
font-size: 1.1rem;
33+
color: #aaa;
34+
}
35+
36+
</style>
37+
</head>
38+
<body>
39+
<button>Display message box</button>
40+
41+
<script>
42+
let count = Math.floor(Math.random() * 3);
43+
let msgType = "";
44+
let msgText = "";
45+
46+
setMsg();
47+
48+
const btn = document.querySelector("button");
49+
btn.addEventListener("click", () => displayMessage(msgText, msgType));
50+
51+
function displayMessage(msgText, msgType){
52+
const body = document.body;
53+
54+
const panel = document.createElement("div");
55+
panel.setAttribute("class", "msgBox");
56+
body.appendChild(panel);
57+
58+
const msg = document.createElement("p");
59+
msg.textContent = msgText;
60+
panel.appendChild(msg);
61+
62+
const closeBtn = document.createElement("button");
63+
closeBtn.textContent = "x";
64+
panel.appendChild(closeBtn);
65+
66+
closeBtn.addEventListener("click", () =>
67+
panel.parentNode.removeChild(panel),
68+
);
69+
70+
if(msgType === "warning"){
71+
msg.style.backgroundImage = "url(warning.png)";
72+
panel.style.backgroundColor = "red";
73+
}
74+
else if (msgType === "chat") {
75+
msg.style.backgroundImage = "url(chat.png)";
76+
panel.style.backgroundColor = "aqua";
77+
}
78+
else {
79+
msg.style.paddingLeft = "20px";
80+
}
81+
82+
setMsg();
83+
}
84+
85+
function setMsg(){
86+
count = Math.floor(Math.random() * 3);
87+
88+
switch(count){
89+
case 0:
90+
msgType = "warning";
91+
msgText = "Your inbox is almost full — delete some mails";
92+
break;
93+
case 1:
94+
msgType = "chat";
95+
msgText = "Brian: Hi there, how are you today?";
96+
break;
97+
case 2:
98+
msgType = "";
99+
msgText = "This is an untyped message";
100+
break;
101+
}
102+
}
103+
</script>
104+
</body>
105+
</html>

‎ica/ica11/warning.png‎

527 Bytes
Loading

‎wa/wa11/images/pic1.jpg‎

26.3 KB
Loading

‎wa/wa11/images/pic2.jpg‎

59 KB
Loading

‎wa/wa11/images/pic3.jpg‎

41.7 KB
Loading

‎wa/wa11/images/pic4.jpg‎

86.5 KB
Loading

‎wa/wa11/images/pic5.jpg‎

62.9 KB
Loading

‎wa/wa11/main.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const displayedImage = document.querySelector('.displayed-img');
2+
const thumbBar = document.querySelector('.thumb-bar');
3+
4+
const btn = document.querySelector('button');
5+
const overlay = document.querySelector('.overlay');
6+
7+
/* Declaring the array of image filenames */
8+
const images = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg', 'pic5.jpg'];
9+
10+
/* Declaring the alternative text for each image file */
11+
const altTxt = ['Closeup of a human eye', 'Closeup of a rock', 'Closeup of some flowers', 'Egyptian painting', 'A butterfly with its wings open'];
12+
13+
/* Looping through images */
14+
for(let i = 0; i < images.length; i++){
15+
const newImg = document.createElement('img');
16+
newImg.setAttribute('src', 'images/' + images[i]);
17+
newImg.setAttribute('alt', altTxt[i]);
18+
thumbBar.appendChild(newImg);
19+
20+
newImg.addEventListener('click', function(e){
21+
displayedImage.setAttribute('src', newImg.src);
22+
displayedImage.setAttribute('alt', newImg.alt);
23+
});
24+
}
25+
26+
/* Wiring up the Darken/Lighten button */
27+
btn.addEventListener('click', function(e){
28+
if(btn.getAttribute('class') === 'dark'){
29+
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
30+
btn.setAttribute('class', 'light');
31+
btn.textContent = 'Lighten';
32+
}
33+
else{
34+
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)';
35+
btn.setAttribute('class', 'dark');
36+
btn.textContent = 'Darken';
37+
}
38+
});

‎wa/wa11/style.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
h1 {
2+
font-family: helvetica, arial, sans-serif;
3+
text-align: center;
4+
}
5+
6+
body {
7+
width: 640px;
8+
margin: 0 auto;
9+
}
10+
11+
.full-img {
12+
position: relative;
13+
display: block;
14+
width: 640px;
15+
height: 480px;
16+
}
17+
18+
.overlay {
19+
position: absolute;
20+
top: 0;
21+
left: 0;
22+
width: 640px;
23+
height: 480px;
24+
background-color: rgba(0,0,0,0);
25+
}
26+
27+
button {
28+
border: 0;
29+
background: rgba(150,150,150,0.6);
30+
text-shadow: 1px 1px 1px white;
31+
border: 1px solid #999;
32+
position: absolute;
33+
cursor: pointer;
34+
top: 2px;
35+
left: 2px;
36+
}
37+
38+
.thumb-bar img {
39+
display: block;
40+
width: 20%;
41+
float: left;
42+
cursor: pointer;
43+
}

0 commit comments

Comments
 (0)