From 381f9d9df5bb8989b0610cd0e6ec8055a34e9063 Mon Sep 17 00:00:00 2001 From: Ashwini Gurbaxani <98401812+gurbaxani@users.noreply.github.com> Date: Sun, 15 Sep 2024 11:07:17 +0530 Subject: [PATCH] Add timer markup --- README.md | 2 + index.html | 23 +-------- script.js | 141 ++++++++++++++++------------------------------------- styles.css | 21 ++++++++ 4 files changed, 66 insertions(+), 121 deletions(-) diff --git a/README.md b/README.md index a73b0fc..782e432 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,5 @@ [ ] Add favicon [ ] Add link to google form [ ] Add timer +[ ] Add nav menu [Add | About | GitHub] +[ ] Add About page diff --git a/index.html b/index.html index e2059cb..240bfad 100644 --- a/index.html +++ b/index.html @@ -3,28 +3,9 @@ - Improv Suggestions Generator 2 + Improv Practice Tools - +

Improv Practice

diff --git a/script.js b/script.js index e6879ec..66b9dae 100644 --- a/script.js +++ b/script.js @@ -1,25 +1,37 @@ 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']; - - let lastSelectedButton = null; + 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' + ]; // Function to set a random item from a given array to resultDiv function setRandomResult(array) { @@ -27,86 +39,15 @@ document.addEventListener('DOMContentLoaded', function () { resultDiv.textContent = array[randomIndex]; } - // 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 - } - }); + // 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)); }); diff --git a/styles.css b/styles.css index e69de29..01c5336 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,21 @@ +.display-result { + margin-top: 20px; + 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; +}