From 9dab44d852f29c9b7398a14e472a1a1cd3bbdd76 Mon Sep 17 00:00:00 2001 From: Hamza Nasher-Alneam Date: Tue, 17 Dec 2024 22:08:01 -0500 Subject: [PATCH] Add guestbook --- articles/plasma-widgets.html | 2 +- index.html | 26 ++++- scripts/guestbook.js | 69 +++++++++++++ styles/guestbook.css | 188 +++++++++++++++++++++++++++++++++++ thoughts.html | 1 + 5 files changed, 284 insertions(+), 2 deletions(-) create mode 100644 scripts/guestbook.js create mode 100644 styles/guestbook.css diff --git a/articles/plasma-widgets.html b/articles/plasma-widgets.html index 15453a4..07e13b7 100644 --- a/articles/plasma-widgets.html +++ b/articles/plasma-widgets.html @@ -38,7 +38,7 @@

Fill in the information for your app, using "Plasma Mobile Widgets" as the catagory. When you've entered all the needed catagories, press next. We can skip the settings step, so just click next again. Add your .plasmoid file, and click save.

-

That's it! If you go back to the main page of the KDE Store, search your app name and it should come up.

+

That's it! If you go back to the main page of the KDE Store, search your app name and it should come up. It'll also show up in the KDE Get New Widgets menu on the desktop. If you've got any questions, feel free to email me at hnasheraleam@gmail.com



diff --git a/index.html b/index.html index 7a8d50c..6a3f3fd 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + Hamza Nasher-Alneam @@ -51,8 +52,29 @@ +

+ +
+

Guest book

+
+
+ +
+
+ +
+
+
+
+
+
+ + +
+
+
+
-

Thoughts

@@ -100,4 +122,6 @@ + + diff --git a/scripts/guestbook.js b/scripts/guestbook.js new file mode 100644 index 0000000..7333edb --- /dev/null +++ b/scripts/guestbook.js @@ -0,0 +1,69 @@ +function checkSubmissionValid(event) { + let message = document.querySelector('textarea[name="message"]').value; + let github = document.querySelector('input[name="github"]').value; + if (message.length < 1 || github.length < 1) { + event.preventDefault(); + document.querySelector('.status').textContent = "Fill out all fields"; + } + else { + document.querySelector('.status').textContent = "Post succesful!"; + } +} + + +fetch('https://guestbook-api.hnasheralneam.dev/messages/random-5') + .then(response => response.json()) + .then(data => { + for (let i = 0; i < data.length; i++) { + createMessage(data[i]); + } + }) + .catch(error => { + console.error('Error fetching data:', error); + }); + +function getAll() { + document.querySelector('.messages').innerHTML = ""; + fetch('https://guestbook-api.hnasheralneam.dev/messages/all') + .then(response => response.json()) + .then(data => { + for (let i = 0; i < data.length; i++) { + createMessage(data[i]); + } + }) + .catch(error => { + console.error('Error fetching data:', error); + }); +} + +function createMessage(message) { + const messageDiv = document.createElement('div'); + messageDiv.classList.add('card'); + messageDiv.innerHTML = ` +
+

${message.message}

+ ${message.github}
+ ${formatDate(message.timestamp.toLocaleString(), "dmy")} +
`; + document.querySelector('.messages').appendChild(messageDiv); + +} + +function toggleElement(elementName) { + const element = document.querySelector(`.${elementName}-container`); + if (element.style.opacity == 0) { + element.style.opacity = "1"; + element.style.pointerEvents = "all"; + } else { + element.style.opacity = 0; + element.style.pointerEvents = "none"; + } +} + +function showAll() { + getAll(); + let messagesElement = document.querySelector(".messages"); + messagesElement.style.overflowX = "hidden"; + messagesElement.style.overflowY = "auto"; + messagesElement.style.whiteSpace = "wrap"; +} \ No newline at end of file diff --git a/styles/guestbook.css b/styles/guestbook.css new file mode 100644 index 0000000..567f065 --- /dev/null +++ b/styles/guestbook.css @@ -0,0 +1,188 @@ +.guestbook { + padding-top: 2rem; + position: relative; +} + +.guestbook * { + font-family: "Comic Sans MS", "Comic Sans", cursive; +} + +.guestbook .messages { + margin: 1rem 0; + max-width: 100vw; + overflow-x: auto; + overflow-y: hidden; + white-space: nowrap; + scrollbar-width: none; + text-align: center; +} + +.guestbook .messages::-webkit-scrollbar { + display: none; + } + +.guestbook .card { + display: inline-block; + margin: 0 .3rem; + min-height: 14rem; + min-width: 20rem; + max-width: 25rem; + /* max-width: 700px; */ + border: solid .2rem var(--theme-color); + border-radius: 1rem; + white-space: wrap; + vertical-align: top; + margin-bottom: .8rem; + padding: 1rem; + display: inline-flex; + justify-content: center; + align-items: center; +} + +.guestbook .card .message { + margin: 0; + font-size: 1.4rem; +} + +.guestbook .card .name { + text-decoration: none; +} + +.guestbook .card .name:hover { + text-decoration: underline; +} + +.guestbook .card i { + font-size: .9rem; + color: #888; + font-style: italic; +} + +.guestbook .post-button { + position: absolute; + top: 0; + right: 0; +} + +.guestbook .show-all-messages { + margin: auto; + text-align: center; +} + +.guestbook .guestbook-title { + position: absolute; + top: 0; + left: 0; + font-size: 1.5rem; + line-height: 1rem; + padding-bottom: 2rem; +} + +.new-message-container { + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + z-index: 10; + display: flex; + justify-content: center; + align-items: center; + background-color: #eeeeee88; + backdrop-filter: blur(.2rem); + pointer-events: none; + opacity: 0; + transition: .2s; +} + +.new-message { + padding: 2rem; + border-radius: 2rem; + background-color: #ddddddaa; + box-shadow: 0 0 .2rem #999; + backdrop-filter: blur(.5rem); + text-align: center; +} + +.new-message .message-header { + font-size: 1.3rem; + margin-bottom: 1rem; +} + +.new-message textarea { + min-width: 20rem; + min-height: 6rem; + margin: 1rem 0; + padding: .5rem; + font-size: 1.2rem; + box-sizing: border-box; + border-radius: 1rem; + background-color: #fff; + border: solid .2rem #aaa; + color: #222; + transition: .2s; +} + +.new-message textarea:focus { + outline: none; + border-color: var(--theme-color); +} + +.new-message .text-label { + margin: 4rem; +} + +.new-message input.text { + padding: .3rem .6rem; + font-size: 1rem; + box-sizing: border-box; + border-radius: 1rem; + background-color: #fff; + border: solid .2rem #aaa; + color: #222; + transition: .2s; +} + +.new-message input.text:focus { + outline: none; + border-color: var(--theme-color); +} + +.new-message input[type="submit"] { + padding: .3rem .6rem; + font-size: 1rem; + box-sizing: border-box; + border-radius: 1rem; + background-color: var(--theme-color); + color: white; + border: none; + cursor: pointer; + transition: .2s; +} + +.new-message input[type="submit"]:active { + transform: scale(.95); +} + + +@media (prefers-color-scheme: dark) { + .new-message-container { + background-color: #00000088; + } + + .new-message { + background-color: #222222aa; + box-shadow: 0 0 .2rem #444; + } + + .new-message textarea { + background-color: #111; + border: solid .2rem #333; + color: #fff; + } + .new-message input.text { + background-color: #111; + border: solid .2rem #333; + color: #fff; + } +} \ No newline at end of file diff --git a/thoughts.html b/thoughts.html index 26adc15..5d05509 100644 --- a/thoughts.html +++ b/thoughts.html @@ -77,4 +77,5 @@ function copy(txt) { } + \ No newline at end of file