Byloor/send1.js

## send1.js
function CalculateAge(){
    var birthYear = parseInt(document.getElementById('age1').value)
    var currentYear = new Date().getFullYear();
     var x = currentYear - birthYear;
     var y=x-1;
     if( x > -1)
      document.getElementById('id1').innerHTML = "you are either " + y + " or " + x + " years old";
else
  alert("invalid input")
 }

function CalculateSupply() {
   var Age = document.getElementById("age2").value;
       var AmountPerDay1 = document.getElementById("AmountPerDay").value;
       var Lifetimesupply = ((AmountPerDay1 * 365) * (100 - Age ));

if ( Age > 0 && AmountPerDay1 > 0)
          document.getElementById('id2').innerHTML = 'You will need ' + Lifetimesupply + 'kg of it to last you until the ripe old age of 100';
 // alert('You will need ' + Lifetimesupply + 'kg of it to last you until the ripe old age of 100' );
  else
    alert("Error - Entered values must be greater than 0.");
}

function CalcArea() {
        var radius =
        parseInt(document.getElementById('txtRadius').value);

        if ( radius > 0)
          document.getElementById('id3').innerHTML = 'The area of the circle is ' + (radius * radius * Math.PI) + 'square m';

        else
            alert("Error - radius must be whole number greater than 0.");
        return false;
      }

       function CalcCircumfrence() {
        var radius =
        parseInt(document.getElementById('txtRadius').value); //String Changes to Integer

        if ( radius > 0)
 document.getElementById('id3').innerHTML = 'The circumference of the circle is ' + (radius * 2 * Math.PI) + 'm';
           else
            alert("Error - radius must be whole number greater than 0.");
        return false
      }


function celsiusToFahrenheit() {
    var temp=
        parseInt(document.getElementById('c').value);
var y =
       temp * 9 / 5 + 32;
       if(temp!=null)
     document.getElementById('id4').innerHTML = temp + '°C is ' + y + '°F';
   else
    alert("Please Enter a value");
        /*alert("converted answer is " + y + "°F");*/
         //String Changes to Integer
        }
function fahrenheitToCelsius() {
    var temp =
        parseInt(document.getElementById("c").value) ;
    var y = (temp - 32) * 5 / 9;
    if(temp!=null)
     document.getElementById('id4').innerHTML = temp + '°F is ' + y + '°C';
   else
    alert("Please Enter a value");

        }


## task.html
</!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<head>
		<script type="text/javascript" src="send1.js"></script>

	<title>WELCOME TO MY CHALLENGE!!</title>
	<style>
