I don't know how to save some text in a div with 'ContentEditable="true"' set?
Basically, I'm very naive about HTML and CSS coding, and JS is way beyond my capabilities. However, I have managed to make some sort of schedule for myself using HTML and CSS.
The problem is, I don't know how to make the text placed in a div in HTML (with contenteditable set to true) persist and display the next time the html file is opened on the browser.
I will only be using my application in localhost and don't want to use any kind of database.
Looking forward to your expertise and friendly help. The required information is as follows--
.quote
{
width: 92%;
height: 48vh;
margin: 2% auto auto auto;
background-color: beige;
border-style: solid;
border-width: 12px;
border-color: aqua;
display: grid;
grid-template-rows: 12% auto;
}
.quote .p
{
height: 100%;
margin:0 auto auto 12px;
font-family: 'Montserrat', sans-serif;
font-size: 12vh;
background-image: linear-gradient(180deg, rgba(26,18,189,1) 51%, rgba(43,181,131,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.quote .p p
{
height: 100%;
width: 100%;
margin:0;
}
.quote .writetext
{
min-height: 8vmax;
max-height: 19vmax;
width: 25.6vmax;
margin: 12px auto 12px auto;
border-style: solid;
border-width: 2px;
border-color: white;
font-family: 'Patrick Hand', cursive;
font-size: 4vh;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DayMaker- Welcome</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@-1,600&display=swap" rel="stylesheet">
</head>
<body>
<div class="quote">
<div class="p"><p>"</p></div>
<div class="writetext" contenteditable="true">
</div>
</div>
</body>
</html>
NOTE: The given code snippet is part of a larger project. So please ignore the graphics differences.
Here's a picture of the project I'm working on: -We need to fix that box in the lower right corner
I tried searching a lot of solutions online but couldn't find any. Sincerely look forward to your help.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You need a database, I know there is no way to do this without a database, if you have problems with SQL you can use Excel, otherwise I have no solution other than using a database