Skip to content

Commit 54ee616

Browse files
chrisdavidmillschrisdavidmills
committed
adding building blocks assessment
1 parent b9dd2f0 commit 54ee616

File tree

9 files changed

+106
-0
lines changed

9 files changed

+106
-0
lines changed

‎javascript/building-blocks/gallery/gallery-start.zip‎

221 KB
Binary file not shown.

‎javascript/building-blocks/gallery/images/pic1.jpg‎

26.3 KB
Loading

‎javascript/building-blocks/gallery/images/pic2.jpg‎

59 KB
Loading

‎javascript/building-blocks/gallery/images/pic3.jpg‎

41.7 KB
Loading

‎javascript/building-blocks/gallery/images/pic4.jpg‎

86.5 KB
Loading

‎javascript/building-blocks/gallery/images/pic5.jpg‎

62.9 KB
Loading

‎javascript/building-blocks/gallery/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
6+
<title>Image gallery</title>
7+
8+
<link rel="stylesheet" href="style.css">
9+
10+
</head>
11+
12+
<body>
13+
<h1>Image gallery example</h1>
14+
15+
<div class="full-img">
16+
<img class="displayed-img" src="images/pic1.jpg">
17+
<div class="overlay"></div>
18+
<button class="dark">Darken</button>
19+
</div>
20+
21+
<div class="thumb-bar">
22+
23+
24+
</div>
25+
<script src="main.js"></script>
26+
</body>
27+
</html>

‎javascript/building-blocks/gallery/main.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
var displayedImage = document.querySelector('.displayed-img');
2+
var thumbBar = document.querySelector('.thumb-bar');
3+
4+
btn = document.querySelector('button');
5+
var overlay = document.querySelector('.overlay');
6+
7+
/* Looping through images */
8+
9+
for(var i = 1; i <= 5; i++) {
10+
var newImage = document.createElement('img');
11+
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
12+
thumbBar.appendChild(newImage);
13+
newImage.onclick = function(e) {
14+
var imgSrc = e.target.getAttribute('src');
15+
displayImage(imgSrc);
16+
}
17+
}
18+
19+
function displayImage(imgSrc) {
20+
displayedImage.setAttribute('src', imgSrc);
21+
}
22+
23+
/* Wiring up the Darken/Lighten button */
24+
25+
btn.onclick = function() {
26+
var btnClass = btn.getAttribute('class');
27+
if(btnClass === 'dark') {
28+
btn.setAttribute('class','light');
29+
btn.textContent = 'Lighten';
30+
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
31+
} else {
32+
btn.setAttribute('class','dark');
33+
btn.textContent = 'Darken';
34+
overlay.style.backgroundColor = 'rgba(0,0,0,0)';
35+
}
36+
}

‎javascript/building-blocks/gallery/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)