mirror of
https://github.com/hexahigh/games.git
synced 2025-12-11 20:15:38 +01:00
added calculator
This commit is contained in:
Boof
GitHub
parent
310cf626d2
commit
49bae8fad3
8
Calculator/README.md
Normal file
8
Calculator/README.md
Normal file
@ -0,0 +1,8 @@
|
||||
# Calculator
|
||||
|
||||
A simple Calculator App built with HTML, CSS, and JavaScript. It also has a Dark Mode.
|
||||
|
||||
|
||||
|
||||
* Favicon from:
|
||||
<a href="https://www.flaticon.com/free-icons/calculator" title="calculator icons">Freepik - Flaticon</a>
|
||||
1
Calculator/assets/GitHubDark.svg
Normal file
1
Calculator/assets/GitHubDark.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0"?><svg fill="#383838" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"> <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/></svg>
|
||||
|
After Width: | Height: | Size: 759 B |
1
Calculator/assets/GitHubLight.svg
Normal file
1
Calculator/assets/GitHubLight.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0"?><svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"> <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/></svg>
|
||||
|
After Width: | Height: | Size: 756 B |
3
Calculator/assets/MoonIcon.svg
Normal file
3
Calculator/assets/MoonIcon.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.83253 15C10.2484 15 12.4549 13.9475 13.9167 12.2229C14.133 11.9678 13.8972 11.5951 13.563 11.656C9.76289 12.349 6.27316 9.55904 6.27316 5.88586C6.27316 3.76998 7.45605 1.82429 9.37857 0.77666C9.67492 0.615176 9.60039 0.184951 9.26365 0.125391C8.79158 0.042039 8.31256 6.84474e-05 7.83253 0C3.50907 0 0 3.35481 0 7.5C0 11.6399 3.50356 15 7.83253 15Z" fill="#fff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 479 B |
3
Calculator/assets/SunIcon.svg
Normal file
3
Calculator/assets/SunIcon.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.76 4.29L3.96 2.5L2.55 3.91L4.34 5.7L5.76 4.29ZM3 9.95H0V11.95H3V9.95ZM12 0H10V2.95H12V0ZM19.45 3.91L18.04 2.5L16.25 4.29L17.66 5.7L19.45 3.91ZM16.24 17.61L18.03 19.41L19.44 18L17.64 16.21L16.24 17.61ZM19 9.95V11.95H22V9.95H19ZM11 4.95C7.69 4.95 5 7.64 5 10.95C5 14.26 7.69 16.95 11 16.95C14.31 16.95 17 14.26 17 10.95C17 7.64 14.31 4.95 11 4.95ZM10 21.9H12V18.95H10V21.9ZM2.55 17.99L3.96 19.4L5.75 17.6L4.34 16.19L2.55 17.99Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 557 B |
BIN
Calculator/assets/calculator.ico
Normal file
BIN
Calculator/assets/calculator.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
66
Calculator/index.html
Normal file
66
Calculator/index.html
Normal file
@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>Calculator</title>
|
||||
<meta name="description" content="Simple Calculator With Dark Mode." />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="assets/calculator.ico">
|
||||
<link rel="stylesheet" href="styles/dark.css" id="theme" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="container">
|
||||
<div class="header-container">
|
||||
<!-- This heading also notifies about the theme change.-->
|
||||
<h1 id="toast">Calculator</h1>
|
||||
<div class="top-buttons">
|
||||
<a href="https://github.com/zxcodes/JavaScript-Calculator">
|
||||
<img src="assets/GitHubLight.svg" alt="Sun Icon" height="22.5" width="22.5" id="github-icon">
|
||||
</a>
|
||||
<button type="button" onclick="changeTheme()" class="theme-button">
|
||||
<img src="assets/SunIcon.svg" alt="Theme Icon" height="19" width="19" id="theme-icon">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="first-row">
|
||||
<input type="text" name="result" id="result" placeholder="Result" readonly />
|
||||
<input type="button" value="C" onclick="result.value=''" id="clear-button" />
|
||||
</div>
|
||||
<div class="second-row">
|
||||
<input type="button" value="1" onclick="liveScreen(1)" />
|
||||
<input type="button" value="2" onclick="liveScreen(2)" />
|
||||
<input type="button" value="3" onclick="liveScreen(3)" />
|
||||
<input type="button" value="+" onclick="liveScreen('+')" />
|
||||
</div>
|
||||
<div class="third-row">
|
||||
<input type="button" value="4" onclick=" liveScreen(4)" />
|
||||
<input type="button" value="5" onclick=" liveScreen(5)" />
|
||||
<input type="button" value="6" onclick=" liveScreen(6)" />
|
||||
<input type="button" value="-" onclick="liveScreen('-')" />
|
||||
</div>
|
||||
<div class="fourth-row">
|
||||
<input type="button" value="7" onclick="liveScreen(7)" />
|
||||
<input type="button" value="8" onclick="liveScreen(8)" />
|
||||
<input type="button" value="9" onclick=" liveScreen(9)" />
|
||||
<input type="button" value="x" onclick="liveScreen('*')" />
|
||||
</div>
|
||||
<div class="fifth-row">
|
||||
<input type="button" value="/" onclick="liveScreen('/')" />
|
||||
<input type="button" value="0" onclick="liveScreen(0)" />
|
||||
<input type="button" value="." onclick="liveScreen('.')" />
|
||||
<input type="button" value="=" onclick="calculate(result.value)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="scripts/script.js">
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
108
Calculator/scripts/script.js
Normal file
108
Calculator/scripts/script.js
Normal file
@ -0,0 +1,108 @@
|
||||
const lightTheme = "styles/light.css";
|
||||
const darkTheme = "styles/dark.css";
|
||||
const sunIcon = "assets/SunIcon.svg";
|
||||
const moonIcon = "assets/MoonIcon.svg";
|
||||
const themeIcon = document.getElementById("theme-icon");
|
||||
const res = document.getElementById("result");
|
||||
const toast = document.getElementById("toast");
|
||||
|
||||
function calculate(value) {
|
||||
const calculatedValue = eval(value || null);
|
||||
if (isNaN(calculatedValue)) {
|
||||
res.value = "Can't divide 0 with 0";
|
||||
setTimeout(() => {
|
||||
res.value = "";
|
||||
}, 1300);
|
||||
} else {
|
||||
res.value = calculatedValue;
|
||||
}
|
||||
}
|
||||
|
||||
// Swaps the stylesheet to achieve dark mode.
|
||||
function changeTheme() {
|
||||
const theme = document.getElementById("theme");
|
||||
setTimeout(() => {
|
||||
toast.innerHTML = "Calculator";
|
||||
}, 1500);
|
||||
if (theme.getAttribute("href") === lightTheme) {
|
||||
theme.setAttribute("href", darkTheme);
|
||||
themeIcon.setAttribute("src", sunIcon);
|
||||
toast.innerHTML = "Dark Mode 🌙";
|
||||
} else {
|
||||
theme.setAttribute("href", lightTheme);
|
||||
themeIcon.setAttribute("src", moonIcon);
|
||||
toast.innerHTML = "Light Mode ☀️";
|
||||
}
|
||||
}
|
||||
|
||||
// Displays entered value on screen.
|
||||
function liveScreen(enteredValue) {
|
||||
if (!res.value) {
|
||||
res.value = "";
|
||||
}
|
||||
res.value += enteredValue;
|
||||
}
|
||||
|
||||
//adding event handler on the document to handle keyboard inputs
|
||||
document.addEventListener("keydown", keyboardInputHandler);
|
||||
|
||||
//function to handle keyboard inputs
|
||||
function keyboardInputHandler(e) {
|
||||
// to fix the default behavior of browser,
|
||||
// enter and backspace were causing undesired behavior when some key was already in focus.
|
||||
e.preventDefault();
|
||||
//grabbing the liveScreen
|
||||
|
||||
//numbers
|
||||
if (e.key === "0") {
|
||||
res.value += "0";
|
||||
} else if (e.key === "1") {
|
||||
res.value += "1";
|
||||
} else if (e.key === "2") {
|
||||
res.value += "2";
|
||||
} else if (e.key === "3") {
|
||||
res.value += "3";
|
||||
} else if (e.key === "4") {
|
||||
res.value += "4";
|
||||
} else if (e.key === "5") {
|
||||
res.value += "5";
|
||||
} else if (e.key === "6") {
|
||||
res.value += "6";
|
||||
} else if (e.key === "7") {
|
||||
res.value += "7";
|
||||
} else if (e.key === "7") {
|
||||
res.value += "7";
|
||||
} else if (e.key === "8") {
|
||||
res.value += "8";
|
||||
} else if (e.key === "9") {
|
||||
res.value += "9";
|
||||
}
|
||||
|
||||
//operators
|
||||
if (e.key === "+") {
|
||||
res.value += "+";
|
||||
} else if (e.key === "-") {
|
||||
res.value += "-";
|
||||
} else if (e.key === "*") {
|
||||
res.value += "*";
|
||||
} else if (e.key === "/") {
|
||||
res.value += "/";
|
||||
}
|
||||
|
||||
//decimal key
|
||||
if (e.key === ".") {
|
||||
res.value += ".";
|
||||
}
|
||||
|
||||
//press enter to see result
|
||||
if (e.key === "Enter") {
|
||||
calculate(result.value);
|
||||
}
|
||||
|
||||
//backspace for removing the last input
|
||||
if (e.key === "Backspace") {
|
||||
const resultInput = res.value;
|
||||
//remove the last element in the string
|
||||
res.value = resultInput.substring(0, res.value.length - 1);
|
||||
}
|
||||
}
|
||||
100
Calculator/styles/dark.css
Normal file
100
Calculator/styles/dark.css
Normal file
@ -0,0 +1,100 @@
|
||||
/* CSS Reset & Global Styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans';
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: rgb(221, 221, 221);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: rgb(20, 19, 19);
|
||||
transition: 0.8s all;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1.5%;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 350px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.top-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 25px;
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
width: 70px;
|
||||
background-color: rgb(47, 51, 50);
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 100px;
|
||||
margin: 0.2em;
|
||||
}
|
||||
|
||||
.first-row,
|
||||
.second-row,
|
||||
.third-row,
|
||||
.fourth-row,
|
||||
.fifth-row {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
background-color: rgb(47, 51, 50);
|
||||
width: 222.5px;
|
||||
}
|
||||
|
||||
input[type="button"]:hover {
|
||||
background-color: rgb(101, 101, 101);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#clear-button {
|
||||
color: #fff;
|
||||
background-color: rgb(255, 42, 42);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#github-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.theme-button {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
}
|
||||
99
Calculator/styles/light.css
Normal file
99
Calculator/styles/light.css
Normal file
@ -0,0 +1,99 @@
|
||||
/* CSS Reset & Global Styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans';
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: rgb(7, 210, 199);
|
||||
transition: 0.8s all;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1.5%;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 350px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.top-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 25px;
|
||||
color: rgb(87, 87, 87);
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
width: 70px;
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 100px;
|
||||
margin: 0.2em;
|
||||
}
|
||||
|
||||
.first-row,
|
||||
.second-row,
|
||||
.third-row,
|
||||
.fourth-row,
|
||||
.fifth-row {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
input[type="button"] {
|
||||
color: rgb(122, 122, 122);
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
background-color: rgb(255, 255, 255);
|
||||
width: 222.5px;
|
||||
}
|
||||
|
||||
input[type="button"]:hover {
|
||||
background-color: rgb(37, 35, 59);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#clear-button {
|
||||
color: #fff;
|
||||
background-color: rgb(255, 25, 25);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#github-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.theme-button {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user