JSFiddle - React, Tailwind, and code Playground

by kajic

HTML

<div id="piece1"></div>

CSS

#piece1 {
    width:100px;
    height:100px;
    background:red;
    color:white;
}

JavaScript

// create the draggable puzzle piece
var p1=document.getElementById('piece1');

p1.className = 'ps1';

// create an array to count the pieces placed correctly
var countArray = new Array();

// create the dropspot, link it to the puzzle piece and add an element to the array to count. Finally kill the dropspot
$("#piece1").click(function(){
    countArray.push("a");
    
    // piece has been placed correctly.
    if (countArray.length == 1) {
        alert('Piece placed correctly');
    };
});