JSFiddle - React, Tailwind, and code Playground
HTML
<div id="div_01" class="blinkDivs"></div>
<div id="div_02" class="blinkDivs"></div>
<div id="div_03" class="blinkDivs"></div>
CSS
.blinkDivs {
background-color: white;
border: 3px solid black;
border-radius: 40px;
height: 50px;
width: 50px;
margin-bottom: 1px;
}
.blinkDivs:hover {
cursor: pointer;
}
JavaScript
var OAHelper = new ObjectArrayHelper();
var taskList = new Array();
$(".blinkDivs").click(function() {
var ElementID = $(this).attr("id");
console.log(ElementID);
//ElementID is NOT in array
if (!OAHelper.checkIfObjectExists(taskList, "id", ElementID)) {
var task = new Task(ElementID);
var newTask = { id: ElementID, task: task};
taskList.push(newTask);
var t = OAHelper.getValue(taskList, "task", "id", ElementID);
if (t !== false) {
t.blink();
}
}
});
function Task(ElementID)
{
var self = this;
self.id = ElementID;
self.interval = null;
self.limiter = 0;
self.toggle = 0;
self.$jqElement = $("#" + self.id);
this.blink = function()
{
self.limiter = 0;
self.interval = setInterval(function() {
if (self.toggle == 0) {
self.$jqElement.css("background-color", "blue");
self.toggle = 1;
} else {
self.$jqElement.css("background-color", "white");
self.toggle = 0;
}
if (self.limiter > 4) {
OAHelper.deleteObject(taskList, "id", self.id);
clearInterval(self.interval);
}
self.limiter++;
}, 400);
}
}
/**
* This class provides helper functions to do operations on object arrays
*
* functions:
*
* delete objects,
* output objects,
* change value of specific key,
* check if specific object exists,
* check if specific object has specific key value pair
*
* Autor: Eduard Fekete
* @constructor
*/
function ObjectArrayHelper()
{
/**
* Runs through all objects of an object array and searches for a record with specific identity.
*
* Return Values:
* true if record exists
* false if record does not exist
*
* Autor: Eduard Fekete
*
* @param pObjectArray Array of objects
* @param pIdentifier Identifier Key of the object
...