Kilokem/BroCodeJS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MostlyCalculator

Browse Source
This commit is contained in:
Kilokem
2024-10-11 10:55:09 +02:00
parent a94be56583
commit bc4486fe11
5 changed files with 220 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
MiniProjects/Calculator/calculator.html Normal file
View File

@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
</head>
<style>
/* From Uiverse.io by emmanuelh-dev */
.calculator {
border: 1px solid rgb(179, 179, 179);
border-radius: 0.375rem;
width: 190px;
height: 254px;
font-family: Arial, sans-serif;
margin: 20% auto;
padding: 10px;
}
.output {
border: 1px solid #ccc;
border-radius: 0.375rem;
height: 40px;
margin-bottom: 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
}
.result {
font-size: 20px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
button {
border: none;
border-radius: 0.375rem;
padding: 10px;
background-color: #eee;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #ddd;
}
button:active {
background-color: #ccc;
}
.bg-green {
background-color: rgba(0, 177, 29, 0.651);
color: white;
}
.bg-green:hover {
background-color: rgba(0, 231, 39, 0.651);
color: white;
}
.bg-red {
background-color: rgba(223, 4, 4, 0.651);
color: white;
}
.bg-red:hover {
background-color: rgba(255, 1, 1, 0.651);
color: white;
}
</style>
<body>
<div class="calculator">
<div class="output">
<span class="result" id="result">0</span>
</div>
<div class="buttons">
<button id="one" onclick="update(1)">1</button>
<button id="two" onclick="update(2)">2</button>
<button id="three" onclick="update(3)">3</button>
<button id="add" onclick="operation('+')">+</button>
<button id="four" onclick="update(4)">4</button>
<button id="five" onclick="update(5)">5</button>
<button id="six" onclick="update(6)">6</button>
<button id="min" onclick="operation('-')">-</button>
<button id="seven" onclick="update(7)">7</button>
<button id="eight" onclick="update(8)">8</button>
<button id="nine" onclick="update(9)">9</button>
<button id="mult" onclick="operation('*')">*</button>
<button class="bg-red" id="c" onclick="clearout()">C</button>
<button id="zero" onclick="update(0)">0</button>
<button class="bg-green" id="equal" onclick="showresult()">=</button>
<button id="add" onclick="operation('/')">/</button>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>

51
MiniProjects/Calculator/calculator.js Normal file
View File

@ -0,0 +1,51 @@
var number = 0;
var newNum = true
var operand = null;
function update(num){
if (newNum){
document.getElementById("result").innerHTML += num;
}else{
storenum(num);
}
}
function clearout(){
number = 0;
document.getElementById("result").innerHTML = "";
}
function storenum(num){
var currentNumber =Number(document.getElementById("result").innerHTML);
switch (operand){
case '*':
number = number * currentNumber;
break;
case '/':
number = number / currentNumber;
break;
case '+':
number = number + currentNumber;
break;
case '-':
number = number - currentNumber;
break;
default:
if(number == 0) number = currentNumber;
break;
}
if (num != 0){
document.getElementById("result").innerHTML = '' + num;
}
console.log(number)
newNum = true;
}
function operation(simbol){
operand = simbol;
newNum = false
}
function showresult(){
storenum(0);
document.getElementById("result").innerHTML = number;
}

2
Practice/AdvancedThings/index.html
View File

@ -7,6 +7,6 @@
</head> </head>
<body> <body>
<h1>For every output check out the console!!!</h1> <h1>For every output check out the console!!!</h1>
<script src="script.js"></script> <script type="module" src="script.js" ></script> <!--It is important to use the script as a module!!!-->
</body> </body>
</html> </html>

13
Practice/AdvancedThings/mathUtil.js Normal file
View File

@ -0,0 +1,13 @@
export const PI = 3.14159
export function getCircumference(radius){
return 2 * PI * radius
}
export function getArea(radius){
return PI * radius * radius
}
export function getVolume(radius){
return (4/3) * PI * radius ** 3
}

51
Practice/AdvancedThings/script.js
View File

@ -1,4 +1,51 @@
console.log("Hello World"); //ES6 MODULES
import {PI, getCircumference, getArea, getVolume} from './mathUtil.js'; //Import functions and variables from another file
//I shall continue from this poin:
//https://youtu.be/lfmg-EJ8gm4?feature=shared&t=27294 //https://youtu.be/lfmg-EJ8gm4?feature=shared&t=27294
console.log(PI)
console.log("Circumference: " + getCircumference(5));
console.log("Area: " + getArea(5));
console.log("Volume: " + getVolume(5));
//ASYNC PROGRAMMING!!!
setTimeout(() => console.log("Task1"), 3000) //THIS IS AN ASYNC FUNCTION!!!! And because of that the tasks order will be 2, 3, and 1
console.log('Task2')
console.log('Task3')
//Force async functions to behave like synchronous
function func1(callback){
setTimeout(() => {console.log("Stask1");
callback();},3000);
}
function func2(){
console.log("Stask2");
console.log("Stask3");
}
func1(func2);
//ERROR OBJECTS
try{
console.log("HELLO");
const feellikeerror = false;
if (feellikeerror){
throw new Error("I felt like making an error!")
}
}
catch(error){
console.error(error)
}
finally{ //OPTIONAL It will always be executed!
console.log("This always executes!")
}
console.log("END!")