diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 6f3a291..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5501 -} \ No newline at end of file diff --git a/index.html b/index.html index 71dbd7e..0ecbe2e 100644 --- a/index.html +++ b/index.html @@ -113,6 +113,7 @@ +
{ + const randomizeButton = document.getElementById('randomize'); + + randomizeButton.addEventListener('click', () => { + // Randomize number of colors + const colorInput = document.getElementById('color'); + const randomNumColors = Math.floor(Math.random() * 10) + 1; // Generates a random number between 1 and 10 + colorInput.value = randomNumColors; + + // Randomize time interval + const timeInput = document.getElementById('time'); + const randomTimeInterval = Math.floor(Math.random() * 5000) + 1000; // Generates a random number between 1000 and 6000 (milliseconds) + timeInput.value = randomTimeInterval; + + // Randomize unit + const unitSelect = document.getElementById('unit'); + const randomUnitIndex = Math.random() < 0.5 ? 1 : 2; // Randomly selects milliseconds or seconds + unitSelect.selectedIndex = randomUnitIndex; + + // Randomize view + const viewSelect = document.getElementById('view'); + const randomViewIndex = Math.floor(Math.random() * (viewSelect.options.length - 1)) + 1; // Excludes the first "Select" option + viewSelect.selectedIndex = randomViewIndex; + + // Randomize sound effect + const soundSelect = document.getElementById('sound'); + const randomSoundIndex = Math.floor(Math.random() * soundSelect.options.length); + soundSelect.selectedIndex = randomSoundIndex; + + // Randomize countdown timer + const countdownInput = document.getElementById('countdown'); + const randomCountdown = Math.floor(Math.random() * 300) + 30; // Generates a random number between 30 and 330 (seconds) + countdownInput.value = randomCountdown; + }); +}); + diff --git a/style.css b/style.css index 9f975d6..d6d431e 100644 --- a/style.css +++ b/style.css @@ -159,7 +159,7 @@ select option { } .button { - margin-top: 40px; + margin-top: 5px; margin-bottom: 16px; display: flex; justify-content: center; @@ -622,3 +622,20 @@ margin-left: 400px; text-decoration: none; } */ +#randomize { + background-color: #007bff; + width: auto; /* Adjust the width as needed */ + margin: 20px auto; /* Adjust margin as needed */ + display: block; + color: #ffffff; + border: none; + border-radius: 5px; + padding: 10px 20px; + font-size: 20px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#randomize:hover { + background-color: #0056b3; +}