diff options
| author | Marvin Borner | 2020-10-01 17:56:03 +0200 |
|---|---|---|
| committer | Marvin Borner | 2020-10-01 17:56:26 +0200 |
| commit | 589c21ef7c1fef178eb7e8047d71f91df61fbe93 (patch) | |
| tree | a960c7f307bb141c34f1a22880de36fa325fbb83 /quotes | |
| parent | 2a41466c4167fdcfdc98f76cba7ad0713bd01ce9 (diff) | |
Quotes are basically functional
Diffstat (limited to 'quotes')
| -rw-r--r-- | quotes/index.js | 2 | ||||
| -rw-r--r-- | quotes/public/index.html | 24 | ||||
| -rw-r--r-- | quotes/public/script.js | 21 | ||||
| -rw-r--r-- | quotes/public/style.css | 10 |
4 files changed, 39 insertions, 18 deletions
diff --git a/quotes/index.js b/quotes/index.js index 66aeb5e..31ea2a5 100644 --- a/quotes/index.js +++ b/quotes/index.js @@ -21,7 +21,7 @@ app.post("/api/add", async (req, res) => { app.get("/api/list", async (req, res) => { const quotes = await db.query( - "SELECT quotes.id, name, middlename, surname, quote FROM quotes INNER JOIN users AS a ON author_id = a.id" + "SELECT quotes.id, name, middlename, surname, quote FROM quotes INNER JOIN users AS a ON author_id = a.id ORDER BY name" ); res.json(quotes); }); diff --git a/quotes/public/index.html b/quotes/public/index.html index 0c7b327..6f7665c 100644 --- a/quotes/public/index.html +++ b/quotes/public/index.html @@ -14,16 +14,20 @@ <title>Zitate</title> </head> <body> - <form class="pure-form pure-form-stacked" action="api/add" method="post"> - <fieldset> - <legend>Zitate</legend> - <label for="author">Author</label> - <select name="author" id="author" required></select> - <label for="quote">Zitat</label> - <input name="quote" type="text" id="quote" placeholder="Zitat" required /> - <button type="submit" class="pure-button pure-button-primary">Hinzufügen</button> - </fieldset> - </form> + <div> + <form class="pure-form pure-form-stacked" action="api/add" method="post"> + <fieldset> + <legend>Zitate</legend> + <label for="author">Author</label> + <select name="author" id="author" required></select> + <label for="quote">Zitat</label> + <input name="quote" type="text" id="quote" placeholder="Zitat" required /> + <button type="submit" class="pure-button pure-button-primary">Hinzufügen</button> + </fieldset> + </form> + + <ul id="quotes"></ul> + </div> <script src="script.js" charset="utf-8"></script> </body> diff --git a/quotes/public/script.js b/quotes/public/script.js index 7a87486..74f74df 100644 --- a/quotes/public/script.js +++ b/quotes/public/script.js @@ -1,8 +1,9 @@ const dropdown = document.getElementById("author"); +const quotes = document.getElementById("quotes"); dropdown.insertAdjacentHTML("beforeend", '<option selected="true" disabled>Author auswählen...</option>'); -function append(response) { +function appendOption(response) { response.forEach((elem) => { dropdown.insertAdjacentHTML( "beforeend", @@ -13,7 +14,21 @@ function append(response) { }); } -// TODO: Add api list endpoint +function appendQuote(response) { + response.forEach((elem) => { + quotes.insertAdjacentHTML( + "beforeend", + `<li>${elem["name"]} ${elem["middlename"] ? elem["middlename"] : " "}${elem["surname"]}: ${ + elem["quote"] + }</li>` + ); + }); +} + fetch("/auth/api/list") .then((response) => response.json()) - .then((response) => append(response)); + .then((response) => appendOption(response)); + +fetch("/quotes/api/list") + .then((response) => response.json()) + .then((response) => appendQuote(response)); diff --git a/quotes/public/style.css b/quotes/public/style.css index 6ab5ef0..2c9c695 100644 --- a/quotes/public/style.css +++ b/quotes/public/style.css @@ -4,12 +4,14 @@ body { margin: 0; height: 100%; width: 100%; - background: url(https://images.unsplash.com/photo-1544829728-e5cb9eedc20e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80); - background-size: cover; + background-color: #eec0c6; + background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%); } -form { +div { position: absolute; + max-height: 80%; + overflow-y: scroll; width: 30%; left: 50%; top: 50%; @@ -27,7 +29,7 @@ select { } @media only screen and (max-width: 600px) { - form { + div { width: calc(100% - 50px); } } |