diff --git a/buttons/1A.png b/buttons/1A.png
new file mode 100644
index 0000000..1314fb2
Binary files /dev/null and b/buttons/1A.png differ
diff --git a/buttons/1B.png b/buttons/1B.png
new file mode 100644
index 0000000..534a593
Binary files /dev/null and b/buttons/1B.png differ
diff --git a/buttons/2A.png b/buttons/2A.png
new file mode 100644
index 0000000..d3f7670
Binary files /dev/null and b/buttons/2A.png differ
diff --git a/buttons/2B.png b/buttons/2B.png
new file mode 100644
index 0000000..2afe8ab
Binary files /dev/null and b/buttons/2B.png differ
diff --git a/buttons/3A.png b/buttons/3A.png
new file mode 100644
index 0000000..afc3951
Binary files /dev/null and b/buttons/3A.png differ
diff --git a/buttons/3B.png b/buttons/3B.png
new file mode 100644
index 0000000..ce4acd2
Binary files /dev/null and b/buttons/3B.png differ
diff --git a/buttons/4A.png b/buttons/4A.png
new file mode 100644
index 0000000..4f6b9b7
Binary files /dev/null and b/buttons/4A.png differ
diff --git a/buttons/4B.png b/buttons/4B.png
new file mode 100644
index 0000000..f8f55df
Binary files /dev/null and b/buttons/4B.png differ
diff --git a/engine.js b/engine.js
index 186e5b9..b4b1c8c 100644
--- a/engine.js
+++ b/engine.js
@@ -67,7 +67,7 @@ function drop(e) {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
const option = document.getElementById(data);
- const targetSquare = e.target;
+ const targetSquare = e.currentTarget;
if (targetSquare.style.backgroundColor || !isCorrectSquare(counter, targetSquare.id)) {
return;
@@ -78,50 +78,137 @@ function drop(e) {
switch (option.id) {
case 'blue':
targetSquare.style.backgroundColor = 'blue';
- document.getElementById("top-left-text").innerHTML = "💻";
- document.getElementById("top-left-text").style.fontSize = "100px";
+
+ var img = document.createElement('img');
+ img.src = 'buttons/1A.png';
+ img.alt = 'Blue Image';
+ img.style.width = '150px';
+ img.style.height = '150px';
+ img.style.borderRadius = '10px';
+
+ var topLeftText = document.getElementById("top-left-text");
+ topLeftText.innerHTML = '';
+ topLeftText.appendChild(img)
+
toggleOptions('blue', 'green', ['red', 'yellow']);
break;
+
case 'green':
targetSquare.style.backgroundColor = 'green';
- document.getElementById("top-left-text").innerHTML = "🏛";
- document.getElementById("top-left-text").style.fontSize = "100px";
+
+ var img = document.createElement('img');
+ img.src = 'buttons/1B.png';
+ img.alt = 'Blue Image';
+ img.style.width = '150px';
+ img.style.height = '150px';
+ img.style.borderRadius = '10px';
+
+ var topLeftText = document.getElementById("top-left-text");
+ topLeftText.innerHTML = '';
+ topLeftText.appendChild(img)
+
toggleOptions('blue', 'green', ['red', 'yellow']);
break;
+
case 'red':
targetSquare.style.backgroundColor = 'red';
- document.getElementById("top-right-text").innerHTML = "⚽️";
- document.getElementById("top-right-text").style.fontSize = "100px";
+
+ var img = document.createElement('img');
+ img.src = 'buttons/2A.png';
+ img.alt = 'Blue Image';
+ img.style.width = '150px';
+ img.style.height = '150px';
+ img.style.borderRadius = '10px';
+
+ var topLeftText = document.getElementById("top-right-text");
+ topLeftText.innerHTML = '';
+ topLeftText.appendChild(img)
+
toggleOptions('red', 'yellow', ['purple', 'brown']);
break;
+
case 'yellow':
targetSquare.style.backgroundColor = 'yellow';
- document.getElementById("top-right-text").innerHTML = "⛏";
- document.getElementById("top-right-text").style.fontSize = "100px";
+
+ var img = document.createElement('img');
+ img.src = 'buttons/2B.png';
+ img.alt = 'Blue Image';
+ img.style.width = '150px';
+ img.style.height = '150px';
+ img.style.borderRadius = '10px';
+
+ var topLeftText = document.getElementById("top-right-text");
+ topLeftText.innerHTML = '';
+ topLeftText.appendChild(img)
+
toggleOptions('red', 'yellow', ['purple', 'brown']);
break;
+
case 'purple':
targetSquare.style.backgroundColor = 'purple';
- document.getElementById("bottom-left-text").innerHTML = "👾";
- document.getElementById("bottom-left-text").style.fontSize = "100px";
+
+ var img = document.createElement('img');
+ img.src = 'buttons/3A.png';
+ img.alt = 'Blue Image';
+ img.style.width = '150px';
+ img.style.height = '150px';
+ img.style.borderRadius = '10px';
+
+ var topLeftText = document.getElementById("bottom-left-text");
+ topLeftText.innerHTML = '';
+ topLeftText.appendChild(img)
+
toggleOptions('purple', 'brown', ['pink', 'cyan']);
break;
+
case 'brown':
targetSquare.style.backgroundColor = 'brown';
- document.getElementById("bottom-left-text").innerHTML = "💼";
- document.getElementById("bottom-left-text").style.fontSize = "100px";
+
+ var img = document.createElement('img');
+ img.src = 'buttons/3B.png';
+ img.alt = 'Blue Image';
+ img.style.width = '150px';
+ img.style.height = '150px';
+ img.style.borderRadius = '10px';
+
+ var topLeftText = document.getElementById("bottom-left-text");
+ topLeftText.innerHTML = '';
+ topLeftText.appendChild(img)
+
toggleOptions('purple', 'brown', ['pink', 'cyan']);
break;
+
case 'pink':
targetSquare.style.backgroundColor = 'pink';
- document.getElementById("bottom-right-text").innerHTML = "👨💻";
- document.getElementById("bottom-right-text").style.fontSize = "100px";
+
+ var img = document.createElement('img');
+ img.src = 'buttons/4A.png';
+ img.alt = 'Blue Image';
+ img.style.width = '150px';
+ img.style.height = '150px';
+ img.style.borderRadius = '10px';
+
+ var topLeftText = document.getElementById("bottom-right-text");
+ topLeftText.innerHTML = '';
+ topLeftText.appendChild(img)
+
toggleOptions('pink', 'cyan', []);
break;
+
case 'cyan':
targetSquare.style.backgroundColor = 'cyan';
- document.getElementById("bottom-right-text").innerHTML = "👨⚖️";
- document.getElementById("bottom-right-text").style.fontSize = "100px";
+
+ var img = document.createElement('img');
+ img.src = 'buttons/4B.png';
+ img.alt = 'Blue Image';
+ img.style.width = '150px';
+ img.style.height = '150px';
+ img.style.borderRadius = '10px';
+
+ var topLeftText = document.getElementById("bottom-right-text");
+ topLeftText.innerHTML = '';
+ topLeftText.appendChild(img)
+
toggleOptions('pink', 'cyan', []);
break;
}
diff --git a/style.css b/style.css
index 9bff5d7..0054a13 100644
--- a/style.css
+++ b/style.css
@@ -74,6 +74,8 @@ body {
line-height: 150px;
height: 150px;
background-color: rgba(255, 255, 255, 0.5);
+ color: white;
+ font-size: 100px;
}
#options {
@@ -83,13 +85,22 @@ body {
.option {
margin: 10px;
- padding: 20px;
+ padding: 0px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 5px lightblue;
- width: auto;
- text-align: center;
+ width: 150px;
+ height: 150px;
cursor: grab;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.option-img {
+ width :150px;
+ height: 150px;
+ border-radius: 10px;
}
.option:active {
diff --git a/web-app.html b/web-app.html
index ba951f1..5da2476 100644
--- a/web-app.html
+++ b/web-app.html
@@ -32,23 +32,23 @@
-
💻
-
🏛
+
+
-
⚽️
-
⛏
+
+
-
👾
-
💼
+
+
-
👨💻
-
👨⚖️
+
+
