Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  <div class="keyandnote">
    <div id="notes"></div>
    <div class="keyboard" onmousemove="showCoords(event)" onmouseout="clearCoor()">
      <!--     <button class="white" data-note="A2">A2</button>
    <button class="black" data-note="A#2"></button>
    <button class="white" data-note="B2">B2</button> -->
      <button class="white" data-key="C3">C3</button>
      <button class="black" data-key="C#3"></button>
      <button class="white" data-key="D3">D3</button>
      <button class="black" data-key="D#3"></button>
      <button class="white" data-key="E3">E3</button>
      <button class="white" data-key="F3">F3</button>
      <button class="black" data-key="F#3"></button>
      <button class="white" data-key="G3">G3</button>
      <button class="black" data-key="G#3"></button>
      <button class="white" data-key="A3">A3</button>
      <button class="black" data-key="A#3"></button>
      <button class="white" data-key="B3">B3</button>
      <button class="white" data-key="C4">C4</button>
      <button class="black" data-key="C#4"></button>
      <button class="white" data-key="D4">D4</button>
      <button class="black" data-key="D#4"></button>
      <button class="white" data-key="E4">E4</button>
      <button class="white" data-key="F4">F4</button>
      <button class="black" data-key="F#4"></button>
      <button class="white" data-key="G4">G4</button>
      <button class="black" data-key="G#4"></button>
      <button class="white" data-key="A4">A4</button>
      <button class="black" data-key="A#4"></button>
      <button class="white" data-key="B4">B4</button>
      <button class="white" data-key="C5">C5</button>
      <button class="black" data-key="C#5"></button>
      <button class="white" data-key="D5">D5</button>
      <button class="black" data-key="D#5"></button>
      <button class="white" data-key="E5">E5</button>
      <button class="white" data-key="F5">F5</button>
      <button class="black" data-key="F#5"></button>
      <button class="white" data-key="G5">G5</button>
      <button class="black" data-key="G#5"></button>
      <button class="white" data-key="A5">A5</button>
      <button class="black" data-key="A#5"></button>
      <button class="white" data-key="B5">B5</button>
      <!--     <button class="white" data-key="C6">C6</button>
    <button class="black" data-key="C#6"></button>
    <button class="white" data-key="D6">D6</button> -->
    </div>
  </div>

