JS Kalkilaatorid
Kalkulaator
vali
juustu
kaneeli
mooni
pontšik
Juhuslik (Random) pildi vastavus radionupule
![juhuslik pilt]()
Vali pilt:
Temperatuurikalkulaator
Vali millises skaalas sa kirjutasid temperatuuri
Ümbritsemine eurost dollarisse/rublasse/naelsterlingisse
Valige, millisesse valuutasse soovite euro üle kanda
function saiaKalk() {
let k=document.getElementById(“kogus”);
let vastus=document.getElementById(“vastus”);
const juustuHind=1.20;
const mooniHind=1.50;
const pontsikHind=2.00;
const kaneeliHind = 1.80;
let saiatyyp=document.getElementById(“saiatyyp”);
if(saiatyyp.selectedIndex === 0)
{
vastus.innerHTML=”Palun vali saia tüüp”;
vastus.style.backgroundColor=”red”;
}
if(saiatyyp.selectedIndex === 1)
{
vastus.innerHTML=juustuHind * k.value+’€’;
vastus.style.backgroundColor=”cornsilk”;
}
if(saiatyyp.selectedIndex === 2)
{
vastus.innerHTML=kaneeliHind * k.value+’€’;
vastus.style.backgroundColor=”cornsilk”;
}
if(saiatyyp.selectedIndex === 3)
{
vastus.innerHTML=mooniHind * k.value+’€’;
vastus.style.backgroundColor=”cornsilk”;
}
if(saiatyyp.selectedIndex === 4)
{
vastus.innerHTML=pontsikHind * k.value+’€’;
vastus.style.backgroundColor=”cornsilk”;
}
}
//funktsioon mis nätab juhusliku pildi, kui kasutaja uuendab veebileht
function juhuslikPilt() {
//võtame pildid masiivist
const pildid=[
‘https://jelizavetaostapjuk23.thkit.ee/wp/wp-content/uploads/2024/10/Beach.png’,
‘https://jelizavetaostapjuk23.thkit.ee/wp/wp-content/uploads/2024/10/Cloud.png’,
‘https://jelizavetaostapjuk23.thkit.ee/wp/wp-content/uploads/2024/10/Face.png’,
‘https://jelizavetaostapjuk23.thkit.ee/wp/wp-content/uploads/2024/10/House.png’,
‘https://jelizavetaostapjuk23.thkit.ee/wp/wp-content/uploads/2024/10/Star.png’,
]
//juhuslik pilt
const juhuslikPilt=Math.floor(Math.random()*pildid.length);
//võtakse masiivist
const pilt=pildid[juhuslikPilt];
const rPilt=document.getElementById(‘randomPilt’);
//pildi allikas on pilt
rPilt.src=pilt;
}
function radioKontroll() {
let vastus2=document.getElementById(“vastus2”);
const rPilt=document.getElementById(‘randomPilt’);
const valik=document.getElementsByName(“valik”); //mitu elementi name on üks
for (let i = 0; i < valik.length; i++) {
if(valik[i].checked) {
if(valik[i].value===rPilt.getAttribute('src')) {
vastus2.innerHTML="Õige valik";
vastus2.style.backgroundColor="LightGreen";
}
else {
vastus2.innerHTML="Vale vastus";
vastus2.style.backgroundColor="Crimson";
}
}
}
}
function temperatuur() {
let vastus=document.getElementById("vastus3");
let number=document.getElementById("number");
const celsius=document.getElementById("celsius");
const fahrenheit=document.getElementById("fahrenheit");
if(celsius.checked) {
//toFixed() – mitu numbrit koma peale
vastus.innerHTML=((number.value*(9/5))+32).toFixed(2) + ' F';
}
if(fahrenheit.checked) {
vastus.innerHTML=((number.value-32)*(5/9)).toFixed(2) + ' C°';
}
}
function currency() {
let vastus=document.getElementById("vastus4");
let number=document.getElementById("currency");
const dollar=document.getElementById("dollar");
const ruble=document.getElementById("ruble");
const pound=document.getElementById("pound");
if(dollar.checked) {
vastus.innerHTML=(number.value * 1.10).toFixed(2) + ' $';
}
if(ruble.checked) {
vastus.innerHTML=(number.value * 105.39).toFixed(2) + ' ₽';
}
if(pound.checked) {
vastus.innerHTML=(number.value * 0.84).toFixed() + '£';
}
}
#kalk1 {
border: 1px solid gray;
padding: 10px;
margin: 10px;
width: 45%;
background-color: cornsilk;
text-align: center;
}
div#kalk1 h3 {
font-variant: small-caps;
font-family: cursive;
letter-spacing: 0.05cm;
text-align: center;
}
img{
border-radius: 15px;
}
#kalk2 {
border: 1px solid gray;
padding: 10px;
margin: 10px;
width: 45%;
}
div#kalk2 h3 {
font-variant: small-caps;
font-family: cursive;
letter-spacing: 0.05cm;
text-align: center;
}
#kalk3 {
border: 1px solid gray;
padding: 10px;
margin: 10px;
width: 45%;
font-family: “Century Gothic”;
background-color: aliceblue;
}
div#kalk3 h3 {
font-variant: small-caps;
font-family: cursive;
letter-spacing: 0.01cm;
text-align: center;
}
#kalk4 {
border: 1px solid gray;
padding: 10px;
margin: 10px;
width: 45%;
background-color: aliceblue;
}
div#kalk4 h3 {
font-variant: small-caps;
font-family: cursive;
letter-spacing: 0.01cm;
text-align: center;
}