Made styling changes

DiksonIvySon · Oct 19, 2023 · 1769a5e · 1769a5e
1 parent f0c22bb
commit 1769a5e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 9 deletions.
diff --git a/weatherApp/index.html b/weatherApp/index.html
@@ -27,7 +27,7 @@ <h1>Weather</h1>
             </div>
             <hr>
             <div>
-                <p>Powered by weatherAPI.com</p>
+                <p>Powered by <a target="_blank" class="weatherAPI-link" href="https://www.weatherapi.com/weather/">weatherAPI.com</a></p>
             </div>
         </div>  
     </header>
@@ -208,7 +208,9 @@ <h3>Running</h3>
             </div>
 
             <div class="moreButton">
-                <button><a href="https://www.weatherapi.com/weather/">MORE</a></button>
+                <a target="_blank" href="https://www.weatherapi.com/weather/">
+                    <button>More</button>
+                </a>
             </div>
         </section>
 

diff --git a/weatherApp/script.js b/weatherApp/script.js
@@ -174,7 +174,7 @@ function displayData() {
 //function to display the current location information. 
 function displayCurrentLocation() {
     document.querySelector('.locationName').textContent = locationName;
-    document.querySelector('.currentLocation').textContent = locationName; //make location to show 0n the button
+    document.querySelector('.currentLocation').textContent = locationName + " ⬇"; //make location to show 0n the button
     document.querySelector('.locationRegion').textContent = region;
     document.querySelector('.locationCountry').textContent = country;
     document.querySelector('.locationLatitude').textContent = lat;

diff --git a/weatherApp/style.css b/weatherApp/style.css
@@ -59,6 +59,10 @@ body {
     margin: 0px;
 }
 
+.weatherAPI-link:hover {
+    color: #6DAFFE;
+}
+
 /* styling the first page*/
 .firstPage {
     padding: 40px;
@@ -143,6 +147,24 @@ body {
     color: white;
 }
 
+.currentLocation {
+    font-size: 23px;
+    font-weight: bold;
+    padding: 1px;
+    width: 15vw;
+    border-radius: 0px;
+    border: 0;
+    background-color: gray;
+    border-radius: 5px;
+}
+
+.currentLocation:hover {
+    background-color: #6DAFFE;
+    color: white;
+    cursor: pointer;
+    box-shadow: 5px 5px 8px gray;
+}
+
 .currentLocationInfo {
     font-size: 12px;
     font-weight: lighter;
@@ -279,19 +301,22 @@ body {
     padding: 10px;
 }
 
-button {
+.moreButton button {
     font-size: 23px;
     font-weight: bold;
     padding: 1px;
-    width: 80px;
-    border-radius: 10px;
-    background-color: rgba(0, 0, 0, 0.5);;
+    width: 15vw;
+    border-radius: 0px;
+    border: 0;
+    background-color: gray;
+    border-radius: 5px;
 }
 
-button:hover {
+.moreButton button:hover {
     background-color: #6DAFFE;
     color: white;
     cursor: pointer;
+    box-shadow: 5px 5px 8px gray;
 }
 
 a {
@@ -458,7 +483,7 @@ a:hover {
 /* Fading animation */
 .fade {
   animation-name: fade;
-  animation-duration: 1.5s;
+  animation-duration: 2.5s;
 }
 
 @keyframes fade {