remove button when clicked and change background color
Question
I want to make a website with recipes. And i want people to be able to favorite the recipes. When they favorite one i want the background color to change and the 'favorite' button to disappear.
I figured out how to change the background color when they click the .article class.
But how can i change the background color and hide the button when i click it ?
Thanks!
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>
2 answers
solution1
2 2020-03-31 17:53:36
You need to add the "unfavorite" button and give both the buttons an ID
<div class="article" id="article0">
<div class="picture"></div>
<div class="btn-favo" id="article0fav">Favorite</div>
<div class="btn-unfav" id="article0unfav">Unfavorite</div>
<div class="btn-detail">Detail</div>
</div>
Then make hidden unfav's default state
.btn-unfav{
display:none;
}
And use JavaScript to switch the Unfavorite's display property to block while setting the Favorite's display property to none
document.getElementById("article0fav").style.display = "none";
document.getElementById("article0unfav").style.display = "block";
You can achieve the same thing using JQuery
$('#article0fav').hide();
$('#article0unfav').show();
In order for jquery to work put this in your HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Note* - JQuery's function
.show()will only set the display value toblock, if you want to use anything different thandisplay:block, let's sayinline-blockyou will have to do it using the.css()function like this$('#article0unfav').css("display","inline-block");
solution2
-1 2020-03-31 17:49:21
You can define new class .hide { display: none } and it to element on click. With metod element.classList.add('hide')
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.