From 7da9efef1303d84163e069fb3c19cf8c1d511c01 Mon Sep 17 00:00:00 2001 From: "dheeraj.reddy" Date: Sat, 18 Nov 2023 17:40:49 -0800 Subject: [PATCH] Implement basic typing canvas --- index.html | 12 ++++++++++++ script.js | 10 ++++++++++ style.css | 27 +++++++++++++++++++++++++++ 3 files changed, 49 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..f3ca3dc --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + typehere + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..2fb8fbe --- /dev/null +++ b/script.js @@ -0,0 +1,10 @@ +document.addEventListener('DOMContentLoaded', () => { + const typingCanvas = document.getElementById('typingCanvas'); + + typingCanvas.value = localStorage.getItem('storedText') || ''; + + typingCanvas.addEventListener('input', () => { + localStorage.setItem('storedText', typingCanvas.value); + }); +}); + diff --git a/style.css b/style.css new file mode 100644 index 0000000..20143ed --- /dev/null +++ b/style.css @@ -0,0 +1,27 @@ +html, body { + height: 100%; + margin: 0; + padding: 0; + background-color: #f0f0f0; /* Slightly off-white background for better visibility */ +} + +#typingCanvas { + width: 100%; + height: 100%; + border: none; + outline: none; /* Removes the default focus outline */ + background: transparent; /* Makes the textarea background transparent */ + margin: 0; + padding: 20px; /* Adds some padding for better text positioning */ + resize: none; + font-family: "Lucida Console", "Courier New", monospace; + font-size: 20px; + color: #333; /* Darker text color for better contrast */ +} + +/* Ensuring the cursor is always visible */ +#typingCanvas:focus { + outline: none; /* Removes the outline to keep the interface clean */ + caret-color: blue; /* Makes the cursor blue for better visibility */ +} +