prjct

├── README.md ├── design ├── desktop-preview.jpg ├── active-states-theme-1.jpg ├── active-states-theme-2.jpg ├── active-states-theme-3.jpg ├── desktop-design-theme-1.jpg ├── desktop-design-theme-2.jpg ├── desktop-design-theme-3.jpg ├── mobile-design-theme-1.jpg ├── mobile-design-theme-2.jpg └── mobile-design-theme-3.jpg └── prjct ├── prjct.html ├── prjct.css └── prjct.js /README.md: -------------------------------------------------------------------------------- 1 | # Calculator 2 | A calculator using HTML CSS and JavaScript (Frontend mentor challenge). 3 | -------------------------------------------------------------------------------- /design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AghilesTMA/Calculator/HEAD/design/desktop-preview.jpg -------------------------------------------------------------------------------- /design/active-states-theme-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AghilesTMA/Calculator/HEAD/design/active-states-theme-1.jpg -------------------------------------------------------------------------------- /design/active-states-theme-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AghilesTMA/Calculator/HEAD/design/active-states-theme-2.jpg -------------------------------------------------------------------------------- /design/active-states-theme-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AghilesTMA/Calculator/HEAD/design/active-states-theme-3.jpg -------------------------------------------------------------------------------- /design/desktop-design-theme-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AghilesTMA/Calculator/HEAD/design/desktop-design-theme-1.jpg -------------------------------------------------------------------------------- /design/desktop-design-theme-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AghilesTMA/Calculator/HEAD/design/desktop-design-theme-2.jpg -------------------------------------------------------------------------------- /design/desktop-design-theme-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AghilesTMA/Calculator/HEAD/design/desktop-design-theme-3.jpg -------------------------------------------------------------------------------- /design/mobile-design-theme-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AghilesTMA/Calculator/HEAD/design/mobile-design-theme-1.jpg -------------------------------------------------------------------------------- /design/mobile-design-theme-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AghilesTMA/Calculator/HEAD/design/mobile-design-theme-2.jpg -------------------------------------------------------------------------------- /design/mobile-design-theme-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AghilesTMA/Calculator/HEAD/design/mobile-design-theme-3.jpg -------------------------------------------------------------------------------- /prjct/prjct.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | prjct 8 | 9 | 10 |

11 |

12 | calc 13 |

14 | THEME 15 |

20 |

21 |

22 |

23 |

24 |

25 |

26 |

7
8
9
DEL
4
5
6
+
1
2
3
-
.
0
/
x
RESET
=

46 |

