Added Chat Application using JavaScript(#62)

* make it better * make it better * make it better * make it better * removing node_modules * make it better
sid-am-ahd935 · Oct 19, 2022 · 71a3c1f · 71a3c1f
1 parent 064dff2
commit 71a3c1f
Show file tree

Hide file tree

Showing 13 changed files with 1,597 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -51,4 +51,7 @@ coverage.xml
 .hypothesis/
 .pytest_cache/
 .ipynb_checkpoints
-#-----------------------------
+#-----------------------------
+
+#JavaScript
+node_modules/
diff --git a/JavaScript/HactoChat/Readme.md b/JavaScript/HactoChat/Readme.md
@@ -0,0 +1,9 @@
+#simple chat application using socket.io
+
+<p align="center">
+  <img src="/JavaScript/HactoChat/public/imgs/one.png" width="350" title="hover text">
+  <img src="/JavaScript/HactoChat/public/imgs/two.png" width="350" title="hover text">
+  <img src="/JavaScript/HactoChat/public/imgs/three.png" width="350" title="hover text">
+  <img src="/JavaScript/HactoChat/public/imgs/four.png" width="350" title="hover text">
+  <img src="/JavaScript/HactoChat/public/imgs/five.png" width="350" title="hover text">
+</p>
diff --git a/JavaScript/HactoChat/app.js b/JavaScript/HactoChat/app.js
@@ -0,0 +1,23 @@
+const express = require("express");
+const app = express();
+const http = require("http").createServer(app);
+
+app.use(express.static(__dirname + "/public"));
+
+app.get("/", (req, res) => {
+  res.sendFile(__dirname + "/index.html");
+});
+
+http.listen(5000, () => {
+  console.log("server is running at http://localhost:5000");
+});
+
+const io = require("socket.io")(http);
+
+io.on("connection", (socket) => {
+  console.log("User Connected !!");
+
+  socket.on("message", (msg) => {
+    socket.broadcast.emit("message", msg);
+  });
+});
diff --git a/JavaScript/HactoChat/index.html b/JavaScript/HactoChat/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon"
+        href="https://getillustrations.com/packs/download-free-3d-app-icons-for-iphone/elements/_1x/app%20icons,%20communication,%20social%20media%20_%20conversation,%20chat,%20messages,%20message,%20talk_md.png"
+        type="image/x-icon">
+    <link rel="stylesheet" href="/style.css">
+    <title>HactoChat App</title>
+</head>
+
+<body>
+    <div class="container">
+        <div class="app">
+            <div class="logo flex justify-center">
+                <img src="https://getillustrations.com/packs/download-free-3d-app-icons-for-iphone/elements/_1x/app%20icons,%20communication,%20social%20media%20_%20conversation,%20chat,%20messages,%20message,%20talk_md.png"
+                    alt="">
+                <i>Hacto Chat</i>
+            </div>
+
+            <div class="chat_box">
+                <!-- <span class="left">
+                    <h3>Sariful</h3>
+                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur, optio!</p>
+                </span>
+                <span class="right">
+                    <h3>Golam</h3>
+                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur, optio!</p>
+                </span> -->
+            </div>
+            <div>
+                <input id="message" type="text" placeholder="Write your message..">
+            </div>
+        </div>
+    </div>
+</body>
+<script src="/socket.io/socket.io.js"></script>
+<script src="/script.js"></script>
+
+</html>