JS:Creating a music questionnaire

Konspekt HTML code

This code creates an autocomplete input field for selecting a radio station. The datalist element is used so that the user can predefine the options. When the user enters text, the matching options are displayed.

<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>

JavaScript Code Summary

The selectAnswer function checks which radio button the user selected, yes or no.

Depending on the selection, it displays the answer in the answer4 element.

If the user did not select anything, the function displays the message Please select an answer.

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!";
    }
}

CSS Code Summary

These styles make buttons convenient, attractive, and well-placed on the page.

.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;
}

Minu veebileht

Music Survey

1. Which musicians/bands do you know?
2. What do you think about listening to music at school?
3. How many hours a day do you listen to music?
4. Do you listen to the radio?
5. Which radio stations can you name?
6. What type of music do you listen to most often?