Skip to content

Commit

Permalink
Made Responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArjunIyyappanav
ArjunIyyappanav committed Jul 21, 2024
1 parent edeb595 commit 7150452
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 151 deletions.
28 changes: 11 additions & 17 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,31 +15,25 @@

</head>
<body>
<h1>Calculator</h1>
<input type="text" id="result">
<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" id = "no1" 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 = "3" onclick = "display('3')">3</button>
<button class="operations" value = "+" onclick = "display('+')">+</button>
<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 = "6" onclick = "display('6')">6</button>
<button class="operations" value = "-" onclick = "display(' - ')">-</button>
<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="num" value = "9" onclick = "display('9')">9</button>
<button class="operations" value = "*" onclick = "display(' * ')">*</button>
<button class="num" value = "0" onclick = "display('0')">0</button>
<button class="clear" value = "clear" onclick = "display('c')">C</button>
<button class="operations" value = "/" onclick = "display(' / ')">/</button>
</div>
<button class="num" onclick = "solve()">=</button>
</div>
<script src = "./test.js"></script>
</body>
Expand Down
171 changes: 37 additions & 134 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,176 +1,95 @@
/* *{
box-sizing: border-box;
}
body{
background-color: #CAE7DF;
}
h1{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
padding-bottom: 50px;
}
.Numbers{
padding-top : 220px ;
padding-left : 600px;
}
.num{
padding : 20px 20px;
font-size: 14px;
margin : 8px;
border : 0px solid #fff;
border-radius: 20px;
}
.num:hover{
font-size: large;
}
.spe:hover{
font-size: large;
}
.operators:hover{
font-size:large;
}
#result{
text-align: center;
}
.spe{
padding : 18px;
margin : 6px;
font-size: 14px;
border : 1px solid #fff;
border-radius: 20px;
}
.operators{
padding : 19px;
margin : 6px;
font-size : 14px;
border : 1px solid #fff;
border-radius : 20px;
}
#result{
height : 40px;
width : 255px;
margin-left: 2px;
font-size: 14px;
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;
display : flex;
flex-direction: column;
justify-content: center;
align-items: center;
width : 100%;
height : 70vh;
}

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

.calc-body{
position : absolute;
top : 25vh;
left : 75vh;
height : 100%;
width : 100%;
display : grid;
grid-template-rows: 1fr 1fr 1fr 1fr ;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap : 15px;
}


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

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

#result{
cursor: pointer;
width : 190px;
height : 50px;
position: relative;
width : 250px;
height : 45px;
clear :right;
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;
margin : 35px 10px;
}

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

.calc-input{
display : block;
}

.calc-numbers{
display : inline-block;
/* margin : 20px 10px; */
}

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

.num:hover{
/* .num:hover{
height : 60px;
width : 60px;
font-size: 25px;
}
.clear:hover{
height : 60px;
font-size: 25px;
Expand All @@ -180,27 +99,11 @@ h1{
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;
}
} */

@media(max-width : 1200px){
body{
background-size : contain;
}
}

0 comments on commit 7150452

Please sign in to comment.