
Checkpoint
./public/vanilla-client.js:96831/1671 ./public/client.js:96831/210 ./views/index.html:96831/514
Showing
2 changed files
with
58 additions
and
6 deletions
public/vanilla-client.js
0 → 100644
1 | // client-side js | ||
2 | // run by the browser each time your view template is loaded | ||
3 | |||
4 | (function(){ | ||
5 | console.log('hello world :o'); | ||
6 | |||
7 | const dreams = [ | ||
8 | 'Find and count some sheep', | ||
9 | 'Climb a really tall mountain', | ||
10 | 'Wash the dishes' | ||
11 | ]; | ||
12 | |||
13 | const dreamsList = document.getElementById('dreams'); | ||
14 | const dreamsForm = document.forms[0]; | ||
15 | |||
16 | dreams.forEach( function(dream) { | ||
17 | const newListItem = document.createElement('li'); | ||
18 | newListItem.innerHTML = dream; | ||
19 | dreamsList.appendChild(newListItem); | ||
20 | }); | ||
21 | |||
22 | dreamsForm.onsubmit = function(event) { | ||
23 | event.preventDefault(); | ||
24 | |||
25 | const dream = | ||
26 | }; | ||
27 | |||
28 | })() | ||
29 | |||
30 | /* | ||
31 | $(function() { | ||
32 | console.log('hello world :o'); | ||
33 | |||
34 | $.get('/dreams', function(dreams) { | ||
35 | dreams.forEach(function(dream) { | ||
36 | $('<li></li>').text(dream).appendTo('ul#dreams'); | ||
37 | }); | ||
38 | }); | ||
39 | |||
40 | $('form').submit(function(event) { | ||
41 | event.preventDefault(); | ||
42 | var dream = $('input').val(); | ||
43 | $.post('/dreams?' + $.param({dream: dream}), function() { | ||
44 | $('<li></li>').text(dream).appendTo('ul#dreams'); | ||
45 | $('input').val(''); | ||
46 | $('input').focus(); | ||
47 | }); | ||
48 | }); | ||
49 | |||
50 | }); | ||
51 | */ | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
... | @@ -29,7 +29,11 @@ | ... | @@ -29,7 +29,11 @@ |
29 | <p class="bold">Oh hi,</p> | 29 | <p class="bold">Oh hi,</p> |
30 | <p>Tell me your hopes and dreams:</p> | 30 | <p>Tell me your hopes and dreams:</p> |
31 | <form> | 31 | <form> |
32 | <input type="text" maxlength="100" placeholder="Dreams!"> | 32 | |
33 | <label for="dream-input"> | ||
34 | <input id="dream-input" type="text" maxlength="100" placeholder="Dreams!"> | ||
35 | </label> | ||
36 | |||
33 | <button type="submit">Submit</button> | 37 | <button type="submit">Submit</button> |
34 | </form> | 38 | </form> |
35 | <section class="dreams"> | 39 | <section class="dreams"> |
... | @@ -44,11 +48,8 @@ | ... | @@ -44,11 +48,8 @@ |
44 | </a> | 48 | </a> |
45 | </footer> | 49 | </footer> |
46 | 50 | ||
47 | <!-- Your web-app is https, so your scripts need to be too --> | 51 | |
48 | <script src="https://code.jquery.com/jquery-2.2.1.min.js" | 52 | <script src="/vanilla-client.js"></script> |
49 | integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" | ||
50 | crossorigin="anonymous"></script> | ||
51 | <script src="/client.js"></script> | ||
52 | 53 | ||
53 | 54 | ||
54 | <!-- include the Glitch button to show what the webpage is about and | 55 | <!-- include the Glitch button to show what the webpage is about and | ... | ... |
-
Please register or sign in to post a comment