Skip to content

Commit

Permalink
mobile nav + xs size
Browse files Browse the repository at this point in the history
  • Loading branch information
@NolaDodd
NolaDodd committed Jul 17, 2024
1 parent dedead5 commit 3609c30
Show file tree
Hide file tree
Showing 3 changed files with 214 additions and 121 deletions.
43 changes: 34 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,37 @@ <h1 class="navname" id="logo"><b>NOLA DODD</b></h1>
</div>
</div>
</nav>
<div>
<div class="col-xs-3">
<i class='bx bx-menu' id="menuicon"></i>
</div>
<div class="col-xs-3">
<i class='bx bx-x-circle' id="xicon"></i>
</div>
</div>

<div id="menuicon" class="col-xs-3">
<i class='bx bx-menu' id="menuicon"></i>
</div>
</div>
<div class="mobileblock">
<nav class="mobilenav">
<ul>
<li><a href="#aboutme">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="sunmoonbuttons">
<div class="sunicon">
<button type="button" class="btn" aria-label="Toggle Light Mode">
<img class="sun" src="images/icons/sunicon.png" alt="sun button">
</button>
</div>
<div class="moonicon">
<button type="button" class="btn" aria-label="Toggle Dark Mode">
<img class="moon" src="images/icons/moonicon.png" alt="moon button">
</button>
</div>


</div>
</nav>
</div>
</div>
</header>
Expand Down Expand Up @@ -148,8 +172,9 @@ <h3 class="hidden divider line glow"><b>ABOUT ME</b></h3>
<h3 class="hidden divider line glow"><b>PROJECTS</b></h3>
<br />
<div class="mobileflex hidden">
<div class="flex row">
<div class="col-lg-3 col-sm-6 ">
<div class="flex">

<div class=" col-lg-3 col-sm-6 ">
<div class="card bodydark border borderlight">
<img class="card-img-top p-2 border border-secondary-subtle" src="images/projects/RestaurantReservation.png" alt="restaurant reservation application image">
<div class="card-body">
Expand All @@ -159,10 +184,10 @@ <h3 class="hidden divider line glow"><b>PROJECTS</b></h3>
<a href="https://restaurant-reservation-capstone-delta.vercel.app/" target="_blank" class="btn btn-outline-info space">Demo</a>
<a href="https://github.com/NolaDodd/Restaurant-Reservation-Capstone" target="_blank" class="btn btn-outline-info space">Github</a>
</div>

</div>
</div>
</div>

<div class="col-lg-3 col-sm-6">
<div class="card bodydark border borderlight">
<img class="card-img-top p-2 border border-secondary-subtle" src="images/projects/WeLoveMovies.png" alt="we love movies application image">
Expand All @@ -176,8 +201,6 @@ <h3 class="hidden divider line glow"><b>PROJECTS</b></h3>
</div>
</div>
</div>



<div class="col-lg-3 col-sm-6">
<div class="card bodydark border borderlight">
Expand All @@ -192,6 +215,7 @@ <h3 class="hidden divider line glow"><b>PROJECTS</b></h3>
</div>
</div>
</div>

<div class="col-lg-3 col-sm-6">
<div class="card bodydark border borderlight">
<img class="card-img-top p-2 border border-secondary-subtle" src="images/projects/DecoderRing.png" alt="decoder ring application image">
Expand All @@ -207,6 +231,7 @@ <h3 class="hidden divider line glow"><b>PROJECTS</b></h3>
</div>
</div>
</div>

</section>

