Wine Glass WIP

nothing to see here

by theopenbox

HTML

<center>
  <div class="container">
    <div id="wine-content">
    </div>
  </div>
  <div class="stem">
  </div>
  <div class="base">
  </div>

  <br />
  <input type="input" min="0" max="100" value="1" id="wine-level-control">
  <div id="text">Wine</div>
  <div id="output">1%</div>
</center>

<script>
  function SGtest() {
    var calculatedwineHeight = calculatedwineHeight
  }
</script>

<button onCick="SGtest()">SGtest</button>

CSS

body {
  background-color: #141414 !important;
}

/* #wine-content DIV */
#wine-content {
  height: 1%;
  background: #fd816d;
  width: 1000px;
}

/* Main Container/glass */
.container {
  border-right: 3px solid #62c5ff8f;
  border-left: 3px solid #62c5ff8f;
  height: 200px;
  width: 200px;
  background: #505050;
  margin: 30px auto;
  border-radius: 50% 50% 0 0;
  transform: rotate(180deg);
  overflow: hidden;
}

.stem {
  height: 130px;
  width: 15px;
  background: #62c5ff;
  margin: -32px auto;
  border-radius: 0 0 5px 5px;
}

.base {
  width: 150px;
  height: 30px;
  background-color: #62c5ff;
  margin: 10px auto;
  border-radius: 50%;
}

#text {
  color: #fff;
}

#output {
  color: #fff;
}

JavaScript

var wineLevelRemote = document.getElementById("wine-level-control");
var wineContent = document.getElementById("wine-content");
var output = document.getElementById("output");
const wineLevelSG = 53;


wineLevelRemote.addEventListener("change", function(e) {
  var wineheight = parseInt(wineLevelRemote.value);
  var calculatedwineHeight = wineheight + "%";

  if (!wineheight || wineheight <= 1) {
    calculatedwineHeight = "0%";
  } else if (wineheight >= 99) {
    calculatedwineHeight = "99%";
  }

  wineContent.style.height = calculatedwineHeight;
  output.innerHTML = calculatedwineHeight;
});