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..4c1146b35 --- /dev/null +++ b/apps/javascript/src/challenges/color-me/index.html @@ -0,0 +1,20 @@ + + + + + + + + +
+

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..f4b745382 --- /dev/null +++ b/apps/javascript/src/challenges/color-me/index.js @@ -0,0 +1,24 @@ +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('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 { + button.classList.remove('active'); + } + }); + + inputBox.value = ''; +}); 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/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' }, 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', {