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>
</head>
<body>
<p class="title">Looking into tan(90deg)</p>
<div>
<div></div>
</div>
<div>
<p class="subH">Part One</p>
<p class="content">tan(90deg):</p>
<p id="tRes" class="content2"></p>
<p class="content">isSafe?:</p>
<p id="sRes" class="content2"></p>
</div>
<div>
<p class="subH">Part Two</p>
<p class="content">
<button onclick="btn2()">stretch</button>
<button onclick="btn1()">No stretch</button>
</p>
<p><div id="box"></div></p>
</div>
<div>
<p class="subH">Part Three</p>
<p class="content">
Enter to Rename, Shift+Enter to Preview
css
css
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
body {
background-color:#f0f0ff;Color:#444499;
}
p{position:relative;left:5%;}
.title{
font-size:large;
}
.subH{
}
.content{
left:10%;
}
#box{
width:200px;height:200px;
Background-color:pink;
}
.content2{
left:15%;
}
#box2{
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
var tan90;
function printTan(){
tan90 = Math.tan(90/180*Math.PI);
tRes.innerText = tan90;
sRes.innerText = Number.isSafeInteger(tan90);
}
onload = printTan;
function btn2(){
box.style.width = Math.tan(90/180*Math.PI) + "px";
}
function btn1(){
box.style.width = "200px";
}
function btn3(){
box2.style.transform = "skew(90deg)";
}
function btn4(){
box2.style.transform = "";
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run