├── README.md ├── index.html ├── javasaipt.js └── cssfile.css /README.md: -------------------------------------------------------------------------------- 1 | # Calculator_Project 2 | This my project of intenship program on the codesoft 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple Calculator 6 | 7 | 8 | 9 | 12 |
Mk's Calculator
13 |
14 |
15 |
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 | -------------------------------------------------------------------------------- /javasaipt.js: -------------------------------------------------------------------------------- 1 | function getHistory(){ 2 | return document.getElementById("history-value").innerText; 3 | } 4 | function printHistory(num){ 5 | document.getElementById("history-value").innerText=num; 6 | } 7 | function getOutput(){ 8 | return document.getElementById("output-value").innerText; 9 | } 10 | function printOutput(num){ 11 | if(num==""){ 12 | document.getElementById("output-value").innerText=num; 13 | } 14 | else{ 15 | document.getElementById("output-value").innerText=getFormattedNumber(num); 16 | } 17 | } 18 | function getFormattedNumber(num){ 19 | if(num=="-"){ 20 | return ""; 21 | } 22 | var n = Number(num); 23 | var value = n.toLocaleString("en"); 24 | return value; 25 | } 26 | function reverseNumberFormat(num){ 27 | return Number(num.replace(/,/g,'')); 28 | } 29 | var operator = document.getElementsByClassName("operator"); 30 | for(var i =0;i 2 | body { 3 | font-family: 'Open Sans', sans-serif; 4 | background-color: transparent; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | #container { 10 | width: 1000px; 11 | height: 550px; 12 | background-image: linear-gradient(rgba(215, 168, 168, 0.3), rgba(0, 0, 0, 0.3)); 13 | margin: 20px auto; 14 | position: relative; 15 | } 16 | 17 | #calculator { 18 | width: 320px; 19 | height: 520px; 20 | background-color: transparent; 21 | margin: 0 auto; 22 | top: 20px; 23 | position: relative; 24 | border-radius: 50px 0 50px 0; 25 | box-shadow: 0 4px 8px 0 rgb(190, 148, 148), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 26 | } 27 | 28 | #result { 29 | height: 120px; 30 | } 31 | 32 | #history { 33 | text-align: right; 34 | height: 20px; 35 | margin: 0 20px; 36 | padding-top: 20px; 37 | font-size: 15px; 38 | color: transparent; 39 | } 40 | 41 | #output { 42 | text-align: right; 43 | height: 60px; 44 | margin: 10px 20px; 45 | font-size: 30px; 46 | } 47 | 48 | #keyboard { 49 | height: 400px; 50 | } 51 | 52 | .operator, .number, .empty { 53 | width: 50px; 54 | height: 50px; 55 | margin: 15px; 56 | float: left; 57 | border-radius: 50% 0 50; 58 | border-width: 0; 59 | font-weight: bold; 60 | font-size: 15px; 61 | } 62 | 63 | .number, .empty { 64 | background-color: transparent; 65 | border-color: #d11e1e; 66 | } 67 | 68 | .number, .operator { 69 | cursor: pointer; 70 | } 71 | 72 | .operator:active, .number:active { 73 | font-size: 13px; 74 | } 75 | 76 | .operator:focus, .number:focus, .empty:focus { 77 | outline: 0; 78 | } 79 | 80 | button:nth-child(4) { 81 | font-size: 20px; 82 | background-color: #20b2aa; 83 | } 84 | 85 | button:nth-child(8) { 86 | font-size: 20px; 87 | background-color: #ffa500; 88 | } 89 | 90 | button:nth-child(12) { 91 | font-size: 20px; 92 | background-color: #f08080; 93 | } 94 | 95 | button:nth-child(16) { 96 | font-size: 20px; 97 | background-color: #7d93e0; 98 | } 99 | 100 | button:nth-child(20) { 101 | font-size: 20px; 102 | background-color: #ffffff; 103 | } 104 | 105 | #video-background { 106 | position: fixed; 107 | top: 0; 108 | left: 0; 109 | width: 100%; 110 | height: 100%; 111 | object-fit: cover; 112 | z-index: -1; 113 | } 114 | 115 | #calculator-title { 116 | text-align: center; 117 | font-size: 80px; 118 | color: #441c1ccc; 119 | margin: 20px auto; 120 | text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.925); 121 | 122 | } 123 | 124 | #calculator-title { 125 | text-align: center; 126 | font-size: 80px; 127 | color: #000000cc; 128 | margin: 20px auto; 129 | 130 | } 131 | 132 | --------------------------------------------------------------------------------