Skip to content

Instantly share code, notes, and snippets.

@leq382121

leq382121/index.html

Created January 16, 2017 23:00
Show Gist options
  • Save leq382121/a6dcd79f79c222c950f3dfd7adcd2907 to your computer and use it in GitHub Desktop.
Save leq382121/a6dcd79f79c222c950f3dfd7adcd2907 to your computer and use it in GitHub Desktop.
Download ZIP
Liutauras Razma - Tech Sample Task
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!--©Liutauras Razma-->
<meta charset="UTF-8">
<title>TASK 1</title>
<meta name="theme-color" content="#0A3043">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="wrapper">
<div class="container">
<div class="row1">
<div id="box1" class="box">
<div class="box-header">
<h1>Age Calculator</h1>
</div>
<div class="left-right-container">
<div class="leftSide">
<input class="input" type="number" id="ageBox" placeholder="Type your birth Year">
<button class="button " onclick="calculateAge()">Check</button>
</div>
<div class="rightSide">
<p id="ageText">Have you forgotten how old are you?</p>
</div>
</div>
</div>
<div id="box2" class="box">
<div class="box-header">
<h1>Snack Supply Calculator</h1>
</div>
<div class="left-right-container">
<div class="leftSide">
<input class="input " type="number" id="ageForSupply" placeholder="Your age">
<input class="input " type="number" id="ConsumptionPerDay" placeholder="Snacks per day">
<button class="button " onclick="calculateSupply()">Count</button>
</div>
<div class="rightSide">
<p id="SupplyPerYears">You can't survive without a bit of that snack, don't ya?</p>
</div>
</div>
</div>
</div>
<div class="row2">
<div id="box3" class="box ">
<div class="box-header">
<h1>The Geometrizer</h1>
</div>
<div class="left-right-container">
<div class="leftSide">
<input class="input " type="number" id="radiusInput" placeholder="Radius (meters)">
<button class="button " onclick="calcCircumfrence()">Circumference</button>
<button class="button " onclick="calcArea()">Area</button>
</div>
<div class="rightSide">
<p id="CircumferenceResult">Let's play with circles and math.</p>
<p id="areaResult"></p>
</div>
</div>
</div>
<div id="box4" class="box ">
<div class="box-header">
<h1>Temperature converter</h1>
</div>
<div class="left-right-container">
<div class="leftSide">
<input class="input " type="number" id="temperatureInput" placeholder="Temperature">
<button class="button " onclick="fahrenheitToCelsius()">Fahrenheit to Celcius</button>
<button class="button " onclick="celsiusToFahrenheit()">Celcius to Fahrenheit</button>
</div>
<div class="rightSide">
<p id="FTOC" class="">It's so hot out there!</p>
<p id="CTOF" class=""></p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
Raw
script.js
//©Liutauras Razma
//TASK 1: THE AGE CALCULATOR
//Forgot how old you are? Calculate it!
//Write a function named calculateAge() that:
//takes 2 arguments: birth year, current year.
//calculates the 2 possible ages based on those years.
//outputs the result to the screen like so: "You are either NN or NN"
//Call the function three times with different sets of values.
//Bonus: Figure out how to get the current year in JavaScript instead of passing it in.
function calculateAge() {
var ageBoxValuebefore = document.getElementById('ageBox').value;
var ageBoxValueafter = parseInt(ageBoxValuebefore);
date = new Date().getFullYear();
var calculatedResult = document.getElementById('ageText');
return calculatedResult.innerHTML = "You are either " + (date - parseInt(ageBoxValueafter)) + " or " + ((date - parseInt(ageBoxValueafter)) - 1);
}
//TASK 2: THE LIFETIME SUPPLY CALCULATOR
//Ever wonder how much a "lifetime supply" of your favorite snack is? Wonder no more!
//Write a function named calculateSupply() that:
//takes 2 arguments: age, amount per day.
//calculates the amount consumed for rest of the life (based on a constant max age).
//outputs the result to the screen like so: "You will need NN to last you until the ripe old age of X"
//Call that function three times, passing in different values each time.
//Bonus: Accept floating point values for amount per day, and round the result to a round number.
function calculateSupply() {
var age = parseInt(document.getElementById('ageForSupply').value);
var maxAge = 80;
var leftAge = maxAge - age;
var packsPerDay = parseInt(document.getElementById('ConsumptionPerDay').value);
var packsPerDayRounded = Math.round(packsPerDay);
var packsPerYear = packsPerDayRounded * 365; // Sometimes it's 366, according to Gregorian Calendar.
var resultText = document.getElementById('SupplyPerYears');
var packsPerLifetime;
packsPerLifetime = leftAge * packsPerYear;
return resultText.innerHTML = "You will need " + packsPerLifetime + " to last you until the ripe old age of " + maxAge;
}
//TASK 3: THE GEOMETRIZER
//Create 2 functions that calculate properties of a circle.
//Create a function called calcCircumfrence():
//Pass the radius to the function.
//Calculate the circumference based on the radius, and output "The circumference is NN".
//Create a function called calcArea():
//Pass the radius to the function.
//Calculate the area based on the radius, and output "The area is NN".
function calcCircumfrence() {
var radius = parseInt(document.getElementById('radiusInput').value);
var Circumfrence = (2 * 3.14) * radius; // 3.14, either Math.PI
var FixedCircumfrence = Circumfrence.toFixed(2);
var CircumfrenceResultText = document.getElementById('CircumferenceResult');
console.log(FixedCircumfrence);
return CircumfrenceResultText.innerHTML = "The circumference is " + FixedCircumfrence + " m";
}
function calcArea() {
var radius = parseInt(document.getElementById('radiusInput').value);
var Area = Math.PI * Math.pow(radius, 2)
var FixedArea = Area.toFixed(2);
var CircumfrenceResultText = document.getElementById('areaResult');
console.log(FixedArea);
return CircumfrenceResultText.innerHTML = "The area is " + FixedArea + " m" + "<sup>" + "2" + "</sup>";
}
//TASK 4: THE TEMPERATURE CONVERTER
//It's hot out! Let's make a converter based on the steps here:
//°F to °C
//Deduct 32, then multiply by 5, then divide by 9
//--
//°C to °F
//Multiply by 9, then divide by 5, then add 32
//Create a function called fahrenheitToCelsius():
//Now store a fahrenheit temperature into a variable.
//Convert it to celsius and output "NN°F is NN°C."
//--
//Create a function called celsiusToFahrenheit():
//Store a celsius temperature into a variable.
//Convert it to fahrenheit and output "NN°C is NN°F".
function fahrenheitToCelsius() {
var temperature = parseInt(document.getElementById('temperatureInput').value);
var fTOc = Math.round((((temperature - 32) * 5) / 9));
var fTOcResultText = document.getElementById('FTOC');
return fTOcResultText.innerHTML = temperature + " °F is " + fTOc + " °C";
}
function celsiusToFahrenheit() {
var temperature = parseInt(document.getElementById('temperatureInput').value);
var cTOf = Math.round((((temperature * 9) / 5) + 32));
var fTOcResultText = document.getElementById('CTOF');
return fTOcResultText.innerHTML = temperature + " °C is " + cTOf + " °F";
}
Raw
style.css
/*©Liutauras Razma*/
body {
background-color: #336E7B;
animation: fadein 0.8s;
-webkit-animation: fadein 0.8s;
font-family: 'Lato', sans-serif;
color: #FFF;
margin: 0px 0px;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.wrapper {
width: 100vw;
min-height: 100vh;
}
.container {
width: 80vw;
min-height: 80vh;
padding: 10vh 10vw;
}
.row1 {
min-height: 40vh;
width: 80vw;
display: inline-flex;
}
.row2 {
min-height: 40vh;
width: 80vw;
display: inline-flex;
}
.box {
text-align: center;
width: 38vw;
height: 38vh;
background-color: #0A3043;
}
#box1 {
margin-right: 2vw;
margin-bottom: 2vh;
}
#box2 {
margin-left: 2vw;
margin-bottom: 2vh;
}
#box3 {
margin-right: 2vw;
margin-top: 2vh;
}
#box4 {
margin-left: 2vw;
margin-top: 2vh;
}
.box-header {
width: 38vw;
height: 8vh;
display: flex;
align-items: center;
justify-content: center;
}
.box-header h1 {
margin: 0;
}
.left-right-container {
width: auto;
height: auto;
display: inline-flex;
}
.leftSide {
padding: 2vh 2vw;
width: 11vw;
height: 26vh;
}
.rightSide {
padding: 4vh 1vw;
width: 21vw;
height: 22vh;
}
.input {
margin-bottom: 1vh;
width: 11vw;
height: 4vh;
border: none;
color: #00181F;
}
.input:hover {
background-color: #E3E3E3;
}
.button {
margin-bottom: 1vh;
width: 11vw;
height: 4vh;
border: none;
background-color: #1E8BC3;
color: #ECF0F1;
}
.button:hover {
animation: slide 0.3s forwards;
-webkit-animation: slide 0.3s forwards;
}
@keyframes slide {
100% {
background-color: #1874F0;
left: 0;
}
}
@-webkit-keyframes slide {
100% {
background-color: #1874F0;
left: 0;
}
}
::-webkit-input-placeholder {
text-align: center;
}
/* ---------------- @mobile -----------------*/
@media only screen and (max-width: 1180px) {
.wrapper {
width: 100vw;
min-height: 100vh;
}
.container {
width: 80vw;
min-height: 80vh;
padding: 10vh 10vw;
}
.row1 {
min-height: 100vh;
width: 80vw;
display: flex;
flex-direction: column;
}
.row2 {
min-height: 100vh;
width: 80vw;
display: flex;
flex-direction: column;
}
.box {
text-align: center;
width: 80vw;
height: auto;
background-color: #0A3043;
}
#box1 {
margin-top: 0;
margin-right: 0;
margin-left: 0;
margin-bottom: 5vh;
}
#box2 {
margin-top: 0;
margin-right: 0;
margin-left: 0;
margin-bottom: 5vh;
}
#box3 {
margin-top: 0;
margin-right: 0;
margin-left: 0;
margin-bottom: 5vh;
}
#box4 {
margin: 0;
}
.box-header {
width: 80vw;
height: 8vh;
display: flex;
align-items: center;
justify-content: center;
}
.box-header h1 {
margin: 0;
}
.left-right-container {
width: auto;
height: auto;
display: flex;
flex-direction: column;
}
.leftSide {
align-items: center;
justify-content: center;
padding: 2vh 2vw;
width: 76vw;
height: auto;
display: flex;
flex-direction: column;
}
.rightSide {
padding: 4vh 1vw;
width: 78vw;
height: auto;
}
.input {
margin-bottom: 1vh;
width: 70vw;
height: 6vh;
border: none;
color: #00181F;
}
.input:hover {
background-color: #E3E3E3;
}
.button {
margin-bottom: 1vh;
width: 70vw;
height: 6vh;
border: none;
background-color: #1E8BC3;
color: #ECF0F1;
}
.button:hover {
animation: slide 0.3s forwards;
-webkit-animation: slide 0.3s forwards;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment