Skip to content

Calculator #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Calculator #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script language="javascript"></script>
<link rel="stylesheet" href="./style.css">
<title>CalciCalci</title>
</head>
<body>
<div>

<div class="rad" >
<h2>Calculator</h2>

<!-- <div>
<p class="h1a">History</p>
<ul id="history">
</ul>
</div> -->
</div>
<div class="mid">
<form name="sci-calc">
<table class="calculator" cellspacing="0" cellpadding="1">
<tr>
<td colspan="5"><input id="display" name="display" value="0" size="28" maxlength="25"></td>
</tr>
<tr>
<td><input type="button" class="btnTop" name="btnTop" value="C" onclick="this.form.display.value= 0 "></td>
<td><input type="button" class="btnTop" name="btnTop" value="<--" onclick="deleteChar(this.form.display)"></td>
<td><input type="button" class="btnTop" name="btnTop" value="=" onclick="if(checkNum(this.form.display.value)) { compute(this.form) }"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="&#960;" onclick="addChar(this.form.display,'3.14159265359')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="%" onclick=" percent(this.form.display)"></td>
</tr>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="7" onclick="addChar(this.form.display, '7')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="8" onclick="addChar(this.form.display, '8')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="9" onclick="addChar(this.form.display, '9')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="x&#94;" onclick="if(checkNum(this.form.display.value)) { exp(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="/" onclick="addChar(this.form.display, '/')"></td>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="4" onclick="addChar(this.form.display, '4')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="5" onclick="addChar(this.form.display, '5')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="6" onclick="addChar(this.form.display, '6')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="ln" onclick="if(checkNum(this.form.display.value)) { ln(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="*" onclick="addChar(this.form.display, '*')"></td>
</tr>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="1" onclick="addChar(this.form.display, '1')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="2" onclick="addChar(this.form.display, '2')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="3" onclick="addChar(this.form.display, '3')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="&radic;" onclick="if(checkNum(this.form.display.value)) { sqrt(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="-" onclick="addChar(this.form.display, '-')"></td>
</tr>
<tr>
<td><input type="button" class="btnMath" name="btnMath" value="&#177" onclick="changeSign(this.form.display)"></td>
<td><input type="button" class="btnNum" name="btnNum" value="0" onclick="addChar(this.form.display, '0')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="&#46;" onclick="addChar(this.form.display, '&#46;')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="x&#50;" onclick="if(checkNum(this.form.display.value)) { square(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="+" onclick="addChar(this.form.display, '+')"></td>
</tr>
<tr>
<td><input type="button" class="btnMath" name="btnMath" value="(" onclick="addChar(this.form.display, '(')"></td>
<td><input type="button" class="btnMath" name="btnMath" value=")" onclick="addChar(this.form.display,')')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="cos" onclick="if(checkNum(this.form.display.value)) { cos(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="sin" onclick="if(checkNum(this.form.display.value)) { sin(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="tan" onclick="if(checkNum(this.form.display.value)) { tan(this.form) }"></td>
</tr>
</tabel>
</form>
</div>
<div class="mode">
<h2>Dark Mode</h2>

<div>
<button onclick="toggle()" class="switch" style="background-color: rgb(4, 4, 44); color: white; width: 129px;" >Click Me</button>
</div>
</div>


</div>


<script src="./script.js"></script>

</body>
</html>
226 changes: 226 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

})
Loading