Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@MainakRepositor
MainakRepositor authored Aug 24, 2021
1 parent 2f94f2d commit 8bbd699
Show file tree
Hide file tree
Showing 4 changed files with 291 additions and 0 deletions.
144 changes: 144 additions & 0 deletions css/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
body {
position: relative;
width: 100%;
height: 100%;
max-height: 100vh;
padding-top: calc(50vh - 23vw); /* 50vh - 23vw = 47vh - 23vw */
background-image: -webkit-linear-gradient(top left, #280d9e 0%, #3cd1d6 100%); /* Chrome 10-25, Safari 5.1-6 */
background-image: linear-gradient(to bottom right, #280d9e 0%, #3cd1d6 100%);
background-repeat: no-repeat; /* Repeat image on horizontal and vertical axis */
background-attachment: fixed;
overflow: hidden;
}


#header{
text-align: center; /* center the title */
font-size: 35px; /* set the font size */
font-weight: 900; /* set the font weight */
color: #f1efef; /* set the font color */


}
h4,#maker{
text-align: center; /* center the title */
font-size: 20px; /* set the font size */
color: #f1efef; /* set the font color */


}
.shadow {
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, .35);
transition: all .3s ease; /* transition effect */
}

.shadow:hover { /* on mouse hover */
box-shadow: 0 0.3125em 1.25em 0 rgba(46, 61, 73, .20);
}

.calc-container { /* container for the calc */
padding: 0 !important; /* remove padding */
min-width: 320px;
max-height: 100vh;
border-radius: 10px;
}

.screen { /* container for the screen */
height: 100px; /* set the height */
background: rgba(41, 47, 54, 0.6) !important;
resize: none; /* disable resizing */
border: solid #1c2128; /* set the border */
border-width: 0 0 10px; /* set the border width */
border-radius: 10px 10px 0 0 !important; /* set the border radius */
color: #faf6f7;
font-size: 2.5em;
text-align: right;
overflow: auto;
}

.keypad { /* container for the keypad */
position: relative;
background: #292f36;
padding: 5% 0 5% !important;
border-radius: 0 0 10px 10px !important;
}

.keypad .row {
padding: 0;
margin: 0;
background: #292f36;
}
.btn {
padding-top: 5% !important; /* set the padding */
padding-bottom: 5% !important;
background: transparent;
color: #5cc8ff;
font-size: 2em !important;
border-color: aliceblue;
border-width: 1rem;
border-style: double;
border-radius: 20px;
}

.btn:hover {
color: #070707 !important;
background: yellow;
}

.operator {
color: #d63c6b;
font-weight: 600 !important;
}

.operator:hover {
color: #c41c4f !important;
}

.screen.active.focus, .screen.active:focus, .screen.focus, .screen:active.focus, .screen:active:focus, .screen:focus, .screen.active, .screen:active { /* on focus */
outline: none !important;
color: #c41c4f !important;
box-shadow: none !important;
}

.btn.active.focus, .btn.active:focus, /* on focus */
.btn.focus, .btn:active.focus,
.btn:active:focus, .btn:focus,
.btn.active, .btn:active {
outline: none !important;
color: #00a3f5 !important;
box-shadow: none !important;
}

.operator.active.focus, .operator.active:focus, /* on focus */
.operator.focus, .operator:active.focus,
.operator:active:focus, .operator:focus,
.operator.active, .operator:active {
color: #c41c4f !important;
}

@media (max-width: 991px) { /* on mobile */
body {
padding: 0;
overflow: hidden;
}

.container-fluid { /* remove the padding */
padding: 0 !important;
}

.screen {
height: 20vh;
max-height: 20vh;
}

.keypad {
height: 100% !important; /* set the height */
max-height: 80vh;
}
}

@media (min-width: 768px) and (max-width: 991px) { /* on mobile */
.btn {
font-size: 3em !important;
}
}
65 changes: 65 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<html>
<head>
<title>Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/main.css">
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<link rel = "icon" href = "https://as1.ftcdn.net/jpg/03/13/95/98/500_F_313959826_4ZbH2RUqz8o1cxxdxkEdRNAcJBqC1Qlv.jpg"
type = "image/x-icon">
</head>

<body>
<h1 id="header">CALCULATOR</h1>

<section>
<div class="container-fluid text-center">
<div class="col-md-4 col-md-offset-4 card shadow calc-container">
<input id="calc-screen" type="text" class="col-xs-12 screen" readonly>
<div class="col-xs-12 keypad">
<div class="row">
<button id="clear-btn" class="btn col-xs-3 operator">CE</button>
<button class="btn col-xs-3 operator">(</button>
<button class="btn col-xs-3 operator">)</button>
<button class="btn col-xs-3 operator">/</button>
</div>
<div class="row">
<button class="btn col-xs-3">7</button>
<button class="btn col-xs-3">8</button>
<button class="btn col-xs-3">9</button>
<button class="btn col-xs-3 operator">*</button>
</div>
<div class="row">
<button class="btn col-xs-3">4</button>
<button class="btn col-xs-3">5</button>
<button class="btn col-xs-3">6</button>
<button class="btn col-xs-3 operator">-</button>
</div>
<div class="row">
<button class="btn col-xs-3">1</button>
<button class="btn col-xs-3">2</button>
<button class="btn col-xs-3">3</button>
<button class="btn col-xs-3 operator">+</button>
</div>
<div class="row">
<button class="btn col-xs-4">.</button>
<button class="btn col-xs-4">0</button>

<button class="btn col-xs-4 operator">=</button>
</div>
</div>
</div>
</div>
</section>
<h4>Made by<a id="maker" href="https://www.linkedin.com/in/anshika-singh-589922164/" target="_blank"> Anshika 🌸</a></h4>
<script type="text/javascript" src="./js/main.js"></script>
</body>

</html>



4 changes: 4 additions & 0 deletions js/jquery-3.2.1.min.js
View file

Large diffs are not rendered by default.

78 changes: 78 additions & 0 deletions js/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
var screen = $('#calc-screen');
var ans;
var reset;

function calc() {
var value = screen.val(); //prints the calculated result on the screen

var result; //result is the result of the calculation
try {
result = eval(value); //evaluates the expression
ans = result; //stores the result in ans
} catch (e) { //if the expression is invalid [throws an error]
result = 'Error'; //if there is an error, result is set to Error
ans = null; //and ans is set to null
}
screen.val(result); //prints the result on the screen
$('#clear-btn').text('AC'); //changes the button text to "AC"
reset = 1; //resets the flag
}

function enter(e) { //if enter is pressed
var key = e.which | e.keyCode; //converts the keycode to a number
if (/\r/.test(String.fromCharCode(key))) { // if enter is pressed
calc(); //calculates the expression
}
}

$('body').keypress(function (e) { //if any key is pressed
enter(e); //calls enter
});


$('button').keypress(function (e) { //if any key is pressed
enter(e); //calls enter
return false; //prevents the default action
});


$('button').click(function () { //if any button is clicked
var key = $(this).text(); //stores the button text in key
var value; //value is the value of the button
console.log(key); //prints the button text
if (reset === 1) { //if the flag is set
screen.val(''); //clears the screen
reset = 0; //resets the flag
}
if (key === '=') { //if the button is equal
calc(); //calculates the expression
} else if (key === 'AC') { //if the button is clear
screen.val(''); //clears the screen
ans = null; //and ans is set to null
$('#clear-btn').text('CE'); //changes the button text to "CE"
} else if (key === 'CE') { //if the button is clear
value = screen.val(); //prints the calculated result on the screen
screen.val(value.substring(0, value.length - 1)); //clears the screen
} else if (key === 'ans') { //if the button is clear
if (ans !== undefined && ans !== null) { //if ans is defined
value = screen.val(); //prints the calculated result on the screen
if ((value.length + 3) < screen.attr('maxlength') - 1) { //if the length of the expression is less than the maximum length
screen.val(value + 'ans'); //adds the ans to the expression
}
}
$('#clear-btn').text('CE'); //changes the button text to "CE"
} else {
value = screen.val(); //prints the calculated result on the screen
if (value.length < screen.attr('maxlength') - 1) { //if the length of the expression is less than the maximum length
screen.val(value + key); //adds the key to the expression
$('#clear-btn').text('CE'); //changes the button text to "CE"
}
}
});

(function () { //if the page is loaded
var screenWidth = screen.width(); //gets the screen width
var maxLength = screenWidth * 0.049; //max length of the expression
screen.attr('maxlength', maxLength); //sets the maximum length of the expression
}());

0 comments on commit 8bbd699

Please sign in to comment.