Guess the number (mathesis assignment) - 8/2020 - CodePen: https://codepen.io/eimon9j6/pen/JjXWwWX

final-test-script.js

// Τα ερωτήματα 2 έως 7 θα απαντηθούν στο αρχείο αυτό

const newGuess = document.querySelector("#new-guess");
const message = document.querySelector("#message");
const lowHigh = document.querySelector("#low-high");
const checkButton = document.querySelector("#check");
const restartButton = document.querySelector("#restart");
const root = document.querySelector(":root");

const prev = document.querySelector("#prev");

// 2. να ορίσετε τους σχετικούς χειριστές συμβάντων
checkButton.addEventListener("click", checkGuess);
restartButton.addEventListener("click", restart);
newGuess.addEventListener("keyup", checkKey); 

let previousGuesses = [];
let theGuess;
window.onload = newRandom();
newGuess.focus();

let counter = 0;

function newRandom(){
/* 3. συνάρτηση που βρίσκει ένα τυχαίο αριθμό μεταξύ 1 και 100
 και τον εκχωρεί στη μεταβλητή theGuess */
    theGuess = Math.floor(Math.random()*100 + 1);
    //console.log(theGuess);
}

function checkKey(e){
/* 4. συνάρτηση που όταν ο χρήστης πατήσει <<enter>>
 να καλεί τη συνάρτηση που αποτελεί τον κεντρικό ελεγκτή του παιχνιδιού.
 */
    //console.log(e.code);
    if (e.code === "Enter"){
        checkGuess();
    }
}

function checkGuess(){
/* 5. Να ορίσετε συνάρτηση checkGuess η οποία καλείται είτε όταν ο χρήστης πατήσει <<enter>>
στο πεδίο "new-guess" είτε όταν πατήσει το πλήκτρο "check", η οποία είναι ο κεντρικός ελεγκτής,
καλεί τη συνάρτηση processGuess (η οποία αποφαίνεται για την ορθότητα του αριθμού) και κάνει
τις κατάλληλες ενέργειες για να μην μπορεί να εισάγει ο χρήστης νέο αριθμό ή να ανασταλεί η
λειτουργία του <<enter>>, εμφάνιση του πλήκτρου 'restart' και την εξαφάνιση του πλήκτρου 'check'
σε περίπτωση ολοκλήρωσης του παιχνιδιού. */
// Και το 6. εδώ.
    //processGuess(parseInt(newGuess.value));
    if (isNaN(parseInt(newGuess.value))){
        lowHigh.innerHTML = "ΑΡΙΘΜΟ ΕΙΠΑΜΕ";
        newGuess.value = "";
    } else if (parseInt(newGuess.value) == parseInt(theGuess)){
        lowHigh.innerHTML = "";
        message.innerHTML = "Εύρηκα!!";
        checkButton.style.visibility = "hidden";
        newGuess.removeEventListener("keyup", checkKey);
        counter += 1;
    } else {
        message.innerHTML = "";
        previousGuesses.push(parseInt(newGuess.value));
        if (parseInt(newGuess.value) > parseInt(theGuess)){
            lowHigh.innerHTML = "Κατέβα!";
        } else {
            lowHigh.innerHTML = "Ανέβα!"; 
        }
        newGuess.value = "";
        counter += 1;
    } 
    prev.innerHTML = "Προηγούμενες προσπάθειες: " + previousGuesses + "<br>" + "Συνολικά: " + counter;
}


//function processGuess(newValue){
 /* 6.  Να ορίσετε συνάρτηση processGuess(newValue) η οποία καλείται από τη συνάρτηση checkGuess,
 περιέχει τη λογική του παιχνιδιού, ελέγχει αν η τιμή του χρήστη είναι σωστή, ή αν το παιχνίδι έχει
 τελειώσει χωρίς ο χρήστης να έχει βρει τον αριθμό, και επιστρέφει αντίστοιχα την τιμή "win", ή "lost",
 δημιουργεί και εμφανίζει τα κατάλληλα μηνύματα, αλλάζοντας το χρώμα του στοιχείου μηνυμάτων.
 Όλα τα μηνύματα του προγράμματος εμανίζονται από την processGuess().
 Σε περίπτωση που το παιχνίδι δεν έχει ακόμα τελειώσει, η συνάρτηση μπορεί είτε να μην επιστρέφει κάποια ιδιαίτερη τιμή,
 είτε να επιστρέφει κάποια τιμή της επιλογής σας */
