Хочу сделать сайт с рецептами. И я хочу, чтобы люди могли любить рецепты. Когда им нравится, я хочу, чтобы цвет фона изменился, а кнопка «любимый» исчезла.
Я понял, как изменить цвет фона, когда они щелкают по классу .article.
Но как мне изменить цвет фона и скрыть кнопку, когда я нажимаю на нее?
Спасибо!
const container = document.querySelector("#container")
window.addEventListener("load", showLoadedFavorites)
container.addEventListener("click", clickHandler)
function clickHandler(e){
let item = e.target
if (item.classList.contains("article")) {
let saveditems = getLocalFavorites()
let index = saveditems.indexOf(item.id)
console.log(index)
if(index > -1){
item.classList.remove('favorite')
saveditems.splice(index, 1)
} else {
item.classList.add("favorite")
saveditems.push(item.id)
}
localStorage.setItem('favorites', JSON.stringify(saveditems))
}
}
function showLoadedFavorites(){
let saveditems = getLocalFavorites()
console.log(saveditems)
for(let item of saveditems) {
let card = document.querySelector(`#${item}`)
card.classList.add("favorite")
}
}
function getLocalFavorites(){
let favorites = localStorage.getItem("favorites")
if(favorites) {
console.log(favorites)
return JSON.parse(favorites)
} else {
console.log("No favorites yet")
return []
}
}
body {
background-color: white;
font-family: 'Poppins', sans-serif;
font-size:1.1em;
}
.header {
font-size: 40px;
display: grid;
margin-bottom: 40px;
text-align: center;
color: #F17647;
}
#container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: max-content;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.article {
background-color:white;
padding:10px;
min-height:100px;
cursor: pointer;
}
.favorite {
background-color: yellow;
background-image:url("star.png");
background-repeat: no-repeat;
background-position: top right;
}
.picture {
background-image: url("meal.jpg");
height:200px;
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
.btn-favo, .btn-detail {
background-color: #F17647;
color: white;
text-align: center;
height: auto;
font-size: 25px;
margin-top: 10px;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Favorites</title>
</head>
<body>
<div class="header">Food Magazine</div>
<div id="container">
<div class="article" id="article0">
<div class="picture"></div>
<div class="btn-favo">Favorite</div>
<div class="btn-detail">Detail</div>
</div>
<div class="article" id="article1">
<div class="picture"></div>
<div class="btn-favo">Favorite</div>
<div class="btn-detail">Detail</div>
</div>
<div class="article" id="article2">
<div class="picture"></div>
<div class="btn-favo">Favorite</div>
<div class="btn-detail">Detail</div>
</div>
<div class="article" id="article3">
<div class="picture"></div>
<div class="btn-favo">Favorite</div>
<div class="btn-detail">Detail</div>
</div>
<div class="article" id="article4">
<div class="picture"></div>
<div class="btn-favo">Favorite</div>
<div class="btn-detail">Detail</div>
</div>
<div class="article" id="article5">
<div class="picture"></div>
<div class="btn-favo">Favorite</div>
<div class="btn-detail">Detail</div>
</div>
<div class="article" id="article6">
<div class="picture"></div>
<div class="btn-favo">Favorite</div>
<div class="btn-detail">Detail</div>
</div>
<div class="article" id="article7">
<div class="picture"></div>
<div class="btn-favo">Favorite</div>
<div class="btn-detail">Detail</div>
</div>
<div class="article" id="article8">
<div class="picture"></div>
<div class="btn-favo">Favorite</div>
<div class="btn-detail">Detail</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>