├── .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 |
10 | 11 | 12 |
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 | 5 | 6 | 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 |
9 | 10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /tasks/html/task2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

Tasks

9 |
10 | 11 | 12 |
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 | --------------------------------------------------------------------------------