body{
    /* Full height */
    height: 100%;
    background-image: url(https://cdn.pixabay.com/photo/2016/03/10/06/51/background-1247931_960_720.jpg);
    background-position: center;background-repeat: no-repeat;background-size: cover;
}
.btnn1:hover, .bttn1:active {color:#A52A2A!important;background-color:#000!important;box-shadow: 0 5px #666;
  transform: translateY(4px);}

#btnn {
    cursor: pointer;
    text-align: center;
    width: 200px;
    padding: 5px;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #FFF;
    border-radius: 10px;
    background: #FFD119;
    background: -webkit-gradient(linear, left top, left bottom, from(#453e49), to(#E6B800));

    height: 45px;
    width: 280px;
    box-shadow: 0 -5px inset;
}
h1 {
	margin: 15px;

  color: black;
  font-size: 40px;
  width: 200px;
  font-weight: bold; font-size: 40;text-decoration:underline overline;

}

}
html, body { height: 100%; padding: 0; margin: 0; }


div { width: 50%;
  height: 50%;
   float: left;
   border-style: solid;
   border-spacing: 1px;
   border-width:0.5px;

border-color: black;
padding-left: 1.8em;
 }

* {
  box-sizing: border-box;
  font-size: 20px;
text-align:center;
font-family: "Comic Sans MS", "Comic Sans", cursive;
font-weight: bold;
}
	</style>
</head>
<body>
<!--<a href="#" onclick=" test()">Click Here to call first function</a>-->
<h1> CALCULATOR'S POINT </h1>
<!--THE AGE CALCULATOR-->
<div id="div1">
<h4>Age is just a number!!</h4>
<p>
       Enter your birth year:
      <!-- <input type="number" min="1990" max="2017" step="1" id="age1" size="20" /></p>*/-->
        <input type="number" min="1900" max="2017" step="1" id="age1"  style="font-weight: lighter;" size = 20/>
    <br>
    <br>
      <!--<input type="button" value="Know your age" id="btnn" onclick="CalculateAge()" >-->
      <input type="button" class="btnn1"  value="Know your age" id="btnn" onclick="CalculateAge()" >
       <p id="id1"></p>
      <!--<textarea id ="hello" value="null" cols="55" rows="2" wrap="virtual" style="height:24px;min-height:24px;" readonly="" >

</textarea>-->
      <br>
      <br>
      <br>

</div>
<!-- THE LIFETIME SUPPLY CALCULATOR-->
<div id="div2">
<h2>Know your Food!! </h2>
<p> Enter age:
<input type ="number" id="age2"  size="20" ></p>
<p>Enter Amount Per day:
<input type ="number" id="AmountPerDay" size="20" ></p>
<br>
<input type="button" class="btnn1"  id="btnn" value="Your Lifetime Consumption" onclick="CalculateSupply()">
<br>
 <p id="id2"></p>

</div>
<!-- THE GEOMETRIZER-->
<div id="div3">
<h2>Create a Circle!!</h2>
      <br>
      <p>
      Enter the radius for your circle in m:
      <input type="number" id="txtRadius" size="20" />
      <br>
      <br>
<br>
      <input type="button" class="btnn1" id="btnn" value="Get circumference" onclick="CalcCircumfrence()">
      &nbsp;

      <input type="button" class="btnn1" id="btnn" value="Get area" onclick="CalcArea()" >
      </p>
 <p id="id3"></p>
</div>

<!-- THE TEMPERATURE CONVERTOR-->
<div id="div4">
<h2>Its Hot Out!! </h2>
<br>
<p>Enter the temperature in °C or °F :
<input type ="number" id="c"  size="20" ></p>
<br><br>
 <input type="button" class="btnn1" value=" Convert To Farenheit" id="btnn" onclick="celsiusToFahrenheit()" >
     <!-- <p>Enter in Farenheit:
<input type ="number" id="f" size="20" ></p> -->
      <input type="button" class="btnn1"  value="Convert to Celsius" id="btnn" onclick="fahrenheitToCelsius()">
 <p id="id4"></p>
</div>
</body>
</html>
	function CalculateAge(){
	var birthYear = parseInt(document.getElementById('age1').value)
	var currentYear = new Date().getFullYear();
	var x = currentYear - birthYear;
	var y=x-1;
	if( x > -1)
	document.getElementById('id1').innerHTML = "you are either " + y + " or " + x + " years old";
	else
	alert("invalid input")
	}

	function CalculateSupply() {
	var Age = document.getElementById("age2").value;
	var AmountPerDay1 = document.getElementById("AmountPerDay").value;
	var Lifetimesupply = ((AmountPerDay1 * 365) * (100 - Age ));

	if ( Age > 0 && AmountPerDay1 > 0)
	document.getElementById('id2').innerHTML = 'You will need ' + Lifetimesupply + 'kg of it to last you until the ripe old age of 100';
	// alert('You will need ' + Lifetimesupply + 'kg of it to last you until the ripe old age of 100' );
	else
	alert("Error - Entered values must be greater than 0.");
	}

	function CalcArea() {
	var radius =
	parseInt(document.getElementById('txtRadius').value);

	if ( radius > 0)
	document.getElementById('id3').innerHTML = 'The area of the circle is ' + (radius * radius * Math.PI) + 'square m';

	else
	alert("Error - radius must be whole number greater than 0.");
	return false;
	}

	function CalcCircumfrence() {
	var radius =
	parseInt(document.getElementById('txtRadius').value); //String Changes to Integer

	if ( radius > 0)
	document.getElementById('id3').innerHTML = 'The circumference of the circle is ' + (radius * 2 * Math.PI) + 'm';
	else
	alert("Error - radius must be whole number greater than 0.");
	return false
	}


	function celsiusToFahrenheit() {
	var temp=
	parseInt(document.getElementById('c').value);
	var y =
	temp * 9 / 5 + 32;
	if(temp!=null)
	document.getElementById('id4').innerHTML = temp + '°C is ' + y + '°F';
	else
	alert("Please Enter a value");
	/alert("converted answer is " + y + "°F");/
	//String Changes to Integer
	}
	function fahrenheitToCelsius() {
	var temp =
	parseInt(document.getElementById("c").value) ;
	var y = (temp - 32) * 5 / 9;
	if(temp!=null)
	document.getElementById('id4').innerHTML = temp + '°F is ' + y + '°C';
	else
	alert("Please Enter a value");

	}
	</!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<head>
	<script type="text/javascript" src="send1.js"></script>

	<title>WELCOME TO MY CHALLENGE!!</title>
	<style>
	body{
	/* Full height */
	height: 100%;
	background-image: url(https://cdn.pixabay.com/photo/2016/03/10/06/51/background-1247931_960_720.jpg);
	background-position: center;background-repeat: no-repeat;background-size: cover;
	}
	.btnn1:hover, .bttn1:active {color:#A52A2A!important;background-color:#000!important;box-shadow: 0 5px #666;
	transform: translateY(4px);}

	#btnn {
	cursor: pointer;
	text-align: center;
	width: 200px;
	padding: 5px;
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #FFF;
	border-radius: 10px;
	background: #FFD119;
	background: -webkit-gradient(linear, left top, left bottom, from(#453e49), to(#E6B800));

	height: 45px;
	width: 280px;
	box-shadow: 0 -5px inset;
	}
	h1 {
	margin: 15px;

	color: black;
	font-size: 40px;
	width: 200px;
	font-weight: bold; font-size: 40;text-decoration:underline overline;

	}

	}
	html, body { height: 100%; padding: 0; margin: 0; }


	div { width: 50%;
	height: 50%;
	float: left;
	border-style: solid;
	border-spacing: 1px;
	border-width:0.5px;

	border-color: black;
	padding-left: 1.8em;
	}

	* {
	box-sizing: border-box;
	font-size: 20px;
	text-align:center;
	font-family: "Comic Sans MS", "Comic Sans", cursive;
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<!--<a href="#" onclick=" test()">Click Here to call first function</a>-->
	<h1> CALCULATOR'S POINT </h1>
	<!--THE AGE CALCULATOR-->
	<div id="div1">
	<h4>Age is just a number!!</h4>
	<p>
	Enter your birth year:
	<!-- <input type="number" min="1990" max="2017" step="1" id="age1" size="20" /></p>*/-->
	<input type="number" min="1900" max="2017" step="1" id="age1" style="font-weight: lighter;" size = 20/>
	<br>
	<br>
	<!--<input type="button" value="Know your age" id="btnn" onclick="CalculateAge()" >-->
	<input type="button" class="btnn1" value="Know your age" id="btnn" onclick="CalculateAge()" >
	<p id="id1"></p>
	<!--<textarea id ="hello" value="null" cols="55" rows="2" wrap="virtual" style="height:24px;min-height:24px;" readonly="" >

	</textarea>-->
	<br>
	<br>
	<br>

	</div>
	<!-- THE LIFETIME SUPPLY CALCULATOR-->
	<div id="div2">
	<h2>Know your Food!! </h2>
	<p> Enter age:
	<input type ="number" id="age2" size="20" ></p>
	<p>Enter Amount Per day:
	<input type ="number" id="AmountPerDay" size="20" ></p>
	<br>
	<input type="button" class="btnn1" id="btnn" value="Your Lifetime Consumption" onclick="CalculateSupply()">
	<br>
	<p id="id2"></p>

	</div>
	<!-- THE GEOMETRIZER-->
	<div id="div3">
	<h2>Create a Circle!!</h2>
	<br>
	<p>
	Enter the radius for your circle in m:
	<input type="number" id="txtRadius" size="20" />
	<br>
	<br>
	<br>
	<input type="button" class="btnn1" id="btnn" value="Get circumference" onclick="CalcCircumfrence()">


	<input type="button" class="btnn1" id="btnn" value="Get area" onclick="CalcArea()" >
	</p>
	<p id="id3"></p>
	</div>

	<!-- THE TEMPERATURE CONVERTOR-->
	<div id="div4">
	<h2>Its Hot Out!! </h2>
	<br>
	<p>Enter the temperature in °C or °F :
	<input type ="number" id="c" size="20" ></p>
	<br><br>
	<input type="button" class="btnn1" value=" Convert To Farenheit" id="btnn" onclick="celsiusToFahrenheit()" >
	<!-- <p>Enter in Farenheit:
	<input type ="number" id="f" size="20" ></p> -->
	<input type="button" class="btnn1" value="Convert to Celsius" id="btnn" onclick="fahrenheitToCelsius()">
	<p id="id4"></p>
	</div>
	</body>
	</html>