Skip to content

Commit

Permalink
task1
Browse files Browse the repository at this point in the history
  • Loading branch information
@navaleprasad09
navaleprasad09 committed Jan 11, 2024
0 parents commit e25d078
Show file tree
Hide file tree
Showing 4 changed files with 194 additions and 0 deletions.
100 changes: 100 additions & 0 deletions Calculator/css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
body {
height: 643px;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(90deg, #93a5cf 0%, #e4efe9 100%);
}
.calculator {
border: 1px solid black;
padding-bottom: 20px;
border-radius: 16px;
justify-content: space-between;
background-image: linear-gradient(to top, #6a85b6 0%, #bac8e0 100%);
height: 400px;
width: 235px;
box-shadow: 0px 9px 35px 10px rgba(0, 0, 0, 0.5);
}
.calculator:hover {
box-shadow: 0px 9px 35px 10px #6a85b6;

}

.inputText {
background-color: rgba(117, 6, 6, 0);
color: rgb(0, 0, 0);
border: none;
height: 35px;
width: 226px;
text-align: left;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
font-size: 2rem;
padding: 0%;
margin-top: 16px;
padding-left: 8px;
}

.answer {
background-color: rgba(0, 0, 0, 0);
color: rgb(0, 0, 0);
border: none;
height: 35px;
width: 226px;
text-align: right;
font-size: 1.5rem;
margin-top: 2px;
padding-right: 6px;
}
.answer::placeholder {
color: #000000;
padding-right: 10px;
}

.btn-white {
height: 45px;
width: 45px;
border: none;
font-weight: 300;
font-size: 20px;
color: white;
margin: 8px 5px 8px 5px;
border-radius: 50%;
background-color: #333333;
}

.btn-white:hover {
color: black;
background-color: white;
cursor: pointer;
transition: all 1s ease;
}

.btn-gray {
color: rgb(207, 207, 207);
background-color: rgb(0, 0, 0);
}

.btn-lg {
width: 102px;
border-radius: 30px 30px 30px 30px;
text-align: left;
padding-left: 17px;
}



footer {
position: absolute;
color: #000000;
bottom: 0;
right: 20px;
}
.link {
color: black;
font-weight: 700;
font-family: Arial, Helvetica, sans-serif;
}
.link:hover {
color: rgb(17, 27, 85);
}
59 changes: 59 additions & 0 deletions Calculator/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta name="theme-color" content="#fc5224">

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fc5224">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#feb431">

<link rel="shortcut icon" href="./logo/calculator.png" type="image/x-icon">
<link rel="stylesheet" href="css/style.css" />
<title>Calculator</title>
</head>

<body>

<div class="calculator">
<input class="inputText" type="text" id="#" disabled />
<input class="answer" type="text" id="answer" placeholder="0" disabled />
<hr style=" border: 1px solid black;">
<button class="btn-white btn-gray" id="btn" value="all clear">AC</button>
<button class="btn-white btn-gray" id="btn">C</button>
<button class="btn-white btn-gray" id="btn">%</button>
<button class="btn-white btn-gray operator" id="divide" value="/">/</button>
<button class="btn-white" id="btn">7</button>
<button class="btn-white" id="btn">8</button>
<button class="btn-white" id="btn">9</button>
<button class="btn-white btn-gray operator" id="multiply" value="*">*</button>
<br />
<button class="btn-white" id="btn">4</button>
<button class="btn-white" id="btn">5</button>
<button class="btn-white" id="btn">6</button>
<button class="btn-white btn-gray operator" id="#">-</button>
<br />
<button class="btn-white" id="btn">1</button>
<button class="btn-white" id="btn">2</button>
<button class="btn-white" id="btn">3</button>
<button class="btn-white btn-gray operator" id="#">+</button>
<br />
<button class="btn-white btn-lg" id="btn">0</button>
<button class="btn-white decimal" id="btn">.</button>
<button class="btn-white btn-gray operator equal-sign" id="#">=</button>
</div>
<footer>
<span>Created By <a href="#">Prasad Navale</a> | &copy;
<script type="text/javascript">
document.write(new Date().getFullYear());
</script> All rights
reserved.
</span>
</footer>

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

</html>
35 changes: 35 additions & 0 deletions Calculator/js/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
let string = '';
let buttons = document.querySelectorAll('.btn-white');

function resetCalculator(){
string = '';
document.querySelector('.answer').value = string;
document.querySelector('.inputText').value = string;
}

function evaluate(){
string = eval(string)
document.querySelector('.answer').value = string;
document.querySelector('.inputText').value = null;
}

Array.from(buttons).forEach((button)=>{
button.addEventListener('click', (e)=>{

if(e.target.innerHTML == '='){
evaluate()
}
else if(e.target.innerHTML == 'AC'){
resetCalculator()
}
else if(e.target.innerHTML == 'C') {
string = string.substring(0, string.length-1);
document.querySelector('.inputText').value = string;
}
else{
console.log(e.target);
string = string + e.target.innerHTML;
document.querySelector('.inputText').value = string;
}
})
})
Binary file added Calculator/logo/calculator.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e25d078

Please sign in to comment.