</div>
<span id="paw" class="up">
  <svg id="close" width="62" height="155" viewBox="0 0 62 155" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M16.8211 45.4678C22.133 56.7758 14.8026 120.174 14.9088 135.074C14.9088 161.21 52.7296 155.876 52.7296 137.527C52.6234 125.081 46.8865 68.5106 51.7735 41.8407C55.3527 22.3079 52.5172 17.3044 45.6117 16.0243C44.5493 7.80997 34.8816 7.1699 32.9693 12.1838C28.7198 6.63651 21.3894 12.1838 21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678Z" fill="#FFE66D" />
    <path d="M21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678C22.133 56.7759 14.8026 120.174 14.9088 135.074C14.9088 161.21 52.7296 155.876 52.7296 137.527C52.6234 125.081 46.8865 68.5106 51.7735 41.8407C55.3527 22.3079 52.5172 17.3044 45.6117 16.0243M21.3894 16.771C21.3894 12.1838 28.7198 6.63651 32.9693 12.1838M21.3894 16.771C21.1061 19.2958 21.1981 25.0494 23.8328 27.8657M32.9693 12.1838C34.8816 7.1699 44.5493 7.80997 45.6117 16.0243M32.9693 12.1838C33.3589 14.2463 33.9043 19.6514 32.9693 24.772M45.6117 16.0243C45.8596 19.2247 45.9729 26.0735 44.443 27.8657" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M16.8211 45.4678C19.2818 50.7061 24.7796 51.0824 28.3878 52.1918C31.9959 53.3013 41.4408 52.9347 44.443 51.0245C47.4453 49.1143 50.8479 48.1592 51.7735 41.8407C54.6519 22.1924 52.5172 17.3044 45.6117 16.0243C44.5493 7.80997 34.8816 7.1699 32.9693 12.1838C28.7198 6.63651 21.3894 12.1838 21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678Z" fill="#FFFCEB" />
    <path d="M21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678C19.2818 50.7061 24.7796 51.0824 28.3878 52.1918C31.9959 53.3013 41.4408 52.9347 44.443 51.0245C47.4453 49.1143 50.8479 48.1592 51.7735 41.8407C54.6519 22.1924 52.5172 17.3044 45.6117 16.0243M21.3894 16.771C21.3894 12.1838 28.7198 6.63651 32.9693 12.1838M21.3894 16.771C21.1061 19.2958 21.5081 22.8449 24.1429 25.6612M32.9693 12.1838C34.8816 7.1699 44.5493 7.80997 45.6117 16.0243M32.9693 12.1838C33.3589 14.2463 33.9043 17.7814 32.9693 22.902M45.6117 16.0243C45.8596 19.2247 45.9729 24.8241 44.443 26.6163" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
    <path fill-rule="evenodd" clip-rule="evenodd" d="M49.8789 64.5665C49.8606 64.5085 49.8424 64.4516 49.8245 64.3959C48.9048 66.5184 44.9641 71.3363 36.5592 73.6286C27.323 76.1475 33.2602 77.1902 36.1283 77.6938C36.5226 77.7631 36.8589 77.8222 37.0898 77.8735C38.7859 78.2504 46.6733 77.7906 49.8316 76.2714C49.7862 72.2899 49.796 68.3608 49.8789 64.5665ZM50.453 96.6602C47.5495 98.0283 43.3229 99.6052 38.7467 100.248C30.3622 101.426 40.5808 104.425 42.546 104.961C43.9052 105.331 47.5838 105.651 50.8934 105.316C50.738 102.504 50.5886 99.6067 50.453 96.6602ZM51.5744 116.758C46.7425 118.57 38.9895 120.343 28.5281 120.17C15.0343 119.948 32.7536 125.083 36.1266 125.954C39.7218 126.882 46.5969 127.252 52.2118 126.821C52.1108 125.193 51.9993 123.445 51.8813 121.595C51.7827 120.05 51.6797 118.434 51.5744 116.758ZM16.228 111.984C20.6373 113.202 28.8524 113.554 30.7553 113.208C31.0402 113.157 31.4552 113.097 31.9418 113.027L31.9421 113.027L31.9423 113.027C35.4829 112.519 42.8124 111.466 31.4103 108.924C23.9882 107.269 19.386 104.31 16.9517 101.975C16.7414 104.946 16.5291 107.856 16.325 110.654C16.2925 111.101 16.2601 111.544 16.228 111.984ZM17.6828 91.1044C22.4686 91.8881 29.3754 91.5642 32.7388 90.502C35.4711 89.6392 49.8245 84.5513 38.8939 84.7714C28.8401 84.9739 21.8743 82.4636 18.2844 80.3947C18.1146 83.91 17.9085 87.5077 17.6828 91.1044ZM18.6817 69.6218C21.6803 70.5551 26.1354 70.1698 27.5388 69.702C29.1306 69.1714 37.4082 66.2 30.6163 65.0326C25.2758 64.1147 20.523 61.2762 18.7161 59.903C18.7796 62.8804 18.7614 66.1539 18.6817 69.6218Z" fill="#FFD166" />
  </svg>
  <svg id="open" width="62" height="155" viewBox="0 0 62 155" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M16.9781 45.826C20.4378 54.2718 18.0792 86.6067 16.325 110.654C15.5402 121.414 14.8763 130.514 14.9088 135.074C14.9088 161.21 52.7296 155.876 52.7296 137.527C52.7037 134.488 52.342 128.818 51.8813 121.595C50.4551 99.237 48.0798 61.9983 51.7735 41.8407C51.8164 41.6066 51.8584 41.3774 51.8994 41.1531C53.1068 40.1123 54.3167 38.8833 55.3457 37.1966C56.2304 35.7466 61.3421 26.4826 57.7887 18.8935C54.9459 12.8222 48.683 16.3638 45.7959 18.8935C46.7582 14.5037 46.4621 4.6407 40.2436 3.26879C32.2484 1.5049 29.1391 8.84901 28.4729 12.8668C23.809 7.50975 18.2568 3.26879 12.4824 8.84901C8.48022 12.7167 11.372 19.5631 14.9254 23.1344C8.04066 21.1255 5.1535 23.804 3.15469 26.0361C1.15589 28.2682 1.15591 34.7413 8.04066 40.3215C10.1112 41.9998 12.4671 43.3056 14.7364 44.5634C15.4981 44.9856 16.25 45.4024 16.9781 45.826Z" fill="#FFE66D" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M16.9781 45.826C16.25 45.4024 15.4981 44.9856 14.7364 44.5634C12.4671 43.3056 10.1112 41.9998 8.04066 40.3215C1.15591 34.7413 1.15589 28.2682 3.15469 26.0361C5.1535 23.804 8.04066 21.1255 14.9254 23.1344C11.372 19.5631 8.48022 12.7167 12.4824 8.84901C18.2568 3.26879 23.809 7.50975 28.4729 12.8668C29.1391 8.84901 32.2484 1.5049 40.2436 3.26879C46.4621 4.6407 46.7582 14.5037 45.7959 18.8935C48.683 16.3638 54.9459 12.8222 57.7887 18.8935C61.3421 26.4826 56.2304 35.7466 55.3457 37.1966C54.3167 38.8833 53.1068 40.1123 51.8994 41.1531C51.1114 46.5323 48.4022 48.7118 45.7991 50.2151C45.3445 50.4777 44.8894 50.7405 44.443 51.0245C41.4408 52.9347 31.9959 53.3013 28.3878 52.1918C27.7513 51.9962 27.0561 51.8233 26.3291 51.6425C23.3631 50.905 19.1651 48.9115 16.9781 45.826Z" fill="#FFFCEB" />
    <path d="M28.4729 12.8668C23.809 7.50975 18.2568 3.26879 12.4824 8.84901C8.48022 12.7167 11.372 19.5631 14.9254 23.1344C8.04066 21.1255 5.1535 23.804 3.15469 26.0361C1.15589 28.2682 1.15591 34.7413 8.04066 40.3215C10.1112 41.9998 12.4671 43.3056 14.7364 44.5634C15.4981 44.9856 16.25 45.4024 16.9781 45.826C19.1651 48.9115 23.3631 50.905 26.3291 51.6425C27.0561 51.8233 27.7513 51.9962 28.3878 52.1918C31.9959 53.3013 41.4408 52.9347 44.443 51.0245C44.8894 50.7405 45.3445 50.4777 45.7991 50.2151C48.4022 48.7118 51.1114 46.5323 51.8994 41.1531C53.1068 40.1123 54.3167 38.8833 55.3457 37.1966C56.2304 35.7466 61.3421 26.4826 57.7887 18.8935C54.9459 12.8222 48.683 16.3638 45.7959 18.8935C46.7582 14.5037 46.4621 4.6407 40.2436 3.26879C32.2484 1.5049 29.1391 8.84901 28.4729 12.8668ZM28.4729 12.8668C28.6486 13.2445 29 14.5 29 16" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
    <path fill-rule="evenodd" clip-rule="evenodd" d="M49.8788 64.5665C49.8606 64.5085 49.8424 64.4516 49.8245 64.3959C48.9048 66.5184 44.9641 71.3363 36.5592 73.6286C27.3229 76.1475 33.2602 77.1902 36.1283 77.6939C36.5226 77.7631 36.8589 77.8222 37.0898 77.8735C38.7859 78.2504 46.6732 77.7906 49.8316 76.2714C49.7862 72.2899 49.796 68.3608 49.8788 64.5665ZM50.453 96.6602C47.5495 98.0283 43.3229 99.6052 38.7467 100.248C30.3622 101.426 40.5808 104.425 42.546 104.961C43.9052 105.331 47.5838 105.651 50.8933 105.316C50.738 102.504 50.5886 99.6067 50.453 96.6602ZM51.5744 116.758C46.7425 118.57 38.9895 120.343 28.5281 120.17C15.0343 119.948 32.7536 125.083 36.1266 125.954C39.7218 126.882 46.5968 127.252 52.2118 126.821C52.1108 125.193 51.9993 123.445 51.8813 121.595C51.7827 120.05 51.6797 118.434 51.5744 116.758ZM16.228 111.984C20.6372 113.202 28.8524 113.554 30.7553 113.208C31.0402 113.157 31.4552 113.097 31.9418 113.027L31.9421 113.027L31.9423 113.027C35.4829 112.519 42.8124 111.466 31.4103 108.924C23.9882 107.269 19.386 104.31 16.9517 101.975C16.7414 104.946 16.5291 107.856 16.325 110.654C16.2925 111.101 16.2601 111.544 16.228 111.984ZM17.6828 91.1044C22.4686 91.8881 29.3754 91.5642 32.7388 90.502C35.4711 89.6392 49.8245 84.5513 38.8939 84.7714C28.8401 84.9739 21.8743 82.4636 18.2844 80.3947C18.1146 83.91 17.9085 87.5077 17.6828 91.1044ZM18.6817 69.6218C21.6803 70.5551 26.1354 70.1698 27.5388 69.702C29.1306 69.1714 37.4082 66.2 30.6163 65.0327C25.2758 64.1147 20.523 61.2762 18.7161 59.903C18.7796 62.8804 18.7613 66.1539 18.6817 69.6218Z" fill="#FFD166" />
  </svg>

