Skip to content

Commit a944b6f

Browse files
vallalapoojaranivallalapoojarani
committed
first commit
0 parents  commit a944b6f

24 files changed

Lines changed: 58129 additions & 0 deletions

‎JavaScript_Projects_final-rps_images at main · vallalapoojarani_JavaScript_Projects.mhtml‎

Lines changed: 56043 additions & 0 deletions
Large diffs are not rendered by default.

‎cart-quantity/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Cart Quantity</title>
5+
</head>
6+
<body>
7+
<button onclick="
8+
console.log(`Cart quantity: ${cartQuantity}`);
9+
">Show Quantity</button>
10+
11+
<button onclick="
12+
cartQuantity++;
13+
console.log(`Cart quantity: ${cartQuantity}`);
14+
">Add to Cart</button>
15+
16+
<button onclick="
17+
cartQuantity += 2;
18+
console.log(`Cart quantity: ${cartQuantity}`);
19+
">+2</button>
20+
21+
<button onclick="
22+
cartQuantity = cartQuantity + 3;
23+
console.log(`Cart quantity: ${cartQuantity}`);
24+
">+3</button>
25+
26+
<button onclick="
27+
cartQuantity = 0;
28+
console.log('Cart was reset.');
29+
console.log(`Cart quantity: ${cartQuantity}`);
30+
">Reset Cart</button>
31+
32+
<script>
33+
let cartQuantity = 0;
34+
</script>
35+
</body>
36+
</html>

‎dom/css-rps-version/index.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>DOM Projects</title>
5+
<style>
6+
body {
7+
font-family: Arial;
8+
}
9+
10+
.subscribe-button {
11+
border: none;
12+
background-color: black;
13+
color: white;
14+
padding-top: 10px;
15+
padding-bottom: 10px;
16+
padding-left: 15px;
17+
padding-right: 15px;
18+
font-weight: bold;
19+
border-radius: 50px;
20+
cursor: pointer;
21+
margin-bottom: 30px;
22+
}
23+
24+
.is-subscribed {
25+
background-color: rgb(240, 240, 240);
26+
color: black;
27+
}
28+
29+
.cost-input {
30+
font-size: 15px;
31+
/*
32+
padding-top: 10px;
33+
padding-bottom: 10px;
34+
padding-left: 10px;
35+
padding-right: 10px;
36+
*/
37+
padding: 10px;
38+
}
39+
40+
.calculate-button {
41+
background-color: green;
42+
color: white;
43+
border: none;
44+
font-size: 15px;
45+
padding: 12px 15px;
46+
cursor: pointer;
47+
}
48+
</style>
49+
</head>
50+
<body>
51+
<p>YouTube Subscribe Button</p>
52+
<button
53+
onclick="
54+
subscribe();
55+
"
56+
class="js-subscribe-button subscribe-button"
57+
>
58+
Subscribe
59+
</button>
60+
61+
<p>Amazon Shipping Calculator</p>
62+
<input
63+
placeholder="Cost of order"
64+
class="js-cost-input cost-input"
65+
onkeydown="
66+
handleCostKeydown(event);
67+
"
68+
/>
69+
<button
70+
onclick="
71+
calculateTotal();
72+
"
73+
class="calculate-button"
74+
>
75+
Calculate
76+
</button>
77+
<p class="js-total-cost"></p>
78+
79+
<script>
80+
String(25);
81+
console.log("25" - 5);
82+
console.log("25" + 5);
83+
84+
window.document;
85+
window.console.log("window");
86+
window.alert;
87+
88+
function handleCostKeydown(event) {
89+
if (event.key === "Enter") {
90+
calculateTotal();
91+
}
92+
}
93+
94+
function calculateTotal() {
95+
const inputElement = document.querySelector(".js-cost-input");
96+
let cost = Number(inputElement.value);
97+
98+
if (cost < 100) {
99+
cost = cost + 10;
100+
}
101+
102+
document.querySelector(".js-total-cost").innerHTML = `${cost}/-`;
103+
}
104+
105+
function subscribe() {
106+
const buttonElement = document.querySelector(".js-subscribe-button");
107+
108+
if (buttonElement.innerText === "Subscribe") {
109+
buttonElement.innerHTML = "Subscribed";
110+
buttonElement.classList.add("is-subscribed");
111+
} else {
112+
buttonElement.innerHTML = "Subscribe";
113+
buttonElement.classList.remove("is-subscribed");
114+
}
115+
}
116+
</script>
117+
</body>
118+
</html>

‎dom/index.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>DOM Projects</title>
5+
<style>
6+
.js-subscribe-button {
7+
margin-bottom: 50px;
8+
}
9+
.p1 {
10+
margin-top: 50px;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<p>YouTube Subscribe Button</p>
16+
<button
17+
18+
onclick="
19+
subscribe();
20+
"
21+
class="js-subscribe-button"
22+
>
23+
Subscribe
24+
</button>
25+
26+
<p>Amazon Shipping Calculator</p>
27+
<p>Orders under 100 = +10 shipping.</p>
28+
<p>Orders over 100 = FREE shipping.</p>
29+
<input
30+
placeholder="Cost of order"
31+
class="js-cost-input"
32+
onkeydown="
33+
handleCostKeydown(event);
34+
"
35+
/>
36+
<button
37+
onclick="
38+
calculateTotal();
39+
"
40+
>
41+
Calculate
42+
</button>
43+
<p class="js-total-cost"></p>
44+
45+
<p class="p1">Rock Paper Scissors</p>
46+
<a href="./rock-paper-scissors/">Click here</a>
47+
48+
<p class="p1">
49+
<h2>CSS VERSION</h2>
50+
<a href="./css-rps-version/">Click here</a>
51+
</p>
52+
<script>
53+
String(25);
54+
console.log("25" - 5);
55+
console.log("25" + 5);
56+
57+
window.document;
58+
window.console.log("window");
59+
window.alert;
60+
61+
function handleCostKeydown(event) {
62+
if (event.key === "Enter") {
63+
calculateTotal();
64+
}
65+
}
66+
67+
function calculateTotal() {
68+
const inputElement = document.querySelector(".js-cost-input");
69+
let cost = Number(inputElement.value);
70+
71+
if (cost < 100) {
72+
cost = cost + 10;
73+
}
74+
75+
document.querySelector(".js-total-cost").innerHTML = `${cost}/-`;
76+
}
77+
78+
function subscribe() {
79+
const buttonElement = document.querySelector(".js-subscribe-button");
80+
81+
if (buttonElement.innerText === "Subscribe") {
82+
buttonElement.innerHTML = "Subscribed";
83+
} else {
84+
buttonElement.innerHTML = "Subscribe";
85+
}
86+
}
87+
</script>
88+
</body>
89+
</html>

‎dom/rockpaperscissors/index.html‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Rock Paper Scissors</title>
5+
<style> .gap{
6+
margin-top:50px;
7+
}</style>
8+
</head>
9+
<body>
10+
<p>Rock Paper Scissors</p>
11+
<button
12+
onclick="
13+
playGame('rock');
14+
"
15+
>
16+
Rock
17+
</button>
18+
19+
<button
20+
onclick="
21+
playGame('paper');
22+
"
23+
>
24+
Paper
25+
</button>
26+
27+
<button
28+
onclick="
29+
playGame('scissors');
30+
"
31+
>
32+
Scissors
33+
</button>
34+
35+
<p class="js-result"></p>
36+
<p class="js-moves"></p>
37+
<p class="js-score"></p>
38+
39+
<button
40+
onclick="
41+
score.wins = 0;
42+
score.losses = 0;
43+
score.ties = 0;
44+
localStorage.removeItem('score');
45+
updateScoreElement();
46+
"
47+
>
48+
Reset Score
49+
</button>
50+
51+
<p class="gap">Final Rock Paper Scissors Projects</p>
52+
<a href="../../final-rps/">click here</a>
53+
54+
<script>
55+
let score = JSON.parse(localStorage.getItem("score")) || {
56+
wins: 0,
57+
losses: 0,
58+
ties: 0,
59+
};
60+
61+
updateScoreElement();
62+
63+
/*
64+
if (!score) {
65+
score = {
66+
wins: 0,
67+
losses: 0,
68+
ties: 0
69+
};
70+
}
71+
*/
72+
73+
function playGame(playerMove) {
74+
const computerMove = pickComputerMove();
75+
76+
let result = "";
77+
78+
if (playerMove === "scissors") {
79+
if (computerMove === "rock") {
80+
result = "You lose.";
81+
} else if (computerMove === "paper") {
82+
result = "You win.";
83+
} else if (computerMove === "scissors") {
84+
result = "Tie.";
85+
}
86+
} else if (playerMove === "paper") {
87+
if (computerMove === "rock") {
88+
result = "You win.";
89+
} else if (computerMove === "paper") {
90+
result = "Tie.";
91+
} else if (computerMove === "scissors") {
92+
result = "You lose.";
93+
}
94+
} else if (playerMove === "rock") {
95+
if (computerMove === "rock") {
96+
result = "Tie.";
97+
} else if (computerMove === "paper") {
98+
result = "You lose.";
99+
} else if (computerMove === "scissors") {
100+
result = "You win.";
101+
}
102+
}
103+
104+
if (result === "You win.") {
105+
score.wins += 1;
106+
} else if (result === "You lose.") {
107+
score.losses += 1;
108+
} else if (result === "Tie.") {
109+
score.ties += 1;
110+
}
111+
112+
localStorage.setItem("score", JSON.stringify(score));
113+
114+
updateScoreElement();
115+
116+
document.querySelector(".js-result").innerHTML = result;
117+
118+
document.querySelector(
119+
".js-moves"
120+
).innerHTML = `You ${playerMove} - ${computerMove} Computer`;
121+
}
122+
123+
function updateScoreElement() {
124+
document.querySelector(
125+
".js-score"
126+
).innerHTML = `Wins: ${score.wins}, Losses: ${score.losses}, Ties: ${score.ties}`;
127+
}
128+
129+
function pickComputerMove() {
130+
const randomNumber = Math.random();
131+
132+
let computerMove = "";
133+
134+
if (randomNumber >= 0 && randomNumber < 1 / 3) {
135+
computerMove = "rock";
136+
} else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3) {
137+
computerMove = "paper";
138+
} else if (randomNumber >= 2 / 3 && randomNumber < 1) {
139+
computerMove = "scissors";
140+
}
141+
142+
return computerMove;
143+
}
144+
</script>
145+
</body>
146+
</html>

‎final rps/images/paper-emoji.png‎

6.42 KB
Loading

‎final rps/images/rock-emoji.png‎

6.64 KB
Loading

‎final rps/images/scissors-emoji.png‎

7.28 KB
Loading

0 commit comments

Comments
 (0)