Implement basic typing canvas
This commit is contained in:
commit
7da9efef13
12
index.html
Normal file
12
index.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>typehere</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<textarea id="typingCanvas" autofocus></textarea>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
10
script.js
Normal file
10
script.js
Normal file
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
27
style.css
Normal file
27
style.css
Normal file
@ -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 */
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user