Public_Projects/Learn_Javascript
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0004 added[hypotenuseCalculator, counter, randomNumberGeneration]

Browse Source
This commit is contained in:
WickedJack99
2022-08-03 09:10:38 +02:00
parent 1779fcf47b
commit 037f4d11d5
8 changed files with 145 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
html/calcHypotenuse.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<p id="p1">
<label id="sideA">Enter side A</label><br>
<input type="text" id="sideAVal"><br>
<label id="sideB">Enter side B</label><br>
<input type="text" id="sideBVal"><br>
<button type="button" id="calcHypotenuseButton">Submit</button>
</p>
<p id="p2">
<label id="hypotenuse">Hypotenuse: 0</label>
</p>
<p id="p3"></p>
<script src="/js/calcHypotenuse.js"></script>
</body>
</html>

23
html/count.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<p id="p1">
<label id="counter">0</label><br>
</p>
<p id="p2">
<button type="button" id="countDownButton">Down</button>
<button type="button" id="resetButton">Reset</button>
<button type="button" id="countUpButton">Up</button>
</p>
<p id="p3">
</p>
<script src="/js/count.js"></script>
</body>
</html>

23
html/counter.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<p id="p1">
<label id="counter">0</label><br>
</p>
<p id="p2">
<button type="button" id="countDownButton">Down</button>
<button type="button" id="resetButton">Reset</button>
<button type="button" id="countUpButton">Up</button>
</p>
<p id="p3">
</p>
<script src="/js/counter.js"></script>
</body>
</html>

21
html/randomNumberGeneration.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<p>
<label id="xLabel">0</label>
<label id="yLabel">0</label>
<label id="zLabel">0</label>
</p>
<p>
<button type="button" id="roll">roll</button>
</p>
<script src="/js/randomNumberGeneration.js"></script>
</body>
</html>

10
js/calcHypotenuse.js Normal file
View File

@@ -0,0 +1,10 @@
//https://youtu.be/8dWL3wF_OMw?t=2213
//Calculate hypotenuse on click of Submit-button.
document.getElementById("calcHypotenuseButton").onclick = function() {
let a = document.getElementById("sideAVal").value;
let b = document.getElementById("sideBVal").value;
let c;
c = Math.sqrt(Math.pow(a,2) + Math.pow(b,2));
document.getElementById("hypotenuse").innerHTML = "Hypotenuse: " + c;
}

19
js/count.js Normal file
View File

@@ -0,0 +1,19 @@
//Bro codes approach, probably better, since transforming less.
let count = 0;
document.getElementById("countDownButton").onclick = function() {
count--;
document.getElementById("counter").innerHTML = count;
}
document.getElementById("resetButton").onclick = function() {
count = 0;
document.getElementById("counter").innerHTML = count;
}
document.getElementById("countUpButton").onclick = function() {
let i = Number.parseInt(document.getElementById("counter").innerHTML);
count++;
document.getElementById("counter").innerHTML = count;
}

17
js/counter.js Normal file
View File

@@ -0,0 +1,17 @@
//My approach
document.getElementById("countDownButton").onclick = function() {
let i = Number.parseInt(document.getElementById("counter").innerHTML);
i--;
document.getElementById("counter").innerHTML = i;
}
document.getElementById("resetButton").onclick = function() {
document.getElementById("counter").innerHTML = 0;
}
document.getElementById("countUpButton").onclick = function() {
let i = Number.parseInt(document.getElementById("counter").innerHTML);
i++;
document.getElementById("counter").innerHTML = i;
}

8
js/randomNumberGeneration.js Normal file
View File

@@ -0,0 +1,8 @@
//Generates semi random number between 1 and 6.
let a = Math.floor(Math.random() * 6) + 1;
document.getElementById("roll").onclick = function() {
document.getElementById("xLabel").innerHTML = Math.floor(Math.random() * 6) + 1;
document.getElementById("yLabel").innerHTML = Math.floor(Math.random() * 6) + 1;
document.getElementById("zLabel").innerHTML = Math.floor(Math.random() * 6) + 1;
}