Muusika ankeedi loomine Konspekt
Konspekt HTML Kood
See kood loob automaatse täitmisega sisestusvälja raadiojaama valimiseks, mis muudab kasutajakogemuse mugavamaks ja kiiremaks. Kasutatakse HTML-i elementi datalist, mis võimaldab määrata eelnevalt kindlaksmääratud valikud. Kui kasutaja hakkab sisestama teksti, kuvab brauser automaatselt sobivad vasted, mis lihtsustab ja kiirendab õige valiku tegemist. Selline lahendus vähendab sisestusvigu ja teeb kasutajaliidese intuitiivsemaks, eriti kui valikuid on palju. Automaatse täitmise funktsioon on kasulik interaktiivsetes vormides, kus soovitakse pakkuda kasutajale mugavat ja visuaalselt arusaadavat valikute loetelu, ilma et peaks kogu nime käsitsi tippima.
<td>5. Milliseid raadiojaamu sa oskad nimetada?
<br><br>
<input list="stations" id="stat" name="stationNames" placeholder="Näiteks: Euroopa Plus" onchange="valiStat()">
<label for="stat"></label>
<datalist id="stations">
<option value="Europa+">
<option value="DFM">
<option value="Meie Raadio">
<option value="Maximum">
<option value="Raadio Rekord">
</datalist>
</td>Konspekt JavaScript Kood
Funktsioon valiVastus kontrollib, millise raadionupu kasutaja on valinud – kas “jah” või “ei”. Selle põhjal määrab funktsioon, millist teavet kuvada vastuse elemendis, mille id on vastu4. Kui kasutaja valik on “jah”, kuvatakse vastav sõnum või teade, kui valik on “ei”, kuvatakse teine sõnum. Funktsioon sisaldab ka kontrolli selle kohta, kas kasutaja ei ole valinud ühtegi raadionuppu. Sellisel juhul kuvab see sõnumi “Palun valige vastus”, et suunata kasutajat tegema sobiv valik. See tagab, et kasutaja saab alati tagasisidet ja ei jäta vormi täitmata.
function valiVastus(){
let v4 = document.getElementById("vastu4");
let jah = document.getElementById("jah");
let ei = document.getElementById("ei");
if(jah.checked){
v4.innerHTML = jah.value;
}
else if(ei.checked){
v4.innerHTML = ei.value;
}
else{
v4.innerHTML = "Palun vali oma vastus!";
}
}Konspekt CSS Kood
Need CSS-stiilid muudavad nupud mugavaks ja kasutajasõbralikuks, pakkudes samal ajal ka esteetilist välimust. Nupud paigutatakse lehel selgelt ja ühtlaselt, et kasutajad leiaksid need kiiresti ja intuitiivselt. Lisaks parandavad stiilid nupu loetavust, suurendavad kontrasti tausta ja teksti vahel ning lisavad visuaalseid efekte, näiteks hiirega üle minnes muutuvat värvi või varju, mis teeb nupud interaktiivsemaks. Hästi kujundatud nupud aitavad kasutajatel täita vorme või navigeerida lehel mugavamalt ning loovad üldise professionaalse ja meeldiva kasutajakogemuse, mis soodustab veebilehe paremat kasutatavust ja esteetilist muljet.
.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;
}