{"id":669,"date":"2025-10-09T10:57:12","date_gmt":"2025-10-09T08:57:12","guid":{"rendered":"https:\/\/markjurgen24.thkit.ee\/wp\/?page_id=669"},"modified":"2025-11-13T17:11:18","modified_gmt":"2025-11-13T15:11:18","slug":"js-muusika-ankeedi-loomine","status":"publish","type":"page","link":"https:\/\/markjurgen24.thkit.ee\/wp\/js-muusika-ankeedi-loomine\/","title":{"rendered":"JS: Muusika ankeedi loomine"},"content":{"rendered":"\n

Muusika ankeedi loomine Konspekt<\/a><\/h2>\n\n\n\n

<\/p>\n\n\n\n

Konspekt HTML Kood<\/h2>\n\n\n\n

See kood loob automaatse t\u00e4itmisega sisestusv\u00e4lja raadiojaama valimiseks, mis muudab kasutajakogemuse mugavamaks ja kiiremaks. Kasutatakse HTML-i elementi datalist<\/code>, mis v\u00f5imaldab m\u00e4\u00e4rata eelnevalt kindlaksm\u00e4\u00e4ratud valikud. Kui kasutaja hakkab sisestama teksti, kuvab brauser automaatselt sobivad vasted, mis lihtsustab ja kiirendab \u00f5ige valiku tegemist. Selline lahendus v\u00e4hendab sisestusvigu ja teeb kasutajaliidese intuitiivsemaks, eriti kui valikuid on palju. Automaatse t\u00e4itmise funktsioon on kasulik interaktiivsetes vormides, kus soovitakse pakkuda kasutajale mugavat ja visuaalselt arusaadavat valikute loetelu, ilma et peaks kogu nime k\u00e4sitsi tippima.
<\/p>\n\n\n\n

<td>5. Milliseid raadiojaamu sa oskad nimetada?\n        <br><br>\n        <input list=\"stations\" id=\"stat\" name=\"stationNames\" placeholder=\"N\u00e4iteks: Euroopa Plus\" onchange=\"valiStat()\">\n        <label for=\"stat\"><\/label>\n        <datalist id=\"stations\">\n          <option value=\"Europa+\">\n          <option value=\"DFM\">\n          <option value=\"Meie Raadio\">\n          <option value=\"Maximum\">\n          <option value=\"Raadio Rekord\">\n        <\/datalist>\n      <\/td><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Konspekt JavaScript Kood<\/h2>\n\n\n\n
Funktsioon valiVastus<\/code> kontrollib, millise raadionupu kasutaja on valinud \u2013 kas \u201cjah\u201d v\u00f5i \u201cei\u201d. Selle p\u00f5hjal m\u00e4\u00e4rab funktsioon, millist teavet kuvada vastuse elemendis, mille id on vastu4<\/code>. Kui kasutaja valik on \u201cjah\u201d, kuvatakse vastav s\u00f5num v\u00f5i teade, kui valik on \u201cei\u201d, kuvatakse teine s\u00f5num. Funktsioon sisaldab ka kontrolli selle kohta, kas kasutaja ei ole valinud \u00fchtegi raadionuppu. Sellisel juhul kuvab see s\u00f5numi \u201cPalun valige vastus\u201d, et suunata kasutajat tegema sobiv valik. See tagab, et kasutaja saab alati tagasisidet ja ei j\u00e4ta vormi t\u00e4itmata.<\/p>\n\n\n\n
function valiVastus(){\n    let v4 = document.getElementById(\"vastu4\");\n    let jah = document.getElementById(\"jah\");\n    let ei = document.getElementById(\"ei\");\n\n    if(jah.checked){\n        v4.innerHTML = jah.value;\n    }\n    else if(ei.checked){\n        v4.innerHTML = ei.value;\n    }\n    else{\n        v4.innerHTML = \"Palun vali oma vastus!\";\n    }\n}<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Konspekt CSS Kood<\/h2>\n\n\n\n
Need CSS-stiilid muudavad nupud mugavaks ja kasutajas\u00f5bralikuks, pakkudes samal ajal ka esteetilist v\u00e4limust. Nupud paigutatakse lehel selgelt ja \u00fchtlaselt, et kasutajad leiaksid need kiiresti ja intuitiivselt. Lisaks parandavad stiilid nupu loetavust, suurendavad kontrasti tausta ja teksti vahel ning lisavad visuaalseid efekte, n\u00e4iteks hiirega \u00fcle minnes muutuvat v\u00e4rvi v\u00f5i varju, mis teeb nupud interaktiivsemaks. H\u00e4sti kujundatud nupud aitavad kasutajatel t\u00e4ita vorme v\u00f5i navigeerida lehel mugavamalt ning loovad \u00fcldise professionaalse ja meeldiva kasutajakogemuse, mis soodustab veebilehe paremat kasutatavust ja esteetilist muljet.<\/p>\n\n\n\n
.buttons {
    max-width: 800px;
    margin: 20px auto;
    text-align: center;
}

button {
    background-color: lightblue;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 8px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
}

<\/pre>\n\n\n\n
Minu veebileht<\/h2>\n\n\n\n
<\/p>\n\n\n\n
Muusika k\u00fcsitlus<\/h1>\n
\n  \n    \n      \n      
1. Milliseid muusikuid\/ansambleid sa tead? 
 
\n        \n        		\n        
<\/div>\n      <\/td>\n    <\/tr>\n\n    
2. Mida arvad muusika kuulamisest koolis? 

\n