Piano - HTML, CSS, JavaScript

ManabJB — Sun, 23 Oct 2022 14:12:30 +0000

Hello friends I will show you how you can create a simple piano using HTML, CSS and JavaScript

Check out the whole project here https://devinfo.w3spaces.com/piano/index.html

This is the final look

lets get into the code

this is HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="header">
            <p>Piano</p>
        </div>
        <div class="contents">
            <div class="key" onclick="generate_sound(1)">
                <p>A</p>
            </div>
            <div class="keyup" onclick="generate_sound(2)">
            </div>
            <div class="key" onclick="generate_sound(3)">
                <p>B</p>
            </div>
            <div class="keyup" onclick="generate_sound(4)">
            </div>
            <div class="key" onclick="generate_sound(5)">
                <p>C</p>
            </div>
            <div class="keyup" onclick="generate_sound(6)">
            </div>
            <div class="key" onclick="generate_sound(7)">
                <p>D</p>
            </div>
            <div class="keyup" onclick="generate_sound(8)">
            </div>
            <div class="key" onclick="generate_sound(9)">
                <p>E</p>
            </div>
            <div class="keyup" onclick="generate_sound(10)">
            </div>
            <div class="key keyend" onclick="generate_sound(11)">
                <p>F</p>
            </div>
            <div class="keyup keyupend" onclick="generate_sound(12)">
            </div>
        </div>
    </div>
<script src="script.js"></script>
</body>
</html>

