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

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

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"); 
          const content = document.getElementById('content');   
          content.innerHTML = "";
          keys = Object.keys(dictionary);

          const len = dictionary[word]['meaning'].length;
          const with_num = len > 1; 
          for (var k = 0; k < len; k++) {
                  mean_example(dictionary[word], k, 'meaning', 'Τι σημαίνει;', with_num);
                  mean_example(dictionary[word], k, 'example', 'Παράδειγμα', with_num);
          }
          if (dictionary[word]['image'].length > 0) {
              const newLi = document.createElement('li');
              newLi.setAttribute('class', 'wimage');
    
              const newDiv = document.createElement('div');
              newDiv.setAttribute('class', 'details image');
    
              const newImg = document.createElement('img');
              newImg.setAttribute('src', dictionary[word]['image']);
              newImg.setAttribute('alt', word);
    
              newDiv.appendChild(newImg);
              newLi.appendChild(newDiv);
              content.appendChild(newLi);
          }      
     }
}

function mean_example(word, k, clss, str, with_num) {
    const newLi = document.createElement('li');
    newLi.setAttribute('class', clss);

    const newDiv = document.createElement('div');
    newDiv.setAttribute('class', 'details');

    const newP = document.createElement('p');
    const newSpan = document.createElement('span');

    const num = (with_num) ? String(k+1) : "";
    newP.textContent = str + " " + num;
    newSpan.textContent = word[clss][k];

    newDiv.appendChild(newP);
    newDiv.appendChild(newSpan);

    newLi.appendChild(newDiv);
    content.appendChild(newLi);
}