html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--buttons-->
<button id="rechthoek1" class="btn btn-info" data-toggle="collapse" data-target="#titel1, #rechthoek2, #text1, #text2, #width1, #height1, #rectArea, #hr1">Calculate rectangle's area</button>
<button id="driehoek1" class="btn btn-success" data-toggle="collapse" data-target="#titel2, #driehoek2, #text3, #text4, #width2, #height2, #triArea, #hr2">Calculate Triangle's area</button>
<hr/>
<!-- button ends-->
<!-- Rectangle's input forms-->
<h3 id="titel1" class="collapse">Calculate Rectangle</h3>
<form>
<input type="radio" id="text1" onfocus="width1()" class="collapse"/><div class="collapse" id="width1">input Width</div>
<input type="radio" id="text2" onfocus="height1()" class="collapse"/><div class="collapse" id="height1">input height</div>
</form>
<button id="rechthoek2" class="collapse" onclick="subRect()">Submit</button>
<h4 class="collapse" id="rectArea"></h4>
<hr class="collapse" id="hr1"/>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
body{
background:linear-gradient(45deg, #44bbbb, #bb44bb) no-repeat;
background-size:100vw 100vh;
}
#width1, #width2, #height1, #height2{
font-weight:bolder;
}
#subRect, #subTri{
border-radius:10px;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//input of rectangles width
function width1(){
width1=prompt("enter the width of the rectangle, numbers only"); document.getElementById("width1").innerHTML=width1;
}
//end of input of rectangles width
//input of rectangles height
function height1(){
height1=prompt("enter the height of the rectangle, numbers only"); document.getElementById("height1").innerHTML=height1;
}
//end of input of rectangles height
//calculating area of the rectangle
function subRect(){
rectArea=width1*height1; document.getElementById("rectArea").innerHTML="the area of your rectangle = "+rectArea+" ("+width1+"*"+height1+")";
}
//End of the calculation of the rectangle
//input of the triangles width
function width2(){
width2=prompt("enter the width of the rectangle, numbers only"); document.getElementById("width2").innerHTML=width2;
}
function height2(){
height2=prompt("enter the height of the rectangle, numbers only"); document.getElementById("height2").innerHTML=height2;
}
function subTri(){
triArea=width2*height2*0.5; document.getElementById("triArea").innerHTML="the area of your triangle = "+triArea+" ("+width2+"*"+height2+"*0.5)";
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run