JSFiddle - React, Tailwind, and code Playground

by gisheri

HTML

<body>
        <center>
            <h1>Mastermind</h1>
            <p>
                The computer has picked four letters, each of which is from the
                list: a, b, c, d, e, f. Note that duplicate letters are allowed.
                <br>
                You must guess the four letters in the correct order.
                <br>
                Each time you guess, the computer will tell you how many
                letters you got right, and how many letters you got right in
                the correct position.
            </p>
            <h2>Results from your most recent guess:</h2>
            <p>Correct letters:</p>
            <p id="correctletters">0</p>
            <p>Correct letters in correct positions:</p>
            <p id="fullycorrect">0</p>
            <p>Number of guesses so far:</p>
            <p id="guessessofar">0</p>
            <form id="gameform" method="post">
            <h2>Enter your guess here:</h2>
            <p>
                <input type="text" size="1" id="guess1" />
                <input type="text" size="1" id="guess2" />
                <input type="text" size="1" id="guess3" />
                <input type="text" size="1" id="guess4" />
            </p>
            <p>
                <input type="submit" value="Check your guess" />
            </p>
            </form>
        </center>
     </body>

JavaScript

var correct1 = 'a';
var correct2 = 'b';
var correct3 = 'c';
var correct4 = 'd';

var guess1 = document.getElementById('guess1');
var guess2 = document.getElementById('guess2');
var guess3 = document.getElementById('guess3');
var guess4 = document.getElementById('guess4');

console.log('hello');
var handler = function(){
    var score = 0;
    console.log('submitted');
    score += ((guess1 == correct1) ? 1 : 0);
    score += ((guess2 == correct2) ? 1 : 0);
    score += ((guess3 == correct3) ? 1 : 0);
    score += ((guess4 == correct4) ? 1 : 0);
    console.log(score);
}

var gameform = document.getElementById('gameform');
gameform.onsubmit = handler;