How to make a counter for a mini game?

Question

I was wanting to make a game for my mini-web project and i came across these codes to help me make a game, the objective of this game is to match the correct picture to the correct placement( in this case North, Center, South). i got the validation working, i was wondering if it was possible to create like a prompt box when the last picture is dropped into the correct box. In addition i also have a timer, i was wondering if it was possible to print the time on the prompt when the user completes the game. I am only allowed to use HTML, CSS and JavaScript Only.

 //Timer// var h1 = document.getElementsByTagName('h1')[0], start = document.getElementById('start'), stop = document.getElementById('stop'), clear = document.getElementById('clear'), seconds = 0, minutes = 0, hours = 0, t; function add() { seconds++; if (seconds >= 60) { seconds = 0; minutes++; if (minutes >= 60) { minutes = 0; hours++; } } h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds); timer(); } function timer() { t = setTimeout(add, 1000); } timer(); //End of Timer// //Start Game// // add event handler var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { if (el && el.nodeName || el === window) { el.addEventListener(type, fn, false); } else if (el && el.length) { for (var i = 0; i < el.length; i++) { addEvent(el[i], type, fn); } } }; } else { return function (el, type, fn) { if (el && el.nodeName || el === window) { el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); } else if (el && el.length) { for (var i = 0; i < el.length; i++) { addEvent(el[i], type, fn); } } }; } })(); // inner variables var dragItems; updateDataTransfer(); var dropAreas = document.querySelectorAll('[droppable=true]'); // preventDefault (stops the browser from redirecting off to the text) function cancel(e) { if (e.preventDefault) { e.preventDefault(); } return false; } // update event handlers function updateDataTransfer() { dragItems = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(dragItems[i], 'dragstart', function (event) { event.dataTransfer.setData('obj_id', this.id); return false; }); } } // dragover event handler addEvent(dropAreas, 'dragover', function (event) { if (event.preventDefault) event.preventDefault(); // little customization this.style.borderColor = "#fff"; return false; }); // dragleave event handler addEvent(dropAreas, 'dragleave', function (event) { if (event.preventDefault) event.preventDefault(); // little customization this.style.borderColor = "#ccc"; return false; }); // dragenter event handler addEvent(dropAreas, 'dragenter', cancel); // drop event handler addEvent(dropAreas, 'drop', function (event) { if (event.preventDefault) event.preventDefault(); // get dropped object var iObj = event.dataTransfer.getData('obj_id'); var oldObj = document.getElementById(iObj); // validate the placement of the image if(this.id !== oldObj.dataset.dropTo) { return false; } // get its image src var oldSrc = oldObj.childNodes[0].src; oldObj.className += 'hidden'; var oldThis = this; setTimeout(function() { oldObj.parentNode.removeChild(oldObj); // remove object from DOM // add similar object in another place oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /></a>'; // and update event handlers updateDataTransfer(); // little customization oldThis.style.borderColor = "#3e8bc6"; }, 500); return false; }); //End of Game// 

 /* Page layout styles */ *{ margin:0; padding:0; } .Game-border{ height:40px; width:100%; background-image:url('../../Media/Main/mbg2.png'); } /*Timer*/ .timer{ height:auto; width:25%; border-radius: 5px; border: 7px solid #3e8bc6; font-size:2.5em; letter-spacing:5px; text-align:center; margin:1% auto; padding:1.5% 2% 1.5% 2%; background-color:black; color:white; text-shadow: 0 0 5px yellow; } /*End-Timer*/ /* Photo Gallery styles */ .gallery { margin: 3% auto 4%; width: 840px; } .gallery a { display: inline-block; height: 135px; margin: 10px; opacity: 1; position: relative; width: 180px; height:135px; -khtml-user-drag: element; /* CSS3 Prevent selections */ -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; /* CSS3 transition rules */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .gallery a img { border: 8px solid #fff; border-bottom: 20px solid #fff; cursor: pointer; display: block; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 1; /* CSS3 Box sizing property */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; /* CSS3 transition rules */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; /* CSS3 Box Shadow */ -moz-box-shadow: 2px 2px 4px #444; -webkit-box-shadow: 2px 2px 4px #444; -o-box-shadow: 2px 2px 4px #444; box-shadow: 2px 2px 4px #444; } /* Custom CSS3 rotate transformation */ .gallery a:nth-child(1) img { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .gallery a:nth-child(2) img { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .gallery a:nth-child(3) img { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .gallery a:nth-child(4) img { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .gallery a:nth-child(5) img { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } .gallery a:nth-child(6) img { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } .gallery a:nth-child(7) img { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } .gallery a:nth-child(8) img { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } .gallery a:nth-child(9) img { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .gallery a:nth-child(10) img { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .gallery a:nth-child(11) img { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .gallery a:nth-child(12) img { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .gallery a:hover img { z-index: 5; /* CSS3 transition rules */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; /* CSS3 transform rules */ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .gallery a.hidden { height: 0; margin: 0; opacity: 0; width: 0; } .albums { margin: 40px auto 0; overflow: hidden; width: 840px; } .album { text-align:center; border: 3px dashed #64a2d1; font-size:1.2em; float: left; margin: 10px; min-height: 100px; padding: 10px; width: 220px; color:white; text-shadow: 0 0 2px yellow; /* CSS3 transition rules */ -webkit-transition: all 1.0s ease; -moz-transition: all 1.0s ease; -o-transition: all 1.0s ease; transition: all 1.0s ease; } .album a { display: inline-block; height: 56px; margin: 15px; opacity: 1; position: relative; width: 75px; -khtml-user-drag: element; -webkit-user-drag: element; -khtml-user-select: none; -webkit-user-select: none; /* CSS3 Prevent selections */ -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; /* CSS3 transition rules */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .album a img { border: 4px solid #fff; border-bottom: 10px solid #fff; cursor: pointer; display: block; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 1; /* CSS3 Box sizing property */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; /* CSS3 transition rules */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; /* CSS3 Box Shadow */ -moz-box-shadow: 2px 2px 4px #444; -webkit-box-shadow: 2px 2px 4px #444; -o-box-shadow: 2px 2px 4px #444; box-shadow: 2px 2px 4px #444; } 

 <article class="timer"> <h1 class="realtimer"><time>00:00:00</time></h1> </article> <!-- End-Timer --> <div class="albums"> <div class="album" id="drop_1" droppable="true"><h2>North</h2></div> <div class="album" id="drop_2" droppable="true"><h2>Centre</h2></div> <div class="album" id="drop_3" droppable="true"><h2>South<h2></div> </div> <div style="clear:both"></div> <div class="gallery"> <a id="1" draggable="true" data-drop-to="drop_1"><img src="../Media/Game/1.jpg"></a> <a id="2" draggable="true" data-drop-to="drop_3"><img src="../Media/Game/2.jpg"></a> <a id="3" draggable="true" data-drop-to="drop_3"><img src="../Media/Game/3.jpg"></a> <a id="4" draggable="true" data-drop-to="drop_1"><img src="../Media/Game/4.jpg"></a> <a id="5" draggable="true" data-drop-to="drop_2"><img src="../Media/Game/5.jpg"></a> <a id="6" draggable="true" data-drop-to="drop_2"><img src="../Media/Game/6.jpg"></a> <a id="7" draggable="true" data-drop-to="drop_1"><img src="../Media/Game/7.jpg"></a> <a id="8" draggable="true"data-drop-to="drop_3"><img src="../Media/Game/8.jpg"></a> <a id="9" draggable="true" data-drop-to="drop_1"><img src="../Media/Game/9.jpg"></a> <a id="10" draggable="true" data-drop-to="drop_2"><img src="../Media/Game/10.jpg"></a> <a id="11" draggable="true" data-drop-to="drop_1"><img src="../Media/Game/11.jpg"></a> <a id="12" draggable="true" data-drop-to="drop_3"><img src="../Media/Game/12.jpg"></a> </div> 

Answer 1

Try updating the part below:

// drop event handler
addEvent(dropAreas, 'drop', function (event) {
    if (event.preventDefault) event.preventDefault();

    // get dropped object
    var iObj = event.dataTransfer.getData('obj_id');
    var oldObj = document.getElementById(iObj);

    // validate the placement of the image
    if(this.id !== oldObj.dataset.dropTo) {
        return false;
    }
    // get its image src
    var oldSrc = oldObj.childNodes[0].src;
    oldObj.className += 'hidden';

    var oldThis = this;

    setTimeout(function() {
        oldObj.parentNode.removeChild(oldObj); // remove object from DOM

        // add similar object in another place
        oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /></a>';

        // and update event handlers
        updateDataTransfer();

        // little customization
        oldThis.style.borderColor = "#3e8bc6";

    if (document.querySelectorAll('.gallery > a').length < 1) {
        alert('Congratulations!\nTime elapsed:' + hours + ':' + minutes + ':' + seconds);
    }
    }, 500);
    return false;
});

I added the code below for the prompt (customize as you please) on the drop event, after the DOM element is replaced.

if (document.querySelectorAll('.gallery > a').length < 1) {
        alert('Congratulations!\nTime elapsed:' + hours + ':' + minutes + ':' + seconds);
    }

Working Fiddle here .