AverageMarcus/buzzers
1
0
Fork 0
Code Issues Pull Requests Releases Activity

🐥😎 Checkpoint

Browse Source 
./views/index.html:96831/760
./public/vanilla-client.js:96831/1419
./public/style.css:96831/47
This commit is contained in:
Glitch (hello-express) 2018-03-19 21:03:02 +00:00
parent c971f42005
commit 12f2f5e223
3 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/style.css
View File

@ -73,7 +73,3 @@ footer {
footer > a { footer > a {
color: #BBBBBB; color: #BBBBBB;
} }
.nicejob {
text-decoration: line-through;
}

21
public/vanilla-client.js
View File

@ -4,25 +4,42 @@
(function(){ (function(){
console.log('hello world :o'); console.log('hello world :o');
// 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
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'];
dreams.forEach( function(dream) { // a helper function that creates a list item for a given 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
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) { dreamsForm.onsubmit = function(event) {
// stop our form submission from refreshing the page
event.preventDefault(); event.preventDefault();
const dream = // get dream value and add it to the list
dreams.push(dreamInput.value);
appendNewDream(dreamInput.value);
// reset form
dreamInput.value = '';
dreamInput.focus();
}; };
})() })()

26
views/index.html
View File

@ -16,7 +16,15 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style.css">
<script src="/vanilla-client.js" defer></script>
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/styles.css">
<!-- import the webpage's javascript file -->
<script src="/vanilla-client.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
@ -27,15 +35,15 @@
<main> <main>
<p class="bold">Oh hi,</p> <p class="bold">Oh hi,</p>
<p>Tell me your hopes and dreams:</p> <p>Tell me your hopes and dreams:</p>
<form> <form>
<input name="dream" type="text" maxlength="100" placeholder="Dreams!" aria-labelledby="submit-dream">
<label for="dream-input"> <button type="submit" id="submit-dream">Submit Dream</button>
<input id="dream-input" type="text" maxlength="100" placeholder="Dreams!">
</label>
<button type="submit">Submit</button>
</form> </form>
<section class="dreams"> <section class="dreams">
<ul id="dreams"> <ul id="dreams">
</ul> </ul>
@ -43,15 +51,11 @@
</main> </main>
<footer> <footer>
<a href="https://glitch.com"> Made with <a href="https://glitch.com">Glitch</a>
Remix this in Glitch
</a>
</footer> </footer>
<script src="/vanilla-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>