mvp complete but also changed some of the css

jasheloper · Aug 2, 2024 · 4cdb480 · 4cdb480
1 parent 8b75ceb
commit 4cdb480
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 5 deletions.
diff --git a/images/pic1.jpg b/images/pic1.jpg
diff --git a/images/pic2.jpg b/images/pic2.jpg
diff --git a/images/pic3.jpg b/images/pic3.jpg
diff --git a/images/pic4.jpg b/images/pic4.jpg
diff --git a/images/pic5.jpg b/images/pic5.jpg
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
   </head>
 
   <body>
-    <h1>Image gallery example</h1>
+    <h1>Jashele's Image Gallery</h1>
 
     <div class="full-img">
 

diff --git 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
@@ -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;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,7 @@ @@
       </head>
       <body>
-        <h1>Image gallery example</h1>
+        <h1>Jashele's Image Gallery</h1>
         <div class="full-img">
@@ Expand Down @@