Припрема за тест из JS-а

Задатак 1. Дате су 3 слике и 3 mp3 фајла. Постави три слике једну поред друге, ширина 200px, радијус оквира 50%. Када се пређе мишем преко прве слике чује се први mp3 фајл, када се склони миш са прве слике предстаје звук. Исто важи за другу и трећу слику.

Решење HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kontrolni 1</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <img class="slike" id="slika1" onmouseover="pusti(id)" onmouseout="stani(id)" src="./images/slika1.jpg">
    <img class="slike" id="slika2" onmouseover="pusti(id)" onmouseout="stani(id)" src="./images/slika2.jpg">
    <img class="slike" id="slika3" onmouseover="pusti(id)" onmouseout="stani(id)" src="./images/slika3.jpg">
    <audio src="./sounds/zvuk1.mp3" id="zvuk1"></audio>
    <audio src="./sounds/zvuk2.mp3" id="zvuk2"></audio>
    <audio src="./sounds/zvuk3.mp3" id="zvuk3"></audio>
    <script src="script.js"></script>
</body>
</html>

Решење CSS:

.slike {
    width: 200px;
    border-radius: 50%;
}

Решење JS:

let z1 = document.getElementById('zvuk1');
let z2 = document.getElementById('zvuk2');
let z3 = document.getElementById('zvuk3');

function pusti(id) {
    switch (id) {
        case 'slika1': z1.play(); break;
        case 'slika2': z2.play(); break;
        case 'slika3': z3.play(); break;
    }
}

function stani(id) {
    switch(id) {
        case 'slika1': z1.pause(); break;
        case 'slika2': z2.pause(); break;
        case 'slika3': z3.pause(); break;  
    }
}

Задатак 2. Дате су 3 слике. Постави три слике једну поред друге, ширина 200px, радијус оквира 50%. Испод постави прву слику ширине 640px. Када се кликне на прву слику, испод се приказује прва слика, када се кликне на другу слику, испод се приказује друга итд…

Решење HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kontrolni 2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <img class="mala" src="images/slika1.jpg" onclick="prikaz(1)" />
    <img class="mala" src="images/slika2.jpg" onclick="prikaz(2)" />
    <img class="mala" src="images/slika3.jpg" onclick="prikaz(3)" />
    <br>
    <img src="images/slika1.jpg" id="slika" class="velika" />
    <script src="script.js"></script>
</body>
</html>

Решење CSS:

.mala {
    width: 200px;
    border-radius: 50%;
}

.velika {
    width: 640px;
}

Решење JS:

let slike = ['images/slika1.jpg', 'images/slika2.jpg', 'images/slika3.jpg'];
let slika = document.querySelector('#slika');

function prikaz(i){
    slika.src = slike[i-1];
}

Задатак 3. Дате су 3 слике. Постави три слике једну поред друге, ширина 200px, радијус оквира 50%. Испод постави први текст: “ОВО ЈЕ ПРВИ ТЕКСТ”. Кликом на прву слику исписује се “ОВО ЈЕ ПРВИ ТЕКСТ”, кликом другу исписује се “ОВО ЈЕ ДРУГИ ТЕКСТ” итд.

Решење HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kontrolni 3</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <img class="mala" src="images/slika1.jpg" onclick="prikaz(0)" />
    <img class="mala" src="images/slika2.jpg" onclick="prikaz(1)" />
    <img class="mala" src="images/slika3.jpg" onclick="prikaz(2)" />
    <br>
    <p id="tekst" >OVO JE PRVI TEKST</p>
    <script src="script.js"></script>
</body>
</html>

Решење CSS:

.mala {
    width: 200px;
    border-radius: 50%;
}

Решење JS:

let tekstovi = ['OVO JE PRVI TEKST', 'OVO JE DRUGI TEKST', 'OVO JE TRECI TEKST'];
let tekst = document.querySelector('#tekst');

function prikaz(i){
    tekst.innerHTML = tekstovi[i];
}