update main.js

update
add & revisi Icon BTN biar gak manual pake emot dari keyboard :|
2024-11-03 21:04:14 +07:00 · 2024-11-03 21:00:53 +07:00 · 2024-11-03 08:37:31 +07:00 · 2024-11-02 21:38:13 +07:00 · 2024-11-02 13:30:09 +00:00 · 2024-11-02 13:29:36 +00:00
10 changed files with 130 additions and 0 deletions
--- a/FrontEnd/app.js
+++ b/FrontEnd/app.js
@ -0,0 +1,25 @@
+import Navbar from './components/Navbar.js';
+import ChatBox from './components/ChatBox.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+    const loginForm = document.getElementById('loginForm');
+    const dashboard = document.getElementById('dashboard');
+    const loginRegister = document.getElementById('login-register');
+
+    loginForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        loginRegister.classList.add('d-none');
+        dashboard.classList.remove('d-none');
+        loadComponents();
+    });
+
+    document.getElementById('logoutButton').addEventListener('click', () => {
+        location.reload();
+    });
+
+    function loadComponents() {
+        const chatboxContainer = document.getElementById('chatbox');
+        const chatbox = new ChatBox();
+        chatboxContainer.appendChild(chatbox.render());
+    }
+});
--- a/FrontEnd/components/ChatBox.js
+++ b/FrontEnd/components/ChatBox.js
@ -0,0 +1,26 @@
+import Message from './Message.js';
+
+export default class ChatBox {
+    render() {
+        const container = document.createElement('div');
+        container.classList.add('d-flex', 'flex-column', 'h-100');
+
+        container.innerHTML = `
+            <div id="messages" class="flex-grow-1 p-3 overflow-auto"></div>
+            <form id="messageForm" class="d-flex">
+                <input type="text" id="messageInput" class="form-control me-2" placeholder="Type your message..." required>
+                <button type="submit" class="btn btn-success">Send</button>
+            </form>
+        `;
+
+        container.querySelector('#messageForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            const messageText = container.querySelector('#messageInput').value;
+            const message = new Message(messageText, 'sent');
+            container.querySelector('#messages').appendChild(message.render());
+            container.querySelector('#messageInput').value = '';
+        });
+
+        return container;
+    }
+}
--- a/FrontEnd/components/Message.js
+++ b/FrontEnd/components/Message.js
@ -0,0 +1,13 @@
+export default class Message {
+    constructor(text, type) {
+        this.text = text;
+        this.type = type;
+    }
+
+    render() {
+        const message = document.createElement('div');
+        message.className = 'message ' + (this.type === 'sent' ? 'sent' : '');
+        message.textContent = this.text;
+        return message;
+    }
+}
--- a/FrontEnd/components/Navbar.js
+++ b/FrontEnd/components/Navbar.js
--- a/FrontEnd/css/style.css
+++ b/FrontEnd/css/style.css
@ -0,0 +1,11 @@
+body {
+    background: linear-gradient(to right, #74ebd5, #acb6e5);
+}
+
+.card {
+    border-radius: 10px;
+}
+
+h2 {
+    font-weight: 600;
+}
--- a/FrontEnd/index.html
+++ b/FrontEnd/index.html
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/style.css">
+    <title>Registrasi - ChatsApp</title>
+</head>
+<body class="bg-light">
+    <div class="container d-flex justify-content-center align-items-center min-vh-100">
+        <div class="card shadow" style="width: 400px;">
+            <div class="card-body">
+                <h2 class="card-title text-center">Registrasi</h2>
+                <form id="registerForm">
+                    <div class="form-group">
+                        <label for="username">Nama Pengguna</label>
+                        <input type="text" class="form-control" id="username" name="username" required placeholder="Masukkan Nama Pengguna">
+                    </div>
+                    <div class="form-group">
+                        <label for="email">Email</label>
+                        <input type="email" class="form-control" id="email" name="email" required placeholder="Masukkan Email">
+                    </div>
+                    <div class="form-group">
+                        <label for="password">Kata Sandi</label>
+                        <input type="password" class="form-control" id="password" name="password" required placeholder="Masukkan Kata Sandi">
+                    </div>
+                    <button type="submit" class="btn btn-primary btn-block">Daftar</button>
+                </form>
+                <div class="text-center mt-3">
+                    <small>Sudah punya akun? <a href="#">Masuk</a></small>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="js/main.js"></script>
+</body>
+</html>
--- a/FrontEnd/js/main.js
+++ b/FrontEnd/js/main.js
@ -0,0 +1,14 @@
+document.getElementById('registerForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+    
+    const username = document.getElementById('username').value;
+    const email = document.getElementById('email').value;
+    const password = document.getElementById('password').value;
+
+    // Logika buat ngirim data ke server bisa ditambahin dimari
+    console.log('Registrasi:', { username, email, password });
+    alert('Registrasi berhasil!');
+    
+    // Reset form setelah pengiriman
+    this.reset();
+});
--- a/FrontEnd/services/api.js
+++ b/FrontEnd/services/api.js
--- a/FrontEnd/style.css
+++ b/FrontEnd/style.css
--- a/README.md
+++ b/README.md
Author	SHA1	Message	Date
Lefiathan	b31af98dea	update main.js	2024-11-03 21:04:14 +07:00
lefiathan	16eb366ce1	update	2024-11-03 21:00:53 +07:00
syn	5d451a4847	add & revisi Icon BTN biar gak manual pake emot dari keyboard :\|	2024-11-03 08:37:31 +07:00
Lefiathan	e730db80bd	update	2024-11-02 21:38:13 +07:00
Lefiathan	45d476266b	Add FrontEnd/assets/components/css/js/services/api.js	2024-11-02 13:30:09 +00:00
Lefiathan	155b43d3bd	Add FrontEnd/assets/components/css/js/main.js	2024-11-02 13:29:36 +00:00
Lefiathan	e59a7151e6	Add FrontEnd/assets/components/css/style.css	2024-11-02 13:29:00 +00:00
Lefiathan	0426ad28c8	Add FrontEnd/assets/components/Navbar.js	2024-11-02 13:28:12 +00:00
Lefiathan	1a12ed10dc	Add FrontEnd/assets/components/Message.js	2024-11-02 13:27:48 +00:00
Lefiathan	71ebb9579b	Add FrontEnd/assets/components/ChatBox.js	2024-11-02 13:27:09 +00:00
Lefiathan	47cc123245	Add FrontEnd/style.css	2024-11-02 13:25:19 +00:00
Lefiathan	4a4b8de5d3	Add FrontEnd/app.js	2024-11-02 13:24:53 +00:00
Lefiathan	9cddf21749	Add FrontEnd/index.html	2024-11-02 13:21:12 +00:00
Lefiathan	a4170b487f	Delete FrontEnd	2024-11-02 13:11:32 +00:00
Lefiathan	f9a25ba197	Add FrontEnd	2024-11-02 13:09:56 +00:00