So I am learning web dev, and I am a beginner. I have learned a tiny bit about DOM manipulation and I am facing a small issue with a click event.
The HTML CSS and JS code in codepen
Please click on the pizza image. When you click on it, the box shadow should remain even after you do not hover over the pizza and the gray link bar bellow is now yellow even when you don’t hover over it. Click back on it and it returns to normal, neat!
Please now click on the pavlova (the sweet pinkish dessert). It doesn’t work even though it shares the exact same css classes and everything when it comes to style.
I hope I have described my problem properly. If anything is not clear I will explain more. I have been on this for a while and I really don’t know how to fix it. I will include the code here as well but everything is on code pen above, whichever is preferred.
const theFoodImg = document.querySelector('.food-img');
const recipeLink = document.querySelector('.recipe-link');
const linkIcon = document.querySelector('.fa-link');
const pinTopBar = document.querySelector('.fa-thumbtack');
const topBar = document.querySelector('#top-bar');
const pinColor = document.querySelector('.fa-thumbtack');
theFoodImg.addEventListener('click', function() {
if (theFoodImg.classList.contains('active')) {
theFoodImg.classList.remove('active');
theFoodImg.classList.remove('food-hover');
theFoodImg.classList.add('food-img');
recipeLink.classList.add('recipe-link');
recipeLink.classList.remove('click');
linkIcon.classList.add('white-link')
linkIcon.classList.remove('blue-link')
} else {
theFoodImg.classList.remove('food-img');
theFoodImg.classList.add('active');
recipeLink.classList.remove('recipe-link');
recipeLink.classList.add('click');
linkIcon.classList.remove('white-link')
linkIcon.classList.add('blue-link')
}
})
theFoodImg.addEventListener('mouseenter', function() {
if (theFoodImg.classList.contains('active') !== true) {
theFoodImg.classList.add('food-hover');
}
})
if (topBar.classList.contains('fix')) {
pinColor.style.color = 'goldenrod';
}
pinTopBar.addEventListener('click', function() {
if (topBar.classList.contains('fix') !== true) {
topBar.classList.add('fix');
pinColor.style.color = 'goldenrod';
} else {
topBar.classList.remove('fix');
pinColor.style.color = 'black';
}
})/* css reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
}
body {
margin: 0;
padding: 0;
}
a {
color: black;
text-decoration: none;
}
hr {
width: 80%;
margin: 0 auto;
background-color: black;
box-shadow: 0 0 15px gold;
}
/* banner and title styles */
div#banner {
background: url(https://i.ibb.co/MgBrNdY/background-img.jpg);
box-shadow: inset 0 0 0 9000em rgba(68, 68, 68, 0.5);
background-size: cover;
height: 50vh;
/* change later for media queries */
}
/* title style */
h1#large-screen-title {
color: goldenrod;
text-align: center;
padding: 0.5em;
font-size: 4em;
}
div#top-bar {
background-color: rgb(255, 250, 234);
height: min-content;
}
.fix {
position: fixed;
height: 15%;
right: 0;
left: 0;
top: 0;
box-shadow: 0 0 20px goldenrod;
}
img#odin-logo {
height: 5em;
}
i.fa-thumbtack {
float: right;
padding: 1em;
}
i.fa-thumbtack:hover {
cursor: pointer;
}
@media only screen and (min-width: 700px) {
div#banner {
height: 80vh;
}
h1#title-index {
height: 60vh;
color: transparent;
border: 0px solid white;
}
div#top-bar {
text-align: center;
}
}
/* recipe card styles */
div#recipe-card-container {
padding-top: 5em;
padding-left: 0.5em;
padding-right: 0.5em;
display: grid;
grid-template-columns: 1fr;
justify-content: center;
align-items: center;
gap: 2em;
}
/*each recipe card */
div#recipe-card-container>div.each-recipe {
display: grid;
gap: 2em;
margin-bottom: 5em;
justify-content: center;
}
div#recipe-card-container div.recipe-img {
/* background-color: red; */
width: 100%;
height: 50vh;
border-radius: 3px;
transition: 450ms;
}
/*recipe link within each card */
div.recipe-link {
background-color: lightgray;
text-align: center;
padding-top: 1em;
padding: 0.5em;
transition: 450ms;
border-radius: 0.3em;
}
div.recipe-link:hover {
background-color: #eece1a;
transition: 450ms;
}
/* when clicked add this style */
.click {
background-color: #eece1a;
text-align: center;
padding-top: 1em;
padding: 0.5em;
border-radius: 0.3em;
transition: 450ms;
width: 100%;
margin: 0 auto;
}
/**/
i.fa-link {
float: left;
}
div.recipe-link:hover>i.fa-link {
color: rgb(0, 0, 255, 0.5);
}
/*when clicked, target i.fa-link color */
.white-link {
color: white;
}
.blue-link {
color: rgb(0, 0, 255, 0.5);
}
/* food image style on card */
.food-img {
height: 100%;
border-radius: 50%;
border: 4px solid rgba(189, 80, 12, 0.637);
transition: 450ms;
cursor: pointer;
}
img.food-img {
width: 100%;
}
img.food-hover:hover,
.active {
box-shadow: 0 0 20px rgb(189, 80, 12);
height: 105%;
object-fit: cover;
border-radius: 50%;
border: 4px solid rgba(189, 80, 12, 0.637);
transition: 450ms;
cursor: pointer;
}
/*grey bar with copyright*/
div.copy {
background-color: rgba(0, 0, 0, 0.54);
margin-top: 2em;
padding: 2em;
color: white;
text-align: center;
}
@media only screen and (min-width: 1020px) {
div#recipe-card-container {
padding-left: 0;
padding-right: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
gap: 2em;
margin-top: 2em;
box-shadow: inset 0 500px rgb(85, 63, 63);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../style.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Odin Recipes</title>
</head>
<body>
<div id="banner">
<div id="top-bar" class="fix">
<a href="https://www.theodinproject.com/"><img src="https://i.ibb.co/7nhgfNJ/odin-logo.png" alt="" id="odin-logo" /></a>
<i class="fa-solid fa-thumbtack"></i>
</div>
</div>
<br />
<br />
<hr />
<h1 id="large-screen-title">Odin Recipes</h1>
<br /><br />
<hr />
<div id="recipe-card-container">
<div class="each-recipe">
<div class="recipe-img">
<img src="https://i.ibb.co/mDCCZTW/pizza.jpg" alt="" class="food-img food-hover" />
</div>
<a href="/recipes/pizza.html">
<div class="recipe-link">
<i class="fa-solid fa-link white-link"></i>Click here for Pizza Recipe
</div>
</a>
</div>
<div class="each-recipe">
<div class="recipe-img">
<img src="https://i.ibb.co/5cQCFWP/pavlova.png" alt="" class="food-img food-hover" />
</div>
<a href="/recipes/pavlova.html">
<div class="recipe-link">
<i class="fa-solid fa-link white-link"></i>Click here for Pavlova Recipe
</div>
</a>
</div>
<div class="each-recipe">
<div class="recipe-img">
<img src="/recipes/images/" alt="" class="food-img food-hover" />
</div>
<a href="/recipes/">
<div class="recipe-link">
<i class="fa-solid fa-link white-link"></i>Click here for Pavlova Recipe
</div>
</a>
</div>
</div>
<div class="copy">Copyright © 2022</div>
<script src="https://kit.fontawesome.com/fb94170dc7.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>>Solution :
Check out the below snippet. i have updated theFoodImg variable to theFoodImgs and leveraged querySelectorAll to get a node list of all the .food-img class elements.
Then use a foreach loop on the nodelist to loop it and add your listeners.
You may want to update more of your variables from querySelector to querySelectorAll. I have done this one to get you headed down the correct path.
const theFoodImgs = document.querySelectorAll('.food-img'),
recipeLink = document.querySelector('.recipe-link'),
linkIcon = document.querySelector('.fa-link'),
pinTopBar = document.querySelector('.fa-thumbtack'),
topBar = document.querySelector('#top-bar'),
pinColor = document.querySelector('.fa-thumbtack');
theFoodImgs.forEach(function (el) {
el.addEventListener('click', function() {
if(el.classList.contains('active')){
el.classList.remove('active');
el.classList.remove('food-hover');
el.classList.add('food-img');
recipeLink.classList.add('recipe-link');
recipeLink.classList.remove('click');
linkIcon.classList.add('white-link')
linkIcon.classList.remove('blue-link')
} else {
el.classList.remove('food-img');
el.classList.add('active');
recipeLink.classList.remove('recipe-link');
recipeLink.classList.add('click');
linkIcon.classList.remove('white-link')
linkIcon.classList.add('blue-link')
}
});
el.addEventListener('mouseenter', function(){
if (el.classList.contains('active') !== true) {
el.classList.add('food-hover');
}
})
});
if(topBar.classList.contains('fix')) {
pinColor.style.color = 'goldenrod';
}
pinTopBar.addEventListener('click', function() {
if(topBar.classList.contains('fix') !== true) {
topBar.classList.add('fix');
pinColor.style.color = 'goldenrod';
}
else {
topBar.classList.remove('fix');
pinColor.style.color = 'black';
}
})/* css reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
}
body {
margin: 0;
padding: 0;
}
a {
color: black;
text-decoration: none;
}
hr {
width: 80%;
margin: 0 auto;
background-color: black;
box-shadow: 0 0 15px gold;
}
/* banner and title styles */
div#banner {
background: url(https://i.ibb.co/MgBrNdY/background-img.jpg);
box-shadow: inset 0 0 0 9000em rgba(68, 68, 68, 0.5);
background-size: cover;
height: 50vh; /* change later for media queries */
}
/* title style */
h1#large-screen-title {
color: goldenrod;
text-align: center;
padding: 0.5em;
font-size: 4em;
}
div#top-bar {
background-color: rgb(255, 250, 234);
height: min-content;
}
.fix {
position: fixed;
height: 15%;
right: 0;
left: 0;
top: 0;
box-shadow: 0 0 20px goldenrod;
}
img#odin-logo {
height: 5em;
}
i.fa-thumbtack {
float: right;
padding: 1em;
}
i.fa-thumbtack:hover {
cursor: pointer;
}
@media only screen and (min-width: 700px) {
div#banner {
height: 80vh;
}
h1#title-index {
height: 60vh;
color: transparent;
border: 0px solid white;
}
div#top-bar {
text-align: center;
}
}
/* recipe card styles */
div#recipe-card-container {
padding-top: 5em;
padding-left: 0.5em;
padding-right: 0.5em;
display: grid;
grid-template-columns: 1fr;
justify-content: center;
align-items: center;
gap: 2em;
}
/*each recipe card */
div#recipe-card-container > div.each-recipe {
display: grid;
gap: 2em;
margin-bottom: 5em;
justify-content: center;
}
div#recipe-card-container div.recipe-img {
/* background-color: red; */
width: 100%;
height: 50vh;
border-radius: 3px;
transition: 450ms;
}
/*recipe link within each card */
div.recipe-link {
background-color: lightgray;
text-align: center;
padding-top: 1em;
padding: 0.5em;
transition: 450ms;
border-radius: 0.3em;
}
div.recipe-link:hover {
background-color: #eece1a;
transition: 450ms;
}
/* when clicked add this style */
.click {
background-color: #eece1a;
text-align: center;
padding-top: 1em;
padding: 0.5em;
border-radius: 0.3em;
transition: 450ms;
width: 100%;
margin: 0 auto;
}
/**/
i.fa-link {
float: left;
}
div.recipe-link:hover > i.fa-link {
color: rgb(0, 0, 255, 0.5);
}
/*when clicked, target i.fa-link color */
.white-link {
color: white;
}
.blue-link {
color: rgb(0, 0, 255, 0.5);
}
/* food image style on card */
.food-img {
height: 100%;
border-radius: 50%;
border: 4px solid rgba(189, 80, 12, 0.637);
transition: 450ms;
cursor: pointer;
}
img.food-img {
width: 100%;
}
img.food-hover:hover,
.active {
box-shadow: 0 0 20px rgb(189, 80, 12);
height: 105%;
object-fit: cover;
border-radius: 50%;
border: 4px solid rgba(189, 80, 12, 0.637);
transition: 450ms;
cursor: pointer;
}
/*grey bar with copyright*/
div.copy {
background-color: rgba(0, 0, 0, 0.54);
margin-top: 2em;
padding: 2em;
color: white;
text-align: center;
}
@media only screen and (min-width: 1020px) {
div#recipe-card-container {
padding-left: 0;
padding-right: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
gap: 2em;
margin-top: 2em;
box-shadow: inset 0 500px rgb(85, 63, 63);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../style.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Odin Recipes</title>
</head>
<body>
<div id="banner">
<div id="top-bar" class="fix">
<a href="https://www.theodinproject.com/"
><img src="https://i.ibb.co/7nhgfNJ/odin-logo.png" alt="" id="odin-logo"
/></a>
<i class="fa-solid fa-thumbtack"></i>
</div>
</div>
<br />
<br />
<hr />
<h1 id="large-screen-title">Odin Recipes</h1>
<br /><br />
<hr />
<div id="recipe-card-container">
<div class="each-recipe">
<div class="recipe-img">
<img
src="https://i.ibb.co/mDCCZTW/pizza.jpg"
alt=""
class="food-img food-hover"
/>
</div>
<a href="/recipes/pizza.html">
<div class="recipe-link">
<i class="fa-solid fa-link white-link"></i>Click here for Pizza
Recipe
</div>
</a>
</div>
<div class="each-recipe">
<div class="recipe-img">
<img
src="https://i.ibb.co/5cQCFWP/pavlova.png"
alt=""
class="food-img food-hover"
/>
</div>
<a href="/recipes/pavlova.html">
<div class="recipe-link">
<i class="fa-solid fa-link white-link"></i>Click here for Pavlova
Recipe
</div>
</a>
</div>
<div class="each-recipe">
<div class="recipe-img">
<img
src="/recipes/images/"
alt=""
class="food-img food-hover"
/>
</div>
<a href="/recipes/">
<div class="recipe-link">
<i class="fa-solid fa-link white-link"></i>Click here for Pavlova
Recipe
</div>
</a>
</div>
</div>
<div class="copy">Copyright © 2022</div>
<script
src="https://kit.fontawesome.com/fb94170dc7.js"
crossorigin="anonymous"
></script>
<script src="app.js"></script>
</body>
</html>