</span>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Pragati+Narrow:wght@400;700&display=swap');


* {
  font-family: 'Pragati Narrow', sans-serif !important; 
}

$keyboard-white: #F7FFF7;
$keyboard-white-shade: #dae4da;
$keyboard-black: #1A535C;
$keyboard-black-shade: #073B4C;
$keyboard-label: rgba($keyboard-black, .5);

$keyboard-white-width: 40px;
$keyboard-black-width: 32px;
$keyboard-white-height: 140px;
$keyboard-black-height: 90px;

$background:#4ECDC4;

:root {
  --keyboard-mode: #FF6B6B;
  
  background: $background;
  overflow: hidden;
}
.container {
  display: flex;
  justify-content: center;
  height: 100%;
}

.keyandnote {
   margin: 0 auto;
  position: absolute;
  bottom: 20%;
}

.keyboard {
   font-size: 12px;
  font-weight: 400;
  display: inline-table;
  padding: 24px;
  border-radius: 20px 20px 40px 40px;
  background: var(--keyboard-mode);
  min-width: 884px;


  button {
    outline: none;
    transition: all 100ms ease-out;
    margin: 0px;
    padding: 0px;
    border: none;
    color: $keyboard-label;
    border-radius: 20px 20px 40px 40px;
    cursor: none;
   
    &.white {
      background:$keyboard-white;
      width: $keyboard-white-width;
      height: $keyboard-white-height;
      box-shadow: inset $keyboard-white-shade 0 -10px 0 0;
      padding-top: 80px;
      margin: 1px;

      &:hover {
        background: $keyboard-white-shade;
      }
      &:active {
        // background: pink;
        box-shadow: inset $keyboard-white-shade 0 -2px 0 0;
        transform: translate(0, 4px);
      height: calc($keyboard-white-height - 8px);

      }
    }

    &.black {
      background:$keyboard-black;
      width: $keyboard-black-width;
      height: $keyboard-black-height;
      z-index: 99;
      position: absolute;
      transform: translate($keyboard-black-width*-.5, -10px);
      box-shadow: inset $keyboard-black-shade 0 -10px 0 0, var(--keyboard-mode) 0 0 0 2px;

      
      &:hover {
        background: $keyboard-black-shade;
      }
      &:active {
        // background: pink;
        transform: translate($keyboard-black-width*-.5, -2px);
      height: calc($keyboard-black-height - 8px);

        box-shadow: inset $keyboard-black-shade 0 -2px 0 0, var(--keyboard-mode) 0 0 0 2px;
      }
    }
    
    
  }
}

