Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
.txt {
 font-size: 14pt;
}
summary {
  font-size: 20pt;
}
/* STYLE */ .txt, summary { font-family: monospace; white-space: pre-wrap; }
/* STYLE */ .zoombox { display: flex; padding: 8pt 0pt; }    
  </style>
  
  <script>
    function zoomTo(newSize) {
      var allTxts = document.getElementsByClassName('txt');
      for (var i=0; i < allTxts.length; i++) {
          allTxts[i].style.fontSize = newSize;
      }      
    }
  
  </script>
</head>
<body>
<div class="zoombox">
  <button class="btn zoom out" onClick="zoomTo('10px')">-</button>
  <div class="txt"> ZOOM </div>
  <button class="btn zoom in" onClick="zoomTo('20px')">+</button>
</div>
<details open>
  <summary>TITLE OF THE SONG</summary>
  <div class="txt chords">  Em   F        D#    </div>
  <div class="txt lyrics">A song with its lyrics</div>
</details>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
grahampcharlespro
0viewers