HTML
CSS
JS
Preview
<h2 class="baslik">Piano</h2> <div class="container-fluid"> <article> <h2 class="text-start text-white pt-3 ps-5"></h2> <div class="piano"> <div class="tile" onclick="doclick()">do</div> <div class="tile" onclick="reclick()">re</div> <div class="tile" onclick="miclick()">mi</div> <div class="tile" onclick="faclick()">fa</div> <div class="tile" onclick="solclick()">sol</div> <div class="tile" onclick="laclick()">la</div> <div class="tile" onclick="siclick()">si</div> <div class="tile" onclick="dokclick()">do</div> </div> </article> </div>
.piano{ background: #f00; display: flex; width:500px; padding:10px; border-radius:30px; margin:200px; margin-left: 350px; } .tile{ background-color: purple; width: 60px; height: 200px; border: 1px solid #888; border-radius:10px; } .black-tile{ background: #000; width: 40px; border-radius:10px; height: 100px; position:absolute; } .bt1{left:65px;} .bt2{left:120px;} .bt3{left:230px;} .bt4{left:280px;} .bt5{left: 335px}
var doclick = () => { var audio = new Audio('do1.wav'); audio.play(); }; var reclick = () => { var audio = new Audio('re.wav'); audio.play(); }; var miclick = () => { var audio = new Audio('mi.wav'); audio.play(); }; var faclick = () => { var audio = new Audio('fa.wav'); audio.play(); }; var solclick = () => { var audio = new Audio('sol.wav'); audio.play(); }; var laclick = () => { var audio = new Audio('la.wav'); audio.play(); }; var siclick = () => { var audio = new Audio('si.wav'); audio.play(); }; var doclick = () => { var audio = new Audio('do2.wav'); audio.play(); };
Görünüm