CS-312-MiniProject-1/index.ejs at main · Mompory/CS-312-MiniProject-1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>


<div class="container mt-4">
    <h1 class="my-4">Creat a new blog</h1>
    <form action="/create" method="POST" class="mb-4">
        <div class="mb-3">
            <label for="title" class="form-label">Blog Title</label>
            <input type="text" name="title" class="form-control" placeholder="Blog Title" required>
        </div>
        <div class="mb-3">
            <label for="author" class="form-label">Author Name</label>
            <input type="text" name="author" class="form-control" placeholder="Author Name" required>
        </div>
        <div class="mb-3">
            <label for="content" class="form-label">Blog Content</label>
            <textarea name="content" class="form-control" rows="5" placeholder="Write your blog post..."
                required></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Post</button>
    </form>
</div>

<div class="container">
    <% if (blogs.length> 0) { %>
        <h1 class="my-4">Blog List</h1>
        <% } else { %>
            <h1 class="my-4">No blog found</h1>
            <% } %>

                <ul class="list-group">
                    <% blogs.forEach((blog, index)=> { %>
                        <li class="list-group-item">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">
                                        <%= blog.title %>
                                    </h5>
                                    <h6 class="card-subtitle mb-2 text-muted">
                                        by <%= blog.author %> on <%= blog.date.toDateString() %>
                                    </h6>
                                    <p class="card-text">
                                        <%= blog.content %>
                                    </p>
                                    <a href="/edit/<%= index %>" class="btn btn-warning btn-sm">Edit</a>
                                    <a href="/delete/<%= index %>" class="btn btn-danger btn-sm">Delete</a>
                                </div>
                            </div>
                        </li>
                        <% }) %>
                </ul>
</div>