Skip to content

Calculator and clock #162

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
Sayoojkoroth wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Calculator and clock #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2c1f275
Add files via upload
Sayoojkoroth Oct 13, 2022
12002d2
Delete Digital Clock/Digital_Clock-master directory
Sayoojkoroth Oct 13, 2022
43779a0
Digital Clock focused on UI
Sayoojkoroth Oct 13, 2022
9057291
Aesthetic UI math calculator
Sayoojkoroth Oct 13, 2022
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
Binary file added Cool Calculator/Calculator-master/Calculator_screenshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Cool Calculator/Calculator-master/Icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions Cool Calculator/Calculator-master/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# Calculator
A simple Calculator built using HTML, CSS and JavaScript.

Consists of Backspace button(C), Reset button(AC) and can perform basic operations Addition, Subtraction, Multiplication, Division and Modulus.
27 changes: 27 additions & 0 deletions Cool Calculator/Calculator-master/calc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@

/*Function to display numbers on keypress*/

function numpress(val){
document.getElementById("screen").value = document.getElementById("screen").value + val;
}

/*Function to calculate the result*/

function equals(){
var x = document.getElementById("screen").value;
var result = eval(x);
document.getElementById("screen").value = result;
}

/*Function for backspace*/

function clearscreen(){
var value = document.getElementById("screen").value;
document.getElementById("screen").value = value.substr(0, value.length - 1);
}

/*Function to reset*/

function reset(){
document.getElementById("screen").value =" ";
}
43 changes: 43 additions & 0 deletions Cool Calculator/Calculator-master/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link href="Icon.png" rel="icon">
<link href="style.css" type="text/css" rel="stylesheet">
<script src="calc.js"></script>
</head>
<body>
<div class="main">

<!---Output screen--->
<input type="text" id="screen"></input>

<!---Digits, operators, clear and backspace buttons-->
<button class="bt1" onclick="clearscreen()" >C</button>
<button class="bt" onclick="reset()" >AC</button>
<button class="bt" onclick="numpress('/')" >/</button>
<button class="bt" onclick="numpress('7')">7</button>
<button class="bt" onclick="numpress('8')">8</button>
<button class="bt" onclick="numpress('9')">9</button>
<button class="bt" onclick="numpress('*')">x</button>
<button class="bt" onclick="numpress('4')">4</button>
<button class="bt" onclick="numpress('5')">5</button>
<button class="bt" onclick="numpress('6')">6</button>
<button class="bt" onclick="numpress('-')" style="font-size: 26px;">-</button>
<button class="bt" onclick="numpress('1')">1</button>
<button class="bt" onclick="numpress('2')">2</button>
<button class="bt" onclick="numpress('3')">3</button>
<button class="bt" onclick="numpress('+')">+</button>
<button class="bt" onclick="numpress('%')">%</button>
<button class="bt" onclick="numpress('0')">0</button>
<button class="bt" onclick="numpress('.')">.</button>

<!---Equal button--->
<div>
<button class="bt2" onclick="equals()">=</button>
</div>
</div>
</body>
</html>
137 changes: 137 additions & 0 deletions Cool Calculator/Calculator-master/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@

/*Body section*/
body{
background-color: #091921;
}

/*Main section*/
.main{
width: 335px;
height: 519px;
background-color: #091921;
margin: auto;
margin-top: 110px;
-moz-box-shadow: 0 0 17px;
-webkit-box-shadow: 0 0 17px ;
box-shadow: 0 0 17px ;
}

/*Screen section*/
#screen{
width: 322.6px;
height: 129px;
background-color: rgb(255, 255, 255);
border: none;
margin-left: 0.3px;
text-align: right;
padding-right: 10px;
font-size: 30px;
pointer-events: none;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight:500;
}

/*--------Button section starting--------*/

