Skip to content

Commit b198cb3

Browse files
RohitSharma50RohitSharma50
committed
added some projects
1 parent e3d033b commit b198cb3

File tree

15 files changed

+368
-0
lines changed

15 files changed

+368
-0
lines changed

Diff for: ‎.vscode/settings.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"editor.quickSuggestions": {
3+
"comments": "on",
4+
"strings": "on",
5+
"other": "on"
6+
},
7+
"liveServer.settings.port": 5502
8+
}

Diff for: ‎Bmi/index.css

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
body {
2+
text-align: center;
3+
justify-content: center;
4+
text-decoration: solid;
5+
background-color: white;
6+
font-weight: bolder;
7+
}
8+
9+
input {
10+
width: 25%;
11+
margin: 20px;
12+
height: 2rem;
13+
}
14+
15+
/* navbar */
16+
17+
.nav-bar {
18+
display: flex;
19+
flex-wrap: wrap;
20+
align-items: center;
21+
justify-content: center;
22+
padding: 1rem;
23+
margin-bottom: 5px;
24+
gap: 1rem;
25+
border-bottom: solid 1px #aaa;
26+
background-color: #aaa;
27+
}
28+
29+
nav a {
30+
min-width: 9rem;
31+
border-radius: 0.3rem;
32+
border: solid black;
33+
background-color: aliceblue;
34+
text-decoration-line: none;
35+
padding: 5px;
36+
}
37+
38+
* {
39+
box-sizing: border-box;
40+
}
41+
42+
/* navbar */

Diff for: ‎Bmi/index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>BMI Calculator</title>
8+
<link rel="stylesheet" href="index.css">
9+
<script src="index.js" defer></script>
10+
</head>
11+
12+
<body>
13+
<nav class="nav-bar">
14+
<a href="/" aria-current="page">Home</a>
15+
<a target="_blank" href="https://youtu.be/2s2sZm5gy-o?feature=shared">Youtube channel</a>
16+
<a target="_blank" href="https://github.com/RohitSharma50">Github</a>
17+
18+
</nav>
19+
<div class="value">Height (cm):</div>
20+
<input type="number" id="height-input" placeholder="Enter Height">
21+
22+
<div>Weight (kg):</div>
23+
<input type="number" id="weight-input" placeholder="Enter Weight">
24+
<div>
25+
<button type="submit" onclick="bmiCalculate()">Calculate</button>
26+
</div>
27+
<div id="result">your BMI is :</div>
28+
</body>
29+
30+
</html>

Diff for: ‎Bmi/index.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
function bmiCalculate(){
2+
let weight= document.getElementById('weight-input').value;
3+
let height= document.getElementById('height-input').value;
4+
5+
let bmi= ((weight*1000)/(height*height)).toFixed(2);
6+
document.getElementById('result').innerText +=bmi;
7+
8+
}
9+
10+
11+
12+

Diff for: ‎File uploader/index.css

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.nav-bar {
2+
display: flex;
3+
flex-wrap: wrap;
4+
align-items: center;
5+
justify-content: center;
6+
padding: 1rem;
7+
margin-bottom: 5px;
8+
gap: 1rem;
9+
border-bottom: solid 1px #aaa;
10+
background-color: #aaa;
11+
}
12+
13+
nav a {
14+
min-width: 9rem;
15+
border-radius: 0.3rem;
16+
border: solid black;
17+
background-color: aliceblue;
18+
text-decoration-line: none;
19+
padding: 5px;
20+
}
21+
22+
* {
23+
box-sizing: border-box;
24+
}
25+
26+
/* navbar */
27+
28+
29+
.form-section {
30+
text-align: center;
31+
padding: 15rem;
32+
border-width: 2px;
33+
34+
}
35+
36+
.input-field {
37+
border-color: blue;
38+
border-style: solid;
39+
}

Diff for: ‎File uploader/index.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Guess the number</title>
8+
<link rel="stylesheet" href="index.css">
9+
</head>
10+
<nav class="nav-bar">
11+
<a href="/index.html">Home</a>
12+
<a target="_blank" href="https://youtu.be/2s2sZm5gy-o?feature=shared">Youtube channel</a>
13+
<a target="_blank" href="https://github.com/RohitSharma50">Github</a>
14+
15+
16+
</nav>
17+
18+
<body>
19+
<form class="form-section">
20+
<label>Upload File :</label>
21+
<input type="file" class="input-field">
22+
</form>
23+
</body>
24+
25+
</html>

Diff for: ‎Guess the number/index.css

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
body {
2+
text-align: center;
3+
justify-content: center;
4+
text-decoration: solid;
5+
background-color: white;
6+
font-weight: bolder;
7+
}
8+
9+
input {
10+
width: 25%;
11+
margin: 20px;
12+
height: 2rem;
13+
}
14+
15+
/* navbar */
16+
17+
.nav-bar {
18+
display: flex;
19+
flex-wrap: wrap;
20+
align-items: center;
21+
justify-content: center;
22+
padding: 1rem;
23+
margin-bottom: 5px;
24+
gap: 1rem;
25+
border-bottom: solid 1px #aaa;
26+
background-color: #aaa;
27+
}
28+
29+
nav a {
30+
min-width: 9rem;
31+
border-radius: 0.3rem;
32+
border: solid black;
33+
background-color: aliceblue;
34+
text-decoration-line: none;
35+
padding: 5px;
36+
}
37+
38+
* {
39+
box-sizing: border-box;
40+
}
41+
42+
/* navbar */
43+
div {
44+
color: white solid;
45+
}

