Skip to content

Commit ad71849

Browse files
harshita2216harshita2216
authored
Merge pull request #357 from nisha331/main
lets practice
2 parents 9dab332 + 7154845 commit ad71849

File tree

9 files changed

+492
-1
lines changed

9 files changed

+492
-1
lines changed

‎Index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,4 +135,4 @@ I've used the concept of *Async functions* and *react hook usestate* also worked
135135
|[Survey Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Survey-Form)| It is a simple and responsive urvey-Form.
136136
|[React Pizza App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/react-tailwind-app)| It is a simple pizza react app using TailwindCSS.
137137
|[Digital White Board](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/White-Board)| It is a simple white board where user can write, draw, erase, undo, redo, insert image, open sticky notes and also download it.
138-
138+
|[Lets Practice](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Lets-practice)| This webapp is basically for kids to practice addition, substraction, multiplication and division.

‎Lets practice/README.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Welcome 🖐 to Lets Practice
2+
3+
This webapp is basically for kids to practice addition, substraction, multiplication and division.
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+
the a
29+
30+
<br>
31+
32+
### How to use
33+
1. Select the option you want to practice.
34+
1. Calculate and write your ans in the box and click check answer.
35+
2. Alert will be given if the ans is write or wrong .
36+
3. Click ok to continue the quiz.
37+
38+
It somehow look like this.
39+
40+
![pr](https://user-images.githubusercontent.com/76838660/128411668-611f2f67-f8c6-4330-8d8a-73d66774cbfd.PNG)
41+
![a](https://user-images.githubusercontent.com/76838660/128411885-f4c7113e-a6ad-45ab-bd0a-34537f2e0186.PNG)
42+
![s](https://user-images.githubusercontent.com/76838660/128411902-5d6bba31-4f29-4cd2-9f6e-6845aefca352.PNG)
43+
![d](https://user-images.githubusercontent.com/76838660/128411914-13fd0eb9-0a0a-4d21-a30b-ad19f5cee1c5.PNG)
44+
45+
46+
47+
## Happy Coding!

‎Lets practice/assets/css/index.css

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
*{
2+
font-family: 'Philosopher', sans-serif;
3+
}
4+
body{
5+
background-image: radial-gradient(#104069,#000000);
6+
}
7+
8+
.main{
9+
padding:24px;
10+
margin-top: 40px;
11+
border-radius: 17px;
12+
height: auto;
13+
text-align: center;
14+
}
15+
.container{
16+
display:flex;
17+
padding:24px;
18+
justify-content:space-evenly;
19+
flex-direction: row;
20+
flex-wrap: wrap;
21+
margin-top: 30px;
22+
}
23+
.content{
24+
height:auto;
25+
width:40%;
26+
transition: 0.3s;
27+
border-radius: 17px;
28+
background: rgba( 141, 198, 255, 0.15 );
29+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
30+
backdrop-filter: blur( 6.0px );
31+
-webkit-backdrop-filter: blur( 6.0px );
32+
margin-bottom: 60px;
33+
color: white;
34+
padding: 20px;
35+
margin-right: 35px;
36+
}
37+
.content>h1{
38+
margin-top: 20px;
39+
}
40+
.content >h3{
41+
font-size: 20px;
42+
color: white;
43+
font-family: 'Roboto', sans-serif;
44+
margin: 15px 10px;
45+
}
46+
.heading{
47+
margin:auto;
48+
font-size: 4rem;
49+
color: #8DC6FF;
50+
}
51+
.content:hover{
52+
box-shadow: 3px 3px 10px 0 rgba(119, 216, 243, 0.603);
53+
transition: 0.5s;
54+
}
55+
.btn{
56+
font-weight: bold;
57+
border: 2px solid#031e36;
58+
color: white;
59+
padding: 10px 20px;
60+
text-align: center;
61+
text-decoration: none;
62+
display: inline-block;
63+
font-size: 20px;
64+
margin: 4px 2px;
65+
transition-duration: 0.5s;
66+
cursor: pointer;
67+
border-radius:15px;
68+
}
69+
.btn:hover{
70+
background-color: white;
71+
color: #031e36;
72+
transform: scale(1.1);
73+
transition: 0.5s;
74+
}

‎Lets practice/assets/css/page.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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-image: radial-gradient(#104069,#000000);
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+
}
41+
.box1 p{
42+
font-size: 60px;
43+
margin: 1px 5px;
44+
}
45+
.middleBox #answer{
46+
margin: 30px 0;
47+
padding: 5px 0;
48+
font-size: 30px;
49+
text-align: center;
50+
width: 80px;
51+
}
52+
.middleBox #q{
53+
margin: 30px 0;
54+
padding: 5px 0;
55+
font-size: 30px;
56+
text-align: center;
57+
width: 100px;
58+
}
59+
.middleBox #r{
60+
margin: 30px 0;
61+
padding: 5px 0;
62+
font-size: 30px;
63+
text-align: center;
64+
width: 100px;
65+
}
66+
.middleBox .bu{
67+
color: rgb(255, 255, 255);
68+
border: none;
69+
background-color: #104069;
70+
width: 20px;
71+
}
72+
.sentBox button{
73+
padding: 10px 20px;
74+
font-size: 0.8rem;
75+
color: white;
76+
border: none;
77+
background-color: rgb(1, 121, 81);
78+
border-radius: 2px;
79+
}

‎Lets practice/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="stylesheet" href="assets\css\index.css">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Philosopher&family=Roboto&display=swap" rel="stylesheet">
11+
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
12+
<title>Lets practice</title>
13+
</head>
14+
<body>
15+
<div class="main">
16+
<div class="heading">Let's Play</div>
17+
<div class="container">
18+
<div class="content">
19+
<h1>Addition</h1>
20+
<a href="scripts\add.html"><button class="btn">Start</button></a>
21+
<br><br>
22+
</div>
23+
<div class="content" >
24+
<h1>Substraction</h1>
25+
<a href="scripts\sub.html"><button class="btn">Start</button></a>
26+
<br><br>
27+
</div>
28+
<div class="content" >
29+
<h1>Multiplication</h1>
30+
<a href="scripts\mul.html"><button class="btn">Start</button></a>
31+
<br><br>
32+
</div>
33+
<div class="content">
34+
<h1>Division</h1>
35+
<a href="scripts\div.html"><button class="btn" >Start</button></a>
36+
<br><br>
37+
</div>
38+
</div>
39+
</div>
40+
<hr>
41+
42+
</body>
43+
</html>

‎Lets practice/scripts/add.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="..\assets\css\page.css">
8+
<title>Lets practice</title>
9+
</head>
10+
<body>
11+
<section>
12+
<h1>Addition</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()*100+1);
38+
n2 = Math.floor(Math.random()*100+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>

‎Lets practice/scripts/div.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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="..\assets\css\page.css">
8+
<title>Lets practice</title>
9+
</head>
10+
<body>
11+
<section>
12+
<h1>Division</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+
<button class="bu">Q</button>
27+
<input type="text" id="q">
28+
<button class="bu">R</button>
29+
<input type="text" id="r">
30+
</div>
31+
<div class="sentBox">
32+
<button onclick={jsGame()}>Check answer</button>
33+
</div>
34+
</div>
35+
</section>
36+
37+
38+
<script>
39+
var n1,n2,userrem=0,userqou;
40+
n1 = Math.floor(Math.random()*100+1);
41+
n2 = Math.floor(Math.random()*10+1);
42+
43+
console.log(n1,n2);
44+
45+
document.getElementById('v1').value = n1;
46+
document.getElementById('v2').value = n2;
47+
48+
var quo = Math.floor(n1/n2);
49+
var rem = n1%n2;
50+
async function jsGame() {
51+
var userqou = document.getElementById("q").value;
52+
console.log(userqou);
53+
var userrem= document.getElementById("r").value;
54+
console.log(userrem);
55+
56+
if(userqou == quo && userrem == rem ){
57+
alert('Well Done! Your answer is correct. ');
58+
}
59+
else{
60+
alert("Correct quotient is " + quo + " remainder is" + rem + ". Try again. " );
61+
}
62+
history.go(0);
63+
}
64+
</script>
65+
</body>
66+
</html>

0 commit comments

Comments
 (0)