JSFiddle - React, Tailwind, and code Playground

by Anav02

HTML

<body>

  <div class="project">
    <div class="container">
      <div class="myheight">Height</div>
      <input type="range" name="" id="Height" min="0" max="200" value="100">
      <div class="myweight">Weight</div>
      <input type="range" name="" id="Weight" min="0" max="200" value="100">
      <div id="bmi">Your BMI</div>
    </div>
  </div>
</body>

CSS

* {
  padding: 0;
  margin: 0;

  color: whitesmoke;
  transition: al .3s ease;
  box-sizing: border-box;
  /* cursor: none; */
}

h1 {
  font-family: 'League Spartan', sans-serif;
  margin-bottom: 20px;
  text-align: center;
}

::-webkit-scrollbar {
  display: none;
}

:root {
  --black: #151515;
  --grey: #282a30;
  --offwhite: rgba(255, 255, 255, 0.3);
  --blue: #38b6ff;
}



body {

  background-color: #282a30;
}

select,
button,
input,
option {
  margin-right: 20px;
  padding: 10px 20px;
  color: var(--black);
  border-radius: 5px;
  outline: none;
}

.project {
  height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.container {
  padding: 20px;
  border-radius: 5px;
  background-color: var(--grey);
  border: 2px solid var(--blue);
  box-sizing: border-box;
}

/* .customCursor {
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: var(--blue);
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 999;
} */

#thediv {
  border-radius: 5px;
  margin: auto;
}

#bmi {
  text-align: center;
  padding: 10px 10px;
  border-radius: 5px;
  border: 2px solid grey;
  margin-top: 20px;
  width: 200px;
}

#make {
  cursor: pointer;
}

.password {
  outline: navy;
  caret-color: var(--blue);
  border: 2px solid var(--grey);
  font-size: 1.25rem;
  color: black;
  position: relative;
  margin: auto;
}

.password:focus {
  border: 2px solid var(--blue);
}

.input {
  position: relative;
}

span {
  position: absolute;
  top: 50%;
  transform: translate(-40px, -50%);
  padding: 5px 7px;
  cursor: pointer;
}

span i {
  color: var(--grey);
}

input[type="range"] {
  padding: 0px;
  cursor: pointer;
  width: 100%;
  appearance: none;
  width: 100%;
  border-radius: 5px;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  height: 5px;
  background-color:...

JavaScript

const h = document.getElementById("Height");
const w = document.getElementById("Weight");
const ans = document.getElementById("bmi");

h.addEventListener('input', height);
h.addEventListener('input', calcBMI);
w.addEventListener('input', weight);
w.addEventListener('input', calcBMI);

function addZero(i) {
    if (i < 10) {i = "0" + i}
    return i;
  }

function height() {
  document.querySelector('.myheight').innerHTML = h.value + " cm";
};

function weight() {
  document.querySelector('.myweight').innerHTML = w.value + " kg";
};

function calcBMI() {
  var mybmi = w.value / (Math.pow((h.value / 100), 2));
  ans.innerHTML = "Your BMI is: " + addZero(mybmi.toPrecision(2));
  if (mybmi < 18.5) {
    ans.style.borderColor = "orange";
  } else if (mybmi >= 18.5 && mybmi < 24.9) {
    ans.style.borderColor = "lime";
  } else if (mybmi >= 25 && mybmi < 39.9) {
    ans.style.borderColor = "orange";
  } else {
    ans.style.borderColor = "red";
  }

}