/*Dark-blue buttons starting*/
.bt{
width: 80.3px;
height: 79.35px;
display:inline-block;
border: none;
background-color: rgba(20, 35, 61, 0.836);
font-size: 22px;
color: white;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 500;
margin-top: -2.7px;
margin-left: .45px;
transition:all .2s ease;
outline: none;
position: relative;
overflow: hidden;
}
/*Dark-blue buttons ending*/


/*Clear button starting*/
.bt1 {
width: 165.5px;
height: 76.5px;
background-color: rgb(255, 145, 42);
font-size: 26px;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: bold;
border: none;
position: relative;
left: 0.55px;
color: white;
transition: .5s;
outline:none;
overflow:hidden;
}
/*Clear button ending*/


/*EqualTo button starting*/
.bt2{
width: 80.3px;
height: 79px;
background-color: #03afffbd;
position: relative;
left: 254.7px;
top: -79px;
text-align: center;
border: none;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
font-weight: bold;
font-size: 31px;
color: white;
outline: none;
overflow: hidden;
}
/*EqualTo button ending*/


/*Button hover-effects*/
.bt:hover, .bt1:hover, .bt2:hover{
background-image:linear-gradient(rgb(63, 241, 63),rgb(65, 160, 52));
}


/*Button focus-effects starting*/
.bt:after, .bt1:after, .bt2:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}

@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(15, 15);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(35, 35);
}
}

.bt:focus:not(:active)::after, .bt1:focus:not(:active)::after, .bt2:focus:not(:active)::after {
animation: ripple .8s ease-out;
}
/*Button focus-effects ending*/

/*---------End of Button section---------*/
Binary file added Cool Calculator/Calculator_screenshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Cool Calculator/Icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions Cool Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# Calculator
A simple Calculator built using HTML, CSS and JavaScript.

Consists of Backspace button(C), Reset button(AC) and can perform basic operations Addition, Subtraction, Multiplication, Division and Modulus.
27 changes: 27 additions & 0 deletions Cool Calculator/calc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@

/*Function to display numbers on keypress*/

function numpress(val){
document.getElementById("screen").value = document.getElementById("screen").value + val;
}

/*Function to calculate the result*/

function equals(){
var x = document.getElementById("screen").value;
var result = eval(x);
document.getElementById("screen").value = result;
}

/*Function for backspace*/

function clearscreen(){
var value = document.getElementById("screen").value;
document.getElementById("screen").value = value.substr(0, value.length - 1);
}

/*Function to reset*/

function reset(){
document.getElementById("screen").value =" ";
}
43 changes: 43 additions & 0 deletions Cool Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link href="Icon.png" rel="icon">
<link href="style.css" type="text/css" rel="stylesheet">
<script src="calc.js"></script>
</head>
<body>
<div class="main">

<!---Output screen--->
<input type="text" id="screen"></input>

<!---Digits, operators, clear and backspace buttons-->
<button class="bt1" onclick="clearscreen()" >C</button>
<button class="bt" onclick="reset()" >AC</button>
<button class="bt" onclick="numpress('/')" >/</button>
<button class="bt" onclick="numpress('7')">7</button>
<button class="bt" onclick="numpress('8')">8</button>
<button class="bt" onclick="numpress('9')">9</button>
<button class="bt" onclick="numpress('*')">x</button>
<button class="bt" onclick="numpress('4')">4</button>
<button class="bt" onclick="numpress('5')">5</button>
<button class="bt" onclick="numpress('6')">6</button>
<button class="bt" onclick="numpress('-')" style="font-size: 26px;">-</button>
<button class="bt" onclick="numpress('1')">1</button>
<button class="bt" onclick="numpress('2')">2</button>
<button class="bt" onclick="numpress('3')">3</button>
<button class="bt" onclick="numpress('+')">+</button>
<button class="bt" onclick="numpress('%')">%</button>
<button class="bt" onclick="numpress('0')">0</button>
<button class="bt" onclick="numpress('.')">.</button>

<!---Equal button--->
<div>
<button class="bt2" onclick="equals()">=</button>
</div>
</div>
</body>
</html>
Loading