diff --git a/images/pic1.jpg b/images/pic1.jpg
index 499da05..fd2536c 100644
Binary files a/images/pic1.jpg and b/images/pic1.jpg differ
diff --git a/images/pic2.jpg b/images/pic2.jpg
index 14da4d3..637ee0e 100644
Binary files a/images/pic2.jpg and b/images/pic2.jpg differ
diff --git a/images/pic3.jpg b/images/pic3.jpg
index d2baecb..6620a4a 100644
Binary files a/images/pic3.jpg and b/images/pic3.jpg differ
diff --git a/images/pic4.jpg b/images/pic4.jpg
index 2df0746..126ea66 100644
Binary files a/images/pic4.jpg and b/images/pic4.jpg differ
diff --git a/images/pic5.jpg b/images/pic5.jpg
index ecb9544..8577f5e 100644
Binary files a/images/pic5.jpg and b/images/pic5.jpg differ
diff --git a/index.html b/index.html
index f0a7a2a..85f9404 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
- Image gallery example
+ Jashele's Image Gallery
diff --git a/main.js b/main.js
index 9d61ff7..171bcfe 100644
--- a/main.js
+++ b/main.js
@@ -31,3 +31,14 @@ for (let i = 0; i < imgArr.length; i++) {
/* Wiring up the Darken/Lighten button */
+btn.addEventListener("click", () => {
+ if (btn.getAttribute("class") === "dark") {
+ btn.setAttribute("class", "light");
+ btn.textContent = "Lighten";
+ overlay.style.backgroundColor = "rgb(0 0 0 / 50%)";
+ } else {
+ btn.setAttribute("class", "dark");
+ btn.textContent = "Darken";
+ overlay.style.backgroundColor = "rgb(0 0 0 / 0%)";
+ }
+});
diff --git a/style.css b/style.css
index d3fe774..f9a07c9 100644
--- a/style.css
+++ b/style.css
@@ -4,8 +4,9 @@ h1 {
}
body {
- width: 640px;
+ width: 740px;
margin: 0 auto;
+ background-color: antiquewhite;
}
.full-img {
@@ -15,13 +16,18 @@ body {
height: 480px;
}
+.full-img img {
+ border-radius: 8px;
+}
+
.overlay {
position: absolute;
top: 0;
left: 0;
- width: 640px;
- height: 480px;
+ width: 699px;
+ height: 467px;
background-color: rgba(0,0,0,0);
+ border-radius: 8px;
}
button {
@@ -33,11 +39,15 @@ button {
cursor: pointer;
top: 2px;
left: 2px;
+ margin: 15px;
}
.thumb-bar img {
display: block;
- width: 20%;
+ width: 15%;
float: left;
cursor: pointer;
+ margin: 12px;
+ border: 2px solid black;
+ border-radius: 10px;
}
\ No newline at end of file