From 6427abffdbe25d3626cd899d77ce90fa18d9e3d8 Mon Sep 17 00:00:00 2001 From: Priti Kumari <75852935+amyra98@users.noreply.github.com> Date: Fri, 10 Jun 2022 16:21:48 +0530 Subject: [PATCH] Files upload --- index.html | 88 +++++++++++++++++++++ script.js | 226 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 144 ++++++++++++++++++++++++++++++++++ 3 files changed, 458 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..dd2e24e --- /dev/null +++ b/index.html @@ -0,0 +1,88 @@ + + + + + + + + + CalciCalci + + +
+ +
+

Calculator

+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Dark Mode

+ +
+ +
+
+ + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..6400ce3 --- /dev/null +++ b/script.js @@ -0,0 +1,226 @@ +function toggle() { + var element = document.body; + element.classList.toggle("dark-mode"); +} + +function addChar(input, character) { + if(input.value == null || input.value == "0") + input.value = character + else + input.value += character +} + +function cos(form) { + form.display.value = Math.cos(form.display.value); +} + +function sin(form) { + form.display.value = Math.sin(form.display.value); +} + +function tan(form) { + form.display.value = Math.tan(form.display.value); +} + +function sqrt(form) { + form.display.value = Math.sqrt(form.display.value); +} + +function ln(form) { + form.display.value = Math.log(form.display.value); +} + +function exp(form) { + form.display.value = Math.exp(form.display.value); +} + +function deleteChar(input) { + input.value = input.value.substring(0, input.value.length - 1) +} +var val = 0.0; +function percent(input) { + val = input.value; + input.value = input.value + "%"; +} + +function changeSign(input) { + if(input.value.substring(0, 1) == "-") + input.value = input.value.substring(1, input.value.length) + else + input.value = "-" + input.value +} + +function compute(form) { + + form.display.value = eval(form.display.value); + } + + +function square(form) { + form.display.value = eval(form.display.value) * eval(form.display.value) +} + +function checkNum(str) { + for (var i = 0; i < str.length; i++) { + var ch = str.charAt(i); + if (ch < "0" || ch > "9") { + if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "." + && ch != "(" && ch!= ")" && ch != "%") { + alert("invalid entry!") + return false + } + } + } + return true +} + +// function radians_to_degrees(radians) +// { +// var pi = Math.PI; +// return radians * (180/pi); +// } + +//dark mode feature +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); + } + }); +//his + +const history = document.querySelector('#history'); + button.addEventListener('click', (e)=>{ + if(e.target.innerHTML == '='){ + history.appendChild(createitem(string)); + try { + string = eval(string); + document.querySelector('input').value = string; + + } + catch(err) { + document.querySelector('input').value ='Recheck' ; + + } + } + else if(e.target.innerHTML == 'C'){ + string = "" + document.querySelector('input').value = string; + } + else if(e.target.innerHTML == 'sin') + { + if(a==1) + string=eval(string*Math.PI/180); + history.appendChild(createitem('sin('+string+')')); + + string= Math.sin(string); + document.querySelector('input').value = string; + + } + else if(e.target.innerHTML == 'cos') + { + if(a==1) + string=eval(string*Math.PI/180); + history.appendChild(createitem('cos('+string+')')); + + string= string= Math.cos(string); + + document.querySelector('input').value = string; + } + else if(e.target.innerHTML == 'tan') + { + if(a==1) + string=eval(string*Math.PI/180); + history.appendChild(createitem('tan('+string+')')); + string = Math.tan(string); + document.querySelector('input').value = string; + } + else if(e.target.innerHTML == 'log') + { + string = Math.log10(string); + document.querySelector('input').value = string; + } + else if(e.target.innerHTML == 'ln') + { + string = Math.log(string); + document.querySelector('input').value = string; + } + else if(e.target.innerHTML == 'DEL') + { + string= string.slice(0, string.length - 1); + document.querySelector('input').value = string; + } + else if(e.target.innerHTML == 'RAD') + { + + document.getElementById("angle").innerHTML = "DEG"; + a=1; + + } + else if(e.target.innerHTML == 'DEG') + { + a=0; + document.getElementById("angle").innerHTML = "RAD"; + + + } + else if(e.target.innerHTML == 'INV') + { + document.getElementById("inv").innerHTML = "NOR"; + document.getElementById("sin").innerHTML = "asin"; + document.getElementById("cos").innerHTML = "acos"; + document.getElementById("tan").innerHTML = "atan"; + } + else if(e.target.innerHTML == 'NOR') + { + document.getElementById("inv").innerHTML = "INV"; + document.getElementById("sin").innerHTML = "sin"; + document.getElementById("cos").innerHTML = "cos"; + document.getElementById("tan").innerHTML = "tan"; + } + else if(e.target.innerHTML == 'asin') + { + history.appendChild(createitem('asin('+string+')')); + string = Math.asin(string); + + document.querySelector('input').value = string; + + } + else if(e.target.innerHTML == 'acos') + { + history.appendChild(createitem('acos('+string+')')); + string = Math.acos(string); + document.querySelector('input').value = string; + + } + else if(e.target.innerHTML == 'atan') + { + history.appendChild(createitem('atan('+string+')')); + string = Math.atan(string); + document.querySelector('input').value = string; + + } + else{ + console.log(e.target) + string = string + e.target.innerHTML; + document.querySelector('input').value = string; + } + + }) diff --git a/style.css b/style.css new file mode 100644 index 0000000..b9ea13b --- /dev/null +++ b/style.css @@ -0,0 +1,144 @@ +* { + padding: 0; + margin: 5px; + text-align: center; + } + body { + background-color:rgb(99, 99, 99); + } + .mid{ + margin-top: 60px; + margin-left: 450px; + } + .rad{ + margin-right: 800px; + margin-top: 10px; + } + .mode{ + margin-left: 320px; + margin-top: -130px; + } + .calculator { + width: 400px; + height: 350px; + background-color: #c0c0c0; + box-shadow: 0px 0px 0px 10px #666; + border: 5px solid black; + border-radius: 10px; + } + #display { + width: 320px; + height: 40px; + text-align: right; + background-color: black; + border: 3px solid white; + font-size: 18px; + left: 2px; + top: 2px; + color: #ffffff; + } + .btnTop{ + color: white; + background-color: #000000; + font-size: 14px; + margin: auto; + width: 50px; + height: 25px; + } + .btnNum { + color: white; + background-color: black; + font-size: 14px; + margin: auto; + width: 50px; + height: 25px; + } + .btnMath { + color: white; + background-color: #000000; + font-size: 14px; + margin: auto; + width: 50px; + height: 25px; + } + .btnOpps { + color: rgb(255, 255, 255); + background-color: #000000; + font-size: 14px; + margin: auto; + width: 50px; + height: 25px; + } + +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 35px; + } + + + .switch input { + opacity: 0; + width: 0; + height: 0; + } + + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; + } + + .slider:before { + position: absolute; + content: ""; + height: 27.5px; + width: 26.1px; + left: 1px; + background-color: rgb(129, 129, 129); + -webkit-transition: .4s; + transition: .4s; + } + + input:checked + .slider { + background-color: #000000; + } + + input:focus + .slider { + box-shadow: 0 0 1px #000000; + } + + input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); + } + + /* Rounded sliders */ + .slider.round { + border-radius: 34px; + } + + .slider.round:before { + border-radius: 50%; + } + + + .dark-mode { + background-color: rgb(17, 16, 39); +} + +#history{ + font-size: 40px; + font-family: 'Times New Roman', Times, serif; + font-weight: 700; + +} + \ No newline at end of file