diff --git a/calculator.js b/calculator.js new file mode 100644 index 0000000..6a3d92d --- /dev/null +++ b/calculator.js @@ -0,0 +1,120 @@ +var screen=document.querySelector('#screen'); + var btn=document.querySelectorAll('.btn'); + + for(item of btn) + { + item.addEventListener('click',(e)=>{ + btntext=e.target.innerText; + + if(btntext =='×') + { + btntext= '*'; + } + + if(btntext=='÷') + { + btntext='/'; + } + screen.value+=btntext; + }); + } + function RAD(){ + var r, pi = Math.PI; + r= screen.value * (pi/180); + screen.value=r + } + // console.log(RAD(45)); + function Deg(){ + var t, pi = Math.PI; + t= screen.value * (180/pi); + screen.value=t + } + + function sin() + { + screen.value=Math.sin(screen.value); + } + + function cos() + { + screen.value=Math.cos(screen.value); + } + + function tan() + { + screen.value=Math.tan(screen.value); + } + + function pow() + { + screen.value=Math.pow(screen.value,2); + } + + function sqrt() + { + screen.value=Math.sqrt(screen.value,2); + } + + function log() + { + screen.value=Math.log(screen.value); + } + + function pi() + { + screen.value= 3.14159265359; + } + + function e() + { + screen.value=2.71828182846; + } + + function fact() + { + var i, num, f; + f=1 + num=screen.value; + for(i=1; i<=num; i++) + { + f=f*i; + } + + i=i-1; + + screen.value=f; + } + + function backspc() + { + screen.value=screen.value.substr(0,screen.value.length-1); + } + +function toggle() { + var element = document.body; + element.classList.toggle("dark-mode"); +} + function darkmode(){ + + } + + document.addEventListener("DOMContentLoaded", function(event) { + document.documentElement.setAttribute("data-theme", "light"); + + // Get our button switcher + var themeSwitcher = document.getElementById("theme-switcher"); + + // When our button gets clicked + themeSwitcher.onclick = function() { + // Get the current selected theme, on the first run + // it should be `light` + var currentTheme = document.documentElement.getAttribute("data-theme"); + + // Switch between `dark` and `light` + var switchToTheme = currentTheme === "dark" ? "light" : "dark" + + // Set our currenet theme to the new one + document.documentElement.setAttribute("data-theme", switchToTheme); + } + }); + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..b768afb --- /dev/null +++ b/index.html @@ -0,0 +1,75 @@ + + + + + Calculator + + + +
+
+ +
+ +
+
+ + + + + + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + + + +
+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..14581d8 --- /dev/null +++ b/style.css @@ -0,0 +1,155 @@ +body +{ + padding: 0; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + user-select: none; + background: #ffffff; +} + +.container +{ margin-left: 1.8em; + padding: 20px; + border-radius: 8px; + box-shadow: 13px 13px 20px #4a4d4d, + -13px -13px 20px #878585; +} + +.content +{ + width: 100%; + margin-top: 1.7em; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.row button +{ + width: 60px; + height: 30px; + font-size: 16px; + border: none; + outline: none; + margin: 5px; + border-radius: 4px; + /* transition: .1s; */ + box-shadow: 5px 5px 8px #30262620, + -5px -5px 8px rgb(67, 63, 63); +} + +.row button:hover +{ + box-shadow: inset 5px 5px 8px rgba(94, 91, 91, 0.1), + inset -5px -5px 8px #fff; + background: #fff; +} + +.display #screen +{ + margin-bottom: .5em; + width: auto; + height: 70px; + font-size: 35px; + outline: none; + border: none; + text-align: right; + padding-right: .5em; + background: #ecf0f3; + border-radius: 6px; + box-shadow: inset 8px 8px 8px #43474c, + inset -8px -8px 8px #ffffff; +} + +#eval +{ + background: #33ccff; + color: #fff; + box-shadow: inset 5px 5px 8px #37f4e1, + inset -5px -5px 8px #00ace6; +} + +#eval:hover +{ + box-shadow: inset 5px 5px 8px #4291c5, + inset -5px -5px 8px #00ace6; +} + +#ac +{ + background: #33cc33; + color: #fff; +} + +#ac:hover +{ + box-shadow: inset 5px 5px 8px #2eb82e, + inset -5px -5px 8px #33cc33; +} + +#ce +{ + background: #9626d3de; + color: #fff; +} + +#ce:hover +{ + box-shadow: inset 5px 5px 8px #e60073, + inset -5px -5px 8px #ff3399; +} + +h2 + +{ + font-size: 40px; + position: relative; + bottom: 1em; + margin-left: 1.2em; + font-family: sans-serif; + color: #fff; + text-transform: uppercase; + text-shadow: 1px 1px 1px #d1d9e6, + 1px 1px 2px #d1d9e6, + 3px 3px 3px #d1d9e6, + 4px 4px 4px #d1d9e6, + 5px 5px 5px #d1d9e6, + 6px 6px 6px #d1d9e6, + 7px 7px 7px #d1d9e6, + 8px 8px 8px #d1d9e6; + letter-spacing: 6px; +} + +h2 span +{ +color: #33cc33; +font-size: 45px; +text-shadow: 1px 1px 1px #d1d9e6, + 1px 1px 2px #d1d9e6, + 3px 3px 3px #d1d9e6, + 4px 4px 4px #d1d9e6, + 5px 5px 5px #d1d9e6, + 6px 6px 6px #d1d9e6 ; +} + +h2 .fa +{ + position: absolute; + top: 1.5em; + color: #33ccff; +} + +.dark-mode { + background-color: rgb(0, 0, 0); + +} +.button:hover { + background-color: #323330; + color: white; + transition: 0.5s ease-in-out; +} +