Diff for: ‎Guess the number/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Guess the number</title>
8+
<link rel="stylesheet" href="index.css">
9+
</head>
10+
11+
<body>
12+
<nav class="nav-bar">
13+
<a href="/index.html">Home</a>
14+
<a target="_blank" href="https://youtu.be/2s2sZm5gy-o?feature=shared">Youtube channel</a>
15+
<a target="_blank" href="https://github.com/RohitSharma50">Github</a>
16+
17+
</nav>
18+
<main>
19+
<input type="number" class="input-value">
20+
<button type="button" class="button">Guess</button>
21+
<p> Random Number is: <span id="div"> </span></p>
22+
<p> Your Guess is: <span id="num"> </span></p>
23+
24+
</main>
25+
<script src="index.js" defer></script>
26+
27+
</body>
28+
29+
</html>

Diff for: ‎Guess the number/index.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const input_value = document.querySelector('.input-value');
2+
const guess = document.querySelector('.button');
3+
const div = document.getElementById('div');
4+
const number = document.getElementById('num');
5+
guess.addEventListener('click', () => {
6+
const num = Math.floor(Math.random() * (100-0)); // Generates random number between 0 and 99
7+
div.innerText = num; // Display the random number in the div
8+
9+
number.innerText=input_value.value;
10+
});
11+

Diff for: ‎Light-Dark Mode/index.css

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* navbar */
2+
3+
.nav-bar {
4+
display: flex;
5+
flex-wrap: wrap;
6+
align-items: center;
7+
justify-content: center;
8+
padding: 1rem;
9+
margin-bottom: 5px;
10+
gap: 1rem;
11+
border-bottom: solid 1px #aaa;
12+
background-color: #aaa;
13+
}
14+
15+
nav a {
16+
min-width: 9rem;
17+
border-radius: 0.3rem;
18+
border: solid black;
19+
background-color: aliceblue;
20+
text-decoration-line: none;
21+
padding: 5px;
22+
}
23+
24+
* {
25+
box-sizing: border-box;
26+
}
27+
28+
/* navbar */

Diff for: ‎Light-Dark Mode/index.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Light & Dark Mode</title>
8+
<link rel="stylesheet" href="index.css">
9+
</head>
10+
<nav class="nav-bar">
11+
<a href="/index.html">Home</a>
12+
<a target="_blank" href="https://youtu.be/2s2sZm5gy-o?feature=shared">Youtube channel</a>
13+
<a target="_blank" href="https://github.com/RohitSharma50">Github</a>
14+
15+
16+
</nav>
17+
18+
<body>
19+
<form>
20+
<label>click to change mode </label>
21+
<input type="checkbox">
22+
</form>
23+
</body>
24+
25+
</html>

Diff for: ‎counter app/index.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
body {
2+
text-align: center;
3+
}
4+
5+
button {
6+
background-color: aqua;
7+
border-radius: 6px;
8+
padding: 10px 16px;
9+
border-color: grey;
10+
}
11+
12+
input {
13+
width: 2rem;
14+
}
15+
16+
/* navbar */
17+
a {
18+
width: 10rem;
19+
padding: 4px;
20+
text-decoration-color: black;
21+
border-radius: 0.3rem;
22+
border: solid black;
23+
text-decoration-line: none;
24+
}

Diff for: ‎counter app/index.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Counter App</title>
8+
<link rel="stylesheet" href="index.css">
9+
<script src="index.js" defer></script>
10+
</head>
11+
12+
<body>
13+
<nav>
14+
<a href="/" aria-current="page">Home</a>
15+
<a target="_blank" href="https://youtu.be/2s2sZm5gy-o?feature=shared">Youtube channel</a>
16+
<a target="_blank" href="https://github.com/RohitSharma50">Github</a>
17+
18+
</nav>
19+
<h1 class="counter">0</h1>
20+
<button class="minusBtn">-</button>
21+
<button class="plusBtn">+</button>
22+
<div>Increment/decrement by : <input type="number" class="input" value="1"></div>
23+
<button class="resetBtn">Reset</button>
24+
</body>
25+
26+
</html>

Diff for: ‎counter app/index.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const minBtn = document.querySelector('.minusBtn');
2+
const plusBtn = document.querySelector('.plusBtn');
3+
const count= document.querySelector('.counter');
4+
const changeBy= document.querySelector('.input');
5+
const reset=document.querySelector('.resetBtn');
6+
7+
minBtn.addEventListener('click', ()=>{
8+
const counter=parseInt(count.innerText);
9+
const change=parseInt(changeBy.value);
10+
count.innerText= counter-change;
11+
})
12+
13+
plusBtn.addEventListener ('click', () => {
14+
const counter=parseInt(count.innerText);
15+
const change=parseInt(changeBy.value);
16+
count.innerText= counter+change;
17+
})
18+
19+
reset.addEventListener('click', () => {
20+
count.innerText=0;
21+
22+
})
23+
24+

Diff for: ‎img/JS Challanges.png

4.48 KB
Loading

0 commit comments

Comments
 (0)