Skip to content

Commit eea6e57

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #1047 from RS-labhub/master
BMICalculator/RohanSharma
2 parents abac7ea + 1f5c4d4 commit eea6e57

File tree

8 files changed

+174
-0
lines changed

8 files changed

+174
-0
lines changed

‎BMICalculator/RohanSharma/08.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="08_styles.css">
7+
<title>Calculator</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="calculator">
12+
<input type="text" placeholder="0" id="result">
13+
<button class="clr" onclick="clrs()">AC</button>
14+
<button class="del" onclick="del()">DEL</button>
15+
<button class="operator" onclick="display('%')">%</button>
16+
<button class="operator" onclick="display('/')">/</button>
17+
<button onclick="display('7')">7</button>
18+
<button onclick="display('8')">8</button>
19+
<button onclick="display('9')">9</button>
20+
<button class="operator" onclick="display('*')">x</button>
21+
<button onclick="display('4')">4</button>
22+
<button onclick="display('5')">5</button>
23+
<button onclick="display('6')">6</button>
24+
<button class="operator" onclick="display('+')">+</button>
25+
<button onclick="display('3')">3</button>
26+
<button onclick="display('2')">2</button>
27+
<button onclick="display('1')">1</button>
28+
<button class="operator" onclick="display('-')">-</button>
29+
<button class="zero" onclick="display('0')">0</button>
30+
<button class="dot" onclick="display('.')">.</button>
31+
<button class="equal" onclick="calculate()">=</button>
32+
</div>
33+
</div>
34+
<script src="08_script.js"></script>
35+
</body>
36+
</html>

‎BMICalculator/RohanSharma/08_script.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
var result=document.getElementById("result")
3+
4+
function display(number){
5+
result.value += number;
6+
}
7+
8+
function calculate(){
9+
var final_number=result.value
10+
var final_result=eval(final_number);
11+
result.value=final_result;
12+
}
13+
14+
function clrs() {
15+
result.value="";
16+
}
17+
18+
function del() {
19+
result.value=result.value.slice(0,-1);
20+
}

‎BMICalculator/RohanSharma/08_styles.css

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
*{
2+
margin: 0%;
3+
padding: 0%;
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
font-weight: bold;
7+
font-size: 22px;
8+
color: #060506 /* #ff6525 */;
9+
background-color: #e4e6e7;
10+
}
11+
12+
.container {
13+
height: 100vh;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
background-image: url(bg.jpg);
18+
background-repeat: no-repeat;
19+
background-size: cover;
20+
}
21+
22+
.calculator {
23+
border-color: #010c15 /* #ecf0f3 */;
24+
background-color: #fff;
25+
padding: 15px;
26+
border-radius: 30px;
27+
box-shadow: inset 5px 5px 12px #e9eee7, 5px 5px 12px rgba(0, 0, 0, 0.14);
28+
display: grid;
29+
grid-template-columns: repeat(4, 70px);
30+
background-image: url(bg_inner.jpg);
31+
background-repeat: no-repeat;
32+
background-size: cover;
33+
}
34+
35+
input {
36+
grid-column: span 4;
37+
width: 260px;
38+
height: 90px;
39+
background-color: #e4cee7 /* #ecf0f3 */;
40+
border: none;
41+
box-shadow: inset 5px 5px 12px #9a9999, inset 5px 5px 12px rgba(0, 0, 0, 0.14);
42+
border-radius: 30px;
43+
outline: none;
44+
font-size: 50px;
45+
text-align: end;
46+
margin: 30px auto;
47+
padding: 10px;
48+
background-image: url(https://png.pngtree.com/background/20210717/original/pngtree-round-beautiful-pink-white-yellow-baby-background-picture-image_1432600.jpg);
49+
background-repeat: no-repeat;
50+
background-size: cover;
51+
}
52+
53+
input::placeholder {
54+
color:#ff6525;
55+
}
56+
57+
.clr {
58+
color: rgb(197, 26, 17);
59+
}
60+
61+
.del {
62+
color: #dcc043;
63+
}
64+
65+
.dot {
66+
color: rgb(51, 93, 95);
67+
}
68+
69+
.equal {
70+
color: rgb(198, 106, 189);
71+
width: 125px;
72+
border-radius: 40%;
73+
margin: 8px 12px;
74+
}
75+
76+
.operator {
77+
color: rgb(116, 157, 55);
78+
}
79+
80+
.zero {
81+
color: rgb(143, 207, 207);
82+
}
83+
84+
button {
85+
width: 48px;
86+
height: 48px;
87+
background-color: #ecf0f3 /* #ecf0f3 */;
88+
box-shadow: inset 5px 5px 12px #fff, inset 5px 5px 12px rgba(0, 0, 0, 0.14);
89+
border-radius: 50%;
90+
border: none;
91+
margin: 8px auto;
92+
background-image: url(bg_button.jpg);
93+
background-repeat: no-repeat;
94+
background-size: cover;
95+
}

‎BMICalculator/RohanSharma/bg.jpg

2.01 MB
Loading

‎BMICalculator/RohanSharma/bg_button.jpg

86.9 KB
Loading

‎BMICalculator/RohanSharma/bg_inner.jpg

88.2 KB
Loading

‎BMICalculator/RohanSharma/calculator.jpg

58.2 KB
Loading

‎clock.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const secondHand = document.querySelector('.second-hand');
2+
const minsHand = document.querySelector('.min-hand');
3+
const hourHand = document.querySelector('.hour-hand');
4+
5+
function setDate() {
6+
const now = new Date();
7+
8+
const seconds = now.getSeconds();
9+
const secondsDegrees = ((seconds / 60) * 360) + 90;
10+
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
11+
12+
const mins = now.getMinutes();
13+
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
14+
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
15+
16+
const hour = now.getHours();
17+
const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
18+
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
19+
}
20+
21+
setInterval(setDate, 1000);
22+
23+
setDate();

0 commit comments

Comments
 (0)