MostlyCalculator
This commit is contained in:
105
MiniProjects/Calculator/calculator.html
Normal file
105
MiniProjects/Calculator/calculator.html
Normal 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
51
MiniProjects/Calculator/calculator.js
Normal 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;
|
||||
}
|
||||
@ -7,6 +7,6 @@
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</html>
|
||||
13
Practice/AdvancedThings/mathUtil.js
Normal file
13
Practice/AdvancedThings/mathUtil.js
Normal 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
|
||||
}
|
||||
@ -1,4 +1,51 @@
|
||||
console.log("Hello World");
|
||||
//ES6 MODULES
|
||||
|
||||
//I shall continue from this poin:
|
||||
//https://youtu.be/lfmg-EJ8gm4?feature=shared&t=27294
|
||||
import {PI, getCircumference, getArea, getVolume} from './mathUtil.js'; //Import functions and variables from another file
|
||||
|
||||
//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!")
|
||||
Reference in New Issue
Block a user