//}

function restart(){
/* 7. Να ορίσετε συνάρτηση restart η οποία καλείται όταν ο χρήστης πατήσει το πλήκτρο
'restart' και επανεκινεί τη διαδικασία */
    newGuess.addEventListener("keyup", checkKey); 
    newRandom();
    checkButton.style.visibility = "visible";
    newGuess.value = "";
    message.innerHTML = "";
    lowHigh.innerHTML = "";
    previousGuesses = [];
    prev.innerHTML = "";
    counter = 0;
}

final-test-style.css

:root {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    --btn-color: teal;   /* χρώμα πλήκτρων */
    --btn-text: whitesmoke;   /* χρώμα κειμένου πλήκτρων */
    --msg-win-color: rgb(0, 128, 32);  /* χρώμα μηνύματος επιτυχίας */
    --msg-wrong-color: crimson;  /* χρώμα μηνύματος αποτυχίας */
    --msg-text:floralwhite;  /* χρώμα κειμένου μηνύματος */
    --low-high-color: gray;  /* χρώμα ιστορικού προσπαθειών */
    background-image: url(https://media.npr.org/assets/img/2019/02/28/trh_luck_artwork_wide-f111267a9ffd5e35c3a4cbd67ff137a6448beb4d-s1400-c85.jpg);
    background-size: cover;
}

#new-guess {
    width: 5ch;
}

#message {
    background-color: var(--msg-win-color);
    color: var(--msg-text);
    font-size: 25px;
}

#low-high {
    background-color: var(--msg-wrong-color);
    color: var(--msg-text);
    font-size: 20px;
}

#new-guess {
    color: var(--btn-color);
}

#prev {
    color: var(--low-high-color);
}

/* 
8. Στο αρχείο stylesheet final-test-style.css να γίνουν οι κατάλληλες αλλαγές 
που αφορούν στα στοιχεία που εμφανίζονται στον χρήστη, προσπαθώντας να επιτύχετε 
το αποτέλεσμα που φαίνεται στην παρουσίαση. ιδιαίτερη αναφορά γίνεται ώστε το χρώμα 
να οριστεί με βάση τα χρώματα που ορίζονται από τις μεταβλητές CSS. */

final-test-template.html

<!DOCTYPE html>

<!-- 1. Δίνεται αρχείο final-test-template.html να γίνουν οι εξής αλλαγές:
 * ο τίτλος να είναι "μάντεψε έναν αριθμό"
 * το μέγεθος του text (κουτί εισαγωγής αριθμού) να είναι 5 χαρακτήρες
 * να συνδεθεί η σελίδα με τα εξωτερικά αρχεία final-test-style.css και 
 final-test-script.js τα οποία δίδονται και στα οποία θα πρέπει να γίνουν 
 αλλαγές όπως ορίζεται στα αρχεία αυτά.
 -->

<html lang="el">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- mine-->
    <style>
        header ,#instructions ,#guess , #mhnuma {
            text-align: center;
        }
    </style>
    <title>Μάντεψε έναν αριθμό</title>
    <link rel="stylesheet" href="final-test-style.css">

</head>
<body>
    <header>Παιχνίδι: μάντεψε τον αριθμό</header>
    <section id="instructions">
        Έχουμε διαλέξει ένα τυχαίο αριθμό μεταξύ 1 και 100. 
        Προσπάθησε να τον μαντέψεις σε 10 το πολύ προσπάθειες.<br>
        Κάθε φορά θα σού λέμε αν ο αριθμός που μάντεψες είναι μεγαλύτερος
        ή μικρότερος από τον σωστό αριθμό.
    </section>
    <section id="guess">
        <label for="new-guess">Μάντεψε: </label>
        <input type="text" name="new-guess" id="new-guess">
        <button id="check"> Έλεγχος </button>

    </section>
    <br>
    <section id=mhnuma>
        <div id="message">  </div>
        <div id="low-high"></div>
        <br>
        <button id= "restart"> Παίξε ξανά </button>
        <br>
        <div id="prev"></div>
    </section> 
    
    <script src="final-test-script.js"></script>

</body>
</html>