this is style.css

        body{
            background-color: black;
        }
        .main{
            display: flex;
            height: 100vh;
            background-color: black;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .header{
            height: 50px;
            width: 90%;
            background-color: rgb(65, 65, 65);
            color: aliceblue;
            margin: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            border: 1px solid #ffff;
        }
        .header p{
            font-size: 1.5rem;
        }
        .screen{
            background-color: rgb(44, 44, 44);
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ffff;
            height: 50px;
            width: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .screen p{
            font-size: .8rem;
        }
        .contents{
            height: 150px;
            width: 90%;
            background-color: rgb(168, 168, 168);
            margin: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            border: 1px solid #ffff;
        }
        .key{
            background-color: aliceblue;
            height: 70px;
            width: 40px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: end;        
        }
        .key p{
            margin-bottom: 5px;
        }
        .keyend{
            width: 35px;
        }
        .key:hover{
            background-color: rgb(255, 145, 0); 
        }
        .keyup{
            background-color: black;
            height: 35px;
            width: 15px;
            margin-top: -35px;
            margin-left: -20px;
            z-index: 2;
        }
        .keyupend{
            margin-left: -15px;
        }
        .keyup:hover{
            background-color: rgb(95, 95, 95);
        }

This is script.js

var sounds= [280,300,320,340,360,380,400,420,440,460,480,500,520];

var context =
new (window.AudioContext ||  window.webkitAudioContext)();

function generate_sound(nota){
var osc = context.createOscillator();
osc.type = 'square';
osc.frequency.value=sounds[nota];
osc.connect(context.destination);
osc.start();
osc.stop(context.currentTime + .3);
}

JavaScript Compiler

ManabJB — Mon, 28 Feb 2022 20:16:56 +0000

How to Create JavaScript Compiler Using Java/CSS/HTML5/React_Native

How it's gonna look

How to setup folders and files

Go to my GitHub to clone the project
GitHub

Trees
----JS_Compiler[Folder]
main.js
----js[Folder]
------sceipt.js
------main.js
-----css[Folder]
------style.css

//Don't forget to link script and style source in main.html

Clone using git or download zip directly
cloning tutorial
for Linux/Windows/Mac[Git required]
cmd: git clone https://github.com/manabjb/JavaScriptCompiler.git
also you can curl the gitlink

Create main.html and paste the html code
This main.html source also contain essential js codes for js compiler

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <title>JS Editor - ManabJB</title>
</head>
<body>
    <div class="container">
       <div class="main">
               <fieldset class="field">
                   <legend>JS Compiler</legend>
                   <textarea class="text" id="editor" placeholder="  Type your JavaScript codes here..." spellcheck="of" autocapitalize="off"></textarea>
                   <hr>
                   <button class="btn" id="clear">Reset</button><button class="btn" id="run" onclick="comp();">Run</button><button class="btn" onclick="about();">About</button><input type="button" id="change" class="light" onclick="theme();" value="Dark"><hr>
                   <div class="abar">
                   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8q65W3zbUH3FixbfRcoIJH94HUQugM2pSJg&usqp=CAU">
                   <code>Developed by ManabJB</code>
                   </div>
               </fieldset>
       </div>
    </div>
</body>
</html>

JavaScript code that help to create JavaScript Compiler
create folder and file like folder js file main.js - for understanding more about folder and file setup see project trees

var input = document.querySelector('#clear');

var textarea = document.querySelector('#editor');
var submit = document.getElementById("run")[0];

input.addEventListener('click', function () {
    textarea.value = '';
}, false);

function about() {
  document.getElementById("editor").value = "alert('hi');\nconsole.log('Developed by ManabJB');";
}

function comp() { 
    try
        {
            eval( "" + textarea.value + "" )        }
        catch(err)
        {
           alert("Not a JavaScript Code") 
        }
}

Js for theme toggle
create folder and file like folder js and file script.js - for understanding more about folder and file setup see project trees

It's simple we need to called theme() func in toggle button in main.js

function theme() 
{
    theme_change = document.getElementById("editor")
    theme_change.classList.toggle("dark")
    theme_change = document.getElementById("change")
    theme_change.classList.toggle("lights")
    var elem = document.getElementById("change"); 
    if (elem.value=="Dark") elem.value = "Light"; 
    else elem.value = "Dark";
}

Final part which help to style the whole app
css/style.css - for understanding more about folder and file setup see project trees

body

{
    background-color: dodgerblue;
}
.container
{
    background-color: dodgerblue;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.main
{
    background:linear-gradient(gray 30%, #ddf);
    border-radius: 10px;
    backdrop-filter:blur( 14.5px );
}
.field
{
    color: whitesmoke;
    font-size: 2rem;
    border-radius: 10px;
    font-family: lato;
}
.text
{
    height: 200px;
    width: 270px;
    resize: none;
    outline: none;
    background-color: whitesmoke;
    color: gray;
    border-radius: 10px;
    border-bottom: rebeccapurple;
    font-size: 1rem;
    font-family: lato;
}
.dark
{
    background-color: black;
    color: gray;
    border-color: black;
}
.btn
{
    background-color: dodgerblue;
    height: 40px;
    width: 60px;
    outline: none;
    border-color: transparent;
    color: whitesmoke;
    border-radius: 10px;
    border: none;
    font-family: lato;
    margin-right: 5px;
    font-size: 1rem;
}
.btn:active
{
    color: dodgerblue;
    background-color: whitesmoke;
}
.light
{
    background-color: dodgerblue;
    height: 40px;
    width: 60px;
    outline: none;
    border-color: transparent;
    color: whitesmoke;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    font-family: lato;
    margin-right: 5px;
    font-size: 1rem;
}
.lights
{
    color: dodgerblue;
    background-color: whitesmoke;
}
hr
{
    color: whitesmoke;
}
code
{
    font-size: 16px;
    font-family: lato;
}
img
{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    box-shadow: 0 0 10px black;
}
.abar
{
    display: flex;
    font-size: 1rem;
    font-family: lato;
    align-items: center;
    gap: 15px;
}
.console
{
    height: 50px;
    width: 270px;
    resize: none;
    outline: none;
    background-color: whitesmoke;
    color: green;
    border-radius: 10px;
    border-bottom: rebeccapurple;
    font-size: 1rem;
    font-family: lato;
}

DEV Community: ManabJB

Piano - HTML, CSS, JavaScript

JavaScript Compiler

How to Create JavaScript Compiler Using Java/CSS/HTML5/React_Native

How to setup folders and files