Skip to content

Instantly share code, notes, and snippets.

@bd2357

bd2357/index.html

Created February 17, 2015 20:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bd2357/c19ea7cd005fdefbd9d5 to your computer and use it in GitHub Desktop.
Save bd2357/c19ea7cd005fdefbd9d5 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/fuwuxa
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
<style id="jsbin-css">
.btnCalculate {
padding:5px;
background-color:orange;
border: 1px solid gray;
border-radius:25px;
}
.inpInput {
padding:5px;
background-color:lightgray;
border: 1px solid gray;
border-radius:25px;
}
</style>
</head>
<body>
<input id= "input" class="inpInput"> </input>
<button class="btnCalculate" onclick="calculate()"> Calculate </button>
<p id="answerDays">The total of days you have lived </p>
<p id="answerWeeks">The total of weeks you have lived </p>
<p id="answerHours">The total of hours you have lived </p>
<script id="jsbin-javascript">
function calculate(){
var years = document.getElementById("input").value;
var days = years * 365;
var weeks = years * 52;
var hours = days * 24;
document.getElementById("answerDays").innerHTML = "You have been alive for: "+ days + " days";
document.getElementById("answerWeeks").innerHTML = "You have been alive for: "+ weeks + " weeks";
document.getElementById("answerHours").innerHTML = "You have been alive for: "+ hours + " hours";
}
</script>
<script id="jsbin-source-css" type="text/css">.btnCalculate {
padding:5px;
background-color:orange;
border: 1px solid gray;
border-radius:25px;
}
.inpInput {
padding:5px;
background-color:lightgray;
border: 1px solid gray;
border-radius:25px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">function calculate(){
var years = document.getElementById("input").value;
var days = years * 365;
var weeks = years * 52;
var hours = days * 24;
document.getElementById("answerDays").innerHTML = "You have been alive for: "+ days + " days";
document.getElementById("answerWeeks").innerHTML = "You have been alive for: "+ weeks + " weeks";
document.getElementById("answerHours").innerHTML = "You have been alive for: "+ hours + " hours";
}</script></body>
</html>
Raw
jsbin.fuwuxa.css
.btnCalculate {
padding:5px;
background-color:orange;
border: 1px solid gray;
border-radius:25px;
}
.inpInput {
padding:5px;
background-color:lightgray;
border: 1px solid gray;
border-radius:25px;
}
Raw
jsbin.fuwuxa.js
function calculate(){
var years = document.getElementById("input").value;
var days = years * 365;
var weeks = years * 52;
var hours = days * 24;
document.getElementById("answerDays").innerHTML = "You have been alive for: "+ days + " days";
document.getElementById("answerWeeks").innerHTML = "You have been alive for: "+ weeks + " weeks";
document.getElementById("answerHours").innerHTML = "You have been alive for: "+ hours + " hours";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment