added style for print

assets/scripts/simple-note.js

@@ -5,6 +5,9 @@ const inputBody = document.querySelector(".simple-note__input--body");
 const clearButton = document.querySelector(".settings__button--clear");
 const downloadButton = document.querySelector(".settings__button--download");
 
+const printHelperTitle = document.querySelector(".print-helper__title");
+const printHelperBody = document.querySelector(".print-helper__body");
+
 function clearNote() {
     const confirmDelete = confirm("Are you sure you want to clear your note? Press OK to clear.");
 
@@ -14,6 +17,7 @@ function clearNote() {
 
         saveTitle();
         saveBody();
+        updatePrint();
     };
 };
 
@@ -33,6 +37,11 @@ function downloadNote() {
     document.body.removeChild(element);
 };
 
+function updatePrint() {
+    printHelperTitle.innerText = inputTitle.value;
+    printHelperBody.innerText = inputBody.value;
+};
+
 // Local Storage.
 const note_title = "Note_Title";
 const note_body = "Note_Body";
@@ -68,9 +77,13 @@ const debouncedSaveBody = debounce(saveBody);
 
 inputTitle.addEventListener("input", debouncedSaveTitle);
 inputBody.addEventListener("input", debouncedSaveBody);
+inputTitle.addEventListener("change", updatePrint);
+inputBody.addEventListener("change", updatePrint);
+
 downloadButton.addEventListener("click", downloadNote);
 clearButton.addEventListener("click", clearNote);
 
 document.addEventListener("DOMContentLoaded", () => {
     loadNote();
+    updatePrint();
 });

assets/styles/print.css

@@ -0,0 +1,52 @@
+/*
+-----------
+Print Media
+-----------
+*/
+
+@media print {
+    :root[data-theme="dark"] {
+        /*
+            Obviously you don't want the
+            whole page to be dark.
+        */
+        --color-1: var(--black), 0.8;
+        --color-2: var(--white);
+    
+        color-scheme: light;
+    }
+
+    @page {
+        size: A4;
+        margin: 2cm;
+    }
+
+    .settings,
+    .simple-note__inputs { display: none; }
+    
+    .simple-note {
+        width: 100%;
+        max-width: none;
+        padding: 0;
+    }
+
+    .simple-note__print-helper {
+        display: block;
+        line-height: 1.5;
+    }
+    
+    .print-helper__title {
+        font-family: var(--font-2);
+        font-size: 20pt;
+        font-weight: 500;
+        margin-bottom: 0.7cm;
+        word-wrap: break-word;
+    }
+    
+    .print-helper__body {
+        font-family: var(--font-1);
+        font-size: 14pt;
+        font-weight: 400;
+        word-wrap: break-word;
+    }
+}

assets/styles/simple-note.css

@@ -41,4 +41,6 @@ body {
 
 @supports (display: flex) {
     .simple-note__input--body { height: auto; }
-}
+}
+
+.simple-note__print-helper { display: none; }

index.html

@@ -53,6 +53,7 @@
     <link rel="stylesheet" type="text/css" href="./assets/styles/settings.css" />
     <link rel="stylesheet" type="text/css" href="./assets/styles/simple-note.css" />
     
+    <link rel="stylesheet" type="text/css" href="./assets/styles/print.css" media="print" />
     <!-- No JS Fallback -->
     <noscript><link rel="stylesheet" type="text/css" href="./assets/styles/no-js.css" /></noscript>
 </head>
@@ -162,6 +163,10 @@
                     <p>Hello, it seems you have JavaScript disabled. This site uses localStorage to save your note on the web. You can still type in here, but if you want your note to be saved, you need to have JavaScript enabled (Unless you're using Firefox since it can remember your input).</p>
                 </noscript>
             </div>
+            <div class="simple-note__print-helper" aria-hidden="true" tabindex="-1">
+                <div class="print-helper__title"></div>
+                <div class="print-helper__body"></div>
+            </div>
         </section>
     </main>