JSFiddle - React, Tailwind, and code Playground

by dhijdfjdfd

HTML

<HTML>

  <head>
    <Title>
      Hack The Ridge Workshop
    </Title>
  </head>

  <body>

    <h1>
      DO YOU USE TOO MUCH ELECTRICITY? FIND OUT BELOW
    </h1>
  </body>

  <html>
   
</p>
</body>

<br>



<h3>
  How many total hours does your family use light tech (e.g. phone, computer, etc) per day
  <input type="number"id="light_value">
  
  <br>
  <br>
   How many total hours does your family use Heavy tech (e.g. TV, Desktop, PC, console, etc) per day
  <input type="number"id="heavy_value">
<br>
 How many heavy tech are running in your home(not including fridge - Around 4-7)?
 <input type="number"id="heavy_number">

  <button onclick="doSomething()" style="background-color: #CF0A0A; color: #00FF00; border-radius:5px">Submit</button>
  <p id="test">
 

    <script>
     function doSomething() {
      	let computer_hours = document.getElementById("heavy_value").value
        let heavy_devices = document.getElementById("heavy_number").value
        let light_devices = document.getElementById("light_value").value 
        let light_calculations = document.getElementById.innerHTML = light_devices*6/1000*0.05*30*.666;
        let heavy_hours = document.getElementById.innerHTML =  computer_hours*200/1000*12.2*30*heavy_devices*0.15;
  			let quandale_hours = document.getElementById("test").innerHTML = heavy_hours + light_calculations
    
      }

    </script>
    <p3>
    The above number is your predicted electricity bill for the month. This simple widget can be used to figure out if you can afford the electric bill or not.
    </p3>

<img src = https://blog.constellation.com/wp-content/uploads/2020/04/LessonPlan6_Blog_Banner.jpg>
    </html>

CSS

hr{color: darkgreen; text-align: center}

h1 {
  color: darkblue;
  text-align: center
}

body {
  background-color: pink;
}

p {
  color: blue;
  width: 75%;
  size: 8;
  font: Comic Sans MS
}

p {
  font-weight: bold;
}

h2 {
  color: green;
}

dt {
  color: red;
  width: 65%;
  size: 10;
  font: Georgia;
}

h3 {
  color: green;
  font-weight: bold;
}
p3{color: blue; text-align: center}