first init / release
This commit is contained in:
westtle
commit
764bcf5b58
3 changed files with 231 additions and 0 deletions
88
assets/scripts/script.js
Normal file
88
assets/scripts/script.js
Normal file
|
|
@ -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);
|
||||
103
assets/styles/style.css
Normal file
103
assets/styles/style.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
40
index.html
Normal file
40
index.html
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue