JSFiddle - React, Tailwind, and code Playground

by aslancods

HTML

<title>Cookies!</title>
<body>
     <h1>Cookie Maker</h1>

    <form id="data">
        <ol>
            <li>What kind of cookie are you making?
                <br>
                <label for="name">Name:</label>
                <input id="kind" type="text" id="name" size="20" placeholder="My Amazing Box ..">
            </li>
            <li>How many cookies do you want to make?
                <br>
                <input type="radio" id="five" name="amount" value="5">
                <label for="five">5</label>
                <br>
                <input type="radio" id="ten" name="amount" value="10">
                <label for="ten">10</label>
                <br>
            </li>
        </ol>
        <p>
            <input type="button" id="bakeCookies" value="Bake!">
            <input type="button" id="clearButton" value="Clear Pan">
        </p>
    </form>
    <div id="area"></div>
</body>

CSS

html, body {
    width: 100%;
    height: 90%;
    margin: 0px;
    padding: 0px;
    font-family: Garamond;
    background: linear-gradient(to bottom, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 50%, rgba(181, 198, 208, 1) 51%, rgba(224, 239, 249, 1) 100%);
    /* W3C */
}
input#generateButton {
    margin-left: 15px;
}
div#area {
    position: relative;
    width: 100%;
    height: 80%;
    margin: 0px;
    padding: 0px;
}
div.cookie {
    position: absolute;
    width: 130px;
    border-radius: 100px;
    height: 130px;
    padding-top: 10px;
    text-align: center;
    overflow: hidden;
    background-color: black;
    color: white;
}

JavaScript

var cookiesArray = [];
var counter = 0;
var totalCookies = 0;

function Cookie(elem,id, kind, x, y) {
    
    elem.id = id;
    elem.kind = kind;
    elem.x = x;
    elem.y = y;
    
    this.display = function () {
        alert("Cookie number: " + this.id + "; is a: " + this.kind + "; cookie : " +
            " and it is situated on coordinates ;  " + this.y + " and " + this.x + " on the cookie pan");
    }
}


function init() {
    var bakeButton = document.getElementById("bakeCookies");
    bakeButton.onclick = bake;

    var clearButton = document.getElementById("clearButton");
    clearButton.onclick = clear;

    var kindFocus = document.getElementById("kind");
    kindFocus.focus();
}


function bake() {

    var data = document.forms.data;
    var textInput = document.getElementById("kind");
    var kind = textInput.value;


    var amountArray = data.elements.amount;

    for (i = 0; i < amountArray.length; i++) {
        if (amountArray[i].checked) {
            totalCookies = amountArray[i].value;
            break;
        }
    }
    
    var area = document.getElementById("area");
    for (i = 0; i < totalCookies; i++) {
        counter++;
       
        //Create div element
        var aCookie = document.createElement("div");

        //Randomly position each <div> element
        var x = Math.floor(Math.random() * (area.offsetWidth - 101));
        var y = Math.floor(Math.random() * (area.offsetHeight - 101));

        var id = counter;

        aCookie.style.left = x + "px";
        aCookie.style.top = y + "px";

        aCookie.setAttribute("class", "cookie");

        area.appendChild(aCookie);
        aCookie.innerHTML = "This is <br> a(n) <br> " + name + " cookie <br />(click to open)";

        // create new cookie object via Cookie constructor
        var cookie = new Cookie(aCookie,id, kind, x, y);

        // push cookie object in CookiesArray
        cookiesArray.push(cookie);
        
        // when a cookie is clicked on screen,...