<br/>
Expand Down
188 changes: 104 additions & 84 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,84 +11,82 @@ const observer = new IntersectionObserver((entries) => {
const hiddenElements = document.querySelectorAll('.hidden')
hiddenElements.forEach((el) => observer.observe(el))

//Light and Dark Mode
document.addEventListener("DOMContentLoaded", () => {
const sunButton = document.querySelector(".sun");
const moonButton = document.querySelector(".moon");
const sunButton = document.querySelectorAll(".sun");
const moonButton = document.querySelectorAll(".moon");
const textAnimationSpan = document.querySelector(".text-animation span");


sunButton.addEventListener("click", () => {
// Change body background
const body = document.querySelector("body");
body.classList.add("bodylight")
body.classList.remove("bodydark")

//to Light Mode
sunButton.forEach((sun) => {
sun.addEventListener("click", () => {

const body = document.querySelector("body");
body.classList.add("bodylight")
body.classList.remove("bodydark")

const moduleWraps = document.querySelectorAll(".module");
moduleWraps.forEach(module => {
module.classList.add("modulewrap")
module.classList.remove("modulewrapdark")
})

// Change module background to light mode
const moduleWraps = document.querySelectorAll(".module");
moduleWraps.forEach(module => {
module.classList.add("modulewrap")
module.classList.remove("modulewrapdark")
})
const pSelect = document.querySelectorAll("p")
pSelect.forEach(p => {
p.style.color = "#040c44"
})

const cardSelect = document.querySelectorAll(".card")
cardSelect.forEach(card => {
card.classList.remove("border")
card.classList.remove("border-light")
})

textAnimationSpan.classList.add("light-mode");
textAnimationSpan.classList.remove("dark-mode");
console.log("Light Mode");
});

})

const pSelect = document.querySelectorAll("p")
pSelect.forEach(p => {
p.style.color = "#040c44"
})
//to Dark Mode
moonButton.forEach((moon) => {
moon.addEventListener("click", () => {
const body = document.querySelector("body")

const cardSelect = document.querySelectorAll(".card")
cardSelect.forEach(card => {
card.classList.remove("bodydark")
card.classList.remove("border")
card.classList.remove("border-light")
})
body.classList.add("bodydark")
body.classList.remove("bodylight")

textAnimationSpan.classList.add("light-mode");
textAnimationSpan.classList.remove("dark-mode");
const moduleWraps = document.querySelectorAll(".module");
moduleWraps.forEach(module => {
module.classList.add("modulewrapdark")
module.classList.remove("modulewrap")
})

console.log("Light Mode");
});
const pSelect = document.querySelectorAll("p")
pSelect.forEach(p => {
p.style.color = "#ffff"
})

sunButton.addEventListener('click', function() {
sunButton.parentNode.style.display = 'none';
moonButton.parentNode.style.display = 'block';
});
const cardSelect = document.querySelectorAll(".card")
cardSelect.forEach(card => {
card.classList.add("border")
card.classList.add("border-light")
})

textAnimationSpan.classList.add("dark-mode");
textAnimationSpan.classList.remove("light-mode");

moonButton.addEventListener("click", () => {
// Change body background
const body = document.querySelector("body")
console.log("Dark Mode");
});

})

body.classList.add("bodydark")
body.classList.remove("bodylight")

// Change module background to dark mode
const moduleWraps = document.querySelectorAll(".module");
moduleWraps.forEach(module => {
module.classList.add("modulewrapdark")
module.classList.remove("modulewrap")
})

// Change text
const pSelect = document.querySelectorAll("p")
pSelect.forEach(p => {
p.style.color = "#ffff"
})

const cardSelect = document.querySelectorAll(".card")
cardSelect.forEach(card => {
card.classList.add("bodydark")
card.classList.add("border")
card.classList.add("border-light")
})

textAnimationSpan.classList.add("dark-mode");
textAnimationSpan.classList.remove("light-mode");

console.log("Dark Mode");
});
});

// Swap Sun and Moon on Click

//Swap Desktop Nav Sun and Moon on click
document.addEventListener('DOMContentLoaded', function() {
const sunButton = document.querySelector('.sun');
const moonButton = document.querySelector('.moon');
Expand All @@ -107,6 +105,48 @@ document.addEventListener('DOMContentLoaded', function() {
});


// Swap X and Menu icon on Click, Display mobilenav bar on click
document.addEventListener('DOMContentLoaded', function() {
const menuButton = document.getElementById('menuicon');
const xButton = document.getElementById('xicon');
const navbar = document.querySelector('.mobilenav');


menuButton.addEventListener('click', function() {
menuButton.parentNode.style.display = 'none';
xButton.parentNode.style.display = 'block';
});


xButton.addEventListener('click', function() {
xButton.parentNode.style.display = 'none';
menuButton.parentNode.style.display = 'block';
});

menuButton.addEventListener('click', function() {
navbar.classList.add('active');
});

xButton.addEventListener('click', function() {
navbar.classList.remove('active')
})

xButton.parentNode.style.display = 'none';

});


document.addEventListener('DOMContentLoaded', function() {
const logo = document.getElementById('logo');

logo.addEventListener('click', function(event) {
event.preventDefault();

window.location.href = '#';
});

});

document.addEventListener('DOMContentLoaded', function() {
const stableText = document.querySelector('.text-stable');
const animationText = document.querySelector('.text-animation');
Expand All @@ -130,23 +170,3 @@ document.addEventListener('DOMContentLoaded', function() {
pauseButton.parentNode.style.display = 'none'

});

document.addEventListener('DOMContentLoaded', function() {
const menuIcon = document.getElementById('menuicon');
const navbar = document.querySelector('.navbar');

menuIcon.addEventListener('click', function() {
navbar.classList.toggle('active');
});
});

document.addEventListener('DOMContentLoaded', function() {
const logo = document.getElementById('logo');

logo.addEventListener('click', function(event) {
event.preventDefault();

window.location.href = '#';
});

});
Loading

0 comments on commit 3609c30

Please sign in to comment.