From 0d905d50c301a8858cbe272bc56d884feb74e1f6 Mon Sep 17 00:00:00 2001
From: JONATHAN ATONG <110544038+atongjonathan@users.noreply.github.com>
Date: Sun, 26 Nov 2023 16:50:45 +0300
Subject: [PATCH] feat: changing background color of nav-link with current page
---
index.html | 2 +-
script.js | 12 +++++++++++-
style.css | 7 ++++---
3 files changed, 16 insertions(+), 5 deletions(-)
diff --git a/index.html b/index.html
index d091969..8c208cf 100644
--- a/index.html
+++ b/index.html
@@ -204,7 +204,7 @@
Address
-
Ngong Race Course, Ngong Road, Nairobi,Kenya
+
Ngong Race Course, Ngong Road
Nairobi, Kenya
diff --git a/script.js b/script.js
index cafeac1..48390b3 100644
--- a/script.js
+++ b/script.js
@@ -24,10 +24,20 @@ document.addEventListener("DOMContentLoaded", ()=>{
const links = document.getElementsByClassName("nav-link");
Array.from(links).forEach((nav)=>
{
+
let section = nav.dataset.section;
nav.addEventListener("click", ()=>
{
- showSection(document.getElementById(`${section}`));
+ showSection(document.getElementById(section));
+
+ Array.from(links).forEach((link)=>{
+ if (link!==nav)
+ {
+ link.style.backgroundColor = "";
+ };
+ });
+
+ nav.style.backgroundColor = "rgb(166, 225, 249)";
});
})
diff --git a/style.css b/style.css
index eb17de2..3a574a2 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Merriweather:wght@300;400;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
*
{
@@ -36,12 +36,13 @@ body
text-decoration: none;
color: rgb(0, 28, 85);
height: 100%;
- width: 100%;
+ width: 73%;
font-size: large;
/* background-color: aqua; */
display: flex;
align-items: center;
- padding: 20px;
+ padding: 0 20px;
+ cursor: pointer;
}
a > span
{