Martin Rossakov portfoolio

    et   ru_RU   

JS: Muusika ankeedi loomine

Muusika Küsimustik

Milliseid muusikuid/ansambleid sa tead?
Mida arvad muusika kuulamisest koolis?
Mitu tundi päevas sa kuulad muusikat?
Kas sa kuulad raadiot?
Milliseid raadiojaamu oskad nimetada?
Millist muusikat sa kõige rohkem kuulad?

Funktsioonide selgitus JavaScript :

1)Funktsioon valimuusikuid() – Valib kõik märgitud artistide checkbox (Drake, Travis, Carti, Uzi, Future). Seejärel kuvab tekstina, millised artistid valiti, lisades teksti
Sa tead, et – 

// checkbox
function valimuusikuid() {
    let v1 = document.getElementById("v1");
    let drake = document.getElementById("drake");
    let travis = document.getElementById("travis");
    let carti = document.getElementById("carti");
    let uzi = document.getElementById("uzi");
    let future = document.getElementById("future");

    let valik = "";
    if (drake.checked) {
        valik += drake.value + ", ";
    }
    if (travis.checked) {
        valik += travis.value + ", ";
    }
    if (carti.checked) {
        valik += carti.value + ", ";
    }
    if (uzi.checked) {
        valik += uzi.value + ", ";
    }
    if (future.checked) {
        valik += future.value + ", ";
    }
    v1.innerText = "Sa tead - " + valik;
}

2)Funktsioon arvamusLugemine() – Võtab textarea sisendi id “arvamus”, loeb selle väärtuse ja kuvab selle elemendis “v2” tekstina eesliitega
Sa mõtled muusika kuulamisest –

// textarea
function arvamusLugemine(){
    let arvamus = document.getElementById("arvamus");
    let v2 = document.getElementById("v2");
    v2.innerText ="Sa mõtled muusika kuulamisest -" + arvamus.value;
}

3)Funktsioon tunnidLugemine() – Loeb number välja “tunnid” väärtuse ja kuvab selle elemendis “v3” tekstina
Sa kuulad muusikat päevas : + sisestatud number

// number
function tunnidLugemine() {
    let tunnid = document.getElementById("tunnid");
    let v3 = document.getElementById("v3");
    v3.innerText = "Sa kuulad muusikat päevas : " + tunnid.value;
}

4)Funktsioon raadioLugemine() – Kontrollib, kas radio-nupp “ja” või “ei” on valitud. Kui “ja”, kuvab selle väärtuse, kui “ei”, siis tema väärtuse. Kui kumbki pole valitud, kuvab “Palun vali !”. Tekst pannakse elemendi “v4” sisse.

// radio
function raadioLugemine() {
    let v4 = document.getElementById("v4");
    let ja = document.getElementById("ja");
    let ei = document.getElementById("ei");

    if (ja.checked) {
        v4.innerText = ja.value;
    } else if (ei.checked) {
        v4.innerText = ei.value;
    } else {
        v4.innerText = "Palun vali !";
    }
}

5)Funktsioon jaamadLugemine() – Loeb tekstisisendi “jaamad” väärtuse ja kuvab selle elemendis “v5” eesliitega
Sa tead – 

// text
function jaamadLugemine() {
    let jaamad = document.getElementById("jaamad");
    let v5 = document.getElementById("v5");
    v5.innerText = "Sa tead - " + jaamad.value;
}

6)Funktsioon stiilLugemine() – Loeb valiku (select) “muusikastiil” väärtuse ja kuvab selle elemendis “v6” eesliitega
Sa kuulad – 

// select - muusikastiil
function stiilLugemine() {
    let stiil = document.getElementById("muusikastiil");
    let v6 = document.getElementById("v6");
    v6.innerText = "Sa kuulad: " + stiil.value;
}

7)Funktsioon puhasta() – Lähtestab kõik kontrollid ja sisendid: eemaldab kõik checkbox valikud, tühjendab tekstiväljad, number- ja select välja ning tühjendab kõik väljundid “v1”-st kuni “v6”-ni

// puhasta
function puhasta() {
    let v1 = document.getElementById("v1");
    let v2 = document.getElementById("v2");
    let v3 = document.getElementById("v3");
    let v4 = document.getElementById("v4");
    let v5 = document.getElementById("v5");
    let v6 = document.getElementById("v6");

    let arvamus = document.getElementById("arvamus");
    let tunnid = document.getElementById("tunnid");
    let jaamad = document.getElementById("jaamad");
    let muusikastiil = document.getElementById("muusikastiil");

    document.getElementById("drake").checked = false;
    document.getElementById("travis").checked = false;
    document.getElementById("carti").checked = false;
    document.getElementById("uzi").checked = false;
    document.getElementById("future").checked = false;

    arvamus.value = "";
    tunnid.value = "";
    jaamad.value = "";
    muusikastiil.selectedIndex = 0;

    v1.innerText = "";
    v2.innerText = "";
    v3.innerText = "";
    v4.innerText = "";
    v5.innerText = "";
    v6.innerText = "";
}

Funktsioonide selgitus CSS :

1)body – muudab kogu lehe kirja „Times New Roman”, serif

body {
    font-family: "Times New Roman", serif;
}

2)h1 – esimese taseme pealkiri ; kirjasuurus — 30px ; teksti joondamine — vasaku serva järgi ; sisemine täitemarginaal (padding) — 50px kõikidelt külgedelt

h1 {
    font-size: 30px;
    text-align: left;
    padding: 50px;
}

3)label – vormide märgised ; tehakse plokielemendiks (display: block), et iga märgis oleks oma real ; ehakse font paksuks (font-weight: bold) ; 

