beenull/simple-note
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

converted indentation to spaces

Browse source
This commit is contained in:
westtle 2024-01-26 21:01:43 +07:00
parent c7377dd408
commit 0d3a03f2fe
3 changed files with 121 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
assets/scripts/script.js
View file

@ -10,46 +10,46 @@ const confirmDeleteButton = document.querySelector("._delete-confirm");
const saveToLocalButton = document.querySelector("._save-to-local"); const saveToLocalButton = document.querySelector("._save-to-local");
function selectAll() { function selectAll() {
noteBody.select(); noteBody.select();
}; };
function showDeleteConfirm() { function showDeleteConfirm() {
confirmDeleteButton.style.display = "inline"; confirmDeleteButton.style.display = "inline";
deleteAllButton.style.display = "none"; deleteAllButton.style.display = "none";
timerId = setTimeout(() => { timerId = setTimeout(() => {
confirmDeleteButton.style.display = "none"; confirmDeleteButton.style.display = "none";
deleteAllButton.style.display = "inline"; deleteAllButton.style.display = "inline";
}, 2500); }, 2500);
}; };
function confirmDelete() { function confirmDelete() {
confirmDeleteButton.style.display = "none"; confirmDeleteButton.style.display = "none";
deleteAllButton.style.display = "inline"; deleteAllButton.style.display = "inline";
noteTitle.value = ""; noteTitle.value = "";
noteBody.value = ""; noteBody.value = "";
clearInterval(timerId); clearInterval(timerId);
saveTitle(); saveTitle();
saveText(); saveText();
}; };
function downloadNote() { function downloadNote() {
let title = noteTitle.value || "Simple Note"; let title = noteTitle.value || "Simple Note";
let text = noteBody.value; let text = noteBody.value;
let element = document.createElement('a'); let element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', title); element.setAttribute('download', title);
element.style.display = 'none'; element.style.display = 'none';
document.body.appendChild(element); document.body.appendChild(element);
element.click(); // Not my code, I just changed it a bit haha. element.click(); // Not my code, I just changed it a bit haha.
document.body.removeChild(element); document.body.removeChild(element);
}; };
@ -58,19 +58,19 @@ const note_title = "Note_Title";
const note_text = "Note_Text"; const note_text = "Note_Text";
function saveTitle() { function saveTitle() {
localStorage.setItem(note_title, noteTitle.value); localStorage.setItem(note_title, noteTitle.value);
}; };
function saveText() { function saveText() {
localStorage.setItem(note_text, noteBody.value); localStorage.setItem(note_text, noteBody.value);
}; };
function loadData() { function loadData() {
let titleFromStorage = localStorage.getItem(note_title) || ""; let titleFromStorage = localStorage.getItem(note_title) || "";
noteTitle.value = titleFromStorage; noteTitle.value = titleFromStorage;
let textFromStorage = localStorage.getItem(note_text) || ""; let textFromStorage = localStorage.getItem(note_text) || "";
noteBody.value = textFromStorage; noteBody.value = textFromStorage;
}; };
noteTitle.addEventListener("input", saveTitle); noteTitle.addEventListener("input", saveTitle);
@ -82,5 +82,5 @@ confirmDeleteButton.addEventListener("click", confirmDelete);
saveToLocalButton.addEventListener("click", downloadNote); saveToLocalButton.addEventListener("click", downloadNote);
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
loadData(); loadData();
}); });

160
assets/styles/style.css
View file

@ -1,153 +1,153 @@
:root { :root {
--font-size-primary: 0.906rem; /* 14.5px */ --font-size-primary: 0.906rem; /* 14.5px */
--font-size-secondary: 0.688rem; /* 11px */ --font-size-secondary: 0.688rem; /* 11px */
--foreground: rgba(0, 0, 0, 0.75); --foreground: rgba(0, 0, 0, 0.75);
--border-color: rgba(0, 0, 0, 0.55); --border-color: rgba(0, 0, 0, 0.55);
--border-shorthand: 0.063rem solid var(--border-color); --border-shorthand: 0.063rem solid var(--border-color);
/* Button */ /* Button */
--button-hover-foreground: rgba(255, 255, 255, 0.9); --button-hover-foreground: rgba(255, 255, 255, 0.9);
--button-hover-backround: rgba(0, 0, 0, 0.78); --button-hover-backround: rgba(0, 0, 0, 0.78);
--font-size-button: 0.769rem; /* 12.3px */ --font-size-button: 0.769rem; /* 12.3px */
--seven: 0.438rem; /* 7px */ --seven: 0.438rem; /* 7px */
--twelve: 0.75rem; /* 12px */ --twelve: 0.75rem; /* 12px */
} }
*, *::before, *::after { *, *::before, *::after {
color: var(--foreground); color: var(--foreground);
box-sizing: border-box; box-sizing: border-box;
} }
body { /* Left & right spacing is left & right from default body margin + 12px */ body { /* Left & right spacing is left & right from default body margin + 12px */
display: flex; display: flex;
justify-content: center; justify-content: center;
min-height: 91vh; min-height: 91vh;
margin-top: 4.5vh; margin-top: 4.5vh;
margin-bottom: 4.5vh; margin-bottom: 4.5vh;
padding: var(--twelve); padding: var(--twelve);
font-size: var(--font-size-primary); font-size: var(--font-size-primary);
text-align: center; text-align: center;
} }
main { main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
max-width: 32rem; max-width: 32rem;
} }
h2 { h2 {
margin-top: 0; margin-top: 0;
} }
#simple-note { #simple-note {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
height: 100%; height: 100%;
min-height: 18.75rem; min-height: 18.75rem;
} }
/* Title Input */ /* Title Input */
.__title { .__title {
border: var(--border-shorthand); border: var(--border-shorthand);
border-bottom: 0; border-bottom: 0;
width: 100%; width: 100%;
} }
.__title input { .__title input {
border: none; border: none;
width: 100%; width: 100%;
padding: var(--seven) var(--twelve); padding: var(--seven) var(--twelve);
font-size: var(--font-size-button); font-size: var(--font-size-button);
font-style: italic; font-style: italic;
font-weight: bold; font-weight: bold;
outline: none; outline: none;
} }
/* Body / textarea / The Note Itself */ /* Body / textarea / The Note Itself */
.__body { .__body {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.__body textarea { .__body textarea {
border: var(--border-shorthand); border: var(--border-shorthand);
border-bottom: none; border-bottom: none;
border-radius: 0; border-radius: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: var(--seven) var(--twelve); padding: var(--seven) var(--twelve);
font-size: var(--font-size-button); font-size: var(--font-size-button);
resize: none; resize: none;
overflow-y: scroll; overflow-y: scroll;
outline: none; outline: none;
} }
/* Bottom Part / The One With The Buttons */ /* Bottom Part / The One With The Buttons */
.__function { .__function {
display: flex; display: flex;
border: var(--border-shorthand); border: var(--border-shorthand);
width: 100%; width: 100%;
} }
button { button {
background: none; background: none;
border: none; border: none;
min-width: 20%; min-width: 20%;
padding: var(--seven) var(--twelve); padding: var(--seven) var(--twelve);
font-size: var(--font-size-button); font-size: var(--font-size-button);
cursor: pointer; cursor: pointer;
} }
.__function button:not(:last-child) { .__function button:not(:last-child) {
border-right: var(--border-shorthand); border-right: var(--border-shorthand);
} }
._delete-all, ._delete-all,
._delete-confirm { ._delete-confirm {
color: #fff; color: #fff;
background: #FD5E5E; background: #FD5E5E;
} }
._delete-confirm { ._delete-confirm {
display: none; display: none;
} }
._save-to-local { ._save-to-local {
border-left: var(--border-shorthand) !important; border-left: var(--border-shorthand) !important;
margin-left: auto; margin-left: auto;
} }
/* Notice / Link */ /* Notice / Link */
#notice { #notice {
margin-top: 0.656rem; margin-top: 0.656rem;
padding: 0 var(--seven); padding: 0 var(--seven);
font-size: var(--font-size-secondary); font-size: var(--font-size-secondary);
line-height: 1.1; line-height: 1.1;
word-wrap: break-word; word-wrap: break-word;
} }
/* Media Query */ /* Media Query */
@media (hover: hover) { @media (hover: hover) {
.__function button:hover { .__function button:hover {
color: var(--button-hover-foreground); color: var(--button-hover-foreground);
background: var(--button-hover-backround); background: var(--button-hover-backround);
} }
} }
/* Font Size */ /* Font Size */
@media (max-width: 30rem) { /* 480px */ @media (max-width: 30rem) { /* 480px */
html { html {
font-size: calc(1rem - 10%); font-size: calc(1rem - 10%);
} }
} }
/* -------- */ /* -------- */

22
index.html
View file

@ -1,20 +1,20 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="author" content="westtle"> <meta name="author" content="westtle">
<meta name="description" content="A very simple notepad that you can use."> <meta name="description" content="A very simple notepad that you can use.">
<meta name="keywords" content="notepad, note, notepad online, simple note, simple notepad"> <meta name="keywords" content="notepad, note, notepad online, simple note, simple notepad">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Note</title> <title>Simple Note</title>
<link rel="icon" type="image/x-icon" href="#"> <link rel="icon" type="image/x-icon" href="#">
<!-- <link rel="stylesheet" type="text/css" href="assets/styles/style.min.css"> --> <!-- <link rel="stylesheet" type="text/css" href="assets/styles/style.min.css"> -->
</head> </head>
<body> <body>
<main> <main>
</main> </main>
<!-- <script type="text/javascript" src="assets/scripts/script.min.js"></script> --> <!-- <script type="text/javascript" src="assets/scripts/script.min.js"></script> -->
</body> </body>
</html> </html>