added minified css & js

assets/scripts/script.min.js

@@ -0,0 +1 @@
+const noteTitle=document.querySelector(".__title input"),noteBody=document.querySelector(".__body textarea"),selectAllButton=document.querySelector("._select-all"),deleteAllButton=document.querySelector("._delete-all"),confirmDeleteButton=document.querySelector("._delete-confirm"),saveToLocalButton=document.querySelector("._save-to-local");function selectAll(){noteBody.select()}function showDeleteConfirm(){confirmDeleteButton.style.display="inline",deleteAllButton.style.display="none",setTimeout(()=>{confirmDeleteButton.style.display="none",deleteAllButton.style.display="inline"},2500)}function confirmDelete(){confirmDeleteButton.style.display="none",deleteAllButton.style.display="inline",noteTitle.value="",noteBody.value="",saveText(),saveTitle()}function downloadNote(){let e=noteTitle.value||"Simple Note",t=noteBody.value,l=document.createElement("a");l.setAttribute("href","data:text/plain;charset=utf-8,"+encodeURIComponent(t)),l.setAttribute("download",e),l.style.display="none",document.body.appendChild(l),l.click(),document.body.removeChild(l)}const storageNoteTitle="Note_Title",storageNoteText="Note_Text";function saveTitle(){localStorage.setItem(storageNoteTitle,noteTitle.value)}function saveText(){localStorage.setItem(storageNoteText,noteBody.value)}function loadData(){let e=localStorage.getItem(storageNoteTitle)||"";noteTitle.value=e;let t=localStorage.getItem(storageNoteText)||"";noteBody.value=t}noteTitle.addEventListener("input",saveTitle),noteBody.addEventListener("input",saveText),selectAllButton.addEventListener("click",selectAll),deleteAllButton.addEventListener("click",showDeleteConfirm),confirmDeleteButton.addEventListener("click",confirmDelete),saveToLocalButton.addEventListener("click",downloadNote),document.addEventListener("DOMContentLoaded",()=>{loadData()});

assets/styles/style.css

@@ -85,7 +85,7 @@ h2 {
 	width: 100%;
 }
 
-.__function button {
+button {
 	border: none;
 	min-width: 20%;
 	padding: var(--unit-one) var(--unit-two);
@@ -100,7 +100,7 @@ h2 {
 ._delete-all,
 ._delete-confirm {
 	color: #fff;
-	background: #fd6060;
+	background: #FD5E5E;
 }
 
 ._delete-confirm {
@@ -118,16 +118,4 @@ h2 {
 		color: var(--button-hover-color);
 		background: var(--button-hover-backround);
 	}
-}
-
-@media (max-width: 28.75rem) {
-	html {
-		font-size: calc(1rem - 8%);
-	}
-}
-
-@media (max-width: 20rem) {
-	html {
-		font-size: calc(1rem - 12%);
-	}
 }

assets/styles/style.min.css

@@ -0,0 +1 @@
+body,h2{margin-top:0}.__body textarea,.__title input{border:var(--border-shorthand);outline:0;width:100%}:root{--font-size-main:0.906rem;--font-size-second:0.688rem;--color-main:rgba(0, 0, 0, 0.8);--border-main:rgba(0, 0, 0, 0.6);--border-shorthand:0.063rem solid rgba(0, 0, 0, 0.6);--button-hover-backround:rgba(0, 0, 0, 0.8);--button-hover-color:rgba(255, 255, 255, 0.9);--font-size-button:0.769rem;--unit-one:0.438rem;--unit-two:0.75rem}*{color:var(--color-main);box-sizing:border-box}body{height:100vh;margin-bottom:0;font-size:var(--font-size-main)}.__body textarea,.__title input,button{padding:var(--unit-one) var(--unit-two);font-size:var(--font-size-button)}main{height:calc(100% - 9vh);padding:var(--unit-two)}#simple-note{display:flex;flex-direction:column;align-items:center;height:100%;max-width:32rem;margin:4.5vh auto}.__title{width:100%}.__title input{border-bottom:0;border-radius:.188rem .188rem 0 0;font-style:italic;font-weight:700}.__body{height:100%;width:100%}.__body textarea{border-bottom:none;border-radius:0;height:100%;resize:none;overflow-y:scroll}.__function{display:flex;border:var(--border-shorthand);width:100%}button{border:none;min-width:20%;cursor:pointer}.__function button:not(:last-child){border-right:var(--border-shorthand)}._delete-all,._delete-confirm{color:#fff;background:#fd5e5e}._delete-confirm{display:none}._save-to-local{border-left:var(--border-shorthand)!important;margin-left:auto}@media (hover:hover){.__function button:hover{color:var(--button-hover-color);background:var(--button-hover-backround)}}

index.html

@@ -9,7 +9,7 @@
 	<title>Simple Note</title>
 
 	<link rel="icon" type="image/x-icon" href="#">
-	<link rel="stylesheet" type="text/css" href="assets/styles/style.css">
+	<link rel="stylesheet" type="text/css" href="assets/styles/style.min.css">
 </head>
 <body>
 	<main>
@@ -34,6 +34,6 @@
 		</div>
 	</main>
 
-	<script type="text/javascript" src="assets/scripts/script.js"></script>
+	<script type="text/javascript" src="assets/scripts/script.min.js"></script>
 </body>
 </html>