47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /prjct/prjct.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap'); 2 | 3 | :root{ 4 | --Bg-main-bg: hsl(222, 26%, 31%); 5 | --Bg-keyborad-toggle: hsl(223, 31%, 20%); 6 | --Bg-screen: hsl(224, 36%, 15%); 7 | 8 | --Key-bg: hsl(30, 25%, 89%); 9 | --Key-shadow:hsl(28, 16%, 65%); 10 | --Key2-bg: hsl(6, 63%, 50%); 11 | --Key2-shadow: hsl(6, 70%, 34%); 12 | --Key3-bg: hsl(225, 21%, 49%); 13 | --Key3-shadow: hsl(224, 28%, 35%); 14 | 15 | --Text-calc-head: hsl(36, 10%, 90%); 16 | --Text-num-btn: hsl(221, 14%, 31%); 17 | --Text-diff-btn: hsl(36, 10%, 90%); 18 | --Text-screen: hsl(36, 10%, 90%); 19 | --Text-solve-btn: hsl(36, 10%, 90%); 20 | 21 | --Font-size: 32px; 22 | --Font-weight: 700; 23 | --Font-family: 'League Spartan', sans-serif; 24 | } 25 | *{ 26 | box-sizing: border-box; 27 | margin: 0; 28 | padding: 0; 29 | font-family: var(--Font-family); 30 | } 31 | body{ 32 | background-color: var(--Bg-main-bg); 33 | padding: 1rem; 34 | min-height: 100vh; 35 | display: flex; 36 | align-items: center; 37 | justify-content: center; 38 | } 39 | /* Calculator styling: */ 40 | @media(max-width: 50rem){ 41 | .calc-container{ 42 | width: 100%; 43 | max-width: 400px; 44 | } 45 | } 46 | @media(min-width: 50rem){ 47 | .calc-container{ 48 | width: 50%; 49 | max-width: 500px; 50 | } 51 | } 52 | 53 | .calc-container{ 54 | background-color: var(--Bg-main-bg); 55 | display: flex; 56 | flex-direction: column; 57 | align-items: center; 58 | justify-content: space-between; 59 | gap: 2rem; 60 | } 61 | .calc-head{ 62 | display: flex; 63 | width: 100%; 64 | align-items: flex-end; 65 | justify-content: space-between; 66 | color: var(--Text-calc-head); 67 | } 68 | .calc-name{ 69 | font-weight: var(--Font-weight); 70 | font-size: var(--Font-size); 71 | } 72 | .themes{ 73 | display: grid; 74 | grid-template-columns: 1fr 1fr; 75 | column-gap: 1.5rem; 76 | grid-template-areas: 77 | ". numbers" 78 | "theme btn" 79 | ; 80 | max-width: 150px; 81 | font-weight: 600; 82 | } 83 | .toggle-btn{ 84 | background-color: var(--Bg-keyborad-toggle); 85 | width: 100%; 86 | height: 100%; 87 | grid-area: btn; 88 | border-radius: 100px; 89 | padding: .2rem; 90 | display: flex; 91 | align-items: center; 92 | justify-content: flex-start; 93 | } 94 | .toggle-btn:hover{ 95 | cursor: pointer; 96 | } 97 | .select{ 98 | background-color: var(--Key2-bg); 99 | height: 100%; 100 | aspect-ratio: 1/1; 101 | border-radius: 100px; 102 | transition: transform 250ms ease; 103 | } 104 | 105 | .numbers{ 106 | display: flex; 107 | list-style: none; 108 | grid-area: numbers; 109 | align-items: center; 110 | justify-content: space-between; 111 | padding: .2rem; 112 | } 113 | .theme{ 114 | grid-area: theme; 115 | } 116 | 117 | 118 | .screen{ 119 | width: 100%; 120 | aspect-ratio: 7/2; 121 | border-radius: 20px; 122 | background-color: var(--Bg-screen); 123 | display: flex; 124 | align-items: center; 125 | justify-content: flex-end; 126 | padding: 1rem; 127 | font-size: var(--Font-size); 128 | font-weight: var(--Font-weight); 129 | overflow-x: hidden; 130 | color: var(--Text-screen); 131 | } 132 | 133 | 134 | .buttons{ 135 | list-style: none; 136 | background-color: var(--Bg-keyborad-toggle); 137 | width: 100%; 138 | display: grid; 139 | grid-template-columns: 1fr 1fr 1fr 1fr; 140 | gap: 1rem; 141 | padding: 1rem; 142 | border-radius: 5px; 143 | } 144 | .button{ 145 | height: 50px; 146 | border-radius: 5px; 147 | display: grid; 148 | place-items: center; 149 | font-size: 1.5rem; 150 | font-weight: var(--Font-weight); 151 | transition: box-shadow 150ms ease; 152 | transition: transform 150ms ease; 153 | } 154 | .num-or-op{ 155 | background-color: var(--Key-bg); 156 | color: var(--Text-num-btn); 157 | box-shadow: 0 5px 0px var(--Key-shadow); 158 | } 159 | .del,.reset{ 160 | background-color: var(--Key3-bg); 161 | box-shadow: 0 5px 0 var(--Key3-shadow); 162 | color: var(--Text-diff-btn); 163 | } 164 | .solve{ 165 | background-color: var(--Key2-bg); 166 | box-shadow: 0 5px 0 var(--Key2-shadow); 167 | color: var(--Text-solve-btn); 168 | } 169 | .button:hover{ 170 | filter: brightness(110%); 171 | cursor: pointer; 172 | } 173 | .button:active{ 174 | box-shadow: none; 175 | transform: translateY(5px); 176 | } 177 | .reset{ 178 | grid-column: 1/3; 179 | } 180 | .solve{ 181 | grid-column: 3/5; 182 | } -------------------------------------------------------------------------------- /prjct/prjct.js: -------------------------------------------------------------------------------- 1 | //calculation logic: 2 | //defining variables: 3 | const buttons = document.querySelector(".buttons"); 4 | const button = document.querySelectorAll(".button"); 5 | const screen = document.querySelector(".screen"); 6 | let equationArr = []; 7 | let theme = 0; 8 | const toggleBtn = document.querySelector(".toggle-btn"); 9 | const toggleDot = document.querySelector(".select"); 10 | let root = document.querySelector(":root"); 11 | let rootStyles = getComputedStyle(root); 12 | 13 | if (localStorage.getItem("theme")!== null) { 14 | theme = parseInt(localStorage.getItem("theme")); 15 | changeTheme(); 16 | } 17 | 18 | 19 | function isNumber(num) { 20 | return !isNaN(num); 21 | } 22 | function solveEquation() { 23 | let secondArr = []; 24 | let simplyfiedArr = []; 25 | let solutionArr = []; 26 | let number = ""; 27 | if (matchOp(equationArr.at(-1))) { 28 | equationArr.pop(); 29 | } 30 | for (let k = 0; k < equationArr.length; k++) { 31 | if (isNumber(equationArr[k]) || equationArr[k] == ".") { 32 | number += equationArr[k]; 33 | } 34 | if (matchOp(equationArr[k])) { 35 | secondArr.push(number); 36 | secondArr.push(equationArr[k]); 37 | number = ""; 38 | } 39 | } 40 | secondArr.push(number); 41 | number = ""; 42 | 43 | let n = 0; 44 | while (n < secondArr.length) { 45 | if (secondArr[n] != "x" && secondArr[n] != "/") { 46 | simplyfiedArr.push(secondArr[n]); 47 | } else { 48 | if (secondArr[n] == "x") { 49 | let prev = simplyfiedArr.pop(); 50 | let curr = parseFloat(prev) * parseFloat(secondArr[n + 1]); 51 | simplyfiedArr.push(curr); 52 | n++; 53 | } else { 54 | if (parseFloat(secondArr[n + 1]) == 0) { 55 | equationArr = []; 56 | secondArr = []; 57 | simplyfiedArr = []; 58 | screen.innerHTML = "Error can't devide by zero"; 59 | return; 60 | } else { 61 | let prev = simplyfiedArr.pop(); 62 | let curr = parseFloat(prev) / parseFloat(secondArr[n + 1]); 63 | simplyfiedArr.push(curr); 64 | n++; 65 | } 66 | } 67 | } 68 | n++; 69 | } 70 | 71 | let m = 0; 72 | while (m < simplyfiedArr.length) { 73 | if (simplyfiedArr[m] != "+" && simplyfiedArr[m] != "-") { 74 | solutionArr.push(simplyfiedArr[m]); 75 | } else { 76 | if (simplyfiedArr[m] == "+") { 77 | let prev = solutionArr.pop(); 78 | let curr = parseFloat(prev) + parseFloat(simplyfiedArr[m + 1]); 79 | solutionArr.push(curr); 80 | } else { 81 | let prev = solutionArr.pop(); 82 | let curr = parseFloat(prev) - parseFloat(simplyfiedArr[m + 1]); 83 | solutionArr.push(curr); 84 | } 85 | m++; 86 | } 87 | m++; 88 | } 89 | equationArr = [solutionArr.join("")]; 90 | screen.innerHTML = parseFloat(solutionArr.join("")); 91 | } 92 | function matchOp(content) { 93 | let operations = new Set(); 94 | operations.add("+"); 95 | operations.add("-"); 96 | operations.add("/"); 97 | operations.add("x"); 98 | if (operations.has(content)) { 99 | return true; 100 | } else { 101 | return false; 102 | } 103 | } 104 | button.forEach((btn) => { 105 | btn.addEventListener("click", (e) => { 106 | if (btn.classList.contains("reset")) { 107 | equationArr = []; 108 | screen.innerHTML = "0"; 109 | } else if (btn.classList.contains("del")) { 110 | equationArr.pop(); 111 | let screenStr = equationArr.join(""); 112 | screen.innerHTML = screenStr; 113 | } else if (btn.classList.contains("solve")) { 114 | solveEquation(); 115 | } else { 116 | if ( 117 | (matchOp(btn.innerHTML) && equationArr.length == 0) || 118 | (matchOp(btn.innerHTML) && matchOp(equationArr.at(-1))) 119 | ) { 120 | return; 121 | } else { 122 | equationArr.push(btn.innerHTML); 123 | let screenContent = equationArr.join(""); 124 | screen.innerHTML = screenContent; 125 | } 126 | } 127 | }); 128 | }); 129 | 130 | //changing themes: 131 | 132 | function changeTheme() { 133 | toggleDot.style.transform = `translateX(${15 * theme}px)`; 134 | if (theme == 0) { 135 | root.style.cssText = `--Bg-main-bg: hsl(222, 26%, 31%); 136 | --Bg-keyborad-toggle: hsl(223, 31%, 20%); 137 | --Bg-screen: hsl(224, 36%, 15%); 138 | 139 | --Key-bg: hsl(30, 25%, 89%); 140 | --Key-shadow:hsl(28, 16%, 65%); 141 | --Key2-bg: hsl(6, 63%, 50%); 142 | --Key2-shadow: hsl(6, 70%, 34%); 143 | --Key3-bg: hsl(225, 21%, 49%); 144 | --Key3-shadow: hsl(224, 28%, 35%); 145 | 146 | --Text-dark: hsl(221, 14%, 31%); 147 | --Text-light: hsl(0, 0%, 100%); 148 | --Text-light-sec: hsl(36, 10%, 90%); 149 | --Text-solve-btn: hsl(36, 10%, 90%); 150 | `; 151 | } 152 | if (theme == 1) { 153 | root.style.cssText = `--Bg-main-bg: hsl(0, 0%, 90%); 154 | --Bg-keyborad-toggle: hsl(0, 5%, 81%); 155 | --Bg-screen: hsl(0, 0%, 93%); 156 | 157 | --Key3-bg: hsl(185, 42%, 37%); 158 | --Key3-shadow:hsl(185, 58%, 25%); 159 | --Key2-bg: hsl(25, 98%, 40%); 160 | --Key2-shadow: hsl(25, 99%, 27%); 161 | --Key-bg: hsl(45, 7%, 89%); 162 | --Key-shadow: hsl(35, 11%, 61%); 163 | 164 | --Text-calc-head: hsl(52, 8%, 19%); 165 | --Text-num-btn: hsl(52, 8%, 19%); 166 | --Text-diff-btn: #fff; 167 | --Text-screen: hsl(52, 8%, 19%); 168 | --Text-solve-btn: #fff; 169 | `; 170 | document.querySelector(".calc-head").style.color = "hsl(60, 9%, 20%))"; 171 | } 172 | if (theme == 2) { 173 | root.style.cssText = `--Bg-main-bg: hsl(268, 75%, 9%); 174 | --Bg-keyborad-toggle: hsl(268, 71%, 12%); 175 | --Bg-screen: hsl(268, 71%, 12%); 176 | 177 | --Key-bg: hsl(281, 89%, 26%); 178 | --Key-shadow:hsl(285, 91%, 52%); 179 | --Key2-bg: hsl(176, 100%, 44%); 180 | --Key2-shadow: hsl(177, 92%, 70%); 181 | --Key3-bg: hsl(268, 47%, 21%); 182 | --Key3-shadow: hsl(290, 70%, 36%); 183 | 184 | --Text-calc-head: hsl(52, 93%, 62%); 185 | --Text-num-btn: hsl(52, 93%, 62%); 186 | --Text-diff-btn: #fff; 187 | --Text-screen: hsl(52, 93%, 62%); 188 | --Text-solve-btn: hsl(185, 100%, 11%); 189 | `; 190 | } 191 | } 192 | 193 | toggleBtn.addEventListener("click", (e) => { 194 | theme = (theme + 1) % 3; 195 | window.localStorage.setItem("theme", `${theme}`); 196 | changeTheme(); 197 | }); 198 | --------------------------------------------------------------------------------