diff --git a/script.js b/script.js index 43cfa50..034ea37 100644 --- a/script.js +++ b/script.js @@ -25,15 +25,19 @@ document.addEventListener('DOMContentLoaded', function() { }); function toggleTheme() { + const body = document.body; const themeIcon = document.querySelector('.theme-icon'); - - if (themeIcon.textContent === '🌙') { - themeIcon.textContent = '☀️'; + + // toggle dark mode class + body.classList.toggle('dark-mode'); + + // change icon + if (body.classList.contains('dark-mode')) { + themeIcon.textContent = '☀️'; // sun icon for light mode } else { - themeIcon.textContent = '🌙'; + themeIcon.textContent = '🌙'; // moon icon for dark mode } } - function switchTab(tabName) { const tabs = document.querySelectorAll('.tab-content'); tabs.forEach(tab => tab.classList.remove('active')); @@ -57,9 +61,11 @@ function loadWordBank() { } function saveWordBank() { - localStorage.setItem('devopsWords', JSON.stringify(wordBank)); -} + // save fix + + localStorage.setItem('wordBank', JSON.stringify(wordBank)); +} function displayWordBank() { const wordList = document.getElementById('wordList'); const wordCount = document.getElementById('wordCount'); @@ -95,6 +101,18 @@ function addWord() { const input = document.getElementById('newWord'); const word = input.value.trim().toUpperCase(); + // Reject empty input + if (!word) { + alert('⚠️ Cannot add an empty word!'); + return; + } + + // Reject duplicate words + if (wordBank.includes(word)) { + alert('⚠️ Word already exists in the bank!'); + return; + } + wordBank.push(word); input.value = ''; saveWordBank(); diff --git a/styles.css b/styles.css index 2d7f786..1c35a92 100644 --- a/styles.css +++ b/styles.css @@ -527,3 +527,32 @@ body.dark-mode .add-word-form input { body.dark-mode .empty-state { color: #999; } + +/* Default light theme */ +body { + background-color: #fff; + color: #000; +} + +/* Dark mode */ +body.dark-mode { + background-color: #121212; + color: #eee; +} + +/* Optional: adjust buttons and other elements */ +body.dark-mode .word-item, +body.dark-mode .key { + background-color: #1f1f1f; + color: #eee; + border: 1px solid #444; +} + +body.dark-mode .tab-content { + background-color: #1a1a1a; +} + +body.dark-mode .game-status.show { + background-color: #333; + color: #fff; +} \ No newline at end of file