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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Third angle of triangle</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<section class="hero is-fullheight is-primary is-bold">
<div class="hero-body">
<div class="container has-text-centered">
<div class="columns is-centered">
<div class="column is-6">
<div id="form">
<div class="field">
<label class="label">First Angle</label>
<div class="control">
<input class="input" type="text" placeholder="First Angle" id="f_angle">
</div>
</div>
<div class="field">
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
@import url('https://fonts.googleapis.com/css?family=Barlow');
body {
font-family: "Barlow";
}
#form {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top:4px solid turquoise;
border-radius: 10px;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
padding: 50px;
}
p {
color: rgba(255, 255, 255, 0.7);
}
i {
color: rgb(246, 90, 91);
}
input[type="text"]:focus {
border: none;
}
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
$(document).ready(function(){
$("button").click(function(){
var f_angle = parseInt($('input:first').val());
var s_angle = parseInt($('input:last').val());
var t_angle;
if(f_angle + s_angle >= 180) {
alert('A triangle with these angles does not exist');
} else {
t_angle = 180 - f_angle - s_angle;
alert('The third angle of triangle is: ' + t_angle + ' degree(s)');
}
$('input:first').val('');
$('input:last').val('');
});
});
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run