The website is coming quite nicely, but now I understand what devs fought against when I used to be on the other side of the conversation asking about a specific project or why a concept was taking so long, it really takes some time to develop code from nothing - or maybe that's just my perception because I am still in diapers regarding coding.
In the meantime, I leave you with yet another little project that helps me keep grinding my skills and at the same time, build another layer of my soon to be portfolio.
Sound Board
This is probably one of the shortest projects I've done and it is not because it is not hard to do, we will also learn a lot of things here, it's just that I'll play with the HTML audio tag and the JavaScript is pretty simple and straightforward.
HTML Code
<body>
<audio id="giggle" src="sounds/giggle.wav"></audio>
<audio id="sniff" src="sounds/sniff.wav"></audio>
<audio id="suspense" src="sounds/suspense.wav"></audio>
<audio id="whistle" src="sounds/whistle.wav"></audio>
<audio id="burp" src="sounds/burp.wav"></audio>
<div id="buttons"></div>
<script src="script.js"></script>
</body>
</html>
Note: I create the ID of buttons but there is actually nothing there yet because I will create the buttons through the JS code.
There's no progress picture here because honestly, that joke of including a blank webpage saying everything will after the CSS and the JS is getting old, so no pic now.
JavaScript Code
This time I am including part of the JavaScript code first and once I style with CSS what the user can see, I will go back to the JS code.
const sounds = ["burp", "suspense", "whistle", "giggle", "sniff"];
sounds.forEach((sound) => {
const btn = document.createElement("button");
btn.classList.add("btn");
btn.innerText = sound;
document.getElementById("buttons").appendChild(btn);
});
As you can see, it is pretty easy to create elements with loops in JavaScript, now I need to style these buttons.
CSS Code
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(90deg, #f51c1c, #ca6c65);
font-family: "Poppins", sans-serif;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.btn {
background-color: black;
border-radius: 5px;
border: none;
color: white;
margin: 1rem;
padding: 1.5rem;
font-size: 2rem;
width: 15rem;
font-family: inherit;
}
.btn:focus {
outline: none;
background-color: #1c27f5;
}
.btn:hover {
opacity: 0.75;
}
It's beginning to look a little bit better, but I am not there yet, I need to add a couple more things with JS.
*/
JavaScript Code (yet again)
const sounds = ["burp", "suspense", "whistle", "giggle", "sniff"];
sounds.forEach((sound) => {
const btn = document.createElement("button");
btn.classList.add("btn");
btn.innerText = sound;
btn.addEventListener("click", () => {
document.getElementById(sound).play();
});
document.getElementById("buttons").appendChild(btn);
});
The problem with this code is simple: whenever I click any of the audios, the sound overlaps with the previous audio in case it hasn't finished. I need to abruptly stop the audio playing if the user clicks on any other audio so:
const sounds = ["burp", "suspense", "whistle", "giggle", "sniff"];
sounds.forEach((sound) => {
const btn = document.createElement("button");
btn.classList.add("btn");
btn.innerText = sound;
btn.addEventListener("click", () => {
stopAll();
document.getElementById(sound).play();
});
document.getElementById("buttons").appendChild(btn);
});
function stopAll() {
sounds.forEach((sound) => {
const audio = document.getElementById(sound);
audio.pause();
audio.currentTime = 0;
});
}
The thing about pausing the audios is that we can't actually stop them, so I just pause them and set the initiail time of the audio to zero so that whenever I click the button again it begins from the start.
Sadly there's no easy way to share short vids with audio on the Hive Blockchain without using a specialized dapp, and since I don't want to post through one of them for only a ten second video, there's no way for you to hear, but you can actually copy and paste the code and you will see how it works!
These projects are based on a CSS, HTML and JS paid course I got on Udemy by Brad Traversy. I made my own changes and tweaks but the template so to speak, is his idea and I do not claim them to be my own. If you are looking to practice CSS and JavaScript, his courses are the way to go, check them out on Udemy.