Skip to content

Commit

Permalink
Add timer functionality
Browse files Browse the repository at this point in the history
gurbaxani committed Sep 15, 2024
1 parent 381f9d9 commit 93bf6fc
Showing 3 changed files with 69 additions and 38 deletions.
10 changes: 5 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
@@ -9,11 +9,6 @@
</head>
<body>
<h1>Improv Practice</h1>
<div class="timer-container">
<button id="start-timer" class="nav-button">🚀 Start</button>
<div id="timer-display" class="timer-display">00:00</div>
<button id="stop-timer" class="nav-button">✋ Stop</button>
</div>
<div id="main-screen" class="screen">
<p>Give me a random...</p>
<div class="grid-container">
@@ -29,6 +24,11 @@ <h1>Improv Practice</h1>
<button id="superpower-btn" class="nav-button">🦸 Superpower</button>
</div>
<div id="result" class="display-result">Click a button to get a suggestion</div>
<div class="timer-container">
<button id="start-timer" class="nav-button">🚀 Start</button>
<div id="timer-display" class="timer-display">00:00</div>
<button id="stop-timer" class="nav-button">✋ Stop</button>
</div>
</div>
<script src="script.js"></script>
</body>
93 changes: 61 additions & 32 deletions script.js
Original file line number Diff line number Diff line change
@@ -1,37 +1,16 @@
document.addEventListener('DOMContentLoaded', function () {
// Elements for random suggestions
const resultDiv = document.getElementById('result');

// 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'];

// Function to set a random item from a given array to resultDiv
function setRandomResult(array) {
@@ -50,4 +29,54 @@ document.addEventListener('DOMContentLoaded', function () {
document.getElementById('genre-btn').addEventListener('click', () => setRandomResult(genres));
document.getElementById('quirk-btn').addEventListener('click', () => setRandomResult(quirks));
document.getElementById('superpower-btn').addEventListener('click', () => setRandomResult(superpowers));

// Timer functionality
const startButton = document.getElementById('start-timer');
const stopButton = document.getElementById('stop-timer');
const timerDisplay = document.getElementById('timer-display');

let timer;
let seconds = 0;
let isRunning = false;
stopButton.disabled = true;

function updateDisplay() {
const minutes = Math.floor(seconds / 60);
const secs = seconds % 60;
timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
}

function startTimer() {
if (!isRunning) {
isRunning = true;
stopButton.disabled = false;
startButton.disabled = true;
stopButton.textContent = '✋ Stop';
timer = setInterval(() => {
seconds++;
updateDisplay();
}, 1000);
}
}

function stopOrResetTimer() {
if (isRunning) {
clearInterval(timer);
isRunning = false;
startButton.disabled = false; // Enable the start button when stopped
stopButton.textContent = '🔄 Reset'; // Change text to Reset
} else {
// Reset the timer
seconds = 0;
updateDisplay();
stopButton.disabled = true;
stopButton.textContent = '✋ Stop'; // Change text back to Stop
}
}

startButton.addEventListener('click', startTimer);
stopButton.addEventListener('click', stopOrResetTimer);

// Initial display update for the timer
updateDisplay();
});
4 changes: 3 additions & 1 deletion styles.css
Original file line number Diff line number Diff line change
@@ -5,9 +5,10 @@
}

.timer-container {
position: fixed;
bottom: 20px;
display: flex;
align-items: center;
margin-bottom: 20px;
}

.timer-display {
@@ -19,3 +20,4 @@
.nav-button {
margin: 5px;
}

0 comments on commit 93bf6fc

Please sign in to comment.