title: Cycle back to start or end of number range using increment/decrement button
body: <p>I've read through a lot of questions here at StackOverflow, but I can't seem to find the answer. </p>
  
  <p>I want to be able to increment or decrement a range of numbers where I can loop back to the first or last number by pressing a button. While I have the max/min value, I want to have it so that every time the increment button is pressed, it increases by a specific number. For example, if the number range is from <code>69</code> to <code>108</code>, it goes up by <code>4</code>. And from <code>108</code> to <code>144</code>, it increases by <code>8</code>. Once the increment button hits the max, let's say <code>252</code>, then I want it reset back to the min value <code>30</code>, and then increase it again by 2. This also applies to the decrement button, except the number value goes down.  </p>
  
  <p>These are the number ranges where it gets increased by a specific number:</p>
  
  <pre><code>30 -&gt; 42 - increases by 2
  42 -&gt; 60 - increases by 3
  </code></pre>
  
  <p>I might change this later as I am working through the solution, so if there is a process or a way, please let me know. </p>
  
  <p>Right now, I just have it so that every time I press the increment button, it goes up by 4, and vice-versa for the decrement button. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
   
    //toggle between default color screen and light orange screen 
    //also toggle the color inside 'metronome' and 'tuner' text
    //inside default color rectangle screen
    $(".smallbutton").click(function() {
      $(".Orange").toggleClass('OrangeLight');
      $(".Metronome-box").toggleClass('OrangeLight-text');
      $(".tuner-text").toggleClass('OrangeLight-text');
    });
    
  var counter = 108;
  var beat = 4;
    
    //number increment for tempo
    $('.up-tempo-triangle').click(function() {
      counter = counter + 4;
      $('.metronome_beats').text(counter);
    });
    
    //number decrement for tempo
    $('.down-tempo-triangle').click(function() {
      counter = counter - 4;
      $('.metronome_beats').text(counter);
    });
    
    //number increment for beat
    $('.up-beat-triangle').click(function() {
      beat = beat + 1;
      $('.beat-note-value').text(beat);
    });
    
    //number decrement for beat
    $('.down-beat-triangle').click(function() {
      beat = beat - 1;
      $('.beat-note-value').text(beat);
    });
    
    //toggle tuner side on and off by pressing "Tumer On"
    //grey rectangle button
    $(".GreyRectangle1").click(function() {
      $(".ReceivedTunerNote").toggleClass('ReceivedTunerNote1');
      $(".tuner-text").toggleClass('ReceivedTunerNote1');
      $(".hertz-value").toggleClass('ReceivedTunerNote1');
      $(".hertz-symbol").toggleClass('ReceivedTunerNote1');
    });
    
    //toggle metronome side on and off by pressing "Metronome On" 
    //grey rectangle button
    $(".GreyRectangle2").click(function() {
      $(".Metronome-box").toggleClass('Metronome1');
      /*make sure to toggle to the same class, in this case 
       'Metronome1'*/
      $(".tempo-text").toggleClass('Metronome1');
      $(".metronome_beats").toggleClass('Metronome1');
      $(".beat-text").toggleClass('Metronome1');
      $(".beat-note-value").toggleClass('Metronome1');
    });
  });
  
  /*
  from this pen: https://codepen.io/mtbroomell/pen/yNwwdv
  
  function increaseValue() {
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
  }
  
  function decreaseValue() {
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value &lt; 1 ? value = 1 : '';
    value--;
    document.getElementById('number').value = value;
  }
  */</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
    font-size: 2em;
    font-family: arial;
    text-align: center;
  }
  
  p {
    font-family: arial;
  }
  
  div {
    font-family: arial;
    color: white;
    font-size: 50%;
  }
  
  body {
    text-align: center;
    background-color: #F7EBC4;
  }
  
  .BlackRectangle {
    display: grid;
    
    /*grid-template-columns creates 5 columns*/
    grid-template-columns: 100px 94px auto 94px 100px;
    
    /*grid-template-rows create 5 rows*/
    grid-template-rows: 20% 20% 20% 20% 20%;
    height: 290px;
    width: 460px;
    background-color: #212121;
    border-radius: 25px;
    margin: auto;
    z-index: -1;
  }
  
  .greencircle {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 1;
    background-color: green;
    height: 12px;
    width: 12px;
    border-radius: 20px;
    margin-top: 5px;
    margin-left: 28px;
  }
  
  .redcircle {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    background-color: red;
    height: 12px;
    width: 12px;
    border-radius: 20px;
    margin-top: 5px;
    margin-left: 90px;
  }
  
  .flat {
    content: "\266D";
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    font-size: 175%;
    color: white;
    margin-right: -4px;
  }
  
  .redcircle1 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    background-color: red;
    height: 12px;
    width: 12px;
    border-radius: 20px;
    margin-top: 5px;
    margin-left: 155px;
  }
  
  .sharp {
    content: "\266F";
    font-size: 175%;
    color: white;
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-left: -8px;
    margin-top: 2px;
  }
  
  .Orange {
    grid-row-start: 1;
    grid-row-end: span 2;
    grid-column-start: 2;
    grid-column-end: span 3;
    display: grid;
    grid-template-columns: 50px auto 50px;
    grid-template-rows: 30px auto 30px;
    font-size: 1.5em;
    background-color: #D7C39C;
    border-radius: 5px;
    height: 100px;
    width: 253px;
    margin-top: 30px;
    margin-left: 2px;
    z-index: 1;
  }
  
  .OrangeLight {
    background-color: #FFB266; 
  }
  
  .OrangeMedium {
    background-color: orange;
  }
  
  .tuner-text {
    grid-column: 1/1;
    grid-row: 1/1;
    color: #D7C39C;
    font-size: 70%;
    background-color: black;
    transform: scaleX(1.2);
    height: 10px;
    width: 60px;
    border-radius: 3px;
    margin-top: 1px;
    margin-left: 8px;
  }
  
  .hertz-value {
    grid-column: 1/2;
    grid-row: 1/2;
    font-size: 125%;
    font-style: italic;
    color: black;
    margin-left: -19px;
    margin-top: 11px;
  }
  
  .hertz-symbol {
    grid-column: 1/1;
    grid-row: 1/1;
    font-size: 70%;
    transform: scaleX(1.2);
    color: black;
    margin-top: 18px;
    margin-left: 22px;
  }
  
  .ReceivedTunerNote {
    position: absolute;
    grid-column: 1/3;
    grid-row: 1/2;
    font-size: 125%;
    color: black;
    z-index: 4;
    margin-left: 121px;
  }
  
  .ReceivedTunerNote1 {
    visibility:hidden;
  }
  
  .input-edit-prevent-box {
    position: absolute;
    grid-column: 3/4;
    grid-row: 1/span 4;
    background-color: transparent;
    width: 85px;
    height: 100px;
    margin-left: 175px;
    z-index: 4;
  }
  
  .Metronome-box {
    position: absolute;
    grid-column: 3/ span 4;
    grid-row: 1/ span 2;
    font-size: 70%;
    color: #D7C39C;
    background-color: black;
    transform: scaleX(1.2);
    height: 10px;
    width: 60px;
    border-radius: 3px;
    z-index: 2;
    margin-left: 185px;
    margin-top: 1px;
  }
  
  /*when toggling, the visibility hidden function will
  hide the div element 'A' completely that is independent
  of 'METRONOME' rather than 'display:none'*/
  .Metronome1 {
    visibility: hidden;
  }
  
  .OrangeLight-text {
    color: #FFB266;
  }
  
  .tempo-text {
    position: absolute;
    grid-column: 2/ span 4;
    grid-row: 1/1;
    font-size: 65%;
    color: black;
    transform: scaleX(1.2);
    margin-top: 13px;
    margin-left: 188px;
  }
  
  /*note: I haven't gotten to part where I can adjust
  metronome beat, so left it as default 108 per beat*/
  .metronome_beats {
    position: absolute;
    grid-column: 2/ span 4;
    grid-row: 1/1;
    font-size: 125%;
    color: black;
    
    /*transparent background-color and no borders is because of deault setting of input*/
    background-color: transparent;
    border: none; 
    transform: scaleX(1.2);
    font-style: italic;
    text-align: right; 
    width: 35px;
    margin-left: 162px;
    margin-top: 10px;
  }
  
  .beat-text {
    position: absolute;
    grid-column: 3/4;
    grid-row: 1/ span 3;
    font-size: 65%;
    color: black;
    transform: scaleX(1.2);
    margin-left: 216px;
    margin-top: 48px;
    z-index: 4;
  }
  
  .beat-note-value {
    grid-column: 1/4;
    grid-row: 2/3;
    font-size: 125%;
    transform: scaleX(1.2);
    color: black;
    background-color: transparent;
    border: none; 
    width: 20px;
    font-style: italic;
    text-align: right;
    margin-left: 178px;
    margin-top: 46px;
  }
  
  .top-trapezoid {
    grid-column: 1/ span 5;
    grid-row: 1 / 2;
    height: 5px;
    width: 253px;
    
    /*151515 is a very dark grey, borderline black*/
    border-top: 8px solid #151515;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    margin-top: 22px; 
    margin-left: 94px;
  }
  
  .right-trapezoid {
    grid-column: 5 / span 6;
    grid-row: 1 / span 3;
    height: 103px;
    width: 0px;
    border-right: 8px solid #3C3C3C;
    border-top: 7px solid transparent;
    border-bottom: 10px solid transparent; 
    margin-top: 22px;
    z-index: 2;
  }
  
  .bottom-trapezoid {
    grid-column: 1 / span 5;
    grid-row: 3 / span 4;
    height: 5px;
    width: 255px;
    border-bottom: 12px solid #2e2e2e;
    border-right: 6.5px solid transparent;
    border-left: 6.5px solid transparent;
    margin-top: 9px;
    margin-left: 95px;
    z-index: 2;
  }
  
  .left-trapezoid {
    grid-column: 1 / span 3;
    grid-row: 1 / span 4;
    height: 100px;
    border-left: 8px solid #1B1B1B;
    border-top: 8px solid transparent;
    border-bottom: 11px solid transparent;
    margin-left: 95px;
    margin-top: 23px;
  }
  
  .tuner-on {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 0;
    grid-row-start: 1;
    color: white;
    transform: scaleX(1.3);
  }
  
  .GreyRectangle1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
    height: 15px;
    width: 53px;
    background-color: gray;
    border-radius: 20px;
    margin: auto;
    z-index: 3;
  }
  
  .InnerGreyDot {
    height: 4px;
    width: 4px;
    background-color: #9C9C9C;
    border-radius: 50%;
    z-index: 3;
    margin-left: 17px;
    margin-bottom: 2px;
  }
  
  .small-left-white-line {
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 2;
    grid-row-end: span 3;
    margin: auto;
    width: 3px;
    height: 10px;
    border-top: 1px solid white;
    margin-top: -28px;
    margin-left: 22px;
  }
  
  .first-left-white-line {
    grid-column: 1 / 2;
    grid-row: 1 / span 2;
    width: 10px;
    height: 15px;
    border-left: 1px solid white;
    margin-left: 21px;
    margin-top: 31px;
  }
  
  .upside-down-half-circle {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: span 3;
    height: 9px;
    width: 20px;
    border-radius: 0 0 90px 90px;
    background: #828181;
    z-index: 1;
    margin-left: 40px;
    margin-top: 37px;
  }
  
  .second-left-white-line {
    grid-column: 1 / 2;
    grid-row: 2 / span 3;
    height: 98px;
    width: 21px;
    border-right: 1px solid white;
  }
  
  .third-left-white-line {
    grid-column: 1/2;
    grid-row: 4/5;
    height: 1px;
    width: 8px;
    border-top: 1px solid white;
    margin-left: 22px;
    margin-top: -19px;
  }
  
  .calibrate {
    grid-column: 1 / 2;
    grid-row: 2 / span 3;
    
    /*transform scale X will stretch the word horizontally based on the x-axis*/
    transform: scaleX(1.3);
    color: white;
    margin-right: 33px;
    margin-top: -10px;
  }
  
  .note {
    grid-column: 1 / span 2;
    grid-row: 1 / span 3;
    transform: scaleX(1.3);
    color: white;
    margin-left: -55px;
    margin-top: 48px;
  }
  
  .first-right-white-line {
    grid-column: 1/span 2;
    grid-row: 1/span 3;
    height: 67px;
    width: 0px;
    border-right: 1px solid white;
    margin-left: 80px;
    margin-top: 57px;
  }
  
  .up-triangle {
    grid-column: 1/span 2;
    grid-row: 1 / span 2;
    transform: scale(0.05,0.05);
    margin-left: -145px;
    margin-top: -120px;
  }
  
  .in-between-triangle-line {
    grid-column: 1 / span 2;
    grid-row: 2 / span 3; 
    height: 8px;
    width: 1px; 
    border-left: 1px solid gray;
    margin-left: 50px;
    margin-top: 29px;
  }
  
  .down-triangle {
    grid-column: 1/span 2;
    grid-row: 1/ span 3;
    transform: scale(0.05,0.05);
    margin-left: -145px;
    margin-top: -88px;
  }
  
  .second-right-white-line {
    grid-column: 1/2;
    grid-row: 3/4;
    height: 1px;
    width: 10px;
    border-bottom: 1px solid white; 
    margin-left: 71px;
    margin-top: 7px;
  }
  
  .sound {
    grid-column: 1/2;
    grid-row: 2/4;
    transform: scaleX(1.2);
    color: white;
    margin-top: 62px;
  }
  
  .small-black-rectangle {
    grid-column: 1/2;
    grid-row: 3/4;
    height: 12px;
    width: 35px;
    border-radius: 10px;
    background-color: black;
    margin-left: 33px;
    margin-top: 15px;
    z-index: 2;
  }
  
  .sound-back {
    grid-column: 1/ 2;
    grid-row: 3/ span 5;
    color: white;
    transform: scaleX(1.2);
    margin-top: 30px;
  }
  
  .small-black-rectangle1 {
    grid-column: 1/2;
    grid-row: 3/4;
    height: 12px;
    width: 35px;
    border-radius: 10px;
    background-color: black;
    margin-left: 33px;
    margin-top: 50px;
    z-index: 2;
  }
  
  .illuminating-star {
    grid-column: 1/3;
    grid-row: 2/4;
    transform: scale(0.04,0.04);
    margin-left: -85px;
    margin-top: -97px;
  }
  
  .smallbutton {
    grid-column: 2/2;
    grid-row: 4/5;
    height: 15px;
    width: 10px;
    border-radius: 20px;
    background-color: black;
    margin-left: 2px;
    margin-top: -7px;
    z-index: 2;
  }
  
  
  .voltext {
    grid-column: 4/5;
    grid-row: 1/2;
    transform: scaleX(1.2);
    color: white;
    margin-left: 33px;
  }
  
  .right-side-triangle {
    grid-column: 4 / 5;
    grid-row: 1 / span 2;
    width: 0; 
    height: 0; 
    border-top: 7px solid transparent;
    border-bottom: 1px solid transparent; 
    border-right: 20px solid white;
    margin-left: 75px;
    margin-top: 8px;
  }
  
  .metronome-on {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: span 2;
    transform: scaleX(1.2);
    color: white;
    margin-right: 6px;
  }
  
  .GreyRectangle2 {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 1;
    height: 15px;
    width: 55px;
    background-color: gray;
    border-radius: 20px;
    margin-left: 27px;
    margin-top: 22px;
    z-index: 2;
  }
  
  .InnerGreyDot1 {
    height: 4px;
    width: 4px;
    background-color: #9C9C9C;
    border-radius: 50%;
    z-index: 3;
    margin-left: 12px;
  }
  
  .upside-down-half-circle1 {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: span 3;
    height: 9px;
    width: 20px;
    border-radius: 0 0 90px 90px;
    background: #828181;
    z-index: 1;
    margin-top: 38px;
    margin-left: 44px;
  }
  
  .beat-white-text{
    position: absolute;
    grid-column: 4/ span 6;
    grid-row: 1/span 3;
    transform: scaleX(1.2);
    color: white;
    margin-left: 380px;
    margin-top: 50px;
  }
  
  .up-beat-triangle {
    grid-column: 1/span 2;
    grid-row: 1 / span 2;
    transform: scale(0.05,0.05);
    cursor: pointer;
    margin-left: 195px;
    margin-top: -120px;
    z-index: 2;
  }
  
  .in-between-triangle-beat-line {
    grid-column: 2 / span 4;
    grid-row: 2 / span 3; 
    height: 8px;
    width: 1px; 
    border-left: 1px solid gray;
    margin-left: 290px;
    margin-top: 29px;
  }
  
  .down-beat-triangle {
    grid-column: 1/span 2;
    grid-row: 1/ span 3;
    transform: scale(0.05,0.05);
    cursor: pointer;
    margin-left: 195px;
    margin-top: -88px;
  }
  
  .tempo-white-text {
    position: absolute;
    grid-column: 4/ span 6;
    grid-row: 1/ span 2;
    transform: scaleX(1.2);
    color: white;
    margin-left: 412px;
    margin-top: 50px;
  }
  
  .up-tempo-triangle {
    grid-column: 1/span 2;
    grid-row: 1 / span 2;
    transform: scale(0.05,0.05);
    margin-left: 230px;
    margin-top: -120px;
    z-index: 2;
  }
  
  .in-between-triangle-tempo-line {
    grid-column: 2 / span 4;
    grid-row: 2 / span 3; 
    height: 8px;
    width: 1px; 
    border-left: 1px solid gray;
    margin-left: 324px;
    margin-top: 29px;
  }
  
  .down-tempo-triangle {
    grid-column: 1/span 2;
    grid-row: 1/ span 3;
    transform: scale(0.05,0.05);
    margin-left: 230px;
    margin-top: -88px;
  }
  
  .tap-tempo-text {
    grid-column: 5/ span 6;
    grid-row: 3/4;
    font-size: 100%;
    color: white;
    transform: scaleX(1.2);
    margin-top: 2px;
    margin-right: -5px;
  }
  
  .tap-tempo-button {
    position: absolute;
    grid-column: 4/5;
    grid-row: 3/ span 4;
    background-color: gray;
    height: 40px;
    width: 40px;
    border-radius: 50px;
    border: 1px solid black;
    box-shadow: 
      inset 8px 8px 10px -6px rgba(0,0,0,0.35);
    margin-left: 388px;
    margin-top: 130px;
  }
  
  .tap-tempo-button:active {
    /*in order for radial-gradient to have gradient, the outer more circles must have higher percentages than the inner circle, otherwise it will become solid colors*/
    background: radial-gradient(closest-side, #EC7FA2 10%, #EBA5BB 85%, #FFD1E0 100%);
    border: 1px solid #FFEAEA;
    box-shadow: 0 0 5px 5px #FF4040;
  }
  
  .rights {
    font-weight: bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;title&gt;Tuner and Metronome Combined&lt;/title&gt;
  &lt;h1&gt;&lt;strong&gt;My Tuner and Metronome (based on Korg Tuner TM50 and Metronome Design)&lt;/strong&gt;&lt;/h1&gt;
  &lt;body&gt;
    &lt;div class="BlackRectangle"&gt;
        &lt;div class="greencircle"&gt;&lt;/div&gt;
        &lt;div class="redcircle"&gt;&lt;/div&gt;
        &lt;span class="flat"&gt;&amp;#9837;&lt;/span&gt;
        &lt;div class="redcircle1"&gt;&lt;/div&gt;
        &lt;span class="sharp"&gt;&amp;#9839;&lt;/span&gt;
      &lt;div class="Orange"&gt;
        &lt;div class="tuner-text"&gt;TUNER&lt;/div&gt;
        &lt;div class="hertz-value"&gt;440&lt;/div&gt;
        &lt;div class="hertz-symbol"&gt;HZ&lt;/div&gt;
        &lt;div class="ReceivedTunerNote"&gt;A&lt;/div&gt;
        &lt;!--the input-edit-prevent-box is used to hide input textbox. This is soley for the purpose of imitating the real-life metronome where you cannot physically edit it on-screen--&gt;
        &lt;div class="input-edit-prevent-box"&gt;&lt;/div&gt;
        &lt;div class="Metronome-box"&gt;METRONOME&lt;/div&gt;
        &lt;div class="tempo-text"&gt;TEMPO&lt;/div&gt;
        &lt;div class="beat-text"&gt;BEAT&lt;/div&gt;
        
        &lt;!--increment/decrement tempo and beat value--&gt;
        &lt;form&gt;
          &lt;!--input name is used to put name inside form submission--&gt;
        &lt;div type="text" min="30" max="252" class="metronome_beats"&gt;&lt;/div&gt;
         &lt;div type="text" value="4" class="beat-note-value"&gt;&lt;/div&gt;
      &lt;/form&gt;
    
      &lt;/div&gt;
      &lt;div class="top-trapezoid"&gt;&lt;/div&gt;
      &lt;div class="right-trapezoid"&gt;&lt;/div&gt;
      &lt;div class="bottom-trapezoid"&gt;&lt;/div&gt;
      &lt;div class="left-trapezoid"&gt;&lt;/div&gt;
      &lt;p class="tuner-on"&gt;TUNER ON&lt;/p&gt;
      &lt;button class="GreyRectangle1"&gt;
        &lt;div class="InnerGreyDot" style="margin-top: 2px;"&gt;&lt;/div&gt;
      &lt;/button&gt;
      &lt;div class="small-left-white-line"&gt;&lt;/div&gt;
      &lt;div class="first-left-white-line"&gt;&lt;/div&gt;
      &lt;div class="upside-down-half-circle"&gt;&lt;/div&gt;
      &lt;p class="calibrate"&gt;CALIB&lt;/p&gt;
      &lt;div class="second-left-white-line"&gt;&lt;/div&gt;
      &lt;div class="third-left-white-line"&gt;&lt;/div&gt;
      &lt;p class="note"&gt;NOTE&lt;/p&gt;
      &lt;div class="first-right-white-line"&gt;&lt;/div&gt;
      &lt;input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184787015/cd90a26d-8c21-4437-8436-c018e4f20252/hireslargecomposite.png" class="up-triangle"&gt;
      &lt;div class="in-between-triangle-line"&gt;&lt;/div&gt;
      &lt;input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184782382/0292af05-b48b-4195-9e90-aea0f850fab8/hireslargecomposite.png" alt="giant up triangle" class="down-triangle"&gt;
      &lt;div class="second-right-white-line"&gt;&lt;/div&gt;
      &lt;p class="sound"&gt;SOUND&lt;/p&gt;
      &lt;button class="small-black-rectangle"&gt;&lt;/button&gt;
  &lt;p class="sound-back"&gt;SOUND&lt;br&gt;BACK&lt;/p&gt;
      &lt;button class="small-black-rectangle1"&gt;&lt;/button&gt;
      &lt;img src="https://imgservice.cricut.com/design-users/users/4339679/images/184947932/2b99ea92-05ad-41d3-a211-4625bb4c5796/hireslargecomposite.png" alt="Illuminating star symbol" class="illuminating-star"&gt;&lt;/img&gt;
  &lt;button class="smallbutton"&gt;&lt;/button&gt;
      &lt;p class="voltext"&gt;VOL&lt;/p&gt;
      &lt;div class="right-side-triangle"&gt;&lt;/div&gt;
      &lt;p class="metronome-on"&gt;METRONOME ON&lt;/p&gt;
      &lt;button class="GreyRectangle2"&gt;
        &lt;div class="InnerGreyDot1"&gt;
          &lt;div class="InnerGreyDot1"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/button&gt;
      &lt;div class="upside-down-half-circle1"&gt;&lt;/div&gt;
    
    &lt;!--Note: in Korg TM50 Tuner and Metronome specification, tempo range is from 30 to 252 BPM--&gt;
    
    &lt;!--Also, only moves up and down by 4 beats--&gt;
      &lt;p class="beat-white-text"&gt;BEAT&lt;/p&gt;
  &lt;!--Have up triangle image act as button using onclick event--&gt;
    &lt;input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184787015/cd90a26d-8c21-4437-8436-c018e4f20252/hireslargecomposite.png" alt="giant up triangle" data-max="252" class="up-beat-triangle"&gt;&lt;/input&gt;
    &lt;div class="in-between-triangle-beat-line"&gt;&lt;/div&gt;
    &lt;input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184782382/0292af05-b48b-4195-9e90-aea0f850fab8/hireslargecomposite.png" alt="giant up triangle" data-min="30" class="down-beat-triangle"&gt;
      &lt;p class="tempo-white-text"&gt;TEMPO&lt;/p&gt;
    &lt;input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184787015/cd90a26d-8c21-4437-8436-c018e4f20252/hireslargecomposite.png" class="up-tempo-triangle"&gt;
    &lt;div class="in-between-triangle-tempo-line"&gt;&lt;/div&gt;
    &lt;input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184782382/0292af05-b48b-4195-9e90-aea0f850fab8/hireslargecomposite.png" alt="giant up triangle" class="down-tempo-triangle"&gt;
    &lt;div class="tap-tempo-text"&gt;TAP TEMPO&lt;/div&gt;
    &lt;button class="tap-tempo-button"&gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;p&gt;Will be working on toggle function between beige, light orange, and orange&lt;/p&gt;
  &lt;p class="rights"&gt;Made by Sarah&lt;/p&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>