├── .gitattributes
├── README.md
├── ajax
├── application.py
├── static
│ └── index.js
└── templates
│ ├── index.html
│ └── layout.html
├── animations
├── animation0.html
├── animation1.html
├── animation2.html
└── animation3.html
├── dice
├── dice0.html
├── dice1.html
└── dice2.html
├── drawing
├── circle0.html
├── circle1.html
└── rect.html
├── porj1
├── html
│ ├── colors.html
│ ├── colors2.html
│ └── counter.html
└── js
│ ├── colors.js
│ ├── colors2.js
│ ├── colors3.js
│ └── counter.js
├── posts0
├── application.py
├── static
│ └── index.js
└── templates
│ ├── index.html
│ └── layout.html
├── posts1
├── application.py
├── static
│ └── index.js
└── templates
│ ├── index.html
│ └── layout.html
├── posts2
├── application.py
├── static
│ └── index.js
└── templates
│ ├── index.html
│ └── layout.html
├── posts3
├── application.py
├── static
│ └── index.js
└── templates
│ └── index.html
├── posts4
├── application.py
├── static
│ └── index.js
└── templates
│ └── index.html
├── proj0
└── counter.html
├── scroll
└── scroll0.html
├── singlepage0
├── application.py
└── templates
│ ├── index.html
│ └── layout.html
├── singlepage1
├── application.py
└── templates
│ ├── index.html
│ └── layout.html
├── storage
├── interval.html
└── storage0.html
├── tasks
├── html
│ ├── task1.html
│ └── task2.html
└── js
│ ├── task1.js
│ └── task2.js
├── votes0
├── application.py
├── static
│ └── index.js
└── templates
│ ├── index.html
│ └── layout.html
└── votes1
├── application.py
├── static
└── index.js
└── templates
├── index.html
└── layout.html
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.css linguist-detectable=true
2 | *.html linguist-detectable=false
3 | *.js linguist-detectable=true
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # js-advanced
2 |
--------------------------------------------------------------------------------
/ajax/application.py:
--------------------------------------------------------------------------------
1 | from flask import Flask, render_template, request, jsonify
2 |
3 | app = Flask(__name__)
4 |
5 | @app.route("/")
6 | def index():
7 | return render_template("index.html")
8 |
9 | @app.route("/ajax", methods=["POST"])
10 | def flight_api():
11 | param = request.form.get('param')
12 | if not param:
13 | return jsonify({'success':False})
14 | if param is None:
15 | return jsonify({'success' : False})
16 | if param == 'fail':
17 | return jsonify({'success' : False})
18 | data = ['Test wokred']
19 | return jsonify({'success' : True, 'result' : data})
20 |
--------------------------------------------------------------------------------
/ajax/static/index.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('DOMContentLoaded', () => {
2 | document.querySelector("#ajax-form").onsubmit = () => {
3 | const request = new XMLHttpRequest();
4 | const param = document.querySelector('#param').value;
5 |
6 | request.open('POST', '/ajax');
7 | request.onload = () => {
8 |
9 | const data = JSON.parse(request.responseText);
10 | console.log(data);
11 | if(data.success)
12 | {
13 | const contents = `The result is ${data.result} .`
14 | document.querySelector("#result").innerHTML = contents;
15 | }
16 | else
17 | document.querySelector("#result").innerHTML = "Something went wrong";
18 | }
19 |
20 | data = new FormData();
21 | data.append('param', param)
22 |
23 | request.send(data);
24 | return false;
25 | }
26 | });
--------------------------------------------------------------------------------
/ajax/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Ajax
6 |
7 |
8 | Book flight
9 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/ajax/templates/layout.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {% block title%} {% endblock %}
4 |
5 |
6 |
7 |
8 | {% block body %}
9 | {% endblock %}
10 |
11 |
--------------------------------------------------------------------------------
/animations/animation0.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
19 |
20 |
21 | Welcome
22 |
23 |
--------------------------------------------------------------------------------
/animations/animation1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
20 |
21 |
22 | Welcome
23 |
24 |
--------------------------------------------------------------------------------
/animations/animation2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
23 |
24 |
25 | Welcome
26 |
27 |
--------------------------------------------------------------------------------
/animations/animation3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
26 |
37 |
38 |
39 |
40 | Welcome
41 |
42 |
--------------------------------------------------------------------------------
/dice/dice0.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
17 |
18 |
19 |
20 |
22 |
23 |
--------------------------------------------------------------------------------
/dice/dice1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
11 |
24 |
25 |
26 |
27 |
29 |
30 |
--------------------------------------------------------------------------------
/dice/dice2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
14 |
34 |
35 |
36 |
37 |
38 |
40 |
41 |
--------------------------------------------------------------------------------
/drawing/circle0.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
--------------------------------------------------------------------------------
/drawing/circle1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
17 |
--------------------------------------------------------------------------------
/drawing/rect.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
18 |
--------------------------------------------------------------------------------
/porj1/html/colors.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Hello!
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/porj1/html/colors2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Hello!
9 |
14 |
15 |
--------------------------------------------------------------------------------
/porj1/html/counter.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 0
9 |
10 |
11 |
--------------------------------------------------------------------------------
/porj1/js/colors.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('DOMContentLoaded', function()
2 | {
3 | document.querySelectorAll(".color-change").forEach(function(button)
4 | {
5 | button.onclick = function() {
6 | document.querySelector("#hello").style.color = button.dataset.color;
7 | }
8 | });
9 | });
10 |
--------------------------------------------------------------------------------
/porj1/js/colors2.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('DOMContentLoaded', () => {
2 | document.querySelectorAll('.color-change').forEach(button => {
3 | button.onclick = () => {
4 | document.querySelector("#hello").style.color = button.dataset.color;
5 | }
6 | });
7 | });
--------------------------------------------------------------------------------
/porj1/js/colors3.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('DOMContentLoaded', () => {
2 | document.querySelector('#color-change').onchange = function() {
3 | document.querySelector("#hello").style.color = this.value;
4 | }
5 | });
--------------------------------------------------------------------------------
/porj1/js/counter.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('DOMContentLoaded', function()
2 | {
3 | document.querySelector('button').onclick = count;
4 | });
5 |
6 | let counter = 0;
7 | function count() {
8 | counter++;
9 | document.querySelector("#counter").innerHTML = counter;
10 |
11 | if(counter % 10 === 0)
12 | alert(`Counter is at ${counter}`);
13 | }
--------------------------------------------------------------------------------
/posts0/application.py:
--------------------------------------------------------------------------------
1 | import time
2 | from flask import Flask, render_template, request, jsonify
3 |
4 | app = Flask(__name__)
5 |
6 | @app.route("/")
7 | def index():
8 | return render_template("index.html")
9 |
10 | @app.route('/posts', methods=['POST'])
11 | def posts():
12 | # Get start and end point for posts generate.
13 | start = int(request.form.get('start') or 0)
14 | end = int(request.form.get('end') or (start + 9))
15 |
16 | # Generate list of posts.
17 | data = []
18 | for i in range(start, end +1):
19 | data.append(f"Post #{i}")
20 |
21 | time.sleep(0.5);
22 | return jsonify(data)
23 |
--------------------------------------------------------------------------------
/posts0/static/index.js:
--------------------------------------------------------------------------------
1 | // Start with first post
2 | let counter = 1;
3 | const quantity = 20;
4 |
5 | // When DOM load, render the first 20 posts.
6 | document.addEventListener("DOMContentLoaded", load);
7 |
8 | // If scrolled to bottom, load the next 20 posts.
9 | window.onscroll = () => {
10 | if (window.innerHeight + window.scrollY >= document.body.offsetHeight)
11 | load();
12 | }
13 |
14 | // Load next set of posts
15 | function load() {
16 | // Set start and end post
17 | const start = counter;
18 | const end = start + quantity -1;
19 | counter = end +1;
20 |
21 | // Open new request to get new posts.
22 | const request = new XMLHttpRequest();
23 | request.open('POST', '/posts');
24 | request.onload = () => {
25 | const data = JSON.parse(request.responseText);
26 | data.forEach(add_post);
27 | }
28 |
29 | // Add start and end points to request data.
30 | const data = new FormData();
31 | data.append('start', start);
32 | data.append('end', end);
33 |
34 | request.send(data);
35 |
36 | }
37 |
38 | function add_post(contents) {
39 | // Create new post
40 | const post = document.createElement('div');
41 | post.className = 'post';
42 | post.innerHTML = contents;
43 |
44 | // Add post to DOM.
45 | document.querySelector('#posts').append(post);
46 | }
47 |
48 |
--------------------------------------------------------------------------------
/posts0/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/posts0/templates/layout.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {% block title%} {% endblock %}
4 |
5 |
6 |
7 | {% block body %}
8 | {% endblock %}
9 |
10 |
--------------------------------------------------------------------------------
/posts1/application.py:
--------------------------------------------------------------------------------
1 | import time
2 | from flask import Flask, render_template, request, jsonify
3 |
4 | app = Flask(__name__)
5 |
6 | @app.route("/")
7 | def index():
8 | return render_template("index.html")
9 |
10 | @app.route('/posts', methods=['POST'])
11 | def posts():
12 | # Get start and end point for posts generate.
13 | start = int(request.form.get('start') or 0)
14 | end = int(request.form.get('end') or (start + 9))
15 |
16 | # Generate list of posts.
17 | data = []
18 | for i in range(start, end +1):
19 | data.append(f"Post #{i}")
20 |
21 | time.sleep(0.5)
22 | return jsonify(data)
23 |
--------------------------------------------------------------------------------
/posts1/static/index.js:
--------------------------------------------------------------------------------
1 | // Start with first post
2 | let counter = 1;
3 | const quantity = 20;
4 |
5 | // When DOM load, render the first 20 posts.
6 | document.addEventListener("DOMContentLoaded", load);
7 |
8 | // If scrolled to bottom, load the next 20 posts.
9 | window.onscroll = () => {
10 | if (window.innerHeight + window.scrollY >= document.body.offsetHeight)
11 | load();
12 | }
13 |
14 | // Load next set of posts
15 | function load() {
16 | // Set start and end post
17 | const start = counter;
18 | const end = start + quantity -1;
19 | counter = end +1;
20 |
21 | // Open new request to get new posts.
22 | const request = new XMLHttpRequest();
23 | request.open('POST', '/posts');
24 | request.onload = () => {
25 | const data = JSON.parse(request.responseText);
26 | data.forEach(add_post);
27 | }
28 |
29 | // Add start and end points to request data.
30 | const data = new FormData();
31 | data.append('start', start);
32 | data.append('end', end);
33 |
34 | request.send(data);
35 |
36 | }
37 |
38 | function add_post(contents) {
39 | // Create new post
40 | const post = document.createElement('div');
41 | post.className = 'post';
42 | post.innerHTML = contents;
43 |
44 | // Add button to hide posts.
45 | const hide = document.createElement('button');
46 | hide.className = 'hide';
47 | hide.innerHTML = 'Hide';
48 | post.append(hide);
49 |
50 | hide.onclick = function() {
51 | this.parentElement.remove();
52 | }
53 | // Add post to DOM.
54 | document.querySelector('#posts').append(post);
55 | }
--------------------------------------------------------------------------------
/posts1/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/posts1/templates/layout.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {% block title%} {% endblock %}
4 |
5 |
6 |
7 | {% block body %}
8 | {% endblock %}
9 |
10 |
--------------------------------------------------------------------------------
/posts2/application.py:
--------------------------------------------------------------------------------
1 | import time
2 | from flask import Flask, render_template, request, jsonify
3 |
4 | app = Flask(__name__)
5 |
6 | @app.route("/")
7 | def index():
8 | return render_template("index.html")
9 |
10 | @app.route('/posts', methods=['POST'])
11 | def posts():
12 | # Get start and end point for posts generate.
13 | start = int(request.form.get('start') or 0)
14 | end = int(request.form.get('end') or (start + 9))
15 |
16 | # Generate list of posts.
17 | data = []
18 | for i in range(start, end +1):
19 | data.append(f"Post #{i}")
20 |
21 | time.sleep(0.5);
22 | return jsonify(data)
23 |
--------------------------------------------------------------------------------
/posts2/static/index.js:
--------------------------------------------------------------------------------
1 | // Start with first post
2 | let counter = 1;
3 | const quantity = 20;
4 |
5 | // When DOM load, render the first 20 posts.
6 | document.addEventListener("DOMContentLoaded", load);
7 |
8 | // If scrolled to bottom, load the next 20 posts.
9 | window.onscroll = () => {
10 | if (window.innerHeight + window.scrollY >= document.body.offsetHeight)
11 | load();
12 | }
13 |
14 | // Load next set of posts
15 | function load() {
16 | // Set start and end post
17 | const start = counter;
18 | const end = start + quantity -1;
19 | counter = end +1;
20 |
21 | // Open new request to get new posts.
22 | const request = new XMLHttpRequest();
23 | request.open('POST', '/posts');
24 | request.onload = () => {
25 | const data = JSON.parse(request.responseText);
26 | data.forEach(add_post);
27 | }
28 |
29 | // Add start and end points to request data.
30 | const data = new FormData();
31 | data.append('start', start);
32 | data.append('end', end);
33 |
34 | request.send(data);
35 |
36 | }
37 | const post_template = Handlebars.compile(document.querySelector('#post').innerHTML);
38 | function add_post(contents) {
39 | // Create new post
40 | const post = post_template({'contents' : contents})
41 |
42 | // Add post to DOM.
43 | document.querySelector('#posts').innerHTML += post;
44 | }
45 |
46 | document.addEventListener('click', event => {
47 | const element = event.target;
48 | if(element.className === 'hide')
49 | element.parentElement.remove();
50 | });
--------------------------------------------------------------------------------
/posts2/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
13 |
14 |
15 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/posts2/templates/layout.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {% block title%} {% endblock %}
4 |
5 |
6 |
7 | {% block body %}
8 | {% endblock %}
9 |
10 |
--------------------------------------------------------------------------------
/posts3/application.py:
--------------------------------------------------------------------------------
1 | import time
2 | from flask import Flask, render_template, request, jsonify
3 |
4 | app = Flask(__name__)
5 |
6 | @app.route("/")
7 | def index():
8 | return render_template("index.html")
9 |
10 | @app.route('/posts', methods=['POST'])
11 | def posts():
12 | # Get start and end point for posts generate.
13 | start = int(request.form.get('start') or 0)
14 | end = int(request.form.get('end') or (start + 9))
15 |
16 | # Generate list of posts.
17 | data = []
18 | for i in range(start, end +1):
19 | data.append(f"Post #{i}")
20 |
21 | time.sleep(0.5)
22 | return jsonify(data)
23 |
--------------------------------------------------------------------------------
/posts3/static/index.js:
--------------------------------------------------------------------------------
1 | // Start with first post
2 | let counter = 1;
3 | const quantity = 20;
4 |
5 | // When DOM load, render the first 20 posts.
6 | document.addEventListener("DOMContentLoaded", load);
7 |
8 | // If scrolled to bottom, load the next 20 posts.
9 | window.onscroll = () => {
10 | if (window.innerHeight + window.scrollY >= document.body.offsetHeight)
11 | load();
12 | }
13 |
14 | document.addEventListener('click', event => {
15 | const element = event.target;
16 | if(element.className === 'hide')
17 | {
18 | element.parentElement.style.animationPlayState = 'running';
19 | element.parentElement.addEventListener('animationend', () => {
20 | element.parentElement.remove();
21 | });
22 | }
23 | });
24 |
25 | // Load next set of posts
26 | function load() {
27 | // Set start and end post
28 | const start = counter;
29 | const end = start + quantity -1;
30 | counter = end +1;
31 |
32 | // Open new request to get new posts.
33 | const request = new XMLHttpRequest();
34 | request.open('POST', '/posts');
35 | request.onload = () => {
36 | const data = JSON.parse(request.responseText);
37 | data.forEach(add_post);
38 | }
39 |
40 | // Add start and end points to request data.
41 | const data = new FormData();
42 | data.append('start', start);
43 | data.append('end', end);
44 |
45 | request.send(data);
46 | }
47 |
48 | const post_template = Handlebars.compile(document.querySelector('#post').innerHTML);
49 | function add_post(contents) {
50 | // Create new post
51 | console.log(post_template);
52 | const post = post_template({'contents' : contents})
53 |
54 | // Add post to DOM.
55 | document.querySelector('#posts').innerHTML += post;
56 | }
--------------------------------------------------------------------------------
/posts3/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
13 |
14 |
15 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/posts4/application.py:
--------------------------------------------------------------------------------
1 | import time
2 | from flask import Flask, render_template, request, jsonify
3 |
4 | app = Flask(__name__)
5 |
6 | @app.route("/")
7 | def index():
8 | return render_template("index.html")
9 |
10 | @app.route('/posts', methods=['POST'])
11 | def posts():
12 | # Get start and end point for posts generate.
13 | start = int(request.form.get('start') or 0)
14 | end = int(request.form.get('end') or (start + 9))
15 |
16 | # Generate list of posts.
17 | data = []
18 | for i in range(start, end +1):
19 | data.append(f"Post #{i}")
20 |
21 | time.sleep(0.5)
22 | return jsonify(data)
23 |
--------------------------------------------------------------------------------
/posts4/static/index.js:
--------------------------------------------------------------------------------
1 | // Start with first post
2 | let counter = 1;
3 | const quantity = 20;
4 |
5 | // When DOM load, render the first 20 posts.
6 | document.addEventListener("DOMContentLoaded", load);
7 |
8 | // If scrolled to bottom, load the next 20 posts.
9 | window.onscroll = () => {
10 | if (window.innerHeight + window.scrollY >= document.body.offsetHeight)
11 | load();
12 | }
13 |
14 | document.addEventListener('click', event => {
15 | const element = event.target;
16 | if(element.className === 'hide')
17 | {
18 | element.parentElement.style.animationPlayState = 'running';
19 | element.parentElement.addEventListener('animationend', () => {
20 | element.parentElement.remove();
21 | });
22 | }
23 | });
24 |
25 | // Load next set of posts
26 | function load() {
27 | // Set start and end post
28 | const start = counter;
29 | const end = start + quantity -1;
30 | counter = end +1;
31 |
32 | // Open new request to get new posts.
33 | const request = new XMLHttpRequest();
34 | request.open('POST', '/posts');
35 | request.onload = () => {
36 | const data = JSON.parse(request.responseText);
37 | data.forEach(add_post);
38 | }
39 |
40 | // Add start and end points to request data.
41 | const data = new FormData();
42 | data.append('start', start);
43 | data.append('end', end);
44 |
45 | request.send(data);
46 | }
47 |
48 | const post_template = Handlebars.compile(document.querySelector('#post').innerHTML);
49 | function add_post(contents) {
50 | // Create new post
51 | console.log(post_template);
52 | const post = post_template({'contents' : contents})
53 |
54 | // Add post to DOM.
55 | document.querySelector('#posts').innerHTML += post;
56 | }
--------------------------------------------------------------------------------
/posts4/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
13 |
14 |
15 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/proj0/counter.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
19 |
20 |
21 |
22 | 0
23 |
24 |
25 |
--------------------------------------------------------------------------------
/scroll/scroll0.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
16 |
17 |
18 |
19 |
1
20 |
2
21 |
3
22 |
4
23 |
5
24 |
6
25 |
7
26 |
8
27 |
9
28 |
10
29 |
11
30 |
12
31 |
13
32 |
14
33 |
15
34 |
16
35 |
17
36 |
18
37 |
19
38 |
20
39 |
21
40 |
22
41 |
23
42 |
24
43 |
25
44 |
26
45 |
27
46 |
28
47 |
29
48 |
30
49 |
31
50 |
32
51 |
33
52 |
34
53 |
35
54 |
36
55 |
37
56 |
38
57 |
39
58 |
40
59 |
41
60 |
42
61 |
43
62 |
44
63 |
45
64 |
46
65 |
47
66 |
48
67 |
49
68 |
50
69 |
51
70 |
52
71 |
53
72 |
54
73 |
55
74 |
56
75 |
57
76 |
58
77 |
59
78 |
60
79 |
61
80 |
62
81 |
63
82 |
64
83 |
65
84 |
66
85 |
67
86 |
68
87 |
69
88 |
70
89 |
71
90 |
72
91 |
73
92 |
74
93 |
75
94 |
76
95 |
77
96 |
78
97 |
79
98 |
80
99 |
81
100 |
82
101 |
83
102 |
84
103 |
85
104 |
86
105 |
87
106 |
88
107 |
89
108 |
90
109 |
91
110 |
92
111 |
93
112 |
94
113 |
95
114 |
96
115 |
97
116 |
98
117 |
99
118 |
100
119 |
120 |
121 |
--------------------------------------------------------------------------------
/singlepage0/application.py:
--------------------------------------------------------------------------------
1 | from flask import Flask, render_template, request, jsonify
2 |
3 | app = Flask(__name__)
4 |
5 | @app.route("/")
6 | def index():
7 | return render_template("index.html")
8 |
9 | texts = ["First text on single page", "Second text on single page", "Third text on single page"]
10 |
11 | @app.route("/first")
12 | def first():
13 | return texts[0]
14 |
15 | @app.route("/second")
16 | def second():
17 | return texts[1]
18 |
19 | @app.route("/third")
20 | def third():
21 | return texts[2]
22 |
--------------------------------------------------------------------------------
/singlepage0/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
29 |
30 |
31 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/singlepage0/templates/layout.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {% block title%} {% endblock %}
4 |
5 |
6 |
7 | {% block body %}
8 | {% endblock %}
9 |
10 |
--------------------------------------------------------------------------------
/singlepage1/application.py:
--------------------------------------------------------------------------------
1 | from flask import Flask, render_template, request, jsonify
2 |
3 | app = Flask(__name__)
4 |
5 | @app.route("/")
6 | def index():
7 | return render_template("index.html")
8 |
9 | texts = ["First text on single page", "Second text on single page", "Third text on single page"]
10 |
11 | @app.route("/first")
12 | def first():
13 | return texts[0]
14 |
15 | @app.route("/second")
16 | def second():
17 | return texts[1]
18 |
19 | @app.route("/third")
20 | def third():
21 | return texts[2]
22 |
--------------------------------------------------------------------------------
/singlepage1/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
39 |
40 |
41 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/singlepage1/templates/layout.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {% block title%} {% endblock %}
4 |
5 |
6 |
7 | {% block body %}
8 | {% endblock %}
9 |
10 |
--------------------------------------------------------------------------------
/storage/interval.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/storage/storage0.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
22 |
23 |
24 |
25 | 0
26 |
27 |
28 |
--------------------------------------------------------------------------------
/tasks/html/task1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
--------------------------------------------------------------------------------
/tasks/html/task2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Tasks
9 |
13 |
14 |
--------------------------------------------------------------------------------
/tasks/js/task1.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('DOMContentLoaded', () =>
2 | {
3 | document.querySelector("#new-task").onsubmit = () =>
4 | {
5 | // Create new item for the list
6 | const li = document.createElement('li');
7 | li.innerHTML = document.querySelector("#task").value;
8 |
9 | // Add the new item to the task list
10 | document.querySelector("#new-task").append(li);
11 |
12 | // Reset the input value
13 | document.querySelector("#task").value = '';
14 |
15 | // Prevent the from from submitting
16 | return false;
17 | };
18 | });
--------------------------------------------------------------------------------
/tasks/js/task2.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('DOMContentLoaded', () =>
2 | {
3 | // Disable the submit button
4 | document.querySelector("#submit").disabled = true;
5 |
6 | document.querySelector("#task").onkeyup = () =>
7 | {
8 | // Enable the submit button
9 | document.querySelector("#submit").disabled = false;
10 | }
11 |
12 | document.querySelector("#new-task").onsubmit = () =>
13 | {
14 | // Create new item for the list
15 | const li = document.createElement('li');
16 | li.innerHTML = document.querySelector("#task").value;
17 |
18 | // Add the new item to the task list
19 | document.querySelector("#new-task").append(li);
20 |
21 | // Reset the input value
22 | document.querySelector("#task").value = '';
23 |
24 | // Disable the submit button again
25 | document.querySelector("#submit").disabled = true;
26 |
27 | // Prevent the from from submitting
28 | return false;
29 | };
30 | });
--------------------------------------------------------------------------------
/votes0/application.py:
--------------------------------------------------------------------------------
1 | import os
2 | import requests
3 |
4 | from flask import Flask, render_template, request, jsonify
5 | from flask_socketio import SocketIO, emit
6 |
7 | app = Flask(__name__)
8 | app.config['SECRET_KEY'] = os.getenv('SOCKET_SECRET_KEY')
9 | socketio = SocketIO(app,cors_allowed_origins="*")
10 |
11 | @app.route("/")
12 | def index():
13 | return render_template("index.html")
14 |
15 | @socketio.on('submit vote')
16 | def vote(data):
17 | selection = data['selection']
18 | emit("announce vote", {'selection' : selection}, broadcast = True)
--------------------------------------------------------------------------------
/votes0/static/index.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('DOMContentLoaded', () =>
2 | {
3 | var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
4 |
5 | // When connected, configure buttons
6 | socket.on('connect', () => {
7 |
8 | // Each button should emit a 'submit vote' event
9 | document.querySelectorAll('button').forEach(button => {
10 | button.onclick = () => {
11 | const selection = button.dataset.vote;
12 | socket.emit('submit vote', {'selection':selection});
13 | };
14 | });
15 | });
16 |
17 | socket.on('announce vote', data => {
18 | const li = document.createElement('li');
19 | li.innerHTML = `Vote recorded: ${data.selection}`;
20 | document.querySelector("#votes").append(li);
21 | })
22 | });
--------------------------------------------------------------------------------
/votes0/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Vote
7 |
8 |
9 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/votes0/templates/layout.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {% block title%} {% endblock %}
4 |
5 |
6 |
7 |
8 | {% block body %}
9 | {% endblock %}
10 |
11 |
--------------------------------------------------------------------------------
/votes1/application.py:
--------------------------------------------------------------------------------
1 | import os
2 | import requests
3 |
4 | from flask import Flask, render_template, request, jsonify
5 | from flask_socketio import SocketIO, emit
6 |
7 | app = Flask(__name__)
8 | app.config['SECRET_KEY'] = os.getenv('SOCKET_SECRET_KEY')
9 | socketio = SocketIO(app,cors_allowed_origins="*")
10 |
11 | votes = {'yes' : 0, 'no' : 0, 'maybe' : 0}
12 |
13 | @app.route("/")
14 | def index():
15 | return render_template("index.html", votes=votes)
16 |
17 | @socketio.on('submit vote')
18 | def vote(data):
19 | selection = data['selection']
20 | votes[selection] += 1
21 | emit("votes total", votes, broadcast = True)
--------------------------------------------------------------------------------
/votes1/static/index.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('DOMContentLoaded', () =>
2 | {
3 | // Initilize the socket
4 | var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
5 |
6 | // When connected, configure buttons
7 | socket.on('connect', () => {
8 |
9 | // Each button should emit a 'submit vote' event
10 | document.querySelectorAll('button').forEach(button => {
11 | button.onclick = () => {
12 | const selection = button.dataset.vote;
13 | socket.emit('submit vote', {'selection':selection});
14 | };
15 | });
16 | });
17 |
18 | socket.on('votes total', function(data)
19 | {
20 | // Getting this error: Uncaught TypeError: Cannot set property 'innerHTML' of null
21 | document.querySelector("#yes").innerHTML = data.yes;
22 | document.querySelector("#no").innerHTML = data.no;
23 | document.querySelector("#maybe").innerHTML = data.maybe;
24 | });
25 |
26 | return false;
27 | });
--------------------------------------------------------------------------------
/votes1/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Vote
7 |
8 |
9 | Yes Votes : {{ votes['yes'] }}
10 | No Votes : {{ votes['no'] }}
11 | Maybe Votes : {{ votes['maybe'] }}
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/votes1/templates/layout.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {% block title%} {% endblock %}
4 |
5 |
6 |
7 |
8 | {% block body %}
9 | {% endblock %}
10 |
11 |
--------------------------------------------------------------------------------