JS: Music form creation

  1. väike konspekt – mida iga üks koostab ise
  2. on vaja sisestada html/css/js koodi niimoodi et see töötaks WP

JS Funktsioonid

function muusikaTead() – funktsioon mis kasutatakse esimesel küsimusel, see kontrollib kõik checkbox väärtused, kas on märgitud või ei, ja siis kirjutab vastus

function koolArvamus() – teise küsimuste funktsioon, lihtsalt kontrollib teksti mis kasutaja kirjutas ja kirjutab selle vastusele

function tundidMuusika() – kolmanda küsimuste funktsioon, lihtsalt kontrollib mis number on valitud ja kirjutab vastus

function kuuladRaadiot() – neljanda küsimuste funktsioon, kontrollib kõik kolme radio buttoni väärtused ja selle põhjus kirjutab vastust

function radiojaamad() – viienda küsimuste funktsioon, lihtsalt kontrollib mis tekst kasutaja kirjutas ja kirjutab seda vastusele

function rohkemKuulad() – kuuenda küsimuste funktsioon, konrollib 6 radio buttonid ja kirjutab vastusele mis nupp on märgitud

function puhasta2() – võtab dokumendist element nimega ‘vorm’ ja siis teeb tsükkel mis võtab kõik child elemendid selle vormist, ja ka võtab kõik child elemendid nende elemendist, ja nii edasi kuni sellel pole child elemendid. Ja kõikedele elemendile puhastab nende sisu.

function kokku() – kokkuvõte funktsioon, mis kasutatakse kui Saada nupp on klikitud. Võtab kõik vastus elemendid lehelt ja kirjutab nende sisu ühe tekstiga kokkuvõtele.

Muusika Küsitlus

Milliseid muusikuid/ansambleid sa tead?


Kas sa kuulad raadiot?

Millist muusikat sa kõige rohkem kuulad?
function muusikaTead() { let check1 = document.getElementById(“checkbox1”); let check2 = document.getElementById(“checkbox2”); let check3 = document.getElementById(“checkbox3”); let check4 = document.getElementById(“checkbox4”); let vastus = document.getElementById(“vastus1”); let ans = “Sinu valitud muusikud: “; if (check1.checked) { ans += check1.value + “, “; } if (check2.checked) { ans += check2.value + “, “; } if (check3.checked) { ans += check3.value + “, “; } if (check4.checked) { ans += check4.value + “, “; } vastus.innerText = ans; } function koolArvamus() { let textarea = document.getElementById(“teine”); let vastus = document.getElementById(“vastus2”); vastus.innerText = “Sinu arvamus: ” + textarea.value; } function tundidMuusika() { let range = document.getElementById(“kolmas”); let vastus = document.getElementById(“vastus3”); vastus.innerText = “Sa kuulad muusikat ” + range.value + ” tundi päevas.”; } function kuuladRaadiot() { let jah = document.getElementById(“checkbox5”); let monikord = document.getElementById(“checkbox6”); let ei = document.getElementById(“checkbox7”); let vastus = document.getElementById(“vastus4”); if (jah.checked) { vastus.innerText = “Sa kuulad raadiot.”; } if (monikord.checked) { vastus.innerText = “Sa mõnikord kuulad raadiot.”; } if (ei.checked) { vastus.innerText = “Sa ei kuula raadiot.”; } } function radiojaamad() { let text = document.getElementById(“viies”); let vastus = document.getElementById(“vastus5”); vastus.innerText = “Sinu nimetatud jaamad: ” + text.value; } function rohkemKuulad() { let radio1 = document.getElementById(“radio1”); let radio2 = document.getElementById(“radio2”); let radio3 = document.getElementById(“radio3”); let radio4 = document.getElementById(“radio4”); let radio5 = document.getElementById(“radio5”); let radio6 = document.getElementById(“radio6”); let vastus = document.getElementById(“vastus6”); if (radio1.checked) { vastus.innerText = “Sinu vastus: ” + radio1.value; } if (radio2.checked) { vastus.innerText = “Sinu vastus: ” + radio2.value; } if (radio3.checked) { vastus.innerText = “Sinu vastus: ” + radio3.value; } if (radio4.checked) { vastus.innerText = “Sinu vastus: ” + radio4.value; } if (radio5.checked) { vastus.innerText = “Sinu vastus: ” + radio5.value; } if (radio6.checked) { vastus.innerText = “Sinu vastus: ” + radio6.value; } } function puhasta2() { let form = document.getElementById(“vorm”); function clearElement(element) { if (element.type === “text” || element.type === “password” || element.type === “email” || element.tagName === “TEXTAREA”) { element.value = “”; } else if (element.type === “radio” || element.type === “checkbox”) { element.checked = false; } else if (element.tagName === “SELECT”) { element.selectedIndex = -1; } if (element.id.indexOf(“vastus”) !== -1) { element.innerHTML = “”; } for (let child of element.children) { clearElement(child); } } for (let element of form.elements) { clearElement(element); } let vastus1 = document.getElementById(“vastus1”); let vastus2 = document.getElementById(“vastus2”); let vastus3 = document.getElementById(“vastus3”); let vastus4 = document.getElementById(“vastus4”); let vastus5 = document.getElementById(“vastus5”); let vastus6 = document.getElementById(“vastus6”); vastus1.innerText = “”; vastus2.innerText = “”; vastus3.innerText = “”; vastus4.innerText = “”; vastus5.innerText = “”; vastus6.innerText = “”; } function kokku() { let kokku = document.getElementById(“kokku”); let vastus1 = document.getElementById(“vastus1”); let vastus2 = document.getElementById(“vastus2”); let vastus3 = document.getElementById(“vastus3”); let vastus4 = document.getElementById(“vastus4”); let vastus5 = document.getElementById(“vastus5”); let vastus6 = document.getElementById(“vastus6”); let ans = “Kokkuvõte:
“; ans += vastus1.innerText + “
“; ans += vastus2.innerText + “
“; ans += vastus3.innerText + “
“; ans += vastus4.innerText + “
“; ans += vastus5.innerText + “
“; ans += vastus6.innerText + “
“; kokku.innerHTML = ans; } body { display: flex; justify-content: center; align-items: center; margin: 0; flex-direction: column; } form { max-width: 800px; width: 100%; } table, td, tr { border: 1px solid black; border-collapse: collapse; padding: 15px; } td { width: 300px; max-width: 100%; padding: 10px; text-align: center; } .question { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; width: 100%; transition: color 0.3s ease; font-size: 18px; } .question:hover { color: dodgerblue; } .checkboxes { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; } .checkbox-item { display: inline-flex; align-items: center; /* Align the checkbox and label properly */ transition: color 0.3s ease; } .checkbox-item:hover { color: goldenrod; } .checkbox-item input { margin-right: 5px; /* Space between checkbox and label */ } textarea { width: 100%; height: 100%; box-sizing: border-box; } input[type=”text”] { width: 100%; box-sizing: border-box; height: 40px; } input[type=”button”] { padding: 10px; border: none; border-radius: 10px; margin: 10px; background-color: dodgerblue; color: white; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } input[type=”button”]:hover { background-color: lightskyblue; } h2 { transition: color 0.5s ease; } h2:hover { animation: rainbow 2s linear infinite; } @keyframes rainbow { 0% { color: red; } 14% { color: orange; } 28% { color: yellow; } 42% { color: green; } 57% { color: blue; } 71% { color: indigo; } 85% { color: violet; } 100% { color: red; } }