Skip to content
This repository was archived by the owner on Aug 17, 2024. It is now read-only.

LONDON_9 - GAYLE_THOMPSON-IGWEBIKE-NODE-WK2 #278

Open
Gayle-Thompson-Igwebike wants to merge 10 commits into
base: master
Choose a base branch
from
Open

LONDON_9 - GAYLE_THOMPSON-IGWEBIKE-NODE-WK2 #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0c02e4d
level one cpmpleted
Gayle-Thompson-Igwebike Apr 15, 2023
c1bd407
validation complete
Gayle-Thompson-Igwebike Apr 15, 2023
1b65833
frontend issue resolved.
Gayle-Thompson-Igwebike Apr 15, 2023
5c058f6
style updates
Gayle-Thompson-Igwebike Apr 16, 2023
f501548
latest message updated.
Gayle-Thompson-Igwebike Apr 17, 2023
bbf55b1
Added timeStamp
Gayle-Thompson-Igwebike Apr 17, 2023
b2796ad
json API file added
Gayle-Thompson-Igwebike Apr 17, 2023
890f000
updates to timestamp complete
Gayle-Thompson-Igwebike Apr 17, 2023
371a46f
Creating a PUT method for msg updates
Gayle-Thompson-Igwebike Apr 17, 2023
6e8889a
updated date format
Gayle-Thompson-Igwebike Apr 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
body{
font-family:cursive;
margin: 0.5rem;
margin-left: 6rem;
padding: 18rem;
align-content: center;
background-color: #f4f0f0;
background-image: url("https://us.123rf.com/450wm/essestocks/essestocks1809/essestocks180900583/109616432-speech-bubble-silhouette-sticker-icons-set-sign-kit-of-comic-tell-chat-communication-pictogram.jpg?ver=6");
/* background-image: url("https://img.freepik.com/premium-vector/set-speak-bubbles-text-chatting-boxes-bubbles-messages-isolated-flat-line-icon-vector_316839-1299.jpg"); */
}

#message-board{
border: 8px solid rgb(10, 189, 234);
background-color: rgb(255, 216, 137);
display: flex;
flex-direction: column;
align-items: center;
}

#message-buttons{
display: flex;
flex-direction: row;
}

#send-btn{
border: 2px solid rgb(246, 7, 158);
height: 50px;
width: 120px;
margin: 1rem;
align-items: center;
background-color:rgb(255, 250, 204);

}

#all-message-btn{
border: 3px solid rgb(255, 131, 222);
height: 70px;
width: 30rem;
margin: 1rem;
text-decoration: none;
background-color: rgb(10, 189, 234);
font-size: larger;
}


#form-container {
display: none;
}
#show-form-button{
border: 4px solid rgb(10, 189, 234);
margin: 1rem;
background-color: rgb(255, 131, 222);
}

#designer{
display: flex;
flex-direction: column;
align-items: center;
}
63 changes: 48 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,59 @@
<!DOCTYPE html>
<html lang="en">

<head>

<title>Welcome to CYF Chat</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="message-board">
<h1>
CYF Chat
The ChatterBox Corner!
</h1>
<h2>
Send a message
</h2>
<form action="/messages" method="post">
<p>
<p style="font-family: fantasy;">Where talkatives can express themselves without reserve...!</p>

<button id="show-form-button"><h3>Click To Send A Message!</h3> </button>

<div id="form-container" style="display:none; font-family: fantasy;">
<form action="/messages" method="post" id="form">

<div id="designer">
<h4>
Name: <input type="text" name="from" placeholder="Your Name" /> <br />
Message: <input type="text" name="text" placeholder="The message..." />
<br />
</p>
<button type="submit">
Send
</button>
Mesg: <input style="height:80px; width: 200px; font-size:10pt;" type="text" name="text" placeholder="Enter your message..." /> <br />
</h4>

<div id="message-buttons">
<button id="send-btn" type="submit"><h5>Send Your Msg</h5></button>
</div>

<button id="all-message-btn" ><a href="/message.json"><h5>See All Messages</h5></a></button>
</div>
</form>

<a href="/messages">See all messages</a>
</body>
</html>
</div>
<script>
const showFormButton = document.getElementById('show-form-button');
const formContainer = document.getElementById('form-container');

showFormButton.addEventListener('click', () => {
formContainer.style.display = 'block';
});
</script>

</body>

</html>



<!-- <script>
const form = document.querySelector("#form");
if (form) {
form.addEventListener("submit", function(event) {
send(event, this);
});
};</script> -->


44 changes: 44 additions & 0 deletions message.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
[
{
"id": 0,
"from": "Bart",
"text": "Welcome to CYF chat system!"
},

{
"id": 1,
"from": "Joy",
"text": "Welcome!"
},

{
"id": 2,
"from": "Gayle",
"text": "Hello Everyone!"
},

{
"id": 3,
"from": "Theo",
"text": "Yo yo yooo!"
},

{
"id": 4,
"from": "Sloz",
"text": "Hey How are you?!"
},

{
"id": 5,
"from": "Hector",
"text": "Happy to be here guys!"
},

{
"id": 6,
"from": "Chatty ChatterBox",
"text": "Hello there ChatterBoxers..!"
}

]
Loading