# JavaScript Examples

## JavaScript – Hypotenuse calculation

HTML CODE:

``````    <div class="container">
<h2>Hypotenuse calculation</h2>
<input type="number" id="edge1" placeholder="1.Edge"/><br />
<input type="number" id="edge2" placeholder="2.Edge" /><br />
<button onclick="calc()">Calculate</button>
</div>``````

CSS CODE:

``````        body, html {
margin: 0;
background: #333
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 250px;
border: 10px solid #e53f3f;
box-shadow: 0px 0px 20px 10px #262626;
}
input{
display: block;
width: 150px;
margin: 0 auto;
border: none;
background: rgba(236, 236, 236, .9);
outline: none;
font-family: Verdana;
font-weight: bold;
}
button {
display: block;
width: 170px;
margin: 0 auto;
border: none;
background: #e53f3f;
outline: none;
font-family: Verdana;
font-weight: bold;
}
h2{
text-align: center;
font-family: Verdana;
color: #e53f3f;
text-transform: uppercase;
}``````

JS CODE:

``````
let NumValues = [];

let numbers = document.getElementById("numbers").value;
NumValues.push(numbers);
console.log(NumValues)
}

function small() {
let min = Math.min.apply(Math, NumValues);
}

function bigger() {
let max = Math.max.apply(Math, NumValues);
}``````

## Find the largest and smallest number on an array

HTML CODE:

``````    <div class="container">
<h2>Find the largest and smallest number on an array</h2>
<input type="number" id="numbers" placeholder="Enter as many numbers as you want." />
<button onclick="small()">Smallest number</button>
<button onclick="bigger()">Biggest number</button>
</div>``````

CSS CODE:

``````        body, html {
margin: 20px;
background: #333;
color: #e53f3f;
font-family: Verdana;
display: flex;
height: 100vh;
justify-content: center;
align-items: center
}
input {
width: 265px;
display: inline-block;
border: none;
outline: none;
font-family: Verdana;
}
width: 50px;
position: relative;
display: inline-block;
border: none;
margin-left: -5px;
top: -1.5px;
background: #e53f3f;
color: #fff;
font-size: 14px;
outline: none;
}
button {
width: 160px;
background: #e53f3f;
color: #fff;
border: none;
margin-top: 10px;
margin-left: 5px;
}
h2{
font-size: 16px;
}``````

JS CODE:

``````
let NumValues = [];

let numbers = document.getElementById("numbers").value;
NumValues.push(numbers);
console.log(NumValues)
}

function small() {
let min = Math.min.apply(Math, NumValues);
}

function bigger() {
let max = Math.max.apply(Math, NumValues);
}``````

## JavaScript – Prime number?

HTML CODE:

``````    <div id="container">
<h2>prime number?</h2>
<input type="number" id="num" />
<button onclick="control()">CONTROL</button><br />
<div id="result"></div>
</div>``````

CSS CODE:

``````        body, html {
margin: 20px;
background: #333;
color: #e53f3f;
font-family: Verdana;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
#container{
width: 250px;
}
input {
border: none;
width: 100px;
outline: none;
}
button {
float: right;
width: 120px;
border: none;
background: #e53f3f;
outline: none;
cursor: pointer;
color: #fff;
font-family: Arial;
font-weight: bold;
transition: .5s;
}
button:hover{
background: #cf274c;
}
#result{
margin-top: 20px;
width: 200px;
text-align:center;
margin-left: 30px;
font-size: 20px;
color: #fff;
font-family: Verdana;
}
h2{
text-transform: uppercase;
margin-left: 16px;
}``````

JS CODE:

``````    function control() {
let num = document.getElementById("num").value,
res = document.getElementById("result");
var cntrl = 0;
for (var i = 2; i < num; i++) {
if (num % i == 0) {
cntrl++;
}
}
if (cntrl == 0) {
res.innerHTML = ("prime number")
}
else {
res.innerHTML = ("not prime number")
}
}``````

The examples are not finished. keeps coding.