#notes{
    position: absolute;
    bottom: 160px;


  span {
    border-radius: 100px;
    position: absolute;
    z-index: -1;
    transform-origin: center bottom;

    &.user {
      background: var(--note-user);
      height: $keyboard-white-width;
    }
    &.system {
      background: var(--note-system);
    }
    
    svg {
      width: 100%;
    }
  }
}

#paw {
  transform: scale(1.2);
  z-index: 999;
  position: absolute;
  bottom: -120px;  
  left: 500px;
  transform: translate(-50%, 0);
  pointer-events: none;
  transition: bottom 100ms ease, left 50ms ease, transform 100ms ease-out;
  
  svg {
    display: none;

  }
  
  &.up {
    transform: translate(-50%, 0);
    #open{
      display: block;

    }
  }
  &.down {
    transform: translate(-50%, 8px);
    #close {
        display: block;
    }
  }
}

              
            
!

JS

              
                var paw = document.getElementById("paw");
var keyboard = document.querySelector(".keyboard");

let sampler = new Tone.Sampler({
  urls: {
    // F3: "cow_F3.mp3",
    // F5: "cat_F5.mp3",
        F4: "mariopaintmeow.mp3"

  },
  baseUrl:
    "https://amplify-education.github.io/hackathon-Auto-Meow-Tone/samples/"
}).toDestination();