label {
    display: block;
    font-weight: bold;
}

4)input[type=’radio’], input[type=’checkbox’] – radio ; checkbox ; lisavad väikese parempoolse taandi (5px) ; muudavad kursori osutajaks, kui hiir on selle peal (cursor: pointer), et näidata, et elemendil on võimalik klõpsata

input[type='radio'], input[type='checkbox'] {
    margin-right: 5px;
    cursor: pointer;
}

5)input[type=’radio’] input[type=’checkbox’] + label – stiilid märkidele, mis järgnevad kohe raadio ja checkbox ; kirjasuuruse 30px ; lisavad sisemise täite 5px ; valikukastide jaoks on märgile lisaks märgitud cursor: pointer 

input[type='radio'] + label {
    font-size: 30px;
    padding: 5px;
}

input[type='checkbox'] + label {
    font-size: 30px;
    padding: 5px;
    cursor: pointer;
}

6)input[type=text], input[type=reset], input[type=button], input[type=number], textarea, select – stiilid kõigi ülejäänud vormielementide jaoks ; sisemine tahe 8px ; nurkade ümardamine 5px ; piir 1px pidev värv lightslategray ; kirjasuuruse 16px ; kirjasuurus pärineb vanemalt (font-family: inherit) ;

input[type=text], input[type=reset], input[type=button], input[type=number], textarea, select {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid lightslategray;
    font-size: 16px;
    font-family: inherit;
}

7)table – eemaldab kahekordsed piirid lahtrite vahel (border-collapse: collapse) ; lisab tabeli ümber 1px musta värvi piiri ; tabeli laius on 80% ; fikseeritud veergude paigutus (table-layout: fixed)

table {
    border-collapse: collapse;
    border: 1px solid black;
    width: 50%;
    table-layout: fixed;
}

8)td – tabelite lahtrid ; sisemine tahe 10px ; piir 1px pidev must ; sisu vertikaalne joondamine – ülevalt vertical-align: top

td {
    padding: 10px;
    border: 1px solid black;
    vertical-align: top;
}

Funktsioonide selgitus HTML :

Tabelis olev sisu :

1)valikukast checkbox, Milliseid muusikuid/ansambleid sa tead?

2)tekstiväli textarea arvamuse jaoks, Mida arvad muusika kuulamisest koolis?

3)valige number, et märkida, mitu tundi päevas te muusikat kuulate?

4)valik raadio, et näidata, kas te kuulate raadiot?

5)tekstiväli või text, et sinna kirjutada mulle teadaolevad raadiojaamad?

6)loend option value, millest valida, milliseid muusikastiile sa kõige rohkem kuulad?

Kõik html kood : 

<!DOCTYPE html>
<html lang="et">
<head>
  <meta charset="UTF-8">
  <title>Muusika Küsimustik</title>
  <link rel="stylesheet" href="music.css">
  <script defer src="Muusika.js"></script>
</head>
<body>
<h1>Muusika Küsimustik</h1>
<form id="muusikaVorm">
  <table>
    <tr>
      <td>
        Milliseid muusikuid/ansambleid sa tead?<br>
        <label><input type="checkbox" name="artist" id="drake" value="Drake" onchange="valimuusikuid()">Drake</label><br>
        <label><input type="checkbox" name="artist" id="travis" value="Travis Scott" onchange="valimuusikuid()">Travis Scott</label><br>
        <label><input type="checkbox" name="artist" id="carti" value="Playboy Carti" onchange="valimuusikuid()">Playboy Carti</label><br>
        <label><input type="checkbox" name="artist" id="uzi" value="Lil Uzi Vert" onchange="valimuusikuid()">Lil Uzi Vert</label><br>
        <label><input type="checkbox" name="artist" id="future" value="Future" onchange="valimuusikuid()">Future</label>
      </td>
      <td><div id="v1"></div></td>
    </tr>

    <tr>
      <td>
        Mida arvad muusika kuulamisest koolis?<br>
        <textarea id="arvamus" rows="3" cols="40" oninput="arvamusLugemine()"></textarea>
      </td>
      <td><div id="v2"></div></td>
    </tr>

    <tr>
      <td>
        Mitu tundi päevas sa kuulad muusikat?<br>
        <input type="number" id="tunnid" min="1" max="24" onchange="tunnidLugemine()">
      </td>
      <td><div id="v3"></div></td>
    </tr>

    <tr>
      <td>
        Kas sa kuulad raadiot?<br>
        <label><input type="radio" name="raadio" value="Ja" id="ja" onchange="raadioLugemine()">Jah</label>
        <label><input type="radio" name="raadio" value="Ei" id="ei" onchange="raadioLugemine()">Ei</label>
      </td>
      <td><div id="v4"></div></td>
    </tr>

    <tr>
      <td>
        Milliseid raadiojaamu oskad nimetada?<br>
        <input type="text" id="jaamad" oninput="jaamadLugemine()">
      </td>
      <td><div id="v5"></div></td>
    </tr>

    <tr>
      <td>
        Millist muusikat sa kõige rohkem kuulad?<br>
        <select id="muusikastiil" onchange="stiilLugemine()">
          <option value="Pop">Pop</option>
          <option value="Räpp">Räpp</option>
          <option value="Rock">Rock</option>
          <option value="Elektrooniline">Elektrooniline</option>
          <option value="Jazz">Jazz</option>
          <option value="Klassikaline">Klassikaline</option>
        </select>
      </td>
      <td><div id="v6"></div></td>
    </tr>
  </table>
  <br>
  <button type="button">Saada</button>
  <button type="button" onclick="puhasta()">Puhasta</button>
</form>
</body>
</html>