Skip to content

Commit

Permalink
Revamp of css
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArjunIyyappanav
ArjunIyyappanav committed Jul 10, 2024
1 parent 524889f commit 276d889
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 47 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
73 changes: 35 additions & 38 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,43 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="icon" href="https://static.vecteezy.com/system/resources/previews/000/349/270/original/vector-calculator-icon.jpg">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.js"
integrity=
"sha512-BbVEDjbqdN3Eow8+empLMrJlxXRj5nEitiCAK5A1pUr66+jLVejo3PmjIaucRnjlB0P9R3rBUs3g5jXc8ti+fQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.min.js"
integrity=
"sha512-iphNRh6dPbeuPGIrQbCdbBF/qcqadKWLa35YPVfMZMHBSI6PLJh1om2xCTWhpVpmUyb4IvVS9iYnnYMkleVXLA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<link rel = "stylesheet" href = "style.css">
<link rel = "stylesheet" href = "./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ga+Maamli&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playwrite+DK+Uloopet:[email protected]&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.0.1/math.min.js" integrity="sha512-B82WLflI1EQiR9sGbIV1ddGVvK4ghj1xjMShL7YvcOrHjX2qP72lHztT1DxBVPiz1aTR6mOUJbtwj06uadL2GA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</head>
<body>
<div class = "Numbers">
<h1>Simple Calculator</h1>
<input type="text" id="result">
<br>
<button class = "num" value = "1" onclick = "dis('1')">1</button>
<button class = "num" value = "2" onclick = "dis('2')">2</button>
<button class = "num" value = "3" onclick = "dis('3')">3</button>
<button class="operators" id = "add" onclick = "dis(' + ')">+</button>
<br>
<button class = "num" value = "4" onclick = "dis('4')">4</button>
<button class = "num" value = "5" onclick = "dis('5')">5</button>
<button class = "num" value = "6" onclick = "dis('6')">6</button>
<button class="operators" id = "sub" onclick = "dis(' - ')">-</button>
<br>
<button class = "num" value = "7" onclick = "dis('7')">7</button>
<button class = "num" value = "8" onclick = "dis('8')">8</button>
<button class = "num" value = "9" onclick = "dis('9')">9</button>
<button class="operators" id = "mul" onclick = "dis(' * ')">*</button>
<br>
<button class = "num" value = "0" onclick = "dis('0')">0</button>
<button class = "num" id = "equal" onclick = "solve()">=</button>
<button class = "spe" id = "C" onclick = "clr()">C</button>
<button class="operators" id = "divi" onclick = "dis(' / ')">/</button>
<div class="calc-body">
<h1>Calculator</h1>
<div class="calc-input">
<input type="text" id="result">
<button class="num" onclick = "solve()">=</button>
</div>
<div class="calc-numbers">
<button class="num" value = "1" onclick = "display('1')">1</button>
<button class="num" value = "2" onclick = "display('2')">2</button>
<button class="num" value = "3" onclick = "display('3')">3</button><br/>
<button class="num" value = "4" onclick = "display('4')">4</button>
<button class="num" value = "5" onclick = "display('5')">5</button>
<button class="num" value = "6" onclick = "display('6')">6</button><br/>
<button class="num" value = "7" onclick = "display('7')">7</button>
<button class="num" value = "8" onclick = "display('8')">8</button>
<button class="num" value = "9" onclick = "display('9')">9</button><br/>
<button class="num" value = "0" onclick = "display('0')">0</button>
<button class="clear" value = "clear" onclick = "display('c')">Clear</button>
</div>
<div class="calc-operations">
<button class="operations" value = "+" onclick = "display('+')">+</button>
<button class="operations" value = "-" onclick = "display(' - ')">-</button>
<button class="operations" value = "*" onclick = "display(' * ')">*</button>
<button class="operations" value = "/" onclick = "display(' / ')">/</button>
</div>
</div>
<script src = "test.js"></script>
<script src = "./test.js"></script>
</body>
</html>
142 changes: 141 additions & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
*{
/* *{
box-sizing: border-box;
}
Expand Down Expand Up @@ -64,3 +64,143 @@ h1{
border : 1px solid #fff;
border-radius: 20px;
}
@media(max-width : 1000px){
.num{
width : 1000px;
}
} */

body{
background-image: url(https://user-images.githubusercontent.com/39142850/67110554-fdea5400-f20d-11e9-834a-d459a612b7b1.gif);
background-size:cover;
}

h1{
position: relative;
left : 50px;
font-family: "Playwrite DK Uloopet",cursive;
}

.calc-body{
position : absolute;
top : 25vh;
left : 75vh;
height : 100%;
width : 100%;
}


.num{
cursor : pointer;
width : 50px;
height : 50px;
position : relative;
background-color: rgba(255,255,255,0.3);
font-size : 20px;
color : #000000;
border-radius: 20px;
border : 2px solid #CAE7DF;
backdrop-filter: blur(5px);
font-family: "Ga Maamli",sans-serif;
margin : 10px 10px;
}

.clear{
cursor : pointer;
width : 120px;
height : 50px;
position: relative;
border : 2px solid #CAE7DF;
border-radius : 20px;
background-color:rgba(255,255,255,0.3);
color : #000000;
font-size: 20px;
font-family: "Ga Maamli",sans-serif;
backdrop-filter: blur(5px);
margin : 10px 10px;
}

#result{
cursor: pointer;
width : 190px;
height : 50px;
position: relative;
background-color: rgba(255,255,255,0.3);
color : #000000;
border : 2px solid #CAE7DF;
backdrop-filter : blur(5px);
border-radius : 20px;
font-size : 30px;
font-family: "Ga Maamli",sans-serif;
margin : 20px 10px;
}

.operations{
display : block;
position: relative;
width : 50px;
height : 50px;
position : relative;
background-color: rgba(255,255,255,0.3);
color : #000000;
border : 2px solid #CAE7DF;
backdrop-filter : blur(5px);
font-size : 20px;
border-radius: 20px;
font-family: "Ga Maamli",sans-serif;
margin : 20px 10px;
}

.calc-input{
display : block;
}

.calc-numbers{
display : inline-block;
}

.calc-operations{
display : inline-block;
}

.num:hover{
height : 60px;
width : 60px;
font-size: 25px;
}

.clear:hover{
height : 60px;
font-size: 25px;
}

.operations:hover{
height : 60px;
width : 60px;
font-size: 25px ;
}

/* @media(max-width : 1200px){
.calc-body{
height : 100%;
width : 100%;
position : absolute;
top : 25vh;
left : 50vh;
}
.num{
width : 35px;
height : 35px;
position : relative;
background-color: black;
font-size : 15px;
color : #ffffff;
border-radius: 2dvh;
border : 2px solid #fff;
font-family: "Ga Maamli",sans-serif;
margin : 7px 7px;
}
} */

19 changes: 11 additions & 8 deletions test.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@

function dis(val) {
document.getElementById("result").value += val ;
function display(val) {
if(val == "c"){
document.getElementById("result").value = " " ;
}
else{
document.getElementById("result").value += val ;
}
}

function clr(){
document.getElementById("result").value = " ";
}

function solve(){
let x = document.getElementById("result").value;
let y = math.evaluate(x);
if(y == Infinity || y == NaN){
alert("Math Error");
if(y == Infinity || y == NaN || y == -Infinity){
alert("Math Error Boss!!!");
}else{
document.getElementById("result").value = y;
}

}
}

0 comments on commit 276d889

Please sign in to comment.