function showCoords(event) {
  var x = event.clientX;
  var y = event.clientY;
  var target = event.target;
  var coor = "X coords: " + x + ", Y coords: " + y;
  paw.style.left = x + "px";
  var botton = window.innerHeight - keyboard.parentElement.offsetTop - keyboard.offsetHeight;
  
  if (target.classList.contains("black")) {
    paw.style.bottom = botton - 20 + "px";
  } else if (target.classList.contains("white")) {
    paw.style.bottom = botton - 70 + "px";
  }
}

function clearCoor() {
  paw.style.bottom = -120 + "px";
}

document.addEventListener("mousedown", function (e) {
  var target = e.target;
  if (target.hasAttribute("data-key")) {
    paw.classList.remove("up");
    paw.classList.add("down");

    makeNotes(
      target.getAttribute("data-key"),
      target.offsetLeft,
      target.offsetWidth
    );
    sampler.triggerAttackRelease(target.getAttribute("data-key"), 1);
  }
});

document.addEventListener("mouseup", function (e) {
  paw.classList.remove("down");
  paw.classList.add("up");
});

function makeNotes(key, x, w) {
  var left;
  var height;
  var width;
  if (w > 35) {
    left = x;
    width = w - 6;
    height = width;
  } else {
    left = x - w / 2;
    width = w;
    height = width;
  }
  var newnote = document.createElement("span");
  newnote.classList.add("user");
  newnote.setAttribute(
    "style",
    "margin-left:" + left + "px; width:" + width + "px;"
  );
  moveNotes(newnote);
  newnote.innerHTML =
    "<svg class='pawnote' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.8211 38.4678C10.2818 43.7061 15.7796 44.0824 19.3878 45.1918C22.9959 46.3013 32.4408 45.9347 35.443 44.0245C38.4453 42.1143 41.8479 41.1592 42.7735 34.8407C45.6519 15.1924 43.5172 10.3044 36.6117 9.02428C35.5493 0.809966 25.8816 0.169898 23.9693 5.18382C19.7198 -0.36349 12.3894 5.18382 12.3894 9.77104C1.76553 9.77104 2.40863 26.9457 7.8211 38.4678Z' fill='#FFFCEB' stroke='#FFD166' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' /><g opacity='0.4'><path d='M13 18C11.8 13.6 8.00003 16.5 7.50002 19C6.56469 23.6766 10 24.5 11 24C12 23.5 14.0909 22 13 18Z' fill='#FF6B6B' /><path d='M22 11C21.5 7.50002 18 7.50001 17 9.5C14.5917 14.3166 16.5 16.125 18 16.5C20.5 17.125 22.5331 14.7318 22 11Z' fill='#FF6B6B' /><path d='M31.5 10C30.2397 6.21914 26.8313 8.01837 26.5 11C26 15.5 28 16.5 30 16.5C31.5 16.5 33.1279 14.8836 31.5 10Z' fill='#FF6B6B' /><path d='M39.5 17C38 14.5 35.5 16.5 35 18C33.6667 22 36.5 24 38 24C40 24 41.5092 20.3486 39.5 17Z' fill='#FF6B6B' /><path d='M23.5 21.5C18.9723 21.5 17.3333 25 16.5 27C14.5 26.6667 10.7083 28.5 11 32C11.3333 36 14.5 36.5 17 36.5C19 38 20.5 39 24.5 39C27.7985 39 30.5 37.6667 31.5 36.5C33.5 36.5 37 36.02 37 32C37 28 34 27 32 27C30.5 23 28.0277 21.5 23.5 21.5Z' fill='#FF6B6B' /></g><g opacity='0.5'><path d='M29.9981 10.6811C30.0514 11.6462 29.5357 12.4593 28.8464 12.4973C28.1571 12.5354 27.5551 11.7839 27.5019 10.8188C27.4487 9.85381 27.9643 9.04067 28.6536 9.00265C29.3429 8.96462 29.9449 9.71611 29.9981 10.6811Z' fill='#FFFCEB' /><path d='M19.902 11.0648C19.7098 12.012 19.0055 12.6685 18.3289 12.5312C17.6524 12.3939 17.2597 11.5148 17.452 10.5676C17.6442 9.6204 18.3485 8.96385 19.025 9.10115C19.7016 9.23845 20.0942 10.1176 19.902 11.0648Z' fill='#FFFCEB' /><path d='M23.7186 28.2586C22.1349 29.3138 20.2025 29.1959 19.4025 27.9953C18.6025 26.7946 19.2379 24.9659 20.8216 23.9107C22.4053 22.8554 24.3376 22.9733 25.1376 24.1739C25.9376 25.3746 25.3023 27.2033 23.7186 28.2586Z' fill='#FFFCEB' /><path d='M11.3061 18.6944C11.1588 19.4199 10.6194 19.9228 10.1012 19.8176C9.58302 19.7124 9.28228 19.0391 9.4295 18.3136C9.57673 17.5881 10.1162 17.0852 10.6344 17.1904C11.1526 17.2956 11.4533 17.9689 11.3061 18.6944Z' fill='#FFFCEB' /><path d='M38.1579 18.4126C38.2286 19.1494 37.8592 19.7877 37.3329 19.8383C36.8065 19.8888 36.3225 19.3323 36.2518 18.5955C36.1811 17.8586 36.5505 17.2203 37.0768 17.1698C37.6032 17.1193 38.0872 17.6757 38.1579 18.4126Z' fill='#FFFCEB' /></g></svg>";
  document.getElementById("notes").appendChild(newnote);
}

function moveNotes(elem) {
  var pos = 0;
  var max = 600;
  var id = setInterval(frame, 10);

  console.log("max" + keyboard.offsetTop);
  function frame() {
    if (pos == max) {
      clearInterval(id);
      elem.remove();
    } else {
      pos++;
      elem.style.bottom = pos + "px";
    }
  }
}

              
            
!
999px

Console