Skip to content

Commit e68ef55

Browse files
Prajwal0422Prajwal0422
authored
Add files via upload
1 parent 848d584 commit e68ef55

File tree

13 files changed

+495
-0
lines changed

13 files changed

+495
-0
lines changed

‎JavaScript-Examples/Example1/ex1.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.heading
2+
{
3+
color: rgb(16, 16, 16);
4+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
5+
}
6+
7+
.button
8+
{
9+
color:rgb(247, 244, 244);
10+
background-color:black;
11+
padding: 4px 10px;
12+
font: bold 15px/1 "Open Sans", sans-serif;
13+
display: inline-block;
14+
margin: 10px 20px;
15+
border: 5px solid #c830f3;
16+
animation: ;
17+
}
18+
body{
19+
text-align: center;
20+
height: 50%;
21+
}

‎JavaScript-Examples/Example1/ex1.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="ex1.css">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>project 1||color changiing Buttons</title>
7+
</head>
8+
<body>
9+
<h1 class="heading">
10+
color changing Buttons
11+
</h1>
12+
13+
<div class="box">
14+
<span class="button" id="red">
15+
RED
16+
</span>
17+
<span class="button" id="yellow">
18+
YELLOW
19+
</span>
20+
<span class="button" id="blue">
21+
BLUE
22+
</span>
23+
<span class="button" id="green">
24+
GREEN
25+
</span>
26+
27+
</div>
28+
</body>
29+
<script src="ex1.js"></script>
30+
</html>

‎JavaScript-Examples/Example1/ex1.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const body=document.querySelector("body")
2+
const buttons=document.querySelectorAll(".button")
3+
buttons.forEach(function(button){
4+
button.addEventListener('click',function(e)
5+
{
6+
if(e.target.id==="blue")
7+
body.style.backgroundColor="blue"
8+
if(e.target.id==="green")
9+
body.style.backgroundColor="green"
10+
if(e.target.id==="red")
11+
body.style.backgroundColor="red"
12+
if(e.target.id==="yellow")
13+
body.style.backgroundColor="yellow"
14+
15+
})
16+
})

‎JavaScript-Examples/Example2/ex2.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
body
2+
{
3+
width: 90%;
4+
text-align: center;
5+
}
6+
7+
input{
8+
width:300px;
9+
height: auto;
10+
margin: 20px;
11+
}
12+
13+
#weight,#height{
14+
border:3px solid black;
15+
16+
}
17+
18+
#button{
19+
color: rgb(17, 17, 15);
20+
border-color: black;
21+
background-color: #c3e373;
22+
height: 50px;
23+
font-size: 20px; }
24+
25+
h1{
26+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
27+
}
28+
29+
p,label{
30+
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
31+
font-size: 20px;
32+
}
33+
#result{
34+
color:red;
35+
}

‎JavaScript-Examples/Example2/ex2.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="ex2.css">
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CALCULATOR</title>
8+
9+
</head>
10+
<body>
11+
12+
<h1>CALCULATOR
13+
</h1>
14+
<form >
15+
<label>Enter heights in cm's;</label>
16+
<input type="number" id="height" required><br>
17+
<label>Enter weight in kg's:</label>
18+
<input type="number" id="weight"required><br>
19+
<input type="submit" value="calculate" id="button"></button>
20+
</form>
21+
<p id="result">
22+
bmi index
23+
</p>
24+
<p>Under Weight is Less Than 18.6</p>
25+
<p>Normal Range is Between 18.6 and 24.6</p>
26+
<p>Over Weight is Greater Than 24.6</p>
27+
</body>
28+
<script src="ex2.js"></script>
29+
</html>

‎JavaScript-Examples/Example2/ex2.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const Form=document.querySelector('form')
2+
3+
Form.addEventListener('submit',(e)=>{
4+
e.preventDefault();
5+
let weight = parseInt(document.getElementById("weight").value);
6+
let height = parseInt(document.getElementById("height").value);
7+
let result=document.getElementById("result")
8+
if(weight<=0||isNaN(weight))
9+
{
10+
result.innerHTML='"enter valid weigth"'
11+
}else if(height<=0||isNaN(height))
12+
{
13+
result.innerHTML='"enter valid heigth"'
14+
}
15+
else{
16+
let bmi=weight/((height*height)/10000);
17+
result.innerHTML=`"BMI IS" ${bmi}`;
18+
}
19+
20+
})

‎JavaScript-Examples/Example3/ex3.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
body{
2+
background-color: black;
3+
}
4+
h1{
5+
color: white;
6+
text-align: center;
7+
}
8+
9+
span{
10+
color:rgb(247, 26, 26);
11+
font-size :30px ;
12+
border-width:100px;
13+
margin-top: 600px;
14+
margin-left:360px ;
15+
}

‎JavaScript-Examples/Example3/ex3.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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>Document</title>
7+
<link rel="stylesheet" href="ex3.css">
8+
</head>
9+
<body>
10+
<h1>Your Local Time </h1>
11+
<div>
12+
<span></span>
13+
</div>
14+
</body>
15+
<script src="ex3.js"></script>
16+
</html>

‎JavaScript-Examples/Example3/ex3.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
const span=document.querySelector('span')
3+
4+
setInterval(()=>{
5+
let date=new Date();
6+
span.innerHTML=date.toLocaleString();
7+
},1000)

‎JavaScript-Examples/Example4/ex4-.js‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
let rand = parseInt(Math.random() * 100 + 1);
2+
console.log(rand);
3+
const submit = document.querySelector("button");
4+
const userinput = document.querySelector("textarea");
5+
const guessSlot = document.querySelectorAll('.guess');
6+
const Remaining = document.querySelector(".chances");
7+
const hint = document.querySelector(".hint");
8+
const p = document.createElement('p')
9+
10+
11+
let numguess = 0
12+
let playGame = true
13+
let prevguess = []
14+
15+
if (playGame) {
16+
submit.addEventListener('click', function (e) {
17+
e.preventDefault();
18+
let guess = parseInt(userinput.value);
19+
validateGuess(guess);
20+
console.log(numguess);
21+
})
22+
}
23+
24+
function validateGuess(guess) {
25+
if (isNaN(guess)) {
26+
alert("please, enter the valid number")
27+
} else if (guess > 100) {
28+
alert("please,Enter a Number less than 100")
29+
}
30+
else if (guess < 1) {
31+
alert("please,Enter a Number greater than 1")
32+
} else {
33+
if (numguess==9) {
34+
displayGuesses(guess)
35+
displayMessage(`GAME WAS OVER ,RANDOM NUMBER WAS ${rand}`)
36+
endGame();
37+
} else {
38+
displayGuesses(guess);
39+
checkGuess(guess)
40+
}
41+
}
42+
43+
}
44+
45+
function checkGuess(guess) {
46+
if (guess === rand) {
47+
displayMessage("You guessed it right!")
48+
endGame()
49+
}
50+
else if (guess < rand) {
51+
displayMessage("Number is to low!!")
52+
}
53+
else if (guess > rand) {
54+
displayMessage("Number is to hight!!")
55+
}
56+
57+
}
58+
59+
function displayGuesses(guess) {
60+
userinput.value = ''
61+
prevguess.push(guess)
62+
guessSlot[numguess].innerHTML += `${prevguess[numguess]}`
63+
numguess++
64+
Remaining.innerHTML = `${10 - numguess}`
65+
66+
}
67+
68+
function displayMessage(message) {
69+
hint.innerHTML = `${message}`
70+
}
71+
72+
function endGame() {
73+
userinput.value = ""
74+
userinput.setAttribute('disabled', "")
75+
p.classList.add('button')
76+
p.innerHTML = `<h2 id="newGame">Start New Game</h2>`
77+
Remaining.append(p)
78+
// console.log(Remaining.childNodes);
79+
playGame = false
80+
newGame()
81+
}
82+
83+
function newGame() {
84+
const newgame = document.querySelector('#newGame')
85+
newgame.addEventListener('click', function (e) {
86+
rand = parseInt(Math.random() * 100 + 1);
87+
console.log("NEW", rand);
88+
prevguess = []
89+
for (let i = 0; i <= 9; i++)
90+
{
91+
guessSlot[i].innerHTML = ''
92+
} numguess = 0
93+
hint.innerHTML = ""
94+
userinput.removeAttribute('disabled')
95+
Remaining.removeChild(p)
96+
Remaining.innerHTML = `${10 - numguess}`
97+
playGame = true
98+
})
99+
}

0 commit comments

Comments
 (0)