Skip to content

Instantly share code, notes, and snippets.

@Byloor

Byloor/Geometrizer.html

Last active April 24, 2017 17:54
Show Gist options
  • Save Byloor/e51f894a4c46dd32a85f02d956bbf83f to your computer and use it in GitHub Desktop.
Save Byloor/e51f894a4c46dd32a85f02d956bbf83f to your computer and use it in GitHub Desktop.
Download ZIP
Wiredelta Challenge (version 2)
Raw
age.html
</!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title> AGE CALCULATOR</title>
</head>
<body>
<div>
<div id="i">Age is just a number!!</div>
<img src="http://www.gifmania.com/Gif-Animados-Objetos/Imagenes-Material-de-Oficina/Calculadoras/Lapiz-Calculadora-81012.gif" alt="HTML5 Icon">
<p>
Enter your birth year:
<input type="number" min="1900" max="2017" step="1" id="age1" style="font-weight: lighter;" size ="15px"/></p>
<br>
<br>
<input type="button" class="bttn1" value="Know your age" id="bttn" onclick="CalculateAge()" >
<p id="id"></p>
<button onclick="goBack()" id="bttn2">Go Back</button>
</div>
</body>
<footer>
<script src="script.js"></script>
</footer>
</html>
Raw
favsnack.html
</!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Lifetime supply calculator</title>
</head>
<body>
<div >
<div id="i">Know your Food!! </div>
<img src="http://rsmg.pbsrc.com/albums/v643/Rebbetzin/Email%20icons/Food%20and%20Cooking/eating-pizza_zpsse3n0cal.gif~c200" alt="HTML5 Icon2">
<p> Enter age:
<input type ="number" id="age2" size="15" ></p>
<p>Enter Amount Per day:
<input type ="number" id="AmountPerDay" size="15" ></p>
<br>
<input type="button" class="bttn1" id="bttn" value="Your Lifetime Consumption" onclick= "CalculateSupply()">
<br>
<p id="id"></p>
<button onclick="goBack()" id="bttn2">Go Back</button>
</div>
</body>
<footer>
<script src="script.js"></script>
</footer>
</html>
Raw
Geometrizer.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Geometrizer</title>
</head>
<body>
<div>
<div id="i">Create a Circle!!</div>
<img src="http://matematik.fef.duzce.edu.tr/Dokumanlar/ee925f57-6fbb-4435-926b-359c4184fe1e.gif" alt="HTML5 Icon1">
<p>
Enter the radius for your circle in m:
<input type="number" id="txtRadius" size="15" /></p>
<input type="button" value="Calculate circumference" id="bttn" class="bttn1" onclick="CalcCircumfrence()" >
<br>
<input type="button" value="Calculate area" id="bttn" class="bttn1" onclick="CalcArea()">
<p id="id"></p>
<button onclick="goBack()" id="bttn2">Go Back</button>
</div>
</body>
<footer>
<script src="script.js"></script>
</footer>
</html>
Raw
INDEX.html
<!DOCTYPE html>
<html>
<title>WIREDELTA CHALLENGE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style type="text/css">
* {
box-sizing: border-box;font-family: Georgia, serif;
font-weight: bold;font-size: 22px;
text-align: center;
}
h1{font-weight: bold; font-size: 40;text-decoration:underline overline;color:#3399ff; }
img{ position: absolute; bottom:80px; right: 0 }
body{
height: 100%;
background-position: center;background-repeat: no-repeat;background-size: cover;
background-image: url(http://www.planwallpaper.com/static/images/Background-Design-Images-36-Cool-Wallpapers-HD-1024x768.jpg);
}
.w3-bar{background-color:#004d99 !important }
</style>
<body>
<div class="w3-container">
<h1>CALCULATOR'S POINT</h1>
<p style="font-size: 28px;">What Do you need to know?</p>
<p>Click on the <strong> tools</strong> to get your answers</p>
</div>
<br>
<br>
<div class="w3-bar w3-black">
<a href="age.html" class="w3-bar-item w3-button">AGE CALCULATOR</a>
<a href="favsnack.html" class="w3-bar-item w3-button" >LIFE TIME SUPPLY CALCULATOR</a>
<a href="Geometrizer.html" class="w3-bar-item w3-button" > GEOMETRIZER</a>
<a href="temp.html" class="w3-bar-item w3-button" >TEMPERATURE CONVERTOR</a>
</div>
<a href="https://wiredelta.com/">
<img border="0" alt="WD-logo" src="https://wiredelta.com/images/about/wd_logo.png" ></a>
</body>
</html>
Raw
main.css
* {
box-sizing: border-box;
font-family: Georgia, serif;
font-weight: bold;
text-align: center;
font-size: 30px;
}
img{
text-align: left;
}
body{
/* Full height */
height: 100%;
background-position: center;background-repeat: no-repeat;background-size: cover;
background-image: url(http://www.planwallpaper.com/static/images/Background-Design-Images-36-Cool-Wallpapers-HD-1024x768.jpg);
http://www.diseaselens.com/v2/img/globe.gif
}
#i
{ margin: 30px; font-size: 35px;}
.bttn1:hover, .bttn1:active {
color:#A52A2A!important;background-color:#000!important;box-shadow: 0 5px #666;
transform: translateY(4px);
}
#bttn {
cursor: pointer;text-align: center;
width: 300px;
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));
font-size: 20px !important;
height: 45px;
width: 480px;
box-shadow: 0 -5px inset;
}
html, body { height: 100%; }
#bttn2{
cursor: pointer;width: 150px;padding: 5px;margin: 10px;margin-left: auto;margin-right: auto; font-size: 20px;
background-color: #FFD119; background: -webkit-gradient(linear, left top, left bottom, from(#453e49), to(#E6B800));
position:absolute;
top:0;
right:0;
}
Raw
script.js
function goBack() {
window.history.back();
}
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('id').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('id').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('id').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('id').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('id').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("f").value) ;
var y = (temp - 32) * 5 / 9;
if(temp!=null)
document.getElementById('id').innerHTML = temp + '°F is ' + y + '°C';
else
alert("Please Enter a value");
}
/*
var x= CalculateSupply(5,6);
var y= CalculateSupply(28,7);
var z= CalculateSupply(56,8);
document.getElementById('total').innerHTML = x + y + z;
*/
Raw
temp.html
</!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Temperature convertor</title>
</head>
<body>
<div>
<div id="i">Its Hot Out!! </div>
<img src="http://content.presentermedia.com/files/animsp/00012000/12373/exhausted_figure_in_the_sun_anim_md_wm_v2.gif" alt="HTML5 Icon3">
<p>Enter in Celsius:
<input type ="number" id="c" size="15" ></p>
<input type="button" class="bttn1" value=" Convert To Farenheit" id="bttn" onclick="celsiusToFahrenheit()" >
<p>Enter in Farenheit:
<input type ="number" id="f" size="15" ></p>
<input type="button" class="bttn1" value="Convert to Celsius" id="bttn" onclick="fahrenheitToCelsius() ">
<p id="id"></p>
<button onclick="goBack()" id="bttn2">Go Back</button>
</div>
</body>
<footer>
<script src="script.js"></script>
</footer>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment