Skip to content

Commit 6147023

Browse files
Git21221Git21221
authored
Temperature & Whack-a-mole game (#316)
Adding Temperature converter & Whack-a-mole game
2 parents ad89899 + fdd57f6 commit 6147023

File tree

3 files changed

+244
-2
lines changed

3 files changed

+244
-2
lines changed

‎Temperature/temp.html‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
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+
<title>Temperature Converter</title>
7+
<style>
8+
body {
9+
font-family: 'Arial', sans-serif;
10+
background-color: #f4f4f4;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
height: 100vh;
15+
margin: 0;
16+
}
17+
18+
.container {
19+
background-color: #fff;
20+
padding: 20px;
21+
border-radius: 10px;
22+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
23+
text-align: center;
24+
max-width: 400px;
25+
width: 100%;
26+
}
27+
28+
h1 {
29+
color: #333;
30+
font-size: 24px;
31+
margin-bottom: 20px;
32+
}
33+
34+
input, select {
35+
width: 100%;
36+
padding: 10px;
37+
margin: 10px 0;
38+
font-size: 16px;
39+
border-radius: 5px;
40+
border: 1px solid #ccc;
41+
box-sizing: border-box;
42+
}
43+
44+
button {
45+
background-color: #007bff;
46+
color: #fff;
47+
border: none;
48+
padding: 10px 20px;
49+
border-radius: 5px;
50+
cursor: pointer;
51+
font-size: 16px;
52+
transition: background-color 0.3s;
53+
width: 100%;
54+
margin-top: 10px;
55+
}
56+
57+
button:hover {
58+
background-color: #0056b3;
59+
}
60+
</style>
61+
</head>
62+
<body>
63+
<div class="container">
64+
<h1>Temperature Converter</h1>
65+
<input type="number" id="inputValue" placeholder="Enter temperature">
66+
<select id="inputUnit">
67+
<option value="celsius">Celsius</option>
68+
<option value="fahrenheit">Fahrenheit</option>
69+
<option value="kelvin">Kelvin</option>
70+
</select>
71+
<select id="outputUnit">
72+
<option value="celsius">Celsius</option>
73+
<option value="fahrenheit">Fahrenheit</option>
74+
<option value="kelvin">Kelvin</option>
75+
</select>
76+
<button onclick="convertTemperature()">Convert</button>
77+
<h2 id="result"></h2>
78+
</div>
79+
80+
<script>
81+
function convertTemperature() {
82+
const inputValue = parseFloat(document.getElementById('inputValue').value);
83+
const inputUnit = document.getElementById('inputUnit').value;
84+
const outputUnit = document.getElementById('outputUnit').value;
85+
let result;
86+
87+
if (isNaN(inputValue)) {
88+
result = 'Please enter a valid number';
89+
} else {
90+
if (inputUnit === 'celsius') {
91+
if (outputUnit === 'fahrenheit') {
92+
result = (inputValue * 9/5) + 32;
93+
} else if (outputUnit === 'kelvin') {
94+
result = inputValue + 273.15;
95+
} else {
96+
result = inputValue;
97+
}
98+
} else if (inputUnit === 'fahrenheit') {
99+
if (outputUnit === 'celsius') {
100+
result = (inputValue - 32) * 5/9;
101+
} else if (outputUnit === 'kelvin') {
102+
result = (inputValue - 32) * 5/9 + 273.15;
103+
} else {
104+
result = inputValue;
105+
}
106+
} else if (inputUnit === 'kelvin') {
107+
if (outputUnit === 'celsius') {
108+
result = inputValue - 273.15;
109+
} else if (outputUnit === 'fahrenheit') {
110+
result = (inputValue - 273.15) * 9/5 + 32;
111+
} else {
112+
result = inputValue;
113+
}
114+
}
115+
}
116+
117+
document.getElementById('result').textContent = `Result: ${result} ${outputUnit.charAt(0).toUpperCase() + outputUnit.slice(1)}`;
118+
}
119+
</script>
120+
</body>
121+
</html>

‎Whack-a-mole/whackamole.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
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+
<title>Whack-a-Mole Game</title>
7+
<style>
8+
body {
9+
font-family: 'Arial', sans-serif;
10+
background-color: #f4f4f4;
11+
display: flex;
12+
flex-direction: column;
13+
justify-content: center;
14+
align-items: center;
15+
height: 100vh;
16+
margin: 0;
17+
}
18+
19+
h1 {
20+
color: #333;
21+
font-size: 36px;
22+
margin-bottom: 20px;
23+
}
24+
25+
#score {
26+
font-size: 24px;
27+
margin-bottom: 20px;
28+
}
29+
30+
.grid {
31+
display: grid;
32+
grid-template-columns: repeat(3, 100px);
33+
grid-gap: 10px;
34+
}
35+
36+
.square {
37+
width: 100px;
38+
height: 100px;
39+
background-color: #ccc;
40+
border: 2px solid #333;
41+
border-radius: 10px;
42+
display: flex;
43+
justify-content: center;
44+
align-items: center;
45+
cursor: pointer;
46+
}
47+
48+
.mole {
49+
background-color: #007bff;
50+
border-radius: 50%;
51+
width: 60%;
52+
height: 60%;
53+
}
54+
</style>
55+
</head>
56+
<body>
57+
<h1>Whack-a-Mole</h1>
58+
<div id="score">Score: 0</div>
59+
<div class="grid">
60+
<div class="square" data-id="0"></div>
61+
<div class="square" data-id="1"></div>
62+
<div class="square" data-id="2"></div>
63+
<div class="square" data-id="3"></div>
64+
<div class="square" data-id="4"></div>
65+
<div class="square" data-id="5"></div>
66+
<div class="square" data-id="6"></div>
67+
<div class="square" data-id="7"></div>
68+
<div class="square" data-id="8"></div>
69+
</div>
70+
71+
<script>
72+
const squares = document.querySelectorAll('.square');
73+
const scoreDisplay = document.getElementById('score');
74+
let score = 0;
75+
let molePosition;
76+
let hitPosition;
77+
let currentTime = 60;
78+
let timerId = null;
79+
80+
function randomSquare() {
81+
squares.forEach(square => {
82+
square.classList.remove('mole');
83+
});
84+
85+
let randomSquare = squares[Math.floor(Math.random() * 9)];
86+
randomSquare.classList.add('mole');
87+
88+
molePosition = randomSquare.dataset.id;
89+
}
90+
91+
squares.forEach(square => {
92+
square.addEventListener('mousedown', () => {
93+
if (square.dataset.id === molePosition) {
94+
score++;
95+
scoreDisplay.textContent = `Score: ${score}`;
96+
molePosition = null;
97+
}
98+
});
99+
});
100+
101+
function moveMole() {
102+
timerId = setInterval(randomSquare, 800);
103+
}
104+
105+
function countdown() {
106+
currentTime--;
107+
if (currentTime === 0) {
108+
clearInterval(timerId);
109+
alert(`Game Over! Your final score is ${score}`);
110+
}
111+
}
112+
113+
moveMole();
114+
setInterval(countdown, 1000);
115+
</script>
116+
</body>
117+
</html>

‎index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -162,8 +162,12 @@ <h1 class="text-uppercase Heading"> <span class="badge">small javascript project
162162
<a href="./Unlimited Color/unlimitedcolor.html" class="hvr-sweep-to-right projectsName">Unlimited Color</a>
163163
<a href="./Weather App/weatherapp.html" class="hvr-sweep-to-right projectsName">Weather App</a>
164164
<a href="./Wekipidia_clone/index.html" class="hvr-sweep-to-right projectsName">Wikipedia clone</a>
165-
<a href="./pairsgame/index.html" class="hvr-sweep-to-right projectsName">Pairs Game</a>
166-
<a href="./Checkers/index.html" class="hvr-sweep-to-right projectsName">Checkers</a>
165+
<a href="./Wekipidia_clone/index.html" class="hvr-sweep-to-right projectsName">Wikipedia clone</a>
166+
<a href="./Temperature/temp.html" class="hvr-sweep-to-right projectsName">Temperature Converter</a>
167+
<a href="./Whack-a-mole/whackamole.html" class="hvr-sweep-to-right projectsName">Whack-a-mole</a>
168+
<a href="./pairsgame/index.html" class="hvr-sweep-to-right projectsName">Pairs Game</a>
169+
<a href="./Checkers/index.html" class="hvr-sweep-to-right projectsName">Checkers</a>
170+
167171
</section>
168172

169173
<!-- Bootstrap Core JS -->

0 commit comments

Comments
 (0)