Skip to content

Commit 99f6735

Browse files
devintaingdevintaing
authored
Merge pull request #2 from devintaing/dev
DOM and CSS practice and RPS V4.
2 parents f6d02f2 + acb5b7a commit 99f6735

18 files changed

+803
-266
lines changed

‎guestbook.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<link href="styles.css" rel="stylesheet"/>
6+
<title>Devin Taing</title>
7+
</head>
8+
<body>
9+
<header>
10+
<div class="navbar">
11+
<a href="https://devintaing.dev" style="margin-right: 20px;">home</a>
12+
<a href="https://devintaing.dev/projects" style="margin-right: 20px;">projects</a>
13+
<a href="https://devintaing.dev/projects">guestbook</a>
14+
</div>
15+
</header>
16+
<main>
17+
<h1 class="title">guestbook</h1>
18+
<h2 class="subtitle">feel free to leave a message!</h2>
19+
</main>
20+
<footer>
21+
<hr>
22+
<p class="footer-text">
23+
made by devin taing
24+
</p>
25+
<a href="https://github.com/devintaing" style="margin-right: 10px;">
26+
<img src="images/github-logo-dark.png" alt="github logo" width="30" height="30">
27+
</a>
28+
<a href="https://linkedin.com/in/devintaing">
29+
<img src="images/linkedin-logo-dark.png" alt="linkedin logo" width="30" height="30">
30+
</a>
31+
</footer>
32+
</body>
33+
</html>

‎index.html‎

Lines changed: 42 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,45 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<link href="styles.css" rel="stylesheet"/>
6-
<title>Devin Taing</title>
7-
</head>
8-
<body>
9-
<header>
10-
<div class="navbar">
11-
<a href="https://devintaing.dev" style="margin-right: 20px;">home</a>
12-
<a href="https://devintaing.dev/projects">projects</a>
13-
</div>
14-
</header>
15-
<main>
16-
<h1 class="title">devin taing</h1>
17-
<h2 class="subtitle">computer science student at sjsu</h2>
18-
<p class="text">
19-
hi! i'm currently pursuing a bachelor's degree in computer science at san jose
20-
state university (expected to graduate spring 2026).
21-
<br>
22-
<br>
23-
i'm always seeking to learn and improve my skills. i have a solid background in
24-
java, and am currently learning html and css.
25-
<br>
26-
<br>
27-
you can contact me by email at [email protected] and i will get back to you
28-
as soon as i can.
29-
</p>
30-
</main>
31-
<footer>
32-
<hr>
33-
<p class="footer-text">
34-
made by devin taing
35-
</p>
36-
<a href="https://github.com/devintaing" style="margin-right: 10px;">
37-
<img src="images/github-logo-dark.png" alt="github logo" width="30" height="30">
38-
</a>
39-
<a href="https://linkedin.com/in/devintaing">
40-
<img src="images/linkedin-logo-dark.png" alt="linkedin logo" width="30" height="30">
41-
</a>
42-
</footer>
43-
</body>
3+
<head>
4+
<meta charset="utf-8">
5+
<link href="styles.css" rel="stylesheet"/>
6+
<title>Devin Taing</title>
7+
</head>
8+
<body>
9+
<header>
10+
<div class="navbar">
11+
<a href="https://devintaing.dev" style="margin-right: 20px;">home</a>
12+
<a href="https://devintaing.dev/projects" style="margin-right: 20px;">projects</a>
13+
<a href="https://devintaing.dev/projects">guestbook</a>
14+
</div>
15+
</header>
16+
<main>
17+
<h1 class="title">devin taing</h1>
18+
<h2 class="subtitle">computer science student at sjsu.</h2>
19+
<p class="text">
20+
hi! i'm currently pursuing a bachelor's degree in computer science at san jose
21+
state university (expected to graduate spring 2026).
22+
<br>
23+
<br>
24+
i'm always seeking to learn and improve my skills. i have a solid background in
25+
java, and am currently learning html and css.
26+
<br>
27+
<br>
28+
you can contact me by email at [email protected] and i will get back to you
29+
as soon as i can.
30+
</p>
31+
</main>
32+
<footer>
33+
<hr>
34+
<p class="footer-text">
35+
made by devin taing
36+
</p>
37+
<a href="https://github.com/devintaing" style="margin-right: 10px;">
38+
<img src="images/github-logo-dark.png" alt="github logo" width="30" height="30">
39+
</a>
40+
<a href="https://linkedin.com/in/devintaing">
41+
<img src="images/linkedin-logo-dark.png" alt="linkedin logo" width="30" height="30">
42+
</a>
43+
</footer>
44+
</body>
4445
</html>

