Skip to content

Commit 3a9c858

Browse files
khushi-purwarkhushi-purwar
authored
Merge branch 'main' into dev-kp
2 parents 7800a06 + 41141be commit 3a9c858

File tree

17 files changed

+502
-2
lines changed

17 files changed

+502
-2
lines changed

‎DRUM(darkmode)/README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,7 @@ git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
2929

3030
<h3>ScreenShots</h3>
3131
<br>
32-
<img src="https://github.com/ayushseth07/Web-dev-mini-projects/blob/patch/todolist/images/drumkit(dark).PNG"/>
33-
<img src="https://github.com/ayushseth07/Web-dev-mini-projects/blob/patch/todolist/images/drumkit(light).PNG"/>
32+
33+
![demo-dark](./images/drumkit(dark).PNG)
34+
35+
![demo-light](./images/drumkit(light).PNG)

‎Index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,3 +109,6 @@
109109
| [Counter APP](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/counter_App) |It is a simple react app which is used to incere or decrease the value of counter.
110110
| [BMI Calculator (JS)](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/BMI%20Calculator%20(JS)) |Calculates the Body Mass Index of a person, provided with a BMI chart.
111111
| [React Movie Finder Application](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/react-movie-app) |A single page web application that allows users to search movies based on their query.
112+
| [Maths Quiz Game](https://github.com/nisha331/Web-dev-mini-projects/tree/main/Maths%20quiz%20game) | A maths quiz game for kids to practice addition.
113+
| [Personal Blog Template](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/Personal-blog) |A simple and responsive personal blog template.
114+

‎Maths quiz game/README.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Welcome 🖐 to Maths Addition Quiz Game
2+
3+
This webapp is basically for kids to practice addition.
4+
5+
## 💻Tech Stack
6+
<br>
7+
8+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
9+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
10+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
11+
12+
<br>
13+
14+
### How to get the game on your local machine:
15+
16+
---
17+
18+
- Download or clone the repository
19+
20+
```
21+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
22+
```
23+
24+
- Go to the directory
25+
- Run the index.html file
26+
- Check your addition solving capacity.
27+
28+
<br>
29+
30+
### How to use
31+
1. Add and write your ans in the box and click check answer.
32+
2. Alert will be given if the ans is write or wrong .
33+
3. Click ok to continue the quiz.
34+
35+
It somehow look like this.
36+
37+
![c2](https://user-images.githubusercontent.com/76838660/126802791-4ff8bdd6-423f-49e8-a075-8026f451c258.PNG)
38+
![c1](https://user-images.githubusercontent.com/76838660/126802799-08661f02-807b-4e06-a718-4e8cea8c1c52.PNG)
39+
40+
41+
42+
## Happy Coding!

‎Maths quiz game/quiz.css

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
5+
}
6+
7+
section{
8+
height: 100vh;
9+
display: flex;
10+
flex-direction: column;
11+
justify-content: center;
12+
align-items: center;
13+
background-color: azure;
14+
}
15+
section h1{
16+
padding-bottom: 30px;
17+
font-size: 2rem;
18+
text-shadow: 1px 1px 2px white;
19+
}
20+
.centerdiv{
21+
width: 500px;
22+
height: 400px;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
flex-direction: column;
27+
background-color: aquamarine;
28+
}
29+
.insertBox{
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
height: 100px;
34+
}
35+
#v1, #v2{
36+
text-align: center;
37+
padding: 20px 30px;
38+
width: 35px;
39+
font-size: 30px;
40+
box-shadow: 1px 1px 0px #999,
41+
2px 2px 0px #999,
42+
3px 3px 0px #999,
43+
4px 4px 0px #999;
44+
}
45+
.box1 p{
46+
font-size: 60px;
47+
margin: 1px 5px;
48+
}
49+
.middleBox #answer{
50+
margin: 30px 0;
51+
padding: 5px 0;
52+
font-size: 30px;
53+
text-align: center;
54+
width: 180px;
55+
}
56+
.sentBox button{
57+
padding: 10px 20px;
58+
font-size: 0.8rem;
59+
color: white;
60+
border: none;
61+
background-color: rgb(1, 121, 81);
62+
border-radius: 2px;
63+
}

‎Maths quiz game/quiz.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="quiz.css">
8+
<title>Math Game</title>
9+
</head>
10+
<body>
11+
<section>
12+
<h1>Maths Quiz</h1>
13+
<div class="centerdiv">
14+
<div class="insertBox">
15+
<div class="box1">
16+
<input type="text" id="v1">
17+
</div>
18+
<div class="box1">
19+
<p>+</p>
20+
</div>
21+
<div class="box1">
22+
<input type="text" id="v2">
23+
</div>
24+
</div>
25+
<div class="middleBox">
26+
<input type="text" id="answer">
27+
</div>
28+
<div class="sentBox">
29+
<button onclick={jsGame()}>Check answer</button>
30+
</div>
31+
</div>
32+
</section>
33+
34+
35+
<script>
36+
var n1,n2;
37+
n1 = Math.floor(Math.random()*10+1);
38+
n2 = Math.floor(Math.random()*10+1);
39+
40+
console.log(n1,n2);
41+
42+
document.getElementById('v1').value = n1;
43+
document.getElementById('v2').value = n2;
44+
45+
var ans = n1+n2;
46+
async function jsGame() {
47+
var userans = document.getElementById("answer").value;
48+
console.log(userans);
49+
50+
if(userans == ans){
51+
alert('Well Done! Your answer is correct. ');
52+
}
53+
else{
54+
alert("Correct answer is " + ans + ". Try again. " );
55+
}
56+
history.go(0);
57+
}
58+
</script>
59+
</body>
60+
</html>

‎Personal-Blog/images/fashion.jpg

8.44 KB
Loading

‎Personal-Blog/images/mobile1.png

227 KB
Loading

‎Personal-Blog/images/mobile2.png

121 KB
Loading

‎Personal-Blog/images/mobile3.png

86.8 KB
Loading

‎Personal-Blog/images/page1.png

657 KB
Loading

0 commit comments

Comments
 (0)