Show sourcecode
The following files exists in this folder. Click to view.
public_html/exercises/Projekt/Företag/
Bilder/
Huvudmeny.html
faq.html
itemDetailRenderer.js
kontakt.html
omOss.html
shop.html
shopRenderer.js
style.css
shopRenderer.js
157 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
const shopContainer = document.getElementById("shop");
const select1 = document.getElementById("product1selector");
const select2 = document.getElementById("product2selector");
const products = [
{
id: 1,
name: "Modern 2:a nära centrum",
price: 2450000,
image: "bilder/lagenhet1.png",
description: "Ljus och modern tvåa med öppen planlösning mellan kök och vardagsrum. Stora fönster ger mycket naturligt ljus. Lägenheten har även en rymlig balkong och gott om förvaring. Perfekt för singel eller par.",
kvm: 48
},
{
id: 2,
name: "Charmig etta i lugnt område",
price: 1595000,
image: "bilder/lagenhet2.png",
description: "Välplanerad etta med separat köksdel och generöst ljusinsläpp. Belägen i ett lugnt område nära grönområden och kollektivtrafik. Perfekt första bostad eller övernattningslägenhet.",
kvm: 32
},
{
id: 3,
name: "Rymlig 3:a med balkong",
price: 3250000,
image: "bilder/lagenhet3.png",
description: "Fin trea med två sovrum, stort",
kvm: 72
},
{
id: 4,
name: "Nyrenoverad 1,5:a",
price: 3250000,
image: "bilder/lagenhet4.png",
description: "Fin trea med två sovrum, stort vardagsrum och balkong i söderläge. Modernt kök med bra arbetsytor och diskmaskin. Nära skolor, butiker och kommunikationer.",
kvm: 72
},
{
id: 5,
name: "Nyrenoverad 1,5:a",
price: 1895000,
image: "bilder/lagenhet5.png",
description: "Smakfullt renoverad lägenhet med sovalkov och stilrent kök. Fräscht badrum med tvättmaskin. Centralt läge nära restauranger och caféer.",
kvm: 38
},
{
id: 6,
name: "Stilren 2:a med balkong",
price: 2695000,
image: "bilder/lagenhet6.png",
description: "Modern tvåa med stilrent kök och parkettgolv i hela lägenheten. Balkong med eftermiddagssol och utsikt över innergård. Bra kommunikationer i närheten.",
kvm: 55
},
{
id: 7,
name: "Central 3:a med utsikt",
price: 3495000,
image: "bilder/lagenhet7.png",
description: "Ljus trea högt upp i huset med fantastisk utsikt över staden. Öppen planlösning mellan kök och vardagsrum samt två rymliga sovrum.",
kvm: 78
},
{
id: 8,
name: "Kompakt och smart planerad etta",
price: 1450000,
image: "bilder/lagenhet8.png",
description: "Smart planerad etta där varje kvadratmeter utnyttjas effektivt. Modernt kök, fräscht badrum och stora fönster. Perfekt studentlägenhet.",
kvm: 27
},
{
id: 9,
name: "Exklusiv taklägenhet",
price: 5250000,
image: "bilder/lagenhet9.png",
description: "Unik taklägenhet med stora takfönster och terrass. Öppen planlösning, exklusiva materialval och fantastisk utsikt. Ett riktigt drömboende.",
kvm: 110
}
];
function renderShop() {
shopContainer.innerHTML = "";
products.forEach(product => {
const productHTML = `
<div class="product" id="${product.id}">
<img src="${product.image}" alt="lägenhet bild">
<h3>${product.name}</h3>
<p class="price">${product.price} kr</p>
<button onclick="addToCart(${product.id})">Add to Cart</button>
</div>
`;
const selectProduct1HTML = `
<option value="${product.id}">${product.name}</option>
`;
const selectProduct2HTML = `
<option value="${product.id}">${product.name}</option>
`;
shopContainer.innerHTML += productHTML;
select1.innerHTML += selectProduct1HTML;
select2.innerHTML += selectProduct2HTML;
});
products.forEach(product => {
document.getElementById(product.id.toString()).addEventListener('click', () => openDetails(product))
});
}
var scrollSave;
function openDetails(product){
let detailScreen = document.getElementById("productDetails");
detailScreen.style.visibility = "visible";
scrollSave = window.scrollY;
window.scrollTo({top: 0});
document.getElementById("detailImage").setAttribute("src", product.image.toString());
document.getElementById("detailTitle").innerHTML = product.name.toString();
document.getElementById("detailDescription").innerHTML = product.description.toString();
document.getElementById("detailSqm").innerHTML = product.kvm.toString() + " m²";
}
document.getElementById("detailX").addEventListener('click', () => hideDetailCompare())
document.getElementById("compareX").addEventListener('click', () => hideDetailCompare())
function hideDetailCompare() {
window.scrollTo({top: scrollSave});
let detailScreen = document.getElementById("productDetails");
let compareScreen = document.getElementById("productCompare");
detailScreen.style.visibility = "hidden";
compareScreen.style.visibility = "hidden";
}
document.getElementById("jamfor").addEventListener('click', () => {
let compareScreen = document.getElementById("productCompare");
compareScreen.style.visibility = "visible";
});
select1.addEventListener('change', () => changeCompare1(select1.value));
select2.addEventListener('change', () => changeCompare2(select2.value));
function changeCompare1(productId) {
let product = products[productId - 1];
document.getElementById('Image1').setAttribute("src", product.image.toString());
document.getElementById('title1').innerHTML = product.name.toString()
document.getElementById('desc1').innerHTML = product.description.toString()
document.getElementById('sqm1').innerHTML = product.kvm.toString() + " m²"
document.getElementById('price1').innerHTML = product.price.toString() + " kr"
}
function changeCompare2(productId) {
let product = products[productId - 1];
document.getElementById('Image2').setAttribute("src", product.image.toString());
document.getElementById('title2').innerHTML = product.name.toString()
document.getElementById('desc2').innerHTML = product.description.toString()
document.getElementById('sqm2').innerHTML = product.kvm.toString() + " m²"
document.getElementById('price2').innerHTML = product.price.toString() + " kr"
}
renderShop();