4828c671 by Lorenzo Mangani

cleanup

1 parent 90bb8761
{"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"}
{"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"}
{"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"}
{"uuid":"adSBq97hhhpFNUna","deleted":true}
{"uuid":"adSBq97hhhpFNUnb","deleted":true}
{"uuid":"adSBq97hhhpFNUnc","deleted":true}
{"zero1\u001bname":{"":{":":"Jack",">":1587040426899}}}
\ No newline at end of file
{"!":{"":1}}
\ No newline at end of file
{"zero2\u001bname":{"":{":":"Jill",">":1587040426901}}}
\ No newline at end of file
{"!":{"":1}}
\ No newline at end of file
{"zero1\u001bname":{"":{":":"Jack",">":1587040426899}}}
\ No newline at end of file
{"!":{"":1}}
\ No newline at end of file
{"zero1\u001bname":{"":{":":"Jack",">":1587040426899}}}
\ No newline at end of file
{"!":{"":1}}
\ No newline at end of file
{"zero1\u001bname":{"":{":":"Jack",">":1587040426899}}}
\ No newline at end of file
{"!":{"":1}}
\ No newline at end of file
// client-side js, loaded by index.html
// run by the browser each time the page is loaded
console.log("hello world :o");
// define variables that reference elements on our page
const dreamsList = document.getElementById("dreams");
const dreamsForm = document.querySelector("form");
// a helper function that creates a list item for a given dream
function appendNewDream(dream) {
const newListItem = document.createElement("li");
newListItem.innerText = dream;
dreamsList.appendChild(newListItem);
}
// fetch the initial list of dreams
fetch("/dreams")
.then(response => response.json()) // parse the JSON from the server
.then(dreams => {
// remove the loading text
dreamsList.firstElementChild.remove();
// iterate through every dream and add it to our page
dreams.forEach(appendNewDream);
// listen for the form to be submitted and add a new dream when it is
dreamsForm.addEventListener("submit", event => {
// stop our form submission from refreshing the page
event.preventDefault();
// get dream value and add it to the list
let newDream = dreamsForm.elements.dream.value;
dreams.push(newDream);
appendNewDream(newDream);
// reset form
dreamsForm.reset();
dreamsForm.elements.dream.focus();
});
});
/* this file is loaded by index.html and styles the page */
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 2em 1em;
line-height: 1.5em;
}
h1 {
font-style: italic;
color: #373fff;
max-width: calc(100% - 5rem);
line-height: 1.1;
}
form {
background-color: #eee;
display: grid;
grid-gap: 1em;
padding: 1em;
max-width: 40ch;
}
input {
border: 1px solid silver;
display: block;
font-size: 16px;
margin-bottom: 10px;
padding: 5px;
width: 100%;
}
form button {
background-color: #bbbbf2;
border: 2px solid currentColor;
border-radius: .25em;
cursor: pointer;
font-size: inherit;
line-height: 1.4em;
padding: 0.25em 1em;
max-width: 20ch;
}
form button:hover {
background-color: lavender;
}
footer {
margin-top: 3em;
padding-top: 1.5em;
border-top: 1px solid lightgrey;
}
{"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
{"!":{"":1}}
\ No newline at end of file
{"zero":{"2\u001bname":{"":{":":"Jill",">":1587040405007.001}},"1\u001bname":{"":{":":"Jack",">":1587040426899}}}}
\ No newline at end of file
{"!":{"":1}}
\ No newline at end of file
<!-- This is a static file -->
<!-- served from your routes in server.js -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to Glitch!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A cool thing made with Glitch">
<link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's client-side javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<header>
<h1>A Dream of the Future</h1>
</header>
<main>
<h2>Oh hi,</h2>
<p>Tell me your hopes and dreams:</p>
<form>
<label>
New Dream
<input name="dream" type="text" maxlength="100" required placeholder="Dreams!">
</label>
<button type="submit" id="submit-dream">Add Dream</button>
</form>
<section class="dreams">
<ul id="dreams">
<em>loading dreams&hellip;</em>
</ul>
</section>
</main>
<footer>Made with <a href="https://glitch.com">Glitch</a>!</footer>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:2em;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!