Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3ec0384

Browse files
committed
Adding code related to lecture7 and project3
1 parent 7ebabfa commit 3ec0384

File tree

189 files changed

+4387
-10
lines changed

Some content is hidden

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

189 files changed

+4387
-10
lines changed

‎lecture5/colors1.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
// Have each button change the color of the heading
88
document.querySelectorAll('.color-change').forEach(function(button) {
99
button.onclick = function() {
10+
alert(button.dataset.color);
1011
document.querySelector('#hello').style.color = button.dataset.color;
1112
};
1213
});
@@ -17,7 +18,7 @@
1718
</head>
1819
<body>
1920
<h1 id="hello">Hello!</h1>
20-
<button class="color-change" data-color="red">Red</button>
21+
<button class="color-change" data-color="">Red</button>
2122
<button class="color-change" data-color="blue">Blue</button>
2223
<button class="color-change" data-color="green">Green</button>
2324
</body>

‎lecture6/animate0.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>My Webpage</title>
5+
<style>
6+
@keyframes grow {
7+
from {
8+
opacity: 0;
9+
}
10+
to {
11+
opacity: 1;
12+
}
13+
}
14+
15+
h1 {
16+
animation-name: grow;
17+
animation-duration: 2s;
18+
animation-fill-mode: forwards;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<h1>Welcome!</h1>
24+
</body>
25+
</html>

‎lecture6/animate1.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>My Webpage</title>
5+
<style>
6+
@keyframes move {
7+
from {
8+
left: 0%;
9+
}
10+
to {
11+
left: 50%;
12+
}
13+
}
14+
15+
h1 {
16+
position: relative;
17+
animation-name: move;
18+
animation-duration: 3s;
19+
animation-fill-mode: forwards;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<h1>Welcome!</h1>
25+
</body>
26+
</html>

‎lecture6/animate2.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>My Webpage</title>
5+
<style>
6+
@keyframes move {
7+
0% {
8+
left: 0%;
9+
}
10+
50% {
11+
left: 50%;
12+
}
13+
100% {
14+
left: 0%;
15+
}
16+
}
17+
18+
h1 {
19+
position: relative;
20+
animation-name: move;
21+
animation-duration: 3s;
22+
animation-fill-mode: forwards;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<h1>Welcome!</h1>
28+
</body>
29+
</html>

‎lecture6/animate3.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>My Webpage</title>
5+
<style>
6+
@keyframes move {
7+
0% {
8+
left: 0%;
9+
}
10+
50% {
11+
left: 50%;
12+
}
13+
100% {
14+
left: 0%;
15+
}
16+
}
17+
18+
h1 {
19+
position: relative;
20+
animation-name: move;
21+
animation-duration: 3s;
22+
animation-fill-mode: forwards;
23+
animation-iteration-count: infinite;
24+
}
25+
</style>
26+
<script>
27+
document.addEventListener('DOMContentLoaded', () => {
28+
const h1 = document.querySelector('h1');
29+
h1.style.animationPlayState = 'paused';
30+
document.querySelector('button').onclick = () => {
31+
if (h1.style.animationPlayState === 'paused')
32+
h1.style.animationPlayState = 'running';
33+
else
34+
h1.style.animationPlayState = 'paused';
35+
};
36+
});
37+
</script>
38+
</head>
39+
<body>
40+
<button>Click Here!</button>
41+
<h1>Welcome!</h1>
42+
</body>
43+
</html>

‎lecture6/circle0.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<body>
4+
<svg style="width:100%; height:800px">
5+
<circle cx="200" cy="200" r="50" style="fill:blue"/>
6+
</svg>
7+
</body>
8+
</html>

‎lecture6/circle1.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="https://d3js.org/d3.v4.min.js"></script>
5+
</head>
6+
<body>
7+
<svg id="svg" style="width:100%; height:800px"/>
8+
</body>
9+
<script>
10+
11+
const svg = d3.select('#svg');
12+
13+
svg.append('circle')
14+
.attr('cx', 200)
15+
.attr('cy', 200)
16+
.attr('r', 90)
17+
.style('fill', 'green');
18+
19+
</script>
20+
</html>

‎lecture6/circle2.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="https://d3js.org/d3.v4.min.js"></script>
5+
</head>
6+
<body>
7+
<svg id="svg" style="width:100%; height:800px"/>
8+
</body>
9+
<script>
10+
11+
const svg = d3.select('#svg');
12+
13+
const c = svg.append('circle')
14+
.attr('cx', 200)
15+
.attr('cy', 200)
16+
.attr('r', 50)
17+
.style('fill', 'blue');
18+
19+
c.transition()
20+
.duration(1000)
21+
.attr('cx', 500)
22+
.attr('cy', 500)
23+
.style('fill', 'red');
24+
25+
</script>
26+
</html>

‎lecture6/circle3.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="https://d3js.org/d3.v4.min.js"></script>
5+
</head>
6+
<body>
7+
<svg id="svg" style="width:100%; height:800px"/>
8+
</body>
9+
<script>
10+
11+
const svg = d3.select('#svg');
12+
13+
const c = svg.append('circle')
14+
.attr('cx', 200)
15+
.attr('cy', 200)
16+
.attr('r', 50)
17+
.style('fill', 'blue');
18+
19+
c.transition()
20+
.duration(1000)
21+
.delay(1000)
22+
.attr('cx', 500);
23+
24+
c.on('click', function() {
25+
d3.select(this).transition()
26+
.duration(3000)
27+
.style('fill', 'red');
28+
});
29+
30+
</script>
31+
</html>

‎lecture6/dice0/dice.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>My Webpage</title>
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
6+
<script>
7+
8+
// Template for roll results
9+
const template = Handlebars.compile("<li>You rolled a {{ value }}</li>");
10+
11+
document.addEventListener('DOMContentLoaded', () => {
12+
document.querySelector('#roll').onclick = () => {
13+
14+
// Generate a random roll.
15+
const roll = Math.floor((Math.random() * 6) + 1);
16+
17+
// Add roll result to DOM.
18+
const content = template({'value': roll});
19+
document.querySelector('#rolls').innerHTML += content;
20+
};
21+
});
22+
</script>
23+
</head>
24+
<body>
25+
<button id="roll">Roll</button>
26+
<ul id="rolls">
27+
</ul>
28+
</body>
29+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /