├── .gitignore ├── LICENSE ├── README.md ├── cssReset.css ├── imgs ├── calculator_img.png ├── delete.png ├── favicon.png ├── limit-screen.png ├── over-limit-screen.png ├── preview_img.png ├── preview_img1.jpg ├── preview_img2.jpg └── randolph.png ├── index.html ├── script.js └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | cssReset.css 2 | index.js 3 | package.json 4 | package-lock.json 5 | node_modules 6 | imgs/preview_img.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020-2021 Luciano Esteban 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simple Web Calculator 2 | 3 | ### The "Simple-Web-Calculator" is a basic tool that has the system of a normal arithmetic calculator, with the specialty of having some buttons and scientific symbols. 4 | 5 | ![](imgs/calculator_img.png) 6 | 7 | 8 | #### This is a simple arithmetic web calculator, with some implementations of a scientific one, made only with HTML, CSS and JavaScript. 9 | 10 | ![](imgs/preview_img1.jpg) 11 | 12 | ![](imgs/preview_img2.jpg) 13 | 14 | 15 | ## Technologies used in the program 16 | 17 | - [HTML5](https://developer.mozilla.org/en-US/docs/Web/HTML) 18 | - [CSS3](https://www.w3.org/Style/CSS/Overview.en.html) 19 | - [JavaScript](https://www.javascript.com/) 20 | 21 | 22 | ## Contributions 23 | 24 | Pull requests are welcome. So if you've got an idea of how to improve this code, I'll thank you for opening an issue to check that change that you want to make. 25 | 26 | 27 | ## Icon Design Credits 28 | 29 | - Social icons from [w3schools](https://www.w3schools.com/icons/fontawesome_icons_brand.asp). 30 | - Delete icon from [Those-Icons (flaticon)](https://www.flaticon.com/authors/those-icons). 31 | - Skull icon from [Freepik (flaticon)](https://www.flaticon.com/free-icon/skull_3554197). 32 | - Side skull icon from [Those-Icons (flaticon)](https://www.flaticon.com/free-icon/skull_527056). 33 | - PI icon from [Good Ware (flaticon)](https://www.flaticon.com/free-icon/pi_2532557?related_id=2532557&origin=search). 34 | - Ropes icon from [Freepik (flaticon)](https://www.flaticon.com/free-icon/ropes_1382616). 35 | - Headphones icon from [Nhor Phai(flaticon)](https://www.flaticon.com/free-icon/headphones_2590162?related_id=2590061&origin=search). 36 | 37 | 38 | ## License 39 | 40 | #### MIT © [Luciano Esteban](https://github.com/LucioFex) -------------------------------------------------------------------------------- /cssReset.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* CSS document */ 3 | 4 | /* CSS Reset took from https://www.super-simple.net/blog/un-css-reset-moderno/ */ 5 | 6 | /* Box sizing rules */ 7 | *, 8 | *::before, 9 | *::after { 10 | box-sizing: border-box; 11 | } 12 | 13 | /* Remove default padding */ 14 | ul[class], 15 | ol[class] { 16 | padding: 0; 17 | } 18 | 19 | /* Remove default margin */ 20 | body, 21 | h1, 22 | h2, 23 | h3, 24 | h4, 25 | p, 26 | ul[class], 27 | ol[class], 28 | li, 29 | figure, 30 | figcaption, 31 | blockquote, 32 | dl, 33 | dd { 34 | margin: 0; 35 | } 36 | 37 | /* Set core body defaults */ 38 | body { 39 | min-height: 100vh; 40 | scroll-behavior: smooth; 41 | text-rendering: optimizeSpeed; 42 | line-height: 1.5; 43 | } 44 | 45 | /* Remove list styles on ul, ol elements with a class attribute */ 46 | ul[class], 47 | ol[class] { 48 | list-style: none; 49 | } 50 | 51 | /* A elements that don't have a class get default styles */ 52 | a:not([class]) { 53 | text-decoration-skip-ink: auto; 54 | } 55 | 56 | /* Make images easier to work with */ 57 | img { 58 | max-width: 100%; 59 | display: block; 60 | } 61 | 62 | /* Natural flow and rhythm in articles by default */ 63 | article > * + * { 64 | margin-top: 1em; 65 | } 66 | 67 | /* Inherit fonts for inputs and buttons */ 68 | input, 69 | button, 70 | textarea, 71 | select { 72 | font: inherit; 73 | } 74 | 75 | /* Remove all animations and transitions for people that prefer not to see them */ 76 | @media (prefers-reduced-motion: reduce) { 77 | * { 78 | animation-duration: 0.01ms !important; 79 | animation-iteration-count: 1 !important; 80 | transition-duration: 0.01ms !important; 81 | scroll-behavior: auto !important; 82 | } 83 | } -------------------------------------------------------------------------------- /imgs/calculator_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucioFex/Simple-Web-Calculator/8360d8199aafbd350631e5b46160736ab5baa3ab/imgs/calculator_img.png -------------------------------------------------------------------------------- /imgs/delete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucioFex/Simple-Web-Calculator/8360d8199aafbd350631e5b46160736ab5baa3ab/imgs/delete.png -------------------------------------------------------------------------------- /imgs/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucioFex/Simple-Web-Calculator/8360d8199aafbd350631e5b46160736ab5baa3ab/imgs/favicon.png -------------------------------------------------------------------------------- /imgs/limit-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucioFex/Simple-Web-Calculator/8360d8199aafbd350631e5b46160736ab5baa3ab/imgs/limit-screen.png -------------------------------------------------------------------------------- /imgs/over-limit-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucioFex/Simple-Web-Calculator/8360d8199aafbd350631e5b46160736ab5baa3ab/imgs/over-limit-screen.png -------------------------------------------------------------------------------- /imgs/preview_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucioFex/Simple-Web-Calculator/8360d8199aafbd350631e5b46160736ab5baa3ab/imgs/preview_img.png -------------------------------------------------------------------------------- /imgs/preview_img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucioFex/Simple-Web-Calculator/8360d8199aafbd350631e5b46160736ab5baa3ab/imgs/preview_img1.jpg -------------------------------------------------------------------------------- /imgs/preview_img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucioFex/Simple-Web-Calculator/8360d8199aafbd350631e5b46160736ab5baa3ab/imgs/preview_img2.jpg -------------------------------------------------------------------------------- /imgs/randolph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucioFex/Simple-Web-Calculator/8360d8199aafbd350631e5b46160736ab5baa3ab/imgs/randolph.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simple Web Calculator 7 | 8 | 10 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Simple Web Calculator

