wa11finished

andrewwidner · Nov 10, 2023 · 238dd49 · 238dd49
1 parent bc500ae
commit 238dd49
Show file tree

Hide file tree

Showing 13 changed files with 23 additions and 19 deletions.
diff --git a/wa/wa11/images/IMG_3925.JPG b/wa/wa11/images/IMG_3925.JPG
diff --git a/wa/wa11/images/IMG_4431.JPG b/wa/wa11/images/IMG_4431.JPG
diff --git a/wa/wa11/images/IMG_5282.JPG b/wa/wa11/images/IMG_5282.JPG
diff --git a/wa/wa11/images/Joe_Biden_presidential_portrait.jpg.webp b/wa/wa11/images/Joe_Biden_presidential_portrait.jpg.webp
diff --git a/wa/wa11/images/Mountain small.jpg b/wa/wa11/images/Mountain small.jpg
diff --git a/wa/wa11/images/img1.png b/wa/wa11/images/img1.png
diff --git a/wa/wa11/images/img2.png b/wa/wa11/images/img2.png
diff --git a/wa/wa11/images/img3.png b/wa/wa11/images/img3.png
diff --git a/wa/wa11/images/img4.png b/wa/wa11/images/img4.png
diff --git a/wa/wa11/images/img5.png b/wa/wa11/images/img5.png
diff --git a/wa/wa11/index.html b/wa/wa11/index.html
@@ -3,17 +3,17 @@
   <head>
     <meta charset="utf-8">
 
-    <title>Image gallery</title>
+    <title>Le gallery</title>
 
     <link rel="stylesheet" href="style.css">
 
   </head>
 
   <body>
-    <h1>Image gallery example</h1>
+    <h1>Photography Gallery</h1>
 
     <div class="full-img">
-      <img class="displayed-img" src="images/pic1.jpg" alt="Closeup of a human eye">
+      <img class="displayed-img" src="images/img4.png" alt="My mountain picture">
       <div class="overlay"></div>
       <button class="dark">Darken</button>
     </div>

diff --git a/wa/wa11/main.js b/wa/wa11/main.js
@@ -5,11 +5,11 @@ const btn = document.querySelector('button');
 const overlay = document.querySelector('.overlay');
 
 /* Declaring the array of image filenames */
-const images = ["images/pic1.jpg", 
-                "images/pic2.jpg", 
-                "images/pic3.jpg", 
-                "images/pic4.jpg", 
-                "images/pic5.jpg"]
+const images = ["images/img1.png", 
+                "images/img2.png", 
+                "images/img3.png", 
+                "images/img4.png", 
+                "images/img5.png"]
 
 
 
@@ -22,7 +22,7 @@ const altText = {
     "image5": "either moth or Butterfly"
 }
 
-console.log(altText["image4"])
+console.log(altText["img4"])
 
 /* Looping through images */
 
@@ -51,12 +51,12 @@ function darken() {
 
     if(btn.getAttribute("class") === "dark"){
         btn.setAttribute("class", "light");
-        btn.textContent = "Lighten";
+        btn.textContent = "Darken";
         overlay.style.backgroundColor = "rgba(0,0,0,.1)";
     }
     else {
         btn.setAttribute("class", "dark");
-        btn.textContent = "Darken";
+        btn.textContent = "Lighten";
         overlay.style.backgroundColor = "rgba(0,0,0,.8)";
 
     }

diff --git a/wa/wa11/style.css b/wa/wa11/style.css
@@ -1,6 +1,9 @@
 h1 {
-  font-family: helvetica, arial, sans-serif;
+  font-family: 'Times New Roman', Times, serif;
   text-align: center;
+  background-color: darkred;
+  color: white;
+  border-radius: 50%;
 }
 
 body {
@@ -11,8 +14,8 @@ body {
 .full-img {
   position: relative;
   display: block;
-  width: 640px;
-  height: 480px;
+  width: auto;
+  height: auto;
 }
 
 .overlay {
@@ -25,12 +28,13 @@ body {
 }
 
 button {
-  border: 0;
-  background: rgba(150,150,150,0.6);
-  text-shadow: 1px 1px 1px white;
+  border: 2px;
+  background: blue;
+  color: white;
+  text-shadow: 1px 1px 1px black;
   border: 1px solid #999;
   position: absolute;
-  cursor: pointer;
+  cursor: crosshair;
   top: 2px;
   left: 2px;
 }
@@ -39,5 +43,5 @@ button {
   display: block;
   width: 20%;
   float: left;
-  cursor: pointer;
+  cursor:cell;
 }