hnasheralneam/profile-site
1
0
Fork 0
mirror of https://github.com/hnasheralneam/hnasheralneam.github.io.git synced 2025-05-13 02:15:21 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Character limit on guestbook entries, guestbook takes full space, menu links can be clicked anywhere

Browse source
This commit is contained in:
Hamza Nasher-Alneam 2025-05-05 15:09:15 -04:00
parent 3f7805278d
commit 9c0a834c71
9 changed files with 93 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
guestbook.html
View file

@ -5,11 +5,10 @@
<meta name="viewport" content="width=device-width">
<meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
<meta name="theme-color" content="#f69b46">
<link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
<link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
<link
href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/guestbook.css">
<title>Guestbook | Hamza Nasher-Alneam</title>
@ -22,14 +21,12 @@
<br><br>
<div class="content" style="min-height: 60vh">
<div class="main-text">
<div>
<!-- Guestbook -->
<div class="guestbook">
<h2 class="guestbook-title">Guest book - leave a note!</h2>
<div class="messages"></div>
<div class="show-all-messages">
<button onclick="this.remove(); showAll()">Show all messages</button>
<button onclick="this.remove(); getAll()">Show all messages</button>
</div>
<br>
<button class="post-button" onclick="toggleElement('new-message')">Post a message</button>
@ -39,7 +36,7 @@
<form class="new-message-form" method="POST"
action="https://guestbook-api.hnasheralneam.dev/message">
<label class="message-header" for="message">Your message for the world</label><br>
<textarea type="text" name="message" placeholder="your post"></textarea><br>
<textarea type="text" name="message" placeholder="your post" maxlength="500"></textarea><br>
<label class="text-label" for="github">Your GitHub username</label><br>
<input class="text" type="text" name="github" placeholder="github username">
<input type="submit" value="Post" onclick="checkSubmissionValid(event)">
@ -47,8 +44,6 @@
</div>
</div>
</div>
</div>
</div>
</div>
<br><br>

BIN
icons/phil.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 777 B

BIN
icons/race.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

2
index.html
View file

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width">
<meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
<meta name="theme-color" content="#f69b46">
<link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
<link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/styles.css">

32
partials/menu.html
View file

@ -1,24 +1,16 @@
<div class="menu">
<div>
<div class="item">
<a href="index.html" title="home">
<img src="icons/home.svg" alt="home">
</a>
</div>
<div class="item">
<a href="projects.html" title="projects">
<img src="icons/web_stories.svg" alt="projects">
</a>
</div>
<div class="item">
<a href="thoughts.html" title="thoughts">
<img src="icons/rss_feed.svg" alt="thoughts">
</a>
</div>
<div class="item">
<a href="guestbook.html" title="guestbook">
<img src="icons/developer_guide.svg" alt="guestbook">
</a>
</div>
<a class="item" href="index.html" title="home">
<img src="icons/home.svg" alt="home">
</a>
<a class="item" href="projects.html" title="projects">
<img src="icons/web_stories.svg" alt="projects">
</a>
<a class="item" href="thoughts.html" title="thoughts">
<img src="icons/rss_feed.svg" alt="thoughts">
</a>
<a class="item" href="guestbook.html" title="guestbook">
<img src="icons/developer_guide.svg" alt="guestbook">
</a>
</div>
</div>

2
projects.html
View file

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width">
<meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
<meta name="theme-color" content="#f69b46">
<link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
<link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
<link
href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap"
rel="stylesheet">

12
scripts/guestbook.js
View file

@ -5,6 +5,10 @@ function checkSubmissionValid(event) {
event.preventDefault();
document.querySelector('.status').textContent = "Fill out all fields";
}
else if (message.length > 500) {
event.preventDefault();
document.querySelector('.status').textContent = "Message too long";
}
else {
document.querySelector('.status').textContent = "Post succesful!";
}
@ -58,12 +62,4 @@ function toggleElement(elementName) {
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";
}

77
styles/guestbook.css
View file

@ -1,3 +1,73 @@
* {
font-family: "Nunito", "Times New Roman", Times, serif;
}
body {
overflow-x: hidden;
}
.content {
transition: .2s;
margin: auto;
max-width: 80rem;
transition: .2s;
}
h2 {
position: relative;
margin: 1rem .75rem .75rem 2.5rem;
font-size: 1.5rem;
transition: .2s;
}
h3 {
margin: .75rem 0 0 2rem;
}
button {
padding: .2rem .5rem;
font-size: 1.1rem;
color: #fff;
background-color: var(--theme-color);
border: solid .2rem var(--theme-color);
border-radius: .5rem;
box-shadow: 0 .1rem .2rem #ddd;
transition: .15s;
}
button:hover {
color: var(--theme-color);
background-color: transparent;
}
button:active {
transform: scale(.98);
}
a {
color: var(--theme-color);
}
@media only screen and (max-width: 700px) {
.content {
grid-template-columns: 100%;
margin-right: 0;
width: 100vw;
}
}
@media (prefers-color-scheme: dark) {
button {
box-shadow: 0 .2rem .2rem #000;
}
}
.guestbook {
padding-top: 2rem;
position: relative;
@ -9,11 +79,6 @@
.guestbook .messages {
margin: 1rem 0;
max-width: 100vw;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: none;
text-align: center;
}
@ -26,7 +91,7 @@
margin: 0 .3rem;
min-height: 14rem;
min-width: 20rem;
max-width: 25rem;
max-width: 24rem;
/* max-width: 700px; */
border: solid .2rem var(--theme-color);
border-radius: 1rem;

2
thoughts.html
View file

@ -3,7 +3,7 @@
<head>
<meta name="viewport" content="width=device-width">
<meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
<link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
<link rel="shortcut icon" type="image/x-icon" href="icons/phil.png">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/styles.css">