Online jQuery Editor

Browse more Jquery Examples
<!DOCTYPE html>
<html>
<head>
<title>targilim</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function visualize(){

 let temp = Number($("#temp").val())
 
 if(temp > 25){
   $("#container").append("<div class='hot'>It's hot</div>")
 }
 else{
   $("#container").append("<div class='cold'>It's cold</div>")
  }
}</script>
<style>
.hot{
  width: 100px;
  height: 25px; background-color: #e67e22;
  margin: 5px;
  box-shadow: 1px 1px 3px black;
}

.cold{
  width: 50px;
  height: 50px;
  background-color: #3498db;
  margin: 5px;
  box-shadow: 1px 1px 3px black;
}
</style>
</head>
<body>
<input id="temp" placeholder="What's the temperature?">
<button onclick=visualize()>Visualize</button>
<div id="container"></div>
</body>
</html>
Online jQuery Editor

Follow

Newsletter
