4828c671 by Lorenzo Mangani

cleanup

1 parent 90bb8761
1 {"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"}
2 {"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"}
3 {"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"}
4 {"uuid":"adSBq97hhhpFNUna","deleted":true}
5 {"uuid":"adSBq97hhhpFNUnb","deleted":true}
6 {"uuid":"adSBq97hhhpFNUnc","deleted":true}
1 {"zero1\u001bname":{"":{":":"Jack",">":1587040426899}}}
...\ No newline at end of file ...\ No newline at end of file
1 {"!":{"":1}}
...\ No newline at end of file ...\ No newline at end of file
1 {"zero2\u001bname":{"":{":":"Jill",">":1587040426901}}}
...\ No newline at end of file ...\ No newline at end of file
1 {"!":{"":1}}
...\ No newline at end of file ...\ No newline at end of file
1 {"zero1\u001bname":{"":{":":"Jack",">":1587040426899}}}
...\ No newline at end of file ...\ No newline at end of file
1 {"!":{"":1}}
...\ No newline at end of file ...\ No newline at end of file
1 {"zero1\u001bname":{"":{":":"Jack",">":1587040426899}}}
...\ No newline at end of file ...\ No newline at end of file
1 {"!":{"":1}}
...\ No newline at end of file ...\ No newline at end of file
1 {"zero1\u001bname":{"":{":":"Jack",">":1587040426899}}}
...\ No newline at end of file ...\ No newline at end of file
1 {"!":{"":1}}
...\ No newline at end of file ...\ No newline at end of file
1 // client-side js, loaded by index.html
2 // run by the browser each time the page is loaded
3
4 console.log("hello world :o");
5
6 // define variables that reference elements on our page
7 const dreamsList = document.getElementById("dreams");
8 const dreamsForm = document.querySelector("form");
9
10 // a helper function that creates a list item for a given dream
11 function appendNewDream(dream) {
12 const newListItem = document.createElement("li");
13 newListItem.innerText = dream;
14 dreamsList.appendChild(newListItem);
15 }
16
17 // fetch the initial list of dreams
18 fetch("/dreams")
19 .then(response => response.json()) // parse the JSON from the server
20 .then(dreams => {
21 // remove the loading text
22 dreamsList.firstElementChild.remove();
23
24 // iterate through every dream and add it to our page
25 dreams.forEach(appendNewDream);
26
27 // listen for the form to be submitted and add a new dream when it is
28 dreamsForm.addEventListener("submit", event => {
29 // stop our form submission from refreshing the page
30 event.preventDefault();
31
32 // get dream value and add it to the list
33 let newDream = dreamsForm.elements.dream.value;
34 dreams.push(newDream);
35 appendNewDream(newDream);
36
37 // reset form
38 dreamsForm.reset();
39 dreamsForm.elements.dream.focus();
40 });
41 });
1 /* this file is loaded by index.html and styles the page */
2
3 * {
4 box-sizing: border-box;
5 }
6
7 body {
8 font-family: sans-serif;
9 margin: 2em 1em;
10 line-height: 1.5em;
11 }
12
13 h1 {
14 font-style: italic;
15 color: #373fff;
16 max-width: calc(100% - 5rem);
17 line-height: 1.1;
18 }
19
20 form {
21 background-color: #eee;
22 display: grid;
23 grid-gap: 1em;
24 padding: 1em;
25 max-width: 40ch;
26 }
27
28 input {
29 border: 1px solid silver;
30 display: block;
31 font-size: 16px;
32 margin-bottom: 10px;
33 padding: 5px;
34 width: 100%;
35 }
36
37 form button {
38 background-color: #bbbbf2;
39 border: 2px solid currentColor;
40 border-radius: .25em;
41 cursor: pointer;
42 font-size: inherit;
43 line-height: 1.4em;
44 padding: 0.25em 1em;
45 max-width: 20ch;
46 }
47
48 form button:hover {
49 background-color: lavender;
50 }
51
52 footer {
53 margin-top: 3em;
54 padding-top: 1.5em;
55 border-top: 1px solid lightgrey;
56 }
1 {"j":{"ack\u001bname":{"":{":":"Jack",">":1587037784462}},"ill\u001bname":{"":{":":"Jill",">":1587037784464.001}}},"zero":{"1\u001bname":{"":{":":"Jack",">":1587040222866}},"2\u001bname":{"":{":":"Jill",">":1587040222868.001}}}}
...\ No newline at end of file ...\ No newline at end of file
1 {"!":{"":1}}
...\ No newline at end of file ...\ No newline at end of file
1 {"zero":{"2\u001bname":{"":{":":"Jill",">":1587040405007.001}},"1\u001bname":{"":{":":"Jack",">":1587040426899}}}}
...\ No newline at end of file ...\ No newline at end of file
1 {"!":{"":1}}
...\ No newline at end of file ...\ No newline at end of file
1 <!-- This is a static file -->
2 <!-- served from your routes in server.js -->
3 <!DOCTYPE html>
4 <html lang="en">
5 <head>
6 <meta charset="utf-8">
7 <title>Welcome to Glitch!</title>
8 <meta http-equiv="X-UA-Compatible" content="IE=edge">
9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <meta name="description" content="A cool thing made with Glitch">
11 <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
12
13 <!-- import the webpage's stylesheet -->
14 <link rel="stylesheet" href="/style.css">
15
16 <!-- import the webpage's client-side javascript file -->
17 <script src="/script.js" defer></script>
18 </head>
19 <body>
20 <header>
21 <h1>A Dream of the Future</h1>
22 </header>
23
24 <main>
25 <h2>Oh hi,</h2>
26
27 <p>Tell me your hopes and dreams:</p>
28
29 <form>
30 <label>
31 New Dream
32 <input name="dream" type="text" maxlength="100" required placeholder="Dreams!">
33 </label>
34 <button type="submit" id="submit-dream">Add Dream</button>
35 </form>
36
37 <section class="dreams">
38 <ul id="dreams">
39 <em>loading dreams&hellip;</em>
40 </ul>
41 </section>
42 </main>
43
44 <footer>Made with <a href="https://glitch.com">Glitch</a>!</footer>
45
46 <!-- include the Glitch button to show what the webpage is about and
47 to make it easier for folks to view source and remix -->
48 <div class="glitchButton" style="position:fixed;top:2em;right:20px;"></div>
49 <script src="https://button.glitch.me/button.js"></script>
50 </body>
51 </html>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!