Shopping page
Task
Create the same page as on the picture above
Result
Pure HTML + CSS flexbox
const stars = document.getElementById("stars");
const ratingNumber = document.querySelector(".rating-number");
const reviewCount = document.querySelector(".review-count");
let rating = 4.8;
let totalReviews = 28;
stars.innerHTML =
"★".repeat(Math.floor(rating)) + "☆".repeat(5 - Math.floor(rating));
ratingNumber.textContent = rating.toFixed(1);
reviewCount.textContent = `(${totalReviews})`;
document.getElementById("increase").addEventListener("click", () => {
const quantity = document.getElementById("quantity");
quantity.value = parseInt(quantity.value) + 1;
});
document.getElementById("decrease").addEventListener("click", () => {
const quantity = document.getElementById("quantity");
if (parseInt(quantity.value) > 1) {
quantity.value = parseInt(quantity.value) - 1;
}
});
const favoriteButton = document.getElementById("favorite");
favoriteButton.addEventListener("click", () => {
favoriteButton.classList.toggle("active");
});
document.getElementById("change-zip").addEventListener("click", () => {
const newZip = prompt(
"Enter new Zip Code:",
document.getElementById("zipcode").value,
);
if (newZip) {
document.getElementById("zipcode").value = newZip;
}
});