Skip to content

calculator made using html,css,js #68

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
madtitan02 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

calculator made using html,css,js #68

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
120 changes: 120 additions & 0 deletions calculator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
});

75 changes: 75 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="display">
<input id="screen" type="text" placeholder="0">
</div>

<div class="btns">
<div class="row">
<button onclick="RAD()">Rad</button>

<!-- <button id="rad" onclick="rad()">rad</button> -->
<button onclick="Deg()">Deg</button>

<!-- <button onclick="fact()">x!</button> -->
<button class="btn">(</button>
<button class="btn">)</button>
<button class="btn">%</button>
<button id="ac" onclick="screen.value=''">AC</button>
</div>

<div class="row">
<button onclick="sin()">sin</button>
<button onclick="pi()">π</button>
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button class="btn">÷</button>
</div>

<div class="row">
<button onclick="cos()">cos</button>
<button onclick="log()">log</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">×</button>
</div>

<div class="row">
<button onclick="tan()">tan</button>
<button onclick="sqrt()">√</button>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">-</button>
</div>

<div class="row">
<button onclick="e()">e</button>
<button onclick="fact()">x!</button>

<!-- <button onclick="pow()">x <span style="position: relative; bottom: .4em; right: .1em;">y</span> </button> -->
<button class="btn">0</button>
<button class="btn">.</button>
<button id="eval" onclick="screen.value=eval(screen.value)">=</button>
<button class="btn">+</button>
</div>
</div>
<div>
<button onclick="toggle()" class="switch" style="background-color: rgb(66, 235, 237); color: white; width: 150px;border-left: 12px; text-shadow: 1px 1px 1px #d1d9e6
;" >click here to change theme</button>
</div>
</div>
</div>
</section>
<script src="calculator.js"></script>
</body>
</html>
155 changes: 155 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}