JS: Calculator
function catData() {
const h2Element = document.getElementById(“task”);
let abyssinianRadio = document.getElementById(“Abyssinian”);
let bengalRadio = document.getElementById(“Bengal”);
let birmanRadio = document.getElementById(“Birman”);
let maineCoonRadio = document.getElementById(“Maine Coon”);
let persianRadio = document.getElementById(“Persian”);
let scottishFoldRadio = document.getElementById(“Scottish Fold”);
let siameseRadio = document.getElementById(“Siamese”);
let turkishAngoraRadio = document.getElementById(“Turkish Angora”);
let message = document.getElementById(“sign”);
let catNum = document.getElementById(“catsNumber”).value;
let minPrice;
let maxPrice;
//Abyssinian
if (abyssinianRadio.checked) {
let image = document.getElementById(“image”);
image.src = “https://marilunatei24.thkit.ee/wp/wp-content/uploads/2025/04/Abyssinian.png”;
message.innerText = “Price Range: 400 – 1,500 EUR”;
minPrice = 400 * catNum;
maxPrice = 1500 * catNum;
h2Element.style.display = ‘none’;
//Bengal
} else if (bengalRadio.checked) {
let image = document.getElementById(“image”);
image.src = “https://marilunatei24.thkit.ee/wp/wp-content/uploads/2025/04/Bengal.png”;
message.innerText = “Price Range: 800 – 2,000 EUR”;
minPrice = 800 * catNum;
maxPrice = 2000 * catNum;
h2Element.style.display = ‘none’;
//Birman
} else if (birmanRadio.checked) {
let image = document.getElementById(“image”);
image.src = “https://marilunatei24.thkit.ee/wp/wp-content/uploads/2025/04/Birman.png”;
message.innerText = “Price Range: 300 – 1,500 EUR”;
minPrice = 300 * catNum;
maxPrice = 1500 * catNum;
h2Element.style.display = ‘none’;
//Maine Coon
} else if (maineCoonRadio.checked) {
let image = document.getElementById(“image”);
image.src = “https://marilunatei24.thkit.ee/wp/wp-content/uploads/2025/04/MaineCoon.png”;
message.innerText = “Price Range: 400 – 1,000 EUR”;
minPrice = 400 * catNum;
maxPrice = 1000 * catNum;
h2Element.style.display = ‘none’;
//Persian
} else if (persianRadio.checked) {
let image = document.getElementById(“image”);
image.src = “https://marilunatei24.thkit.ee/wp/wp-content/uploads/2025/04/Persian.png”;
message.innerText = “Price Range: 400 – 1,500 EUR”;
minPrice = 400 * catNum;
maxPrice = 1500 * catNum;
h2Element.style.display = ‘none’;
//Scottish Fold
} else if (scottishFoldRadio.checked) {
let image = document.getElementById(“image”);
image.src = “https://marilunatei24.thkit.ee/wp/wp-content/uploads/2025/04/ScottishFold.png”;
message.innerText = “Price Range: 500 – 2,000 EUR”;
minPrice = 500 * catNum;
maxPrice = 2000 * catNum;
h2Element.style.display = ‘none’;
//Siamese
} else if (siameseRadio.checked) {
let image = document.getElementById(“image”);
image.src = “https://marilunatei24.thkit.ee/wp/wp-content/uploads/2025/04/Siamese.png”;
message.innerText = “Price Range: 300 – 1,500 EUR”;
minPrice = 300 * catNum;
maxPrice = 1500 * catNum;
h2Element.style.display = ‘none’;
//Turkish Angora
} else if (turkishAngoraRadio.checked) {
let image = document.getElementById(“image”);
image.src = “https://marilunatei24.thkit.ee/wp/wp-content/uploads/2025/04/TurkishAngora.png”;
message.innerText = “Price Range: 400 – 1,200 EUR”;
minPrice = 400 * catNum;
maxPrice = 1200 * catNum;
h2Element.style.display = ‘none’;
}
return { minPrice, maxPrice };
}
function calculateTotalPrice() {
let totalPriceElement = document.getElementById(“total-price”);
totalPriceElement.textContent = “Total Price Range: ” + catData().minPrice.toLocaleString() + ” – ” + catData().maxPrice.toLocaleString() + ” EUR”;
}.cat-breed-calculator {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.radio-and-image {
display: flex;
gap: 30px;
margin-bottom: 20px;
}
.radio-list label {
display: block;
margin-bottom: 10px;
}
.cat-image img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
#calculate {
background: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
Select a cat breed!