Skip to content

Commit

Permalink
Add timer markup
Browse files Browse the repository at this point in the history
  • Loading branch information
@gurbaxani
gurbaxani committed Sep 15, 2024
1 parent 1a29f51 commit 381f9d9
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 121 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@
[ ] Add favicon
[ ] Add link to google form
[ ] Add timer
[ ] Add nav menu [Add | About | GitHub]
[ ] Add About page
23 changes: 2 additions & 21 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,9 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Improv Suggestions Generator 2</title>
<title>Improv Practice Tools</title>
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
<style>
.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;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Improv Practice</h1>
Expand Down
141 changes: 41 additions & 100 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,112 +1,53 @@
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) {
const randomIndex = Math.floor(Math.random() * array.length);
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));
});
21 changes: 21 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 381f9d9

Please sign in to comment.