‎learning/dom-projects-v1.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+
<title>DOM Projects V1</title>
6+
</head>
7+
<body>
8+
<h1>DOM Projects V1</h1>
9+
10+
<p>YouTube Subscribe Button</p>
11+
<button onclick="subscribe();" class="js-subscribe-button">Subscribe</button>
12+
13+
<br>
14+
<br>
15+
16+
<p>Rock Paper Scissors V3</p>
17+
<a href="https://devintaing.dev/learning/rps-v3">Click Here!</a>
18+
19+
<br>
20+
<br>
21+
22+
<p>Amazon Shipping Calculator</p>
23+
<p>Orders under $40: $10 shipping</p>
24+
<p>Orders of at least $40: FREE shipping!</p>
25+
<input placeholder="Cost of Order" class="js-cost-input" onkeydown="handleCostKeyDown(event);">
26+
<button onclick="calculateTotal();">Calculate</button>
27+
<p class="js-total-cost"></p>
28+
29+
<script>
30+
function subscribe() {
31+
const buttonElement = document.querySelector('.js-subscribe-button');
32+
if(buttonElement.innerHTML === 'Subscribe') {
33+
buttonElement.innerHTML = 'Subscribed';
34+
}
35+
else {
36+
buttonElement.innerHTML = 'Subscribe';
37+
}
38+
}
39+
40+
function handleCostKeyDown(event) {
41+
if(event.key === 'Enter') {
42+
calculateTotal();
43+
}
44+
}
45+
46+
function calculateTotal() {
47+
const inputElement = document.querySelector('.js-cost-input');
48+
let cost = Number(inputElement.value);
49+
const pElement = document.querySelector('.js-total-cost');
50+
51+
if(cost < 40) {
52+
cost = cost + 10;
53+
}
54+
55+
pElement.innerHTML = `Total: $${cost}`;
56+
}
57+
58+
</script>
59+
</body>
60+
</html>

‎learning/dom-projects-v2.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>DOM Projects V2</title>
6+
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
7+
8+
<style>
9+
body {
10+
font-family: 'Roboto Mono', Arial;
11+
}
12+
13+
.subscribe-button {
14+
border: none;
15+
background-color: black;
16+
color: white;
17+
padding: 10px 15px;
18+
font-weight: bold;
19+
border-radius: 50px;
20+
cursor: pointer;
21+
}
22+
23+
.is-subscribed {
24+
background-color: rgb(240, 240, 240);
25+
color: black;
26+
}
27+
28+
.cost-input {
29+
font-size: 15px;
30+
padding: 10px;
31+
}
32+
33+
.calculate-button {
34+
background-color: green;
35+
color: white;
36+
border: none;
37+
font-size: 15px;
38+
padding: 12px 15px;
39+
cursor: pointer;
40+
}
41+
42+
</style>
43+
</head>
44+
<body>
45+
<h1>DOM Projects V2</h1>
46+
47+
<p>YouTube Subscribe Button</p>
48+
<button onclick="subscribe();" class="js-subscribe-button subscribe-button">Subscribe</button>
49+
50+
<br>
51+
<br>
52+
53+
<p>Rock Paper Scissors V4</p>
54+
<a href="https://devintaing.dev/learning/rps-v4">Click Here!</a>
55+
56+
<br>
57+
<br>
58+
59+
<p>Amazon Shipping Calculator</p>
60+
<p>Orders under $40: $10 shipping</p>
61+
<p>Orders of at least $40: FREE shipping!</p>
62+
<input placeholder="Cost of Order" class="js-cost-input cost-input" onkeydown="handleCostKeyDown(event);">
63+
<button onclick="calculateTotal();" class="calculate-button">Calculate</button>
64+
<p class="js-total-cost"></p>
65+
66+
<script>
67+
function subscribe() {
68+
const buttonElement = document.querySelector('.js-subscribe-button');
69+
if(buttonElement.innerHTML === 'Subscribe') {
70+
buttonElement.innerHTML = 'Subscribed';
71+
buttonElement.classList.add('is-subscribed');
72+
}
73+
else {
74+
buttonElement.innerHTML = 'Subscribe';
75+
buttonElement.classList.remove('is-subscribed');
76+
}
77+
}
78+
79+
function handleCostKeyDown(event) {
80+
if(event.key === 'Enter') {
81+
calculateTotal();
82+
}
83+
}
84+
85+
function calculateTotal() {
86+
const inputElement = document.querySelector('.js-cost-input');
87+
let cost = Number(inputElement.value);
88+
const pElement = document.querySelector('.js-total-cost');
89+
90+
if(cost < 40) {
91+
cost = cost + 10;
92+
}
93+
94+
pElement.innerHTML = `Total: $${cost}`;
95+
}
96+
97+
</script>
98+
</body>
99+
</html>

‎learning/images/paper-emoji.png‎

6.42 KB
Loading

‎learning/images/rock-emoji.png‎

6.64 KB
Loading

‎learning/images/scissors-emoji.png‎

7.28 KB
Loading

‎learning/rps-simple-counter.html‎

Lines changed: 0 additions & 110 deletions
This file was deleted.

0 commit comments

Comments
 (0)