commit 764bcf5b58dbc5a4ee5c91ca1f1658ade56f15be
Author: westtle <cuberkuber@gmail.com>
Date:   Tue Jul 26 13:40:22 2022 +0700

    first init / release

diff --git a/assets/scripts/script.js b/assets/scripts/script.js
new file mode 100644
index 0000000..88c18d6
--- /dev/null
+++ b/assets/scripts/script.js
@@ -0,0 +1,88 @@
+const html = {
+	noteTitle: document.querySelector(".note-title input"),
+	noteText: document.querySelector(".note-text textarea"),
+	noteSelectAll: document.querySelector(".select-all-text"),
+	noteDeleteAll: document.querySelector(".delete-all-text"),
+	noteSaveLocal: document.querySelector(".save-to-local"),
+};
+
+let deleteChoices = document.querySelector(".delete-choices");
+
+// Local Storage.
+
+const storageNoteTitle = "Note_Title";
+const storageNoteText = "Note_Text";
+
+let storage = {
+	saveData: {
+		saveTitle: function saveTitle() {
+			let titleValue = html.noteTitle.value;
+			localStorage.setItem(storageNoteTitle, titleValue);
+		},
+		saveText: function saveText() {
+			let textValue = html.noteText.value;
+			localStorage.setItem(storageNoteText, textValue);
+		}
+	},
+	loadData: function loadData() {
+		let titleFromStorage = localStorage.getItem(storageNoteTitle);
+		html.noteTitle.value = titleFromStorage;
+
+		let textFromStorage = localStorage.getItem(storageNoteText);
+		html.noteText.value = textFromStorage;
+	}
+};
+
+html.noteTitle.addEventListener("input", storage.saveData.saveTitle);
+html.noteText.addEventListener("input", storage.saveData.saveText);
+
+document.addEventListener("DOMContentLoaded", () => {
+	storage.loadData();
+});
+
+// Extra Function.
+
+let extraFunction = {
+	selectAll: function selectAll() {
+		html.noteText.select();
+	},
+	deleteAll: function deleteAll() {
+		deleteChoices.classList.toggle("hidden");
+
+		let yesDelete = document.querySelector(".yes-delete");
+		let noDelete = document.querySelector(".no-delete");
+
+		yesDelete.addEventListener("click", () => {
+			deleteChoices.classList.add("hidden");
+
+			html.noteTitle.value = "";
+			html.noteText.value = "";
+
+			storage.saveData.saveTitle();
+			storage.saveData.saveText();
+		});
+
+		noDelete.addEventListener("click", () => {
+			deleteChoices.classList.add("hidden");
+		});
+	},
+	saveToLocal: function saveToLocal() {
+		let title = localStorage.getItem(storageNoteTitle);
+		let text = localStorage.getItem(storageNoteText);
+
+		let element = document.createElement('a');
+		element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+		element.setAttribute('download', title);
+
+		element.style.display = 'none';
+		document.body.appendChild(element);
+
+		element.click(); // Not my code, I just changed it a bit haha.
+
+		document.body.removeChild(element);
+	}
+};
+
+html.noteSelectAll.addEventListener("click", extraFunction.selectAll);
+html.noteDeleteAll.addEventListener("click", extraFunction.deleteAll);
+html.noteSaveLocal.addEventListener("click", extraFunction.saveToLocal);
\ No newline at end of file
diff --git a/assets/styles/style.css b/assets/styles/style.css
new file mode 100644
index 0000000..4dc91d0
--- /dev/null
+++ b/assets/styles/style.css
@@ -0,0 +1,103 @@
+:root {
+  --main: rgba(0, 0, 0, .9);
+  --border: rgba(0, 0, 0, .8);
+  --buttonColor: rgba(0, 0, 0, .5);
+}
+
+* {
+	color: var(--main);
+	box-sizing: border-box;
+}
+
+body {
+	height: 98vh;
+	margin: 1vh;
+}
+
+main {
+	width: 100%;
+	height: 100%;
+}
+
+#simple-note {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	max-width: 600px;
+	height: 100%;
+	margin: 0 auto;
+	padding: 0 25px 25px 25px;
+}
+
+.note-title {
+	width: 100%;
+	height: 30px;
+}
+
+.note-title input {
+	border: 1px solid var(--border);
+	border-bottom: 0;
+	border-radius: 3px 3px 0 0;
+	width: 100%;
+	height: 100%;
+	padding: 5px;
+	font-style: italic;
+	font-weight: bold;
+	outline: none;
+}
+
+.note-text {
+	width: 100%;
+	height: 100%;
+}
+
+.note-text textarea {
+	border: 1px solid var(--border);
+	border-radius: 0;
+	width: 100%;
+	height: 100%;
+	padding: 5px;
+	resize: none;
+	overflow-y: scroll;
+	outline: none;
+}
+
+.note-function {
+	border: 1px solid var(--border);
+	border-top: 0;
+	width: 100%;
+	padding: 5px;
+	font-size: 11.8px;
+}
+
+.note-function button {
+	background: none;
+	border: 1px solid var(--buttonColor);
+	margin-right: 4px;
+	font-size: 11.8px;
+	cursor: pointer;
+}
+
+.note-function .yes-delete,
+.note-function .no-delete {
+	margin-right: 3px;
+	margin-left: 3px;
+	font-size: 10px;
+}
+
+.note-function .save-to-local {
+	margin: 0;
+	float: right;
+}
+
+/* Extra */
+
+.hidden {
+	display: none;
+}
+
+@media (max-height: 350px) {
+	body {
+		height: 350px;
+	}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6d19f76
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="description" content="A very simple notepad that you can use.">
+  	<meta name="author" content="westtle">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Simple Note</title>
+
+	<link rel="stylesheet" type="text/css" href="assets/styles/style.css">
+</head>
+<body>
+	<main>
+		<div id="simple-note">
+			<h2>Simple Note</h2>
+			<div class="note-title">
+				<input type="text" placeholder="Title">
+			</div>
+			<div class="note-text">
+				<textarea placeholder="Your text here."></textarea>
+			</div>
+			<div class="note-function">
+				<button class="select-all-text">Select all</button>
+				<button class="delete-all-text">Delete all</button>
+
+				<!-- Appear when clicked. -->
+				<span class="delete-choices hidden">
+				<span>Are you sure?</span>
+				<button class="yes-delete">Yes</button><button class="no-delete">No</button>
+				</span>
+				<!-- ------------------- -->
+
+				<button class="save-to-local">Save to local</button>
+			</div>
+		</div>
+	</main>
+
+	<script type="text/javascript" src="assets/scripts/script.js"></script>
+</body>
+</html>
\ No newline at end of file