Skip to content

Commit

Permalink
Merge pull request #40 from siya25097/main
Browse files Browse the repository at this point in the history 
sound effect added
  • Loading branch information
@sk66641
sk66641 authored May 29, 2024
2 parents dbd1a81 + bee9677 commit 3680535
Show file tree
Hide file tree
Showing 8 changed files with 63 additions and 38 deletions.
Binary file added disco.mp3
View file
Binary file not shown.
Binary file added fairies.mp3
View file
Binary file not shown.
Binary file added funkydisco.mp3
View file
Binary file not shown.
Binary file added funkydisco2.mp3
View file
Binary file not shown.
91 changes: 55 additions & 36 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,61 +21,80 @@ <h1>Random Disco Light Simulator</h1>
<input type="number" id="color" placeholder="Enter" />
</div>
<div>
<label for="time"
>2. Time interval
<i>(with which the color changes randomly)</i>:</label
<label for="time"
>2. Time interval
<i>(with which the color changes randomly)</i>:</label
><br />
<input type="number" id="time" placeholder="Enter" />
<select id="unit">
<option value="unit">Unit</option>
<option value="unit">Unit</option>
<option value="milliseconds">milliseconds</option>
<option value="seconds">seconds</option>
</select>
</div>
<strong
>[Negative interval or no input will be treated as 0 interval]</strong
>[Negative interval or no input will be treated as 0 interval]</strong
>
<div>
<label for="view">3. View:</label>
<label for="view">3. View:</label>
<select id="view">
<option
style="background-color: lightslategray; color: white"
value="select"
<option
style="background-color: lightslategray; color: white"
value="select"
>
Select
</option>
<option value="conic">Conic</option>
<option value="linear">Linear</option>
<option value="radial">Radial</option>
</select>
</div>
<div>
<label for="countdown">4. Countdown Timer (in seconds):</label>
<input
type="number"
id="countdown"
aria-label="Countdown Timer"
placeholder="Enter time in seconds"
/>
</div>
Select
</option>
<option value="conic">Conic</option>
<option value="linear">Linear</option>
<option value="radial">Radial</option>
</select>
</div>
<div>
<label for="countdown">4. Countdown Timer (in seconds):</label>
<input
type="number"
id="countdown"
aria-label="Countdown Timer"
placeholder="Enter time in seconds"
/>
</div>
<div>
<label for="sound">4. Sound Effect:</label>
<select
id="sound"
value="select"
>
<option value="none">None</option>
<option value="disco">disco</option>
<option value="fairies">fairies</option>
<option value="funky1">funky1</option>
<option value="funky2">funky2</option>
<option value="upbeatdisco">upbeatdisco</option>
</select>
</div>
<div class="button">
<button id="submit">Submit</button>
<a
href="https://github.com/sk66641/Random-Disco-Light-Simulator"
target="_blank"
>
<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</a>
<button id="reset">Reset</button>
</div>
<div id="error"></div>
</div>
</div>
<div
id="timerDisplay"
aria-label="Timer Display"
style="display: none"
></div>
</a>
<button id="reset">Reset</button>
</div>
<div id="error"></div>
</div>
</div>
<div
id="timerDisplay"
aria-label="Timer Display"
style="display: none"
></div>
<audio id="disco" src="disco.mp3"></audio>
<audio id="fairies" src="fairies.mp3"></audio>
<audio id="funky1" src="funkydisco.mp3"></audio>
<audio id="funky2" src="funkydisco2.mp3"></audio>
<audio id="upbeatdisco" src="upbeatdisco.mp3"></audio>
<div id="message">The timer has ended. The page will reload.</div>

<script src="script.js"></script>
Expand Down
8 changes: 7 additions & 1 deletion script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,9 @@ document.addEventListener('DOMContentLoaded', () => {
let set_time = document.getElementById("time").value;
let unit = document.getElementById("unit").value;
let view = document.getElementById("view").value;
let soundEffect = document.getElementById("sound").value;

if (countdownValue && countdownValue > 0 && Number(n) >= 0 && Number.isInteger(Number(n)) && n !== "" && unit !== "unit" && view !== "select") {
if (countdownValue && countdownValue > 0 && Number(n) >= 0 && Number.isInteger(Number(n)) && n !== "" && unit !== "unit" && view !== "select" && soundEffect !=="none") {
// Clear error message if everything is correct
document.getElementById("error").innerHTML = "";

Expand All @@ -59,6 +60,11 @@ document.addEventListener('DOMContentLoaded', () => {

// Start the countdown timer
startCountdown(countdownValue);

// Start the sound effect
const audio = document.getElementById(soundEffect);
audio.loop = true; // Loop the audio
audio.play();
} else {
// Display error message if any input is missing or invalid
document.getElementById("error").innerHTML = "<strong>Please fill out all required fields correctly!</strong>";
Expand Down
2 changes: 1 addition & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ strong {
}

#view,
#unit {
#unit, #sound{
text-align: center;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.07);
Expand Down
Binary file added upbeatdisco.mp3
View file
Binary file not shown.

0 comments on commit 3680535

Please sign in to comment.