diff --git a/public/client.js b/public/client.js index 58c3e44..d23fd86 100644 --- a/public/client.js +++ b/public/client.js @@ -1,9 +1,50 @@ // client-side js // run by the browser each time your view template is loaded -// by default, you've got jQuery, -// add other scripts at the bottom of index.html +(function(){ + console.log('hello world :o'); + + // our default array of dreams + const dreams = [ + 'Find and count some sheep', + 'Climb a really tall mountain', + 'Wash the dishes' + ]; + + // define variables that reference elements on our page + const dreamsList = document.getElementById('dreams'); + const dreamsForm = document.forms[0]; + const dreamInput = dreamsForm.elements['dream']; + + // a helper function that creates a list item for a given dream + const appendNewDream = function(dream) { + const newListItem = document.createElement('li'); + newListItem.innerHTML = dream; + dreamsList.appendChild(newListItem); + } + + // iterate through every dream and add it to our page + dreams.forEach( function(dream) { + appendNewDream(dream); + }); + + // listen for the form to be submitted and add a new dream when it is + dreamsForm.onsubmit = function(event) { + // stop our form submission from refreshing the page + event.preventDefault(); + + // get dream value and add it to the list + dreams.push(dreamInput.value); + appendNewDream(dreamInput.value); + + // reset form + dreamInput.value = ''; + dreamInput.focus(); + }; + +})() +/* $(function() { console.log('hello world :o'); @@ -24,3 +65,4 @@ $(function() { }); }); +*/ \ No newline at end of file diff --git a/public/style.css b/public/style.css index 4d29ffc..38c55f6 100644 --- a/public/style.css +++ b/public/style.css @@ -69,7 +69,3 @@ footer { padding-top: 25px; border-top: 1px solid lightgrey; } - -footer > a { - color: #BBBBBB; -} diff --git a/public/vanilla-client.js b/public/vanilla-client.js deleted file mode 100644 index d23fd86..0000000 --- a/public/vanilla-client.js +++ /dev/null @@ -1,68 +0,0 @@ -// client-side js -// run by the browser each time your view template is loaded - -(function(){ - console.log('hello world :o'); - - // our default array of dreams - const dreams = [ - 'Find and count some sheep', - 'Climb a really tall mountain', - 'Wash the dishes' - ]; - - // define variables that reference elements on our page - const dreamsList = document.getElementById('dreams'); - const dreamsForm = document.forms[0]; - const dreamInput = dreamsForm.elements['dream']; - - // a helper function that creates a list item for a given dream - const appendNewDream = function(dream) { - const newListItem = document.createElement('li'); - newListItem.innerHTML = dream; - dreamsList.appendChild(newListItem); - } - - // iterate through every dream and add it to our page - dreams.forEach( function(dream) { - appendNewDream(dream); - }); - - // listen for the form to be submitted and add a new dream when it is - dreamsForm.onsubmit = function(event) { - // stop our form submission from refreshing the page - event.preventDefault(); - - // get dream value and add it to the list - dreams.push(dreamInput.value); - appendNewDream(dreamInput.value); - - // reset form - dreamInput.value = ''; - dreamInput.focus(); - }; - -})() - -/* -$(function() { - console.log('hello world :o'); - - $.get('/dreams', function(dreams) { - dreams.forEach(function(dream) { - $('
  • ').text(dream).appendTo('ul#dreams'); - }); - }); - - $('form').submit(function(event) { - event.preventDefault(); - var dream = $('input').val(); - $.post('/dreams?' + $.param({dream: dream}), function() { - $('
  • ').text(dream).appendTo('ul#dreams'); - $('input').val(''); - $('input').focus(); - }); - }); - -}); -*/ \ No newline at end of file diff --git a/server.js b/server.js index 1102f98..22e1ed5 100644 --- a/server.js +++ b/server.js @@ -16,23 +16,6 @@ app.get("/", function (request, response) { response.sendFile(__dirname + '/views/index.html'); }); -app.get("/dreams", function (request, response) { - response.send(dreams); -}); - -// could also use the POST body instead of query string: http://expressjs.com/en/api.html#req.body -app.post("/dreams", function (request, response) { - dreams.push(request.query.dream); - response.sendStatus(200); -}); - -// Simple in-memory store for now -var dreams = [ - "Find and count some sheep", - "Climb a really tall mountain", - "Wash the dishes" -]; - // listen for requests :) var listener = app.listen(process.env.PORT, function () { console.log('Your app is listening on port ' + listener.address().port); diff --git a/views/index.html b/views/index.html index 5adbb14..21a5b2a 100644 --- a/views/index.html +++ b/views/index.html @@ -16,15 +16,9 @@ - - - - + - - - - +
    @@ -40,21 +34,21 @@
    -
    - +
    - - + + + +