How To Create A Hoverboard Effect With Sounds.

Hello Developers, writing my first show in showwcase and today we'll be creating a hoverboard effect with sound using just HTML, CSS and vanilla JavaScript. And I will be using Visual Studio Code as my code editor.

In this project, we will create a large box with smaller boxes inside of it. We will colour the boxes in a way that as you hover on them, the colour changes with sound. It has a simple background big box in the middle with smaller boxes in it. Sometimes this design concept can make user interface in a website interesting and enjoyable.

For us to create this project, we'll need to create three separate files – the index.html file, the style.css file and script.js file for our HTML, CSS, and JavaScript codes respectively, all should be in a folder, after that we create another folder for our audio files.

Our index.html code will look like this;

After writing the HTML code, we move to our CSS file to style our project. You could just copy the above code snippet into your index.html file. Below is what our CSS code will look like;

With the CSS code written, you might not still see any effect but a blank black page. This is because our 'square div' is created in our JavaScript code, and we haven't done that yet, so hold on just a little, will be there soon.

So let's head to our JavaScript file for the main work.

Now in our script.js file we will write the code as below;

After writing the above codes and linking every file correctly in the index.html file, then everything should be working fine, you will get your hoverboard with sound change.

Thanks for this reading this article, and I hope you learnt something from it. If there is any problem or error of any kind, or any correction, please do well to drop it in the comment section. Follow me for more upcoming interesting shows here on Showwcase and on medium. See you again.