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

London10_Jan_Softa_Node.js_Week2_CYF_Chat_Server #289

Open
softacoder wants to merge 3 commits into
base: master
Choose a base branch
from
Open

London10_Jan_Softa_Node.js_Week2_CYF_Chat_Server #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6c687ff
commit
softacoder Jul 22, 2023
7739975
commit
softacoder Jul 24, 2023
54e64b5
commit level 1 and 2
softacoder Jul 26, 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
7 changes: 7 additions & 0 deletions dataModel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const chatMessageModel = {
id: 0,
from: "",
text: "",
};

module.exports = chatMessageModel;
119 changes: 109 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,125 @@
<!-- working on send/add messages, see all messages and delete messages and give error
error message if not both name and message is filled in-->

<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to CYF Chat</title>
</head>

<body>
<h1>
CYF Chat
</h1>
<h2>
Send a message
</h2>
<h1>CYF Chat</h1>
<h2>Send a message</h2>
<form action="/messages" method="post">
<p>
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>
<button type="submit">Send</button>
</form>

<br />
<a href="/messages">See all messages</a>

<form>
<p>
Delete Message:
<input
type="number"
id="deleteId"
name="id"
placeholder="Delete message by ID..."
/>
</p>
<button type="button" onclick="deleteMessage()">Submit</button>
</form>

<script>
Copy link

@giorgiguts giorgiguts Jul 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just as a suggestion, we can create a separate javascript file, for example script.js and then refer or include that exact javascript file into the script HTML element. You can read more on that here for example. This way, we can effectively structure our code.

function deleteMessage() {
const idToDelete = document.getElementById("deleteId").value;
if (!idToDelete || isNaN(idToDelete)) {
Copy link

@giorgiguts giorgiguts Jul 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great use of a guard clause! 🥳 it's very important to have these layers of security throughout our codebase, to minimise the amount of bugs, and stop our program from crashing. Excellent work!

alert("Please enter a valid ID to delete.");
return;
}

const url = `/messages/delete/${idToDelete}`;
fetch(url, {
method: "DELETE",
})
.then((response) => {
Copy link

@giorgiguts giorgiguts Jul 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, as a suggestion and going forward with JavaScript, is to get acquainted with ES6+ features and apply them to your JS solutions. One of the ES6+ features (which generally means modern JavaScript) is the use of async/await functions. There's this amazing instructor Colt Steele out there on Youtube, and I highly suggest you watch this tutorial on how to use it, here's the link. He has really comprehensive and easy-to-follow tutorials on his Youtube channel. 10/10 recommended 🥹

The idea of using async/await is to make your codebase shorter and thus easier to understand. 😊

if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
// Handle the response data here if needed
console.log("Message deleted successfully:", data);
// Refresh the page to see the updated messages list
window.location.reload();
})
.catch((error) => {
console.error("Error deleting message:", error);
});
}
</script>
</body>
</html>

<!-- code is working to show you added message-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to CYF Chat</title>
</head>
<body>
<h1>CYF Chat</h1>
<h2>Send a message</h2>
<form action="/messages" method="post">
<p>
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>
</form>
<br />
<a href="/messages/showAll" action="/messages/showAll" method="get"
>See all messages</a
>
<form action="/messages/:id" method="delete">
<p>
Delete Message:
<input
type="number"
name="number"
placeholder="Delete message by ID,,,"
/>
</p>
<button type="submit">Submit</button>
</form>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to CYF Chat!!!!!!!</title>
</head>
<body>
<h1>CYF Chat</h1>
<h2>Send a message</h2>
<form action="/messages" method="post">
<p>
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>
</form>
<a href="/messages">See all messages</a>
</body>
</html> -->
Loading