mirror of
https://github.com/Lomanic/presence-button-web
synced 2024-11-26 07:27:30 +00:00
🏢🕌 Checkpoint
./public/vanilla-client.js:96831/1671 ./public/client.js:96831/210 ./views/index.html:96831/514
This commit is contained in:
parent
670b2731c5
commit
c971f42005
51
public/vanilla-client.js
Normal file
51
public/vanilla-client.js
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
// client-side js
|
||||||
|
// run by the browser each time your view template is loaded
|
||||||
|
|
||||||
|
(function(){
|
||||||
|
console.log('hello world :o');
|
||||||
|
|
||||||
|
const dreams = [
|
||||||
|
'Find and count some sheep',
|
||||||
|
'Climb a really tall mountain',
|
||||||
|
'Wash the dishes'
|
||||||
|
];
|
||||||
|
|
||||||
|
const dreamsList = document.getElementById('dreams');
|
||||||
|
const dreamsForm = document.forms[0];
|
||||||
|
|
||||||
|
dreams.forEach( function(dream) {
|
||||||
|
const newListItem = document.createElement('li');
|
||||||
|
newListItem.innerHTML = dream;
|
||||||
|
dreamsList.appendChild(newListItem);
|
||||||
|
});
|
||||||
|
|
||||||
|
dreamsForm.onsubmit = function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const dream =
|
||||||
|
};
|
||||||
|
|
||||||
|
})()
|
||||||
|
|
||||||
|
/*
|
||||||
|
$(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();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
*/
|
@ -29,7 +29,11 @@
|
|||||||
<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 type="text" maxlength="100" placeholder="Dreams!">
|
|
||||||
|
<label for="dream-input">
|
||||||
|
<input id="dream-input" type="text" maxlength="100" placeholder="Dreams!">
|
||||||
|
</label>
|
||||||
|
|
||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
<section class="dreams">
|
<section class="dreams">
|
||||||
@ -44,11 +48,8 @@
|
|||||||
</a>
|
</a>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<!-- Your web-app is https, so your scripts need to be too -->
|
|
||||||
<script src="https://code.jquery.com/jquery-2.2.1.min.js"
|
<script src="/vanilla-client.js"></script>
|
||||||
integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
|
|
||||||
crossorigin="anonymous"></script>
|
|
||||||
<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
|
||||||
|
Loading…
Reference in New Issue
Block a user