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

🍕🌟 Checkpoint 

./views/index.html:96831/368
./public/style.css:96831/36
./server.js:96831/437
This commit is contained in:
Glitch (hello-express) 2018-03-19 21:14:04 +00:00
parent 12f2f5e223
commit 406fcf36d0
5 changed files with 52 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
public/client.js
View File

@ -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() {
});
});
*/

4
public/style.css
View File

@ -69,7 +69,3 @@ footer {
padding-top: 25px;
border-top: 1px solid lightgrey;
}
footer > a {
color: #BBBBBB;
}

68
public/vanilla-client.js
View File

@ -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) {
$('<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();
});
});
});
*/

17
server.js
View File

@ -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);

22
views/index.html
View File

@ -16,15 +16,9 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
@ -40,21 +34,21 @@
<form>
<input name="dream" type="text" maxlength="100" placeholder="Dreams!" aria-labelledby="submit-dream">
<button type="submit" id="submit-dream">Submit Dream</button>
</form>
<section class="dreams">
<ul id="dreams">
</ul>
<ul id="dreams"></ul>
</section>
</main>
<footer>
Made with <a href="https://glitch.com">Glitch</a>
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 -->