Make Your Own Notepage

[Tutorial Tuesday]

Today we are going to create a notes list which you can use to create a string of timestamped notes. This can be similar to a log of notes that a doctor might make when you visit her office.

Features

  • You can add notes to your string of notes.
  • Each note will be timestamped.
  • If you save the notes page by pressing CTRL + S you can open the saved page again and take up adding notes where you left off.
  • You can print your notes page by clicking on the ‘Print Notes’ button.

Let’s get started. . . .

First a screenshot to tell us where we are going.

Creating the Page

First, we will create an HTML page. An HTML page is simply made up of containers.

First, there is the outer container:

<html>
</html>

Inside this container, we create a few inner containers. We have to define a body container to hold everything. Inside the body container, we start adding additional containers. One for our javascript code (script), one for our text area (textarea) and one to hold the containers of text that we will add later. (div)

<html>
<body>
<script></script>
<textarea></textarea>
<div></div>
</body>
</html>

We also add a couple of buttons, as well as some text to our html page.

For each of our containers, we also set an ID.

<html>
<body>
<textarea id="textArea" rows="4" style="width:100%;">
Your Text Entry Here.
</textarea>
<input type="button" onclick="myFunction();" value="Add Entry"></input>
<input type="button" onclick="window.print();" value="Print Document"></input>
<p><b>To save your document press Ctrl + s</b></p>
<p><hr/></p>
<div id="myDiv">

</div>
</body>
</html>

You will notice that the buttons have ‘onclick’ events. When you click the ‘Print Document’ button, the printing dialog appears. When you click on ‘Add Entry’ the page looks for myFunction.

myFunction will be added in the script section. The inner workings are explained in the comments.

<script>
function myFunction() {
    // Get the text from the textarea element.
    // Add the date and a couple of spaces.
    var x = document.getElementById("textArea").value;
    var dt = Date();
    txt = dt +  '<br><br>' + x +  '<br><br><hr/>';
    
    // Add the text that you have created to the div container.    
    // Thank You to Stack Overflow: https://stackoverflow.com/questions/10328210/javascriptdiv-appendchild
    var outerDiv = document.getElementById('myDiv');
    var newDiv = document.createElement("div");
    newDiv.innerHTML = txt;                                // The new div text is the text created above.
    outerDiv.appendChild(newDiv);
    
    //Reset the text area to be nothing
    document.getElementById("textArea").value = "";
}
</script>

When you put it all together, and we have to following full script.

<html>
<body>
<style> body {font-family: Arial, Helvetica, sans-serif;}</style>

<script>
function myFunction() {
	// Get the text from the textarea element.
	// Add the date and a couple of spaces.
	var x = document.getElementById("textArea").value;
	var dt = Date();
	txt = dt +  '<br><br>' + x +  '<br><br><hr/>';
	
	// Add the text that you have created to the div container.	
	// Thank You to Stack Overflow: https://stackoverflow.com/questions/10328210/javascriptdiv-appendchild
	var outerDiv = document.getElementById('myDiv');
	var newDiv = document.createElement("div");
	newDiv.innerHTML = txt;								// The new div text is the text created above.
	outerDiv.appendChild(newDiv);
	
	//Reset the text area to be nothing
	document.getElementById("textArea").value = "";

}
</script>

<textarea id="textArea" rows="4" style="width:100%;">
Your Text Entry Here.
</textarea>
<input type="button" onclick="myFunction();" value="Add Entry"></input>
<input type="button" onclick="window.print();" value="Print Document"></input>
<p><b>To save your document press Ctrl + s</b></p>
<p><hr/></p>
<div id="myDiv">

</div>
</body>
</html>

Click here to see the full working version.

If you type CTRL+S you can save the page to your own drive and use it when you want. Remember that to keep the text you will need to save it every time.