From 999a8f9385fbc8cc43399f99da8c4a775c3e3784 Mon Sep 17 00:00:00 2001 From: X0rD3v1L Date: Fri, 9 Aug 2024 17:01:09 +0530 Subject: [PATCH 1/5] pushed color-me --- .../src/challenges/color-me/index.html | 24 ++++++ .../src/challenges/color-me/scripts.js | 23 ++++++ .../src/challenges/color-me/styles.css | 76 +++++++++++++++++++ shared/data/content/js-challenges.ts | 10 +++ 4 files changed, 133 insertions(+) create mode 100644 apps/javascript/src/challenges/color-me/index.html create mode 100644 apps/javascript/src/challenges/color-me/scripts.js create mode 100644 apps/javascript/src/challenges/color-me/styles.css diff --git a/apps/javascript/src/challenges/color-me/index.html b/apps/javascript/src/challenges/color-me/index.html new file mode 100644 index 000000000..e61bbf728 --- /dev/null +++ b/apps/javascript/src/challenges/color-me/index.html @@ -0,0 +1,24 @@ + + + + + + 3x3 Round Grid Color Me + + + + +
+

3x3 Grid Color Me

+ +
+ +
+ + +
+
+ + + + diff --git a/apps/javascript/src/challenges/color-me/scripts.js b/apps/javascript/src/challenges/color-me/scripts.js new file mode 100644 index 000000000..596bf77fc --- /dev/null +++ b/apps/javascript/src/challenges/color-me/scripts.js @@ -0,0 +1,23 @@ +const gridContainer = document.getElementById('grid'); +for (let i = 1; i <= 9; i++) { + const button = document.createElement('div'); + button.className = 'grid-item'; + button.textContent = i; + button.dataset.value = i; + gridContainer.appendChild(button); +} + +document.getElementById('colorButton').addEventListener('click', () => { + const inputValue = parseInt(document.getElementById('inputBox').value, 10); + if (inputValue >= 1 && inputValue <= 9) { + document.querySelectorAll('.grid-item').forEach((button) => { + if (parseInt(button.dataset.value, 10) === inputValue) { + button.classList.add('active'); + } else { + button.classList.remove('active'); + } + }); + } else { + alert('Please enter a number between 1 and 9.'); + } +}); diff --git a/apps/javascript/src/challenges/color-me/styles.css b/apps/javascript/src/challenges/color-me/styles.css new file mode 100644 index 000000000..3d0d7eccb --- /dev/null +++ b/apps/javascript/src/challenges/color-me/styles.css @@ -0,0 +1,76 @@ +.container { + text-align: center; + background: #ffffff; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; + width: 360px; +} + +h1 { + margin-bottom: 20px; + color: #333; +} + +.grid-container { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-gap: 10px; + justify-content: center; + margin-bottom: 20px; +} + +.grid-item { + width: 100px; + height: 100px; + display: flex; + align-items: center; + justify-content: center; + border: 2px solid #ddd; + border-radius: 50%; + font-size: 24px; + cursor: pointer; + background-color: #f0f0f0; + transition: + background-color 0.3s ease, + transform 0.2s ease; +} + +.grid-item:hover { + background-color: #e0e0e0; + transform: scale(1.1); +} + +.button-container { + display: flex; + justify-content: center; + gap: 10px; +} + +#inputBox { + padding: 10px; + font-size: 16px; + border: 1px solid #ddd; + border-radius: 4px; + width: 80px; +} + +#colorButton { + padding: 10px 20px; + font-size: 16px; + border: none; + border-radius: 4px; + background-color: #007bff; + color: white; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#colorButton:hover { + background-color: #0056b3; +} + +.active { + background-color: green; + color: white; +} diff --git a/shared/data/content/js-challenges.ts b/shared/data/content/js-challenges.ts index 9cff95717..b8bcda41b 100644 --- a/shared/data/content/js-challenges.ts +++ b/shared/data/content/js-challenges.ts @@ -13,6 +13,16 @@ const challenges: Map = new Map([ tags: [ETag.interview], }, ], + [ + 'color-me', + { + title: 'Color Me', + link: 'color-me/', + difficulty: EDifficulty.Easy, + developer: 'X0rD3v1L', + tags: [ETag.interview], + }, + ], [ 'bmi-calculator', { From db6152e11375b5b1e4831e39b01565425ea1c9cb Mon Sep 17 00:00:00 2001 From: X0rD3v1L Date: Sat, 10 Aug 2024 13:38:51 +0530 Subject: [PATCH 2/5] latest code --- .../src/challenges/color-me/index.html | 2 +- .../src/challenges/color-me/index.js | 25 +++++++++++++++++++ .../src/challenges/color-me/scripts.js | 23 ----------------- shared/data/content/contributors.ts | 4 +++ 4 files changed, 30 insertions(+), 24 deletions(-) create mode 100644 apps/javascript/src/challenges/color-me/index.js delete mode 100644 apps/javascript/src/challenges/color-me/scripts.js diff --git a/apps/javascript/src/challenges/color-me/index.html b/apps/javascript/src/challenges/color-me/index.html index e61bbf728..9f403d833 100644 --- a/apps/javascript/src/challenges/color-me/index.html +++ b/apps/javascript/src/challenges/color-me/index.html @@ -19,6 +19,6 @@

3x3 Grid Color Me

- + diff --git a/apps/javascript/src/challenges/color-me/index.js b/apps/javascript/src/challenges/color-me/index.js new file mode 100644 index 000000000..a2032c72d --- /dev/null +++ b/apps/javascript/src/challenges/color-me/index.js @@ -0,0 +1,25 @@ +document.addEventListener('DOMContentLoaded', () => { + const gridContainer = document.getElementById('grid'); + for (let i = 1; i <= 9; i++) { + const button = document.createElement('div'); + button.className = 'grid-item'; + button.textContent = i; + button.dataset.value = i; + gridContainer.appendChild(button); + } + + document.getElementById('colorButton').addEventListener('click', () => { + const inputValue = parseInt(document.getElementById('inputBox').value, 10); + if (inputValue >= 1 && inputValue <= 9) { + document.querySelectorAll('.grid-item').forEach((button) => { + if (parseInt(button.dataset.value, 10) === inputValue) { + button.classList.add('active'); + } else { + button.classList.remove('active'); + } + }); + } else { + alert('Please enter a number between 1 and 9.'); + } + }); +}); diff --git a/apps/javascript/src/challenges/color-me/scripts.js b/apps/javascript/src/challenges/color-me/scripts.js deleted file mode 100644 index 596bf77fc..000000000 --- a/apps/javascript/src/challenges/color-me/scripts.js +++ /dev/null @@ -1,23 +0,0 @@ -const gridContainer = document.getElementById('grid'); -for (let i = 1; i <= 9; i++) { - const button = document.createElement('div'); - button.className = 'grid-item'; - button.textContent = i; - button.dataset.value = i; - gridContainer.appendChild(button); -} - -document.getElementById('colorButton').addEventListener('click', () => { - const inputValue = parseInt(document.getElementById('inputBox').value, 10); - if (inputValue >= 1 && inputValue <= 9) { - document.querySelectorAll('.grid-item').forEach((button) => { - if (parseInt(button.dataset.value, 10) === inputValue) { - button.classList.add('active'); - } else { - button.classList.remove('active'); - } - }); - } else { - alert('Please enter a number between 1 and 9.'); - } -}); diff --git a/shared/data/content/contributors.ts b/shared/data/content/contributors.ts index e33956ebb..935ea6609 100644 --- a/shared/data/content/contributors.ts +++ b/shared/data/content/contributors.ts @@ -5,6 +5,10 @@ export const contributors = new Map([ 'DeePaK-HeeRaKaRi', { name: 'Deepak Heerakari', pic: 'https://avatars.githubusercontent.com/u/63955160' }, ], + [ + 'X0rD3v1L', + { name: 'Benarjee Sambangi', pic: 'https://avatars.githubusercontent.com/u/46685302' }, + ], [ 'sadanandpai', { name: 'Sadanand Pai', pic: 'https://avatars.githubusercontent.com/u/12962887' }, From f0fd8a36651f3ec0c7b5c11bc0b85a11c91dea92 Mon Sep 17 00:00:00 2001 From: X0rD3v1L Date: Sat, 10 Aug 2024 13:45:02 +0530 Subject: [PATCH 3/5] clearing input box --- apps/javascript/src/challenges/color-me/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/javascript/src/challenges/color-me/index.js b/apps/javascript/src/challenges/color-me/index.js index a2032c72d..8e27b7828 100644 --- a/apps/javascript/src/challenges/color-me/index.js +++ b/apps/javascript/src/challenges/color-me/index.js @@ -1,5 +1,6 @@ document.addEventListener('DOMContentLoaded', () => { const gridContainer = document.getElementById('grid'); + const inputBox = document.getElementById('inputBox'); for (let i = 1; i <= 9; i++) { const button = document.createElement('div'); button.className = 'grid-item'; @@ -9,7 +10,7 @@ document.addEventListener('DOMContentLoaded', () => { } document.getElementById('colorButton').addEventListener('click', () => { - const inputValue = parseInt(document.getElementById('inputBox').value, 10); + const inputValue = parseInt(inputBox.value, 10); if (inputValue >= 1 && inputValue <= 9) { document.querySelectorAll('.grid-item').forEach((button) => { if (parseInt(button.dataset.value, 10) === inputValue) { @@ -21,5 +22,7 @@ document.addEventListener('DOMContentLoaded', () => { } else { alert('Please enter a number between 1 and 9.'); } + + inputBox.value = ''; }); }); From f3c3dece0c1d04122b2f0ad134d2f5db31e901f7 Mon Sep 17 00:00:00 2001 From: X0rD3v1L Date: Tue, 13 Aug 2024 17:12:10 +0530 Subject: [PATCH 4/5] remove unnecessary DOMContentLoaded event listener --- .../src/challenges/color-me/index.html | 14 +++---- .../src/challenges/color-me/index.js | 42 +++++++++---------- 2 files changed, 24 insertions(+), 32 deletions(-) diff --git a/apps/javascript/src/challenges/color-me/index.html b/apps/javascript/src/challenges/color-me/index.html index 9f403d833..cc8aa9a01 100644 --- a/apps/javascript/src/challenges/color-me/index.html +++ b/apps/javascript/src/challenges/color-me/index.html @@ -1,11 +1,9 @@ - - - 3x3 Round Grid Color Me +
@@ -13,12 +11,10 @@

3x3 Grid Color Me

-
- - -
+
+ + +
- - diff --git a/apps/javascript/src/challenges/color-me/index.js b/apps/javascript/src/challenges/color-me/index.js index 8e27b7828..f4b745382 100644 --- a/apps/javascript/src/challenges/color-me/index.js +++ b/apps/javascript/src/challenges/color-me/index.js @@ -1,28 +1,24 @@ -document.addEventListener('DOMContentLoaded', () => { - const gridContainer = document.getElementById('grid'); - const inputBox = document.getElementById('inputBox'); - for (let i = 1; i <= 9; i++) { - const button = document.createElement('div'); - button.className = 'grid-item'; - button.textContent = i; - button.dataset.value = i; - gridContainer.appendChild(button); - } +const gridContainer = document.getElementById('grid'); +const inputBox = document.getElementById('inputBox'); +for (let i = 1; i <= 9; i++) { + const button = document.createElement('div'); + button.className = 'grid-item'; + button.textContent = i; + button.dataset.value = i; + gridContainer.appendChild(button); +} - document.getElementById('colorButton').addEventListener('click', () => { - const inputValue = parseInt(inputBox.value, 10); - if (inputValue >= 1 && inputValue <= 9) { - document.querySelectorAll('.grid-item').forEach((button) => { - if (parseInt(button.dataset.value, 10) === inputValue) { - button.classList.add('active'); - } else { - button.classList.remove('active'); - } - }); +document.getElementById('colorForm').addEventListener('submit', (event) => { + event.preventDefault(); + + const inputValue = parseInt(inputBox.value, 10); + document.querySelectorAll('.grid-item').forEach((button) => { + if (parseInt(button.dataset.value, 10) === inputValue) { + button.classList.add('active'); } else { - alert('Please enter a number between 1 and 9.'); + button.classList.remove('active'); } - - inputBox.value = ''; }); + + inputBox.value = ''; }); From f674a487c45846eccae1c2360f91cfe62a8bcdac Mon Sep 17 00:00:00 2001 From: X0rD3v1L Date: Tue, 13 Aug 2024 17:24:39 +0530 Subject: [PATCH 5/5] changed type to module; removed defer --- apps/javascript/src/challenges/color-me/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/javascript/src/challenges/color-me/index.html b/apps/javascript/src/challenges/color-me/index.html index cc8aa9a01..4c1146b35 100644 --- a/apps/javascript/src/challenges/color-me/index.html +++ b/apps/javascript/src/challenges/color-me/index.html @@ -3,7 +3,7 @@ - +