Skip to content

Commit e95c67e

Browse files
harshita2216harshita2216
authored
Merge branch 'main' into architectureWeb
2 parents 38719b3 + 944c43f commit e95c67e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+17705
-3
lines changed

‎BMI Calculator (JS)/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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">
6+
<title>BMI Calculator</title>
7+
<meta name="description" content="JS app to calculates Body Mass Index">
8+
<meta name="author" content="Supritha">
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
<body>
12+
<div class="bmi">
13+
<h2>Body Mass Index Calculator</h2>
14+
<p class="text">Height in cm</p><input type="text" id="height">
15+
<p class="text">Weight in kg</p><input type="text" id="weight">
16+
<p id="result"></p><button id="btn">Calculate</button>
17+
</div>
18+
<div class="chart">
19+
<table>
20+
<thead>
21+
<tr>
22+
<th>BMI</th>
23+
<th>Category</th>
24+
</tr>
25+
</thead>
26+
<tbody>
27+
<tr>
28+
<td data-column="bmi">less than 18.5</td>
29+
<td data-column="category">Underweight</td>
30+
</tr>
31+
<tr>
32+
<td data-column="bmi">between 18.5 and 24.9</td>
33+
<td data-column="category">Ideal</td>
34+
</tr>
35+
<tr>
36+
<td data-column="bmi">between 25 and 29.9</td>
37+
<td data-column="category">Overweight</td>
38+
</tr>
39+
<tr>
40+
<td data-column="bmi">over 30 </td>
41+
<td data-column="category">Obesity</td>
42+
</tr>
43+
</tbody>
44+
</table>
45+
</div>
46+
<script src="script.js"></script>
47+
</body>
48+
</html>
49+

‎BMI Calculator (JS)/readme.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<h1>BMI Calculator using JS</h1>
2+
3+
<p>Calculates the Body Mass Index of a person, provided with a BMI chart</p>
4+
5+
### Use of the Project:
6+
7+
<p>User enters values - height in cm and weight in kg and clicks on "calculate" button to obtain BMI value and compares the value in the given BMI chart.</p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
</ul>
15+
16+
#### Steps to Use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Start Calculatings!
29+
30+
<h3> Video Demo </h3>
31+
32+
<video controls width="960" alt="bmicalc">
33+
<source src="https://user-images.githubusercontent.com/78655439/126800926-9544c5b5-5167-4419-a921-512225191a67.mp4">
34+
</video>
35+
36+
<br>
37+
38+

‎BMI Calculator (JS)/script.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
document.getElementById("btn").addEventListener("click", function() {
2+
var height_val = document.getElementById('height').value;
3+
var weight_val = document.getElementById('weight').value;
4+
var bmi = weight_val / (height_val / 100 * height_val / 100);
5+
var bmio = (bmi.toFixed(2));
6+
7+
document.getElementById("result").innerHTML = "Your BMI is " + bmio;
8+
});

‎BMI Calculator (JS)/style.css

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
/*===== GOOGLE FONTS =====*/
2+
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap");
3+
4+
body {
5+
margin: 0;
6+
padding: 0;
7+
text-align: center;
8+
font-family: "Montserrat";
9+
background: rgb(34, 193, 195);
10+
background: linear-gradient(
11+
0deg,
12+
rgba(34, 193, 195, 1) 0%,
13+
rgba(253, 68, 45, 1) 100%
14+
);
15+
min-height: 100vh;
16+
}
17+
.bmi {
18+
width: 350px;
19+
position: absolute;
20+
top: 50%;
21+
left: 50%;
22+
background-color: #fff;
23+
transform: translate(-50%, -50%);
24+
padding: 20px;
25+
border-radius: 10px;
26+
}
27+
h2 {
28+
font-size: 30px;
29+
font-weight: 600;
30+
}
31+
.text {
32+
text-align: center;
33+
}
34+
#weight,
35+
#height {
36+
color: #222f3e;
37+
text-align: left;
38+
font-size: 20px;
39+
font-weight: 200;
40+
outline: none;
41+
border: 1px solid black;
42+
border-radius: 7px;
43+
width: 200px;
44+
height: 35px;
45+
}
46+
#weight:focus,
47+
#height:focus {
48+
width: 250px;
49+
transition: 0.5s;
50+
}
51+
#result {
52+
color: #341f97;
53+
}
54+
#btn {
55+
font-family: inherit;
56+
margin-top: 10px;
57+
border: none;
58+
color: #000;
59+
background: lightblue;
60+
width: 150px;
61+
padding: 10px;
62+
border-radius: 30px;
63+
outline: none;
64+
cursor: pointer;
65+
transition: 0.5s;
66+
}
67+
#btn:hover {
68+
transform: scale(1.1);
69+
transition: 0.5s;
70+
}
71+
72+
table {
73+
width: 650px;
74+
border-collapse: collapse;
75+
margin: 600px auto;
76+
}
77+
78+
tr {
79+
background: lightblue;
80+
}
81+
82+
th {
83+
background: #fff;
84+
color: #000;
85+
font-weight: bold;
86+
}
87+
88+
td,
89+
th {
90+
padding: 10px;
91+
border: 1px solid #000;
92+
text-align: center;
93+
font-size: 18px;
94+
}
95+

‎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: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,4 +107,8 @@
107107
| [Memory Card Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Memory%20Card%20Game) | A basic memory game where the main trick is to remember where the cards are. |
108108
| [Sudoku Solver](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/Sudoku%20Solver) |It solves Sudoku using backtracking|
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.
110-
| [Architecture Website Template](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/Architecture-Website) |It is a simple and responsive Architecture Website template.
110+
| [Architecture Website Template](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/Architecture-Website) |It is a simple and responsive Architecture Website template.
111+
| [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.
112+
| [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.
113+
| [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.
114+
| [Personal Blog Template](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/Personal-blog) |A simple and responsive personal blog template.

‎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

0 commit comments

Comments
 (0)