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