x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-04-09 17:40:06 +03:00 committed by GitHub
parent c48c5e1008
commit 5fc3bb9801
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 67 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
100_projects/47-soundboard-javascript/index.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sound Board</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<audio id="applause" src="sounds/applause.mp3"></audio>
<audio id="boo" src="sounds/boo.mp3"></audio>
<audio id="gasp" src="sounds/gasp.mp3"></audio>
<audio id="tada" src="sounds/tada.mp3"></audio>
<audio id="victory" src="sounds/victory.mp3"></audio>
<audio id="wrong" src="sounds/wrong.mp3"></audio>
</body>
</html>

21
100_projects/47-soundboard-javascript/script.js Normal file
View File

@ -0,0 +1,21 @@
const sounds = ["applause", "boo", "gasp", "tada", "victory", "wrong"];
sounds.forEach((sound) => {
const btn = document.createElement("button");
btn.classList.add("btn");
btn.innerText = sound;
btn.addEventListener("click", () => {
stopSongs();
document.getElementById(sound).play();
});
document.body.appendChild(btn);
});
function stopSongs() {
sounds.forEach((sound) => {
const song = document.getElementById(sound);
song.pause();
song.currentTime = 0;
});
}

BIN
100_projects/47-soundboard-javascript/sounds/applause.mp3 Normal file
View File

Binary file not shown.

BIN
100_projects/47-soundboard-javascript/sounds/boo.mp3 Normal file
View File

Binary file not shown.

BIN
100_projects/47-soundboard-javascript/sounds/gasp.mp3 Normal file
View File

Binary file not shown.

BIN
100_projects/47-soundboard-javascript/sounds/tada.mp3 Normal file
View File

Binary file not shown.

BIN
100_projects/47-soundboard-javascript/sounds/victory.mp3 Normal file
View File

Binary file not shown.

BIN
100_projects/47-soundboard-javascript/sounds/wrong.mp3 Normal file
View File

Binary file not shown.

28
100_projects/47-soundboard-javascript/style.css Normal file
View File

@ -0,0 +1,28 @@
* {
box-sizing: border-box;
margin: 0;
padding:0
}
body {
background-color: #E9967A;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
min-height: 50vh;
}
.btn {
background-color:#fff;
border-radius: 15px;
border: none;
margin: 10px;
color: black;
font-size: 1.2rem;
padding: 1.5rem 3rem;
transition: .3s;
width: 180px;
text-transform: capitalize;
}
.btn:hover{
background: #FFFAF0;
}