jason/houseplant-hackathon
jason/houseplant-hackathon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🚴🏯 Checkpoint

Browse Source 
./views/index.html:334152/235
./public/client.js:334152/160
This commit is contained in:
Glitch (hello-express) 2018-06-25 18:47:57 +00:00
parent ecb466960c
commit 3b18fda59c
2 changed files with 42 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
public/client.js
View File

@ -1,45 +1,42 @@
// client-side js // client-side js
// run by the browser each time your view template is loaded // run by the browser each time your view template is loaded
(function(){ console.log('hello world :o');
console.log('hello world :o');
// our default array of dreams // our default array of dreams
const dreams = [ const dreams = [
'Find and count some sheep', 'Find and count some sheep',
'Climb a really tall mountain', 'Climb a really tall mountain',
'Wash the dishes' 'Wash the dishes'
]; ];
// define variables that reference elements on our page // define variables that reference elements on our page
const dreamsList = document.getElementById('dreams'); const dreamsList = document.getElementById('dreams');
const dreamsForm = document.forms[0]; const dreamsForm = document.forms[0];
const dreamInput = dreamsForm.elements['dream']; const dreamInput = dreamsForm.elements['dream'];
// a helper function that creates a list item for a given dream // a helper function that creates a list item for a given dream
const appendNewDream = function(dream) { const appendNewDream = function(dream) {
const newListItem = document.createElement('li'); const newListItem = document.createElement('li');
newListItem.innerHTML = dream; newListItem.innerHTML = dream;
dreamsList.appendChild(newListItem); dreamsList.appendChild(newListItem);
} }
// iterate through every dream and add it to our page // iterate through every dream and add it to our page
dreams.forEach( function(dream) { dreams.forEach( function(dream) {
appendNewDream(dream); appendNewDream(dream);
}); });
// listen for the form to be submitted and add a new dream when it is // listen for the form to be submitted and add a new dream when it is
dreamsForm.onsubmit = function(event) { dreamsForm.onsubmit = function(event) {
// stop our form submission from refreshing the page // stop our form submission from refreshing the page
event.preventDefault(); event.preventDefault();
// get dream value and add it to the list // get dream value and add it to the list
dreams.push(dreamInput.value); dreams.push(dreamInput.value);
appendNewDream(dreamInput.value); appendNewDream(dreamInput.value);
// reset form // reset form
dreamInput.value = ''; dreamInput.value = '';
dreamInput.focus(); dreamInput.focus();
}; };
})()

7
views/index.html
View File

@ -19,6 +19,9 @@
<!-- import the webpage's stylesheet --> <!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<!-- import the webpage's client-side javascript file -->
<script src="/client.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
@ -46,10 +49,6 @@
Made with <a href="https://glitch.com">Glitch</a>! Made with <a href="https://glitch.com">Glitch</a>!
</footer> </footer>
<!-- import the webpage's client-side javascript file -->
<script src="/client.js"></script>
<!-- include the Glitch button to show what the webpage is about and <!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix --> to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div> <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>