kit-notes/index.html at main · Kwagei/kit-notes · 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Share your thoughts..</title>
		<link
			rel="stylesheet"
			href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap"
		/>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div class="top-bar">
			<h1>Share your thoughts..</h1>
			<button class="create-note-button" id="createNoteButton">
				Create Note
			</button>
		</div>

		<!-- Form to create a note -->
		<div class="note-form" id="noteForm">
			<form>
				<label for="title">Title:</label>
				<input type="text" id="title" name="title" required />

				<label for="body">Body:</label>
				<textarea id="body" name="body" rows="4" required></textarea>

				<button type="submit">Save Note</button>
			</form>
		</div>

		<!-- View for listing all notes -->
		<div class="notes-container" id="notesContainer">
			<!-- Sample Note 1 -->
			<!-- <div class="note">
				<h3>Modern Design</h3>
				<p></p>
				<div class="note-buttons">
					<button class="view-button">View</button>
					<button class="edit-button">Edit</button>
					<button class="delete-button">Delete</button>
				</div>
			</div> -->
		</div>

		<!-- Modal -->
		<div class="modal" id="myModal">
			<div class="modal-content">
				<h2 id="modalTitle"></h2>
				<p id="modalBody"></p>
				<button class="close-modal" onclick="closeModal()">
					Close
				</button>
			</div>
		</div>

		<script>
			const notes = [
				{
					title: "Inspiring Quotes",
					body: "'The only way to do great work is to love what you do.' - Steve Jobs",
				},
				{
					title: "Modern Design",
					body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
				},
			];

			function displayNotes() {
				const notesEl = document.getElementById("notesContainer");

				notes.forEach((note) => {
					notesEl.insertAdjacentHTML(
						"afterbegin",
						`
                        <div class="note">
                            <h3>${note.title}</h3>
                            <p>${note.body}</p>
                            <div class="note-buttons">
                                <button class="view-button">View</button>
                                <button class="edit-button">Edit</button>
                                <button class="delete-button">Delete</button>
                            </div>
                        </div>
                    `
					);
				});
			}

			displayNotes();
		</script>
	</body>
</html>