houseplant-hackathon/public/client.js
Glitch (hello-express) 406fcf36d0 🍕🌟 Checkpoint
./views/index.html:96831/368
./public/style.css:96831/36
./server.js:96831/437
2018-03-19 21:14:04 +00:00

68 lines
1.7 KiB
JavaScript

// 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) {
$('<li></li>').text(dream).appendTo('ul#dreams');
});
});
$('form').submit(function(event) {
event.preventDefault();
var dream = $('input').val();
$.post('/dreams?' + $.param({dream: dream}), function() {
$('<li></li>').text(dream).appendTo('ul#dreams');
$('input').val('');
$('input').focus();
});
});
});
*/