JSFiddle - React, Tailwind, and code Playground

by vaff

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>JavaScript Test</title>
    <style>
        h1, dl, #count, #result  { width:400px; margin:10px auto; }
        h1                       { font-size:24px; margin-bottom:0px; margin-top:20px; }
        #count                   { font-size:14px; margin-bottom:20px; margin-top:0px; }
        #result                  { margin-top:20px; }
        #success                 { display:none; }
        
        .wrong                   { color:red; }
        .old                     { color:#aaa; }        
        .correct                 { color:green; }

    </style>
</head>
<body>
    <h1>JavaScript Test</h1>
    <p id="count"></p>
    <dl>
        <dt id="q">
            <p></p>
        </dt>
        <dd id="a">
            <input type="text" name="answerfield" placeholder="Indtast dit svar her!">
            <button type="submit">Svar</button>
        </dd>
    </dl>
    <div id="result">
        <p></p>
        <button id="success">Næste spørgsmål</button>
    </div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
    (function($){
        var result,
            guesses = [],
            $question = $("#q").find("p"),
            $answerFld = $("#a").find("input[type=text]"),
            $answerBtn = $("#a").find("button"),
            $countFld = $("#count"),
            $continueBtn = $("#success").hide(),
            $resultFld = $("#result").find("p").hide(),
    
            $questions = [{q: "What do you need to write to initiate a new array in JavaScript?",
                           a: "[]"},
                          {q: "What is the name of the global element for the browser window?",
                           a: "window"},
                          {q: "Which variable type in JavaScript contains text and characters?",
                           a: "strings"} 
                         ],
            
            init = function() {
 ...