🚴🏯 Checkpoint
./views/index.html:334152/235 ./public/client.js:334152/160
This commit is contained in:
parent
ecb466960c
commit
3b18fda59c
|
@ -1,45 +1,42 @@
|
|||
// 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();
|
||||
};
|
||||
|
||||
})()
|
||||
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();
|
||||
};
|
||||
|
|
|
@ -19,6 +19,9 @@
|
|||
|
||||
<!-- import the webpage's stylesheet -->
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
|
||||
<!-- import the webpage's client-side javascript file -->
|
||||
<script src="/client.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
@ -45,10 +48,6 @@
|
|||
<footer>
|
||||
Made with <a href="https://glitch.com">Glitch</a>!
|
||||
</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
|
||||
to make it easier for folks to view source and remix -->
|
||||
|
|
Loading…
Reference in New Issue