JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<div>
    <table>
        <tbody>
            <tr>
                <td>To whom it belongs?</td>
            </tr>
            <tr>
                <td>
                    <img src="#" alt="Tim's coat" width="100%"/>
                </td>
            </tr>
            <tr>
                <td class="answer-box">
                    <input type="text" class="field-answer" placeholder="Write it there!">
                    <button id="showresult" class="button-answer" value="Ok">OK</button>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="res" id="switch">Great job!</div>
                    <div class="res" id="switch2">Almost there...</div>
                    <div class="res" id="switch3">Try again!</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.res {
    display: none;
    color: white;
    font-weight: bold;
    text-align: center;
    background-color: #490058;
    height: 75px;
    max-width: 100%;
    line-height: 70px;
    font-size: 140%;
}

    .res.good {
        display: block;
    }

    .res.soso {
        display: block;
    }

    .res.non {
        display: block;
    }

    .answer-box {
        text-align: center;
    }

    .button-answer {
        border: none;
        background-color: #490058;
        color: white;
        font-size: 120%;
        font-weight: bold;
        padding: 8px;
        left: 260px;
    }

    .field-answer {
        text-align: center;
        border: none;
        border-bottom: 2px solid black;
        background-color: transparent;
        max-width: 230px;
        height: 40px;
        font-size: 20px;
        text-transform: uppercase;
        outline: 0;
    }

JavaScript

var artist = ["abba"];
    var almostartist = ["abaa", "aaba", "aabaa"];
		
    $("#showresult").click(function() {
        $('.res').hide()
		var text=$('.field-answer').val().toLowerCase()
		if(artist.indexOf(text) > -1){
			$('#switch').show()
			}
		else if(almostartist.indexOf(text) > -1){
			$('#switch2').show()
			}
		else{$('#switch3').show()}	
		
	})