Shopping page
Task
Create the same page as on the picture above
Result
tsc script.ts
Pure HTML + CSS flexbox
const stars = document.getElementById("stars") as HTMLElement;
const ratingNumber = document.querySelector(".rating-number") as HTMLElement;
const reviewCount = document.querySelector(".review-count") as HTMLElement;
let rating: number = 4.8;
let totalReviews: number = 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") as HTMLInputElement;
quantity.value = (parseInt(quantity.value) + 1).toString();
});
document.getElementById("decrease")?.addEventListener("click", () => {
const quantity = document.getElementById("quantity") as HTMLInputElement;
if (parseInt(quantity.value) > 1) {
quantity.value = (parseInt(quantity.value) - 1).toString();
}
});
const favoriteButton = document.getElementById("favorite") as HTMLButtonElement;
favoriteButton.addEventListener("click", () => {
favoriteButton.classList.toggle("active");
});
document.getElementById("change-zip")?.addEventListener("click", () => {
const newZip = prompt(
"Enter new Zip Code:",
(document.getElementById("zipcode") as HTMLInputElement).value,
);
if (newZip) {
(document.getElementById("zipcode") as HTMLInputElement).value = newZip;
}
});