diff --git a/README.md b/README.md index 14c2bcd..a73b0fc 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ ### Todo [ ] Add favicon [ ] Add link to google form +[ ] Add timer diff --git a/index.html b/index.html index 2b99623..e2059cb 100644 --- a/index.html +++ b/index.html @@ -11,10 +11,28 @@ font-size: 1.5em; font-weight: bold; } + .timer-container { + display: flex; + align-items: center; + margin-bottom: 20px; + } + .timer-display { + font-size: 1.5em; + margin-left: 20px; + margin-right: 20px; + } + .nav-button { + margin: 5px; + } -

Improv Suggestions

+

Improv Practice

+
+ +
00:00
+ +

Give me a random...

@@ -32,5 +50,5 @@

Improv Suggestions

Click a button to get a suggestion
- + diff --git a/script.js b/script.js index 66b9dae..e6879ec 100644 --- a/script.js +++ b/script.js @@ -1,37 +1,25 @@ document.addEventListener('DOMContentLoaded', function () { const resultDiv = document.getElementById('result'); + const timerDisplay = document.getElementById('timer-display'); + const startButton = document.getElementById('start-timer'); + const stopButton = document.getElementById('stop-timer'); + + let timerInterval; + let seconds = 0; // Arrays for each category - const objects = [ - 'Book', 'Chair', 'Laptop', 'Pen', 'Phone', 'Sock', 'Table', 'Umbrella', 'Wallet', 'Watch' - ]; - const relationships = [ - 'Friend', 'Parent', 'Sibling', 'Colleague', 'Neighbor', 'Partner', 'Mentor', 'Student', 'Boss', 'Customer' - ]; - const locations = [ - 'Park', 'Library', 'Beach', 'Restaurant', 'Office', 'Airport', 'Museum', 'Mall', 'Gym', 'Mountain' - ]; - const occupations = [ - 'Teacher', 'Engineer', 'Artist', 'Chef', 'Doctor', 'Writer', 'Musician', 'Scientist', 'Farmer', 'Nurse' - ]; - const alphabets = [ - 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' - ]; - const phrases = [ - 'Break a leg', 'Hit the nail on the head', 'Under the weather', 'Piece of cake', 'Let the cat out of the bag', 'Once in a blue moon', 'Bite the bullet', 'Spill the beans', 'Cost an arm and a leg', 'Hit the sack' - ]; - const emotions = [ - 'Happy', 'Sad', 'Angry', 'Excited', 'Confused', 'Nervous', 'Bored', 'Relieved', 'Surprised', 'Frustrated' - ]; - const genres = [ - 'Comedy', 'Drama', 'Horror', 'Romance', 'Action', 'Sci-Fi', 'Fantasy', 'Mystery', 'Thriller', 'Documentary' - ]; - const quirks = [ - 'Obsessive', 'Clumsy', 'Eccentric', 'Perfectionist', 'Shy', 'Talkative', 'Stubborn', 'Generous', 'Impulsive', 'Quiet' - ]; - const superpowers = [ - 'Telepathy', 'Invisibility', 'Super strength', 'Flight', 'Telekinesis', 'Time travel', 'Shape-shifting', 'Healing', 'Teleportation', 'Mind control' - ]; + const objects = ['Book', 'Chair', 'Laptop', 'Pen', 'Phone', 'Sock', 'Table', 'Umbrella', 'Wallet', 'Watch']; + const relationships = ['Friend', 'Parent', 'Sibling', 'Colleague', 'Neighbor', 'Partner', 'Mentor', 'Student', 'Boss', 'Customer']; + const locations = ['Park', 'Library', 'Beach', 'Restaurant', 'Office', 'Airport', 'Museum', 'Mall', 'Gym', 'Mountain']; + const occupations = ['Teacher', 'Engineer', 'Artist', 'Chef', 'Doctor', 'Writer', 'Musician', 'Scientist', 'Farmer', 'Nurse']; + const alphabets = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; + const phrases = ['Break a leg', 'Hit the nail on the head', 'Under the weather', 'Piece of cake', 'Let the cat out of the bag', 'Once in a blue moon', 'Bite the bullet', 'Spill the beans', 'Cost an arm and a leg', 'Hit the sack']; + const emotions = ['Happy', 'Sad', 'Angry', 'Excited', 'Confused', 'Nervous', 'Bored', 'Relieved', 'Surprised', 'Frustrated']; + const genres = ['Comedy', 'Drama', 'Horror', 'Romance', 'Action', 'Sci-Fi', 'Fantasy', 'Mystery', 'Thriller', 'Documentary']; + const quirks = ['Obsessive', 'Clumsy', 'Eccentric', 'Perfectionist', 'Shy', 'Talkative', 'Stubborn', 'Generous', 'Impulsive', 'Quiet']; + const superpowers = ['Telepathy', 'Invisibility', 'Super strength', 'Flight', 'Telekinesis', 'Time travel', 'Shape-shifting', 'Healing', 'Teleportation', 'Mind control']; + + let lastSelectedButton = null; // Function to set a random item from a given array to resultDiv function setRandomResult(array) { @@ -39,15 +27,86 @@ document.addEventListener('DOMContentLoaded', function () { resultDiv.textContent = array[randomIndex]; } - // Event listeners for buttons - document.getElementById('object-btn').addEventListener('click', () => setRandomResult(objects)); - document.getElementById('relationship-btn').addEventListener('click', () => setRandomResult(relationships)); - document.getElementById('location-btn').addEventListener('click', () => setRandomResult(locations)); - document.getElementById('occupation-btn').addEventListener('click', () => setRandomResult(occupations)); - document.getElementById('alphabet-btn').addEventListener('click', () => setRandomResult(alphabets)); - document.getElementById('phrase-btn').addEventListener('click', () => setRandomResult(phrases)); - document.getElementById('emotion-btn').addEventListener('click', () => setRandomResult(emotions)); - document.getElementById('genre-btn').addEventListener('click', () => setRandomResult(genres)); - document.getElementById('quirk-btn').addEventListener('click', () => setRandomResult(quirks)); - document.getElementById('superpower-btn').addEventListener('click', () => setRandomResult(superpowers)); + // Function to reset all button texts + function resetButtonTexts() { + document.querySelectorAll('.nav-button').forEach(button => { + button.textContent = button.getAttribute('data-original-text'); + }); + } + + // Function to handle button setup + function setupButton(buttonId, array) { + const button = document.getElementById(buttonId); + button.addEventListener('click', function () { + if (lastSelectedButton) { + resetButtonTexts(); + } + + if (button !== lastSelectedButton) { + button.textContent = 'âŸŗ ' + button.getAttribute('data-original-text'); + setRandomResult(array); + lastSelectedButton = button; + } else { + lastSelectedButton = null; + resultDiv.textContent = 'Click a button to get a suggestion'; + } + }); + + // Store the original button text + button.setAttribute('data-original-text', button.textContent); + } + + // Set up event listeners for all buttons + setupButton('object-btn', objects); + setupButton('relationship-btn', relationships); + setupButton('location-btn', locations); + setupButton('occupation-btn', occupations); + setupButton('alphabet-btn', alphabets); + setupButton('phrase-btn', phrases); + setupButton('emotion-btn', emotions); + setupButton('genre-btn', genres); + setupButton('quirk-btn', quirks); + setupButton('superpower-btn', superpowers); + + // Timer functions + function startTimer() { + if (timerInterval) return; // Prevent multiple intervals + + timerInterval = setInterval(function () { + seconds++; + const minutes = String(Math.floor(seconds / 60)).padStart(2, '0'); + const secs = String(seconds % 60).padStart(2, '0'); + timerDisplay.textContent = `${minutes}:${secs}`; + }, 1000); + + startButton.disabled = true; // Disable the Start button when the timer is running + stopButton.disabled = false; // Enable the Stop button when the timer is running + } + + function stopTimer() { + if (timerInterval) { + clearInterval(timerInterval); + timerInterval = null; + } + + stopButton.textContent = '↩ī¸ Reset'; // Change the button text to 'Reset' + startButton.disabled = false; // Re-enable the Start button + stopButton.disabled = true; // Disable the Stop button after reset + } + + function resetTimer() { + seconds = 0; + timerDisplay.textContent = '00:00'; + stopButton.textContent = '✋ Stop'; // Reset the button text to 'Stop' + stopButton.disabled = false; // Re-enable the Stop button + } + + startButton.addEventListener('click', startTimer); + stopButton.addEventListener('click', function () { + if (stopButton.textContent === '✋ Stop') { + stopTimer(); + } else { + resetTimer(); // Reset the timer and button text if already stopped + } + }); });