Your data private and safe --
New updated code notepade ---
See the Pen notepade using javascript by sknetking (@sknetking) on CodePen.
Resume create using this page free->>>
Source Code Just Copy And Past Your note-Pad ready to USE --
I will also create this tool in PHP and save data in server and local storage --
If you want sever site save data please comment --
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notepad By Shyam</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="separator" style="clear: both; display: none;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBiefBZCnEwUzpFQh4IG0pSKMr0kdmDAEwkQ4s-v9ONNn2A85tzT3o29MKESrfSJzW-uViJsIcQjmWGBlIGooodq1NxC5c6wE5maG_sNKIKeS1tLbGfXF8xKJ7Cg98y4Txvh865YiVrRY/s0/sknetking_notepad.png" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="881" data-original-width="794" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBiefBZCnEwUzpFQh4IG0pSKMr0kdmDAEwkQ4s-v9ONNn2A85tzT3o29MKESrfSJzW-uViJsIcQjmWGBlIGooodq1NxC5c6wE5maG_sNKIKeS1tLbGfXF8xKJ7Cg98y4Txvh865YiVrRY/s0/sknetking_notepad.png" /></a></div>
<style>
.container{
}
.your_text {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBiefBZCnEwUzpFQh4IG0pSKMr0kdmDAEwkQ4s-v9ONNn2A85tzT3o29MKESrfSJzW-uViJsIcQjmWGBlIGooodq1NxC5c6wE5maG_sNKIKeS1tLbGfXF8xKJ7Cg98y4Txvh865YiVrRY/s0/sknetking_notepad.png");
background-repeat: no-repeat;
background-size: cover;
height: 500px;
width: 80%;
padding-left: 7vh;
padding-top: 10px;
padding-bottom: 25px;
padding-right: 3vh;
margin-right: 10px;
}
.container {
background-image: url("");
background-repeat: no-repeat;
}
button#save {
background-color: #ec8e00;
font-size: 21px;
color: white;
margin: 6px;
}
button#save_server {
background-color: green;
font-size: 18px;
margin: 6px;
}
#copy{
float: right;
background: aquamarine;
}
button#reset {
background-color: red;
color: white;
font-size: 15px;
margin: 1px;
}
</style>
</head>
<body>
<h1>Your data private and safe --</h1>
<div class="container">
<label for="autosave">AutoSave Enable
<input type="checkbox" id="autosave" value="AutoSave"> </label>
<button id="copy" onclick="myFunction();">Copy text</button> <br />
<textarea class="your_text" cols="30" id="data" rows="15"></textarea> <br />
<button id="save">Save locally</button>
<button id="reset" type="reset">Reset/Delete</button>
</div>
<script>
$(document).ready(function() {
$("#data").val(localStorage.getItem("you_data"));
$("#save").click(function() {
if (typeof(Storage) !== "undefined") {
localStorage.setItem("you_data", $("#data").val());
alert('You data saved..');
} else {
alert('Sorry! No Web Storage support..');
}
});
//auto save function
$("#data").change(function (){
if($("#autosave").prop('checked') == true){
if (typeof(Storage) !== "undefined") {
localStorage.setItem("you_data", $("#data").val());
alert('You data saved..');
}
}
});
//deleting data from local storage
$("#reset").click(function() {
var return_val = confirm("Your Data will delete permanent!");
if (return_val) {
localStorage.removeItem("you_data");
$(".your_text").val("");
}
});
$("#copy").click(function() {
var copyText = document.getElementById("data");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
});
});
</script>
</body>
</html>
0 Comments