const container = document.querySelector(".container"),
      dropdown = document.getElementById("dropdownMenu"),
      infoText = container.querySelector(".info-text");

const dictionary = {
        "Αα": {
          "definition": "Αγελάδα",
          "image": "img/αγελάδα.jpg"
        },
        "Ββ": {
          "definition": "Βάτραχος",
          "image": "img/βάτραχος.jpg"
        },
        "Γγ": {
          "definition": "Γάτα",
          "image": "img/γάτα.jpg"
        },
        "Δδ": {
          "definition": "Δελφίνι",
          "image": "img/δελφίνι.jpg"
        },
        "Εε": {
          "definition": "Ελέφαντας",
          "image": "img/ελέφαντας.jpg"
        },
        "Ζζ": {
          "definition": "Ζέβρα",
          "image": "img/ζέβρα.jpg"
        },
        "Ηη": {
          "definition": "Ήλιος",
          "image": "img/ήλιος.jpg"
        },
        "Θθ": {
          "definition": "Θάλασσα",
          "image": "img/θάλασσα.jpg"
        },
        "Ιι": {
          "definition": "Ιπποπόταμος",
          "image": "img/ιπποπόταμος.jpg"
        },
        "Κκ": {
          "definition": "Καμηλοπάρδαλη",
          "image": "img/καμηλοπάρδαλη.jpg"
        },
        "Λλ": {
          "definition": "Λιοντάρι",
          "image": "img/λιοντάρι.jpg"
        },
        "Μμ": {
          "definition": "Μέλισσα",
          "image": "img/μέλισσα.jpg"
        },
        "Νν": {
          "definition": "Νυχτερίδα",
          "image": "img/νυχτερίδα.jpg"
        },
        "Ξξ": {
          "definition": "Ξιφίας",
          "image": "img/ξιφίας.jpg"
        },
        "Οο": {
          "definition": "Ομπρέλα",
          "image": "img/ομπρέλα.jpg"
        },
        "Ππ": {
          "definition": "Παπί",
          "image": "img/παπί.jpg"
        },
        "Ρρ": {
          "definition": "Ρινόκερος",
          "image": "img/ρινόκερος.jpg"
        },
        "Σσ": {
          "definition": "Σκύλος",
          "image": "img/σκύλος.jpg"
        },
        "Ττ": {
          "definition": "Τίγρης",
          "image": "img/τίγρης.jpg"
        },
        "Υυ": {
          "definition": "Ύαινα",
          "image": "img/ύαινα.jpg"
        },        
        "Φφ": {
          "definition": "Φώκια",
          "image": "img/φώκια.jpg"
        },
        "Χχ": {
          "definition": "Χελώνα",
          "image": "img/χελώνα.jpg"
        },
        "Ψψ": {
          "definition": "Ψάρι",
          "image": "img/ψάρι.jpg"
        },
        "Ωω": {
          "definition": "Ώρα",
          "image": "img/ώρα.jpg"
        }
      };

function search() {
    container.classList.remove("active");
   infoText.style.color = "#000";

    var word = dropdown.options[dropdown.selectedIndex].text;

    infoText.innerHTML = `Αναζήτηση του γράμματος <span>"${word}"</span>`;

    if (!dictionary[word]) {
        infoText.innerHTML = ``
    }
    else {
        container.classList.add("active");    
        document.querySelector('.meaning p').textContent = 'Μια λέξη από το γράμμα ' + word.substring(0,1)
        document.querySelector(".meaning span").innerText = dictionary[word].definition;
        document.querySelector(".wimage img").src = dictionary[word].image;
        document.querySelector(".wimage img").alt = word;
    }
}