19 | 20 |
21 |
22 |
23 |
24 |

25 |
26 |
27 |

0

28 |
29 |
30 |
31 |
+/-
32 |
π
33 |
e
34 |
n!
35 |
CE
36 |
37 | 38 |
39 |
40 |
41 |
42 |
7
43 |
8
44 |
9
45 |
46 |
47 |
4
48 |
5
49 |
6
50 |
51 |
52 |
1
53 |
2
54 |
3
55 |
56 |
57 |
C
58 |
0
59 |
,
60 |
61 |
62 |
63 |
√
64 |
∛
65 |
÷
66 |
x
67 |
-
68 |
+
69 |
1/x
70 |
x²
71 |
=
72 |
73 |
74 |
75 |
76 |
77 | 78 | This is a simple arithmetic web calculator, with some implementations of a scientific one. 79 | 80 | 81 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // JavaScript document - Simple Web Calculator - Luciano Esteban (2021) 2 | 3 | // Fundamental constants & variables 4 | const topScreen = document.getElementById("nums-top"); 5 | const bottomScreen = document.getElementById("nums-bottom"); 6 | const calculator = document.getElementById("calculator"); 7 | const calculatorInterface = document.getElementById("calculator-interface"); 8 | const calculatorScreen = document.getElementById("calculator-screen"); 9 | const skull = document.getElementById("skull") 10 | const footer = document.getElementById("footer"); 11 | const colors = ["#294192", "#2f4d0d", "#790979", "#811414"]; 12 | const calcValues = { 13 | num1: "1", num2: "2", num3: "3", num4: "4", num5: "5", num6: "6", 14 | num7: "7", num8: "8", num9: "9", num0: "0", comma: ",", sum: "+", 15 | substract: "-", divide: "÷", multiply: "x", factorial: "!", overX: "1/", 16 | equalTo: "=", squareRoot: "√", cubeRoot: "∛", squarePower: "²", 17 | pi: "3,1415926535897932384", euler: "2,7182818284590452353"}; 18 | const keyboardSymbols = { 19 | "1": "num1", "2": "num2", "3": "num3", "4": "num4", "5": "num5", 20 | "6": "num6", "7": "num7", "8": "num8", "9": "num9", "0": "num0", 21 | "Backspace": "del1", "Delete": "clear", ",": "comma", 22 | "+": "sum", "-": "substract", "/": "divide", "*": "multiply", 23 | "Enter": "equalTo", "=": "equalTo", "e": "euler" 24 | } 25 | var givenResult = false; 26 | var resultValue = "0"; 27 | var colorNum = 0; 28 | var record = []; 29 | 30 | 31 | function setUp() { 32 | /* 33 | Preparations for the usage of the calculator 34 | */ 35 | let terms = document.getElementById("terms"); 36 | let privacy = document.getElementById("privacy"); 37 | 38 | // Functionality of the terms and privacy buttons: 39 | for (element of [terms, privacy]) { 40 | element.addEventListener("click", helpSection, false); 41 | } 42 | 43 | // Update of the footer's width when the user opens the page 44 | skullPosition() 45 | 46 | // Change of the title background color in intervals of 4 seconds: 47 | setInterval(multiColor, 1000 * 4, document.getElementById("title")); 48 | 49 | // Functionality of the calculator buttons: 50 | for (idName of document.getElementsByClassName("button")) { 51 | buttonAction(idName); 52 | } 53 | 54 | // Link some symbols of the keyboard to the calculator 55 | document.addEventListener("keydown", keyboardButtons, false); 56 | } 57 | 58 | 59 | function multiColor(title) { 60 | /* 61 | Change of the background color of the title of the page every 4 seconds 62 | */ 63 | if (colorNum > colors.length - 1) {colorNum = 0} 64 | title.style.background = colors[colorNum]; 65 | colorNum += 1; 66 | } 67 | 68 | 69 | function buttonAction(input) { 70 | /* 71 | Button selection action: 72 | It prepares all AddEventListeners() for the calculator buttons. 73 | It divides the 'specialValues' from the normals. 74 | */ 75 | let specialValues = [ 76 | "equalTo", "overX", "factorial", "squareRoot", "cubeRoot", 77 | "squarePower", "divide", "multiply", "sum", "substract"]; 78 | 79 | if (specialValues.includes(input.id)) { 80 | input.addEventListener( 81 | "click", () => processValue(input.id), false); 82 | } 83 | else if (specialValues.includes(input.id) === false) { 84 | // If input.id is a number or not in the 'specialValues' list: 85 | input.addEventListener( 86 | "click", () => bottomScreenPrint(input.id), false); 87 | } 88 | } 89 | 90 | 91 | function arithmeticSection(total, symbol, number) { 92 | /* 93 | The 'Total' parameter will be processed by 'number' with arithmetic symbols 94 | */ 95 | switch (symbol) { 96 | case "+": return total + parseFloat(number); 97 | case "-": return total - parseFloat(number); 98 | case "x": return total * parseFloat(number); 99 | case "÷": return total / parseFloat(number); 100 | } 101 | } 102 | 103 | 104 | function scientificSection(symbol) { 105 | /* 106 | The 'Total' parameter will be processed by 'number' with scientific symbols 107 | */ 108 | let number = parseFloat(bottomScreen.innerHTML.replace(",", ".")); 109 | 110 | if (wrongInput(number, symbol)) { 111 | bottomScreen.innerHTML = wrongInput(number, symbol); 112 | return "error" 113 | } 114 | 115 | switch (symbol) { 116 | case "1/": return 1 / number; 117 | case "√": return Math.sqrt(number); 118 | case "∛": return Math.cbrt(number); 119 | case "²": return Math.pow(number, 2); 120 | 121 | case "!": 122 | if (number === 0) {return 1} 123 | let inputNumber = number; 124 | 125 | for (num=1; num < inputNumber; num++) {number *= num} 126 | return number; 127 | } 128 | } 129 | 130 | 131 | function calculateValues(history) { 132 | /* 133 | It process the history of values to send these numbers (depending 134 | of their symbols) to diferents functions to return the result. 135 | */ 136 | if (Number.isNaN(parseFloat(history[0]))) {history.unshift("0")} 137 | let result = parseFloat(history[0]); 138 | 139 | for (value in history) { 140 | let numberAndSymbol = [history[value -1], history[value]]; 141 | 142 | // Arithmetic section 143 | if (["+", "-", "x", "÷"].includes(history[value - 1])) { 144 | result = arithmeticSection(result, ...numberAndSymbol); 145 | } 146 | 147 | // Scientific section 148 | else if (["1/", "!", "√", "∛", "²"].includes(history[value])) { 149 | result = scientificSection(numberAndSymbol[1]); 150 | } 151 | } 152 | 153 | if (result === "error") {record = [], resultValue = "0"} 154 | return result; 155 | } 156 | 157 | 158 | function wrongInput(number, symbol) { 159 | /* 160 | Function that alerts if an input has an incorrect symbol. 161 | */ 162 | number = number.toString() 163 | console.log(number); 164 | let factorialError = symbol === "!" && number.includes("-", "."); 165 | let rootError = symbol === "√" && number[0] === "-"; 166 | let zeroDivisionError = symbol === "1/" && number === undefined; 167 | 168 | if (factorialError || rootError) {return "Invalid Input"} 169 | else if (zeroDivisionError) {return "You can't divide by zero"} 170 | } 171 | 172 | 173 | function topScreenPrint(total) { 174 | /* 175 | Function to change the aspect of the top screen when a 176 | the input is a scientific operator. 177 | */ 178 | let symbol = record.slice(-1)[0]; 179 | let preSymbol 180 | let preTotal 181 | let preProcess 182 | 183 | if (record.length >= 4 && symbol) { 184 | preTotal = calculateValues(record.slice(0, -2)).toString(); 185 | preSymbol = record.slice(-3)[0]; 186 | preProcess = `${preTotal} ${preSymbol}`; 187 | } 188 | 189 | else if (record.length < 4 && symbol !== "=") {preProcess = ""} 190 | let screenNumber = bottomScreen.innerHTML; 191 | 192 | switch (symbol) { 193 | case "!": 194 | case "²": 195 | topScreen.innerHTML = 196 | `${preProcess} (${screenNumber})${symbol}`; 197 | break; 198 | 199 | case "1/": 200 | case "√": 201 | case "∛": 202 | topScreen.innerHTML = 203 | `${preProcess} ${symbol}(${screenNumber})`; 204 | break; 205 | 206 | case "=": 207 | topScreen.innerHTML += " ="; 208 | break 209 | } 210 | 211 | // Beginning of the givenResult mode 212 | if (symbol !== "=" && record.length >= 4) {record = [preTotal, preSymbol]} 213 | else if (symbol === "=" || record.length < 4) {record = []} 214 | 215 | resultValue = total; 216 | givenResult = true; 217 | } 218 | 219 | 220 | function screenModification(total) { 221 | /* 222 | Function that shows the output of the result in the bottom screen, 223 | but will also show the process in the top one. 224 | */ 225 | topScreen.innerHTML = ""; 226 | total = total.toString(); 227 | 228 | if (total === "Infinity") { 229 | bottomScreenPrint("clear"); 230 | return bottomScreen.innerHTML = "You can't divide by zero"; 231 | } 232 | 233 | for (value in record) { 234 | // If there's a scientific symbol 235 | if (["1/", "!", "√", "∛", "²", "="].includes(record[value])) { 236 | topScreenPrint(total); 237 | break; 238 | } 239 | 240 | // If there's a simple number or an arithmetic symbol 241 | topScreen.innerHTML += ` ${record[value].replace(".", ",")}`; 242 | } 243 | 244 | if (total !== "error") {bottomScreen.innerHTML = total.replace(".", ",")} 245 | } 246 | 247 | 248 | function processValue(sym) { 249 | /* 250 | Function that process the inserted symbol to print the 251 | progress of the calculation's in the top screen and 252 | the result of it in the bottom screen. 253 | */ 254 | if (resultValue.slice(-1) === ",") {resultValue = resultValue.slice(0, -1)} 255 | record.push(resultValue.replace(",", "."), calcValues[sym]); 256 | 257 | if (record.slice(-2)[0] === "0" && record.slice(-1)[0] !== "=" && record.length === 2) { 258 | record = record.slice(0, -3); 259 | record.push(calcValues[sym]); 260 | } 261 | 262 | // Visual process of the calculation in the top and bottom screen: 263 | screenModification(calculateValues(record)); 264 | 265 | // Preparation for the next calculation 266 | if (["1/", "!", "√", "∛", "²", "="].includes(calcValues[sym]) === false) { 267 | resultValue = "0"} 268 | skullPosition(); 269 | } 270 | 271 | 272 | function givenResultCheck(sym) { 273 | /* 274 | Looks if the user got a result, after that checks if the 275 | next input is a number or a symbol. 276 | 277 | If the input is a number: 278 | It restart the values of every screen. 279 | 280 | If the input is a symbol: 281 | It adds the last number in the top screen and then the operator. 282 | */ 283 | if (givenResult && sym !== "negate" && [0, 3].includes(record.length)) { 284 | givenResult = false; 285 | resultValue = "0"; 286 | record = []; 287 | topScreen.innerHTML = ""; 288 | } 289 | } 290 | 291 | 292 | function bottomScreenPrint(sym) { 293 | /* 294 | Prints the selected number in the bottom screen, 295 | including variables such as "pi" or "e". Even the 'negate'. 296 | But if the input is a system calculator button such as 297 | "clear", "ce" or "del", then it will delete characters. 298 | */ 299 | givenResultCheck(sym); 300 | 301 | if (["clear", "ce"].includes(sym) || ["del1", "del2"].includes(sym) 302 | && resultValue.length === 1 || sym === "num0" 303 | && (resultValue === "" || resultValue === "0")) { 304 | resultValue = "0"; 305 | } 306 | 307 | if (sym === "clear") { 308 | topScreen.innerHTML = ""; 309 | record = []; 310 | } 311 | 312 | else if (sym.includes("num") || sym === "comma" 313 | && resultValue.includes(",") === false) { 314 | if (resultValue === "0" && sym !== "comma") {resultValue = ""} 315 | resultValue += calcValues[sym]; 316 | } 317 | 318 | else if (["pi", "euler"].includes(sym)) { 319 | resultValue = calcValues[sym]; 320 | } 321 | 322 | else if (sym === "negate" && resultValue !== "0") { 323 | if (resultValue[0] !== "-") {resultValue = "-" + resultValue} 324 | else if (resultValue[0] === "-") {resultValue = resultValue.slice(1)} 325 | } 326 | 327 | else if (["del1", "del2"].includes(sym) && resultValue.length > 1) { 328 | resultValue = resultValue.slice(0, -1); 329 | } 330 | 331 | // Final print 332 | bottomScreen.innerHTML = resultValue; 333 | skullPosition(); 334 | } 335 | 336 | 337 | function skullPosition() { 338 | /* 339 | This function changes the position of the skull 340 | in the right of the calculator, including its image. 341 | It also increases or reduces the width of the calculator 342 | depending of the calculator's top and bottom screen length. 343 | */ 344 | let bottomWidth = (bottomScreen.innerHTML.length - 21) * 24; 345 | let topWidth = (topScreen.innerHTML.length - 51) * 8; 346 | 347 | let greaterWidth = topWidth; 348 | if (bottomWidth >= topWidth) {greaterWidth = bottomWidth} 349 | 350 | switch (greaterWidth <= 0) { 351 | case true: 352 | let transition = 0.2; 353 | skull.style.transition = `${transition}s ease-in-out 0s`; 354 | calculator.style.transition = `${transition}s ease-in-out 0s`; 355 | calculatorInterface.style.transition = `${transition}s ease-in-out 0s`; 356 | calculatorScreen.style.transition = `${transition}s ease-in-out 0s`; 357 | footer.style.transition = `${transition}s ease-in-out 0s`; 358 | 359 | skull.style.left = "calc(50% + 300px)"; 360 | skull.src = "imgs/limit-screen.png"; 361 | calculator.style.width = "600px"; 362 | calculatorInterface.style.width = "560px"; 363 | calculatorScreen.style.width = "504px"; 364 | footer.style.width = "100%"; 365 | break; 366 | 367 | case false: 368 | skull.src = "imgs/over-limit-screen.png"; 369 | skull.style.left = `calc(50% + 300px + ${greaterWidth}px)`; 370 | calculator.style.width = `calc(600px + ${greaterWidth}px)`; 371 | calculatorInterface.style.width = `calc(560px + ${greaterWidth}px)`; 372 | calculatorScreen.style.width = `calc(504px + ${greaterWidth}px)`; 373 | footer.style.width = `calc(100% + ${greaterWidth}px)`; 374 | break; 375 | } 376 | } 377 | 378 | function keyboardButtons(event) { 379 | /* 380 | Function to use the numbers and some symbols of 381 | the keyboard as calculator buttons. 382 | */ 383 | let bottomValues = Object.keys(keyboardSymbols).slice(0, 13); 384 | let topValues = Object.keys(keyboardSymbols).slice(13); 385 | 386 | if (bottomValues.includes(event.key)) { 387 | bottomScreenPrint(keyboardSymbols[event.key]); 388 | } 389 | 390 | else if (topValues.includes(event.key)) { 391 | processValue(keyboardSymbols[event.key]); 392 | } 393 | 394 | } 395 | 396 | function helpSection(event) { 397 | /* 398 | Usage of the "terms and conditions" and "privacy policy" buttons. 399 | */ 400 | let id = event.target.id; 401 | alert("I am supposed to show you something about " + 402 | `${id[0].toUpperCase() + id.slice(1)} and stuff like that.`); 403 | 404 | if (id === "terms") { 405 | alert("The license of this web site is the MIT LICENSE."); 406 | } 407 | 408 | else if (id === "privacy") { 409 | privacyTexts = [ 410 | "Knowing that this web site is about a calculator, there's " + 411 | "no need to set any kind of privacy politic. Relax...", 412 | 413 | "But I wanna learn how to redirect you from this page to another" + 414 | " one, so... Let's look at the formal definition of privacy :)", 415 | 416 | "Oh, I almost forget: \nIf you'd have read this, then surely your" + 417 | " navigator will cancel the next page that I will try to open." + 418 | "\n\nIf you skipped everything, then you will have no problem >:("] 419 | 420 | for (text of privacyTexts) {alert(text)} 421 | window.open("https://en.wikipedia.org/wiki/Privacy", "_blank"); 422 | } 423 | } 424 | 425 | window.addEventListener('load', setUp, false); // Starts the script 426 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* CSS document */ 3 | 4 | * { 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | html, body { 10 | height: 100%; 11 | background-image: radial-gradient(at center, #253770, #382569); 12 | } 13 | 14 | #container { 15 | min-height: calc(100% - 10em); 16 | } 17 | 18 | #title { 19 | color: white; 20 | background-color: #2b4499; 21 | font: 2.5em "Helvetica", "Candara", "Arial"; 22 | width: fit-content; 23 | top: 20px; 24 | left: calc(50% - 230px); 25 | padding: 5px 25px 5px 25px; 26 | border-radius: 15px; 27 | text-shadow: 5px 5px 5px #000000; 28 | box-shadow: 0px 5px 10px #220a36; 29 | position: absolute; 30 | transition: 3s ease-in-out 0.1s; 31 | user-select: None; 32 | } 33 | 34 | #calculator { 35 | user-select: None; 36 | top: 98px; 37 | left: calc(50% - 300px); 38 | width: 600px; 39 | height: 600px; 40 | background-image: radial-gradient(at center, #281f58 70%, #193444); 41 | border-radius: 30px; 42 | box-shadow: 10px 10px 25px black; 43 | position: absolute; 44 | } 45 | 46 | #skull { 47 | top: 120px; 48 | left: calc(50% + 300px); 49 | position: absolute; 50 | } 51 | 52 | #calculator-interface { 53 | margin: 17px; 54 | width: 560px; 55 | height: 565px; 56 | background-image: linear-gradient(to top right, #131f30, #1d2b3d); 57 | position: relative; 58 | border-radius: 15px; 59 | } 60 | 61 | #calculator-screen { 62 | position: absolute; 63 | background-image: radial-gradient(at center, #375077 25%, #2d446b); 64 | border: #213353 inset 4px; 65 | width: 504px; 66 | height: 80px; 67 | top: 6%; 68 | left: 25.2px; 69 | border-radius: 5px; 70 | } 71 | 72 | #screen-top, #screen-bottom { 73 | position: absolute; 74 | width: 100%; 75 | } 76 | 77 | #screen-top { 78 | top: 0; 79 | height: 30%; 80 | background-color: #2e4366; 81 | } 82 | 83 | #screen-bottom { 84 | top: 30%; 85 | height: calc(70% - 5px); 86 | background-color: #293c5e; 87 | border-top: #31486e solid 5px; 88 | } 89 | 90 | #nums-top, #nums-bottom { 91 | position: absolute; 92 | width: 100%; 93 | height: 100%; 94 | font-family: "Arial", "Helvetica", "sans-serif", "Century Gothic"; 95 | text-align: right; 96 | } 97 | 98 | #nums-top { 99 | color: #e0e0e0b0; 100 | font-size: 18px; 101 | padding: 2px 0; 102 | user-select: text; 103 | } 104 | 105 | #nums-bottom { 106 | color: #e0e0e0; 107 | font-size: 43px; 108 | user-select: text; 109 | } 110 | 111 | #functional-container { 112 | position: absolute; 113 | width: 520px; 114 | height: 60px; 115 | top: 23.5%; 116 | left: 27px; 117 | } 118 | 119 | #nums-container { 120 | background-image: linear-gradient(to top right, #16253b, #1e3047); 121 | position: absolute; 122 | border-radius: 10px; 123 | width: 299.6px; 124 | height: 61%; 125 | top: 37%; 126 | left: 11.2px; 127 | } 128 | 129 | #arithmetic-container { 130 | position: absolute; 131 | left: 327.8px; 132 | width: 215px; 133 | top: calc(53% - 90px); 134 | } 135 | 136 | .button { 137 | margin: 5px; 138 | font-family: "helvetica", "century gothic", "arial"; 139 | color: white; 140 | border-radius: 5px; 141 | display: flex; 142 | float: left; 143 | justify-content: center; 144 | align-items: center; 145 | transition: 0.17s ease-in-out 0.01s; 146 | } 147 | 148 | .button:hover { 149 | transform: scale(1.15); 150 | cursor: pointer; 151 | } 152 | 153 | #functional-container .button:active, 154 | #nums-container .button:active, 155 | #arithmetic-container .button:active{ 156 | transition: 0.01s ease-in-out 0.01s; 157 | transform: scale(1); 158 | } 159 | 160 | #functional-container .button:active { 161 | background-color: #182a53; 162 | } 163 | 164 | #arithmetic-container .button:active { 165 | background-color: #273e61; 166 | } 167 | 168 | #nums-container .button:active { 169 | background-color: #1c385e; 170 | } 171 | 172 | #functional-container .button { 173 | border: #3e568a dashed 3px; 174 | font-size: 2.2em; 175 | width: 70px; 176 | height: 55px; 177 | } 178 | 179 | #skull img { 180 | user-select: none; 181 | transition: transform 1s ease-in-out 1s; 182 | }; 183 | 184 | #skull, #functional-container #del1 img { 185 | user-select: none; 186 | } 187 | 188 | #functional-container #del1 img { 189 | width: 40px; 190 | height: 40px; 191 | } 192 | 193 | #euler, #factorial, #pi { 194 | font-family: 'Times New Roman', Times, serif; 195 | } 196 | 197 | .numbers-line { 198 | margin: 13px 0 20px 4%; 199 | clear: both; 200 | } 201 | 202 | #nums-container .button { 203 | background-color: #243b5a; 204 | font-size: 2.2em; 205 | width: 80px; 206 | height: 70px; 207 | } 208 | 209 | #nums-container #clear { 210 | font-size: 1.8em; 211 | background-color: #291246; 212 | border: 1px solid #1103244d; 213 | } 214 | 215 | #nums-container #clear:active { 216 | background-color: #3a1764; 217 | } 218 | 219 | #functional-container #del1, 220 | #functional-container #ce { 221 | font-size: 1.3em; 222 | background-color: #472a69; 223 | border: 1px solid #280e4d80; 224 | } 225 | 226 | #functional-container #del1:active, 227 | #functional-container #ce:active { 228 | background-color: #462075; 229 | } 230 | 231 | #nums-container #comma { 232 | font-size: 3em; 233 | align-items: flex-start; 234 | } 235 | 236 | #arithmetic-container .button { 237 | background-color: #24355a; 238 | font-size: 2.2em; 239 | width: 95px; 240 | height: 55px; 241 | } 242 | 243 | #arithmetic-container #equalTo { 244 | background-color: #3a5285; 245 | width: calc(100px * 2); 246 | height: 65px; 247 | } 248 | 249 | #arithmetic-container #equalTo:active { 250 | background-color: #314e8b; 251 | transform: scale(1.09); 252 | } 253 | 254 | footer { 255 | background-image: linear-gradient(to right, #19171b 20%, #18181a 20%); 256 | height: 18rem; 257 | width: 99.1vw; 258 | overflow: hidden; 259 | } 260 | 261 | #logo-container { 262 | float: left; 263 | padding: 25px 50px 0 30px; 264 | } 265 | 266 | #logo-container img { 267 | width: 265px; 268 | height: auto; 269 | } 270 | 271 | .footer-third { 272 | width: calc(21.6666666667% - 20px); 273 | margin-right: 10px; 274 | margin-top: 10px; 275 | float: left; 276 | } 277 | 278 | .footer-third:last-child { 279 | margin-right: 0; 280 | } 281 | 282 | .footer-third h1 { 283 | font-family: "arial", "sans-serif"; 284 | font-size: 30px; 285 | color: white; 286 | display: block; 287 | font-weight: 200px; 288 | width: 100%; 289 | margin-bottom: 20px; 290 | margin-top: 20px; 291 | } 292 | 293 | .footer-third a { 294 | font-family: "arial", "sans-serif"; 295 | font-size: 18px; 296 | color: #8d8a96; 297 | display: table; 298 | font-weight: 200; 299 | width: fit-content; 300 | margin-bottom: 20px; 301 | cursor: pointer; 302 | text-decoration: none; 303 | transition: 0.2s ease-in-out 0.01s; 304 | } 305 | 306 | .footer-third a:hover { 307 | color: white; 308 | transform: scale(1.15); 309 | text-decoration: underline; 310 | } 311 | 312 | .footer-third li { 313 | display: inline-block; 314 | padding: 0 5px; 315 | font-size: 20px; 316 | } 317 | 318 | span { 319 | color: white; 320 | font-family: "arial", "sans-serif"; 321 | font-size: 38px; 322 | font-weight: 200; 323 | display: block; 324 | width: 100%; 325 | max-width: 800px; 326 | margin:20px auto; 327 | text-align: center; 328 | 329 | } 330 | 331 | .footer-third li i { 332 | font-size: 65px; 333 | padding-right: 15px; 334 | } 335 | 336 | /* --- -Responsive alterations- ---*/ 337 | 338 | @media (max-height: 1040px) { 339 | #container {min-height: calc(10vh + 700px);} 340 | footer {width: 118.9em;} 341 | } 342 | --------------------------------------------------------------------------------