Calculator App

├── README.md ├── Assignment-6 calculator ├── script.js ├── Index.html └── style.css └── Assignment-6 calculator -Updated ├── script.js ├── Index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Assignment-JS-6 2 | Assignment-HTML-CSS-JS-Calculator 3 | -------------------------------------------------------------------------------- /Assignment-6 calculator/script.js: -------------------------------------------------------------------------------- 1 | let string = ""; 2 | let buttons = document.querySelectorAll("button"); 3 | Array.from(buttons).forEach((button)=>{ 4 | button.addEventListener("click",(e)=>{ 5 | if (e.target.innerHTML === "=") { 6 | string = eval(string); 7 | document.getElementById("display").value = string; 8 | } 9 | else if(e.target.innerHTML === "Clear") { 10 | string = ""; 11 | document.getElementById("display").value = string; 12 | } 13 | else { 14 | console.log(e.target); 15 | string = string + e.target.innerHTML; 16 | document.getElementById("display").value = string; 17 | } 18 | }) 19 | }) 20 | 21 | -------------------------------------------------------------------------------- /Assignment-6 calculator -Updated/script.js: -------------------------------------------------------------------------------- 1 | function input(number) { 2 | let display = document.getElementById("display"); 3 | display.value += number; 4 | } 5 | function calculate() { 6 | let display = document.getElementById("display"); 7 | let history = document.getElementById("history"); 8 | 9 | if (display.value == "") { 10 | alert("Please Enter The Value to Calculate") 11 | } 12 | else { 13 | history.value = display.value; 14 | display.value = eval(history.value); 15 | } 16 | } 17 | 18 | function clrScreen() { 19 | let display = document.getElementById("display"); 20 | let history = document.getElementById("history"); 21 | history.value = ""; 22 | display.value = ""; 23 | 24 | } -------------------------------------------------------------------------------- /Assignment-6 calculator/Index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Calculator App 9 | 10 | 11 | 12 | 13 | 14 |

15 |

Calculator

16 |

17 | 18 |

19 |

20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

37 |
38 | 39 |

40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Assignment-6 calculator -Updated/Index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Calculator App 9 | 10 | 11 | 12 | 13 | 14 |

15 |

Calculator

16 |

17 | 18 | 19 |

20 |

21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |

38 |
39 | 40 |

41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Assignment-6 calculator/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"); 2 | * { 3 | font-family: "Roboto", sans-serif; 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | text-align: center; 14 | height: 100vh; 15 | background-color: #ffffff; 16 | } 17 | 18 | .container { 19 | background: rgb(31, 31, 31); 20 | background: linear-gradient( 21 | 90deg, 22 | rgb(36, 36, 36) 46%, 23 | rgba(37, 37, 37, 1) 99% 24 | ); 25 | width: 350px; 26 | border: none; 27 | border-radius: 18px; 28 | padding: 5px 30px 20px 30px; 29 | } 30 | 31 | .heading { 32 | color: #ff6f4f; 33 | font-weight: 400; 34 | padding-bottom: 6px; 35 | } 36 | 37 | .line-1 { 38 | border: 2px solid #ff6f4f; 39 | width: 220px; 40 | margin-left: 35px; 41 | } 42 | 43 | .line-2 { 44 | border: 1px solid #525151; 45 | width: 250px; 46 | margin-left: 21px; 47 | margin-bottom: 20px; 48 | } 49 | 50 | .display { 51 | width: 280px; 52 | height: 100px; 53 | background: rgb(48, 48, 48); 54 | background: linear-gradient( 55 | 90deg, 56 | rgb(36, 36, 36) 46%, 57 | rgba(37, 37, 37, 1) 99% 58 | ); 59 | text-align: right; 60 | color: white; 61 | font-size: 28px; 62 | margin: 10px 0; 63 | border: none; 64 | } 65 | 66 | .btns { 67 | display: grid; 68 | grid-template-columns: 1fr 1fr 1fr 1fr; 69 | gap: 12px 12px; 70 | } 71 | 72 | .btns button { 73 | background-color: #242424; 74 | color: white; 75 | border: 1px solid #525151; 76 | border-radius: 50%; 77 | padding: 16px 0; 78 | font-size: 25px; 79 | text-align: center; 80 | cursor: pointer; 81 | } 82 | 83 | .btns button:hover { 84 | background-color: #ff6f4f; 85 | color: black; 86 | font-weight: bold; 87 | } 88 | 89 | .container .divide { 90 | background-color: #525151; 91 | } 92 | .container .multiply { 93 | background-color: #525151; 94 | } 95 | .container .plus { 96 | background-color: #525151; 97 | } 98 | .container .dash { 99 | background-color: #525151; 100 | } 101 | .container .dot { 102 | background-color: #525151; 103 | } 104 | 105 | button:nth-last-child(2) { 106 | background-color: #ff6f4f; 107 | } 108 | 109 | .clr-btn { 110 | color: white; 111 | background-color: #171717; 112 | font-size: 22px; 113 | font-weight: 400; 114 | padding: 15px 100px; 115 | margin: 20px; 116 | border-radius: 10px; 117 | border: 2px solid #ff6f4f; 118 | cursor: pointer; 119 | } 120 | .clr-btn:hover { 121 | background-color: #ff6f4f; 122 | color: black; 123 | font-weight: bold; 124 | } 125 | 126 | footer{ 127 | color: #ff6f4f; 128 | font-size: 15spx; 129 | text-decoration: underline; 130 | } -------------------------------------------------------------------------------- /Assignment-6 calculator -Updated/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"); 2 | * { 3 | font-family: "Roboto", sans-serif; 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | text-align: center; 14 | height: 100vh; 15 | background-color: #ffffff; 16 | } 17 | 18 | .container { 19 | background: rgb(31, 31, 31); 20 | background: linear-gradient( 21 | 90deg, 22 | rgb(36, 36, 36) 46%, 23 | rgba(37, 37, 37, 1) 99% 24 | ); 25 | width: 350px; 26 | border: none; 27 | border-radius: 18px; 28 | padding: 5px 30px 20px 30px; 29 | } 30 | 31 | .heading { 32 | color: #ff6f4f; 33 | font-weight: 400; 34 | padding-bottom: 6px; 35 | } 36 | 37 | .line-1 { 38 | border: 2px solid #ff6f4f; 39 | width: 220px; 40 | margin-left: 35px; 41 | } 42 | 43 | .line-2 { 44 | border: 1px solid #525151; 45 | width: 250px; 46 | margin-left: 21px; 47 | margin-bottom: 20px; 48 | } 49 | 50 | .display { 51 | width: 280px; 52 | height: 50px; 53 | background: rgb(48, 48, 48); 54 | background: linear-gradient( 55 | 90deg, 56 | rgb(36, 36, 36) 46%, 57 | rgba(37, 37, 37, 1) 99% 58 | ); 59 | text-align: right; 60 | color: white; 61 | font-size: 30px; 62 | margin: 10px 0; 63 | border: none; 64 | } 65 | #history{ 66 | font-size: 20px; 67 | color: #cfcfcf; 68 | } 69 | 70 | .btns { 71 | display: grid; 72 | grid-template-columns: 1fr 1fr 1fr 1fr; 73 | gap: 12px 12px; 74 | } 75 | 76 | .btns button { 77 | background-color: #242424; 78 | color: white; 79 | border: 1px solid #525151; 80 | border-radius: 50%; 81 | padding: 16px 0; 82 | font-size: 25px; 83 | text-align: center; 84 | cursor: pointer; 85 | } 86 | 87 | .btns button:hover { 88 | background-color: #ff6f4f; 89 | color: black; 90 | font-weight: bold; 91 | } 92 | 93 | .container .divide { 94 | background-color: #525151; 95 | } 96 | .container .multiply { 97 | background-color: #525151; 98 | } 99 | .container .plus { 100 | background-color: #525151; 101 | } 102 | .container .dash { 103 | background-color: #525151; 104 | } 105 | .container .dot { 106 | background-color: #525151; 107 | } 108 | 109 | button:nth-last-child(2) { 110 | background-color: #ff6f4f; 111 | } 112 | 113 | .clr-btn { 114 | color: white; 115 | background-color: #171717; 116 | font-size: 22px; 117 | font-weight: 400; 118 | padding: 15px 100px; 119 | margin: 20px; 120 | border-radius: 10px; 121 | border: 2px solid #ff6f4f; 122 | cursor: pointer; 123 | } 124 | .clr-btn:hover { 125 | background-color: #ff6f4f; 126 | color: black; 127 | font-weight: bold; 128 | } 129 | 130 | footer{ 131 | color: #ff6f4f; 132 | font-size: 15spx; 133 | text-decoration: underline; 134 | } --------------------------------------------------------------------------------