Currently I'm making a website that has a to-do list that will probably become quite long to write in html. So I decided to make a shorter version for me to write that I find more comfortable to read.
What I am currently doing is using ajax to read the text file from the server. Once the file has been stored into a string, it's sent to a function which formats it correctly for html. After that, it's returned into a variable that is now stored into a container div
using jquery div.
This is my javascript code:
var todoListMake = function( reading ){
var wanted =reading.split("\n");
var newString = "";
for( var i = 0; i < wanted.length; i ++ )
{
if( wanted[i] === "\n" )
continue;
/* Place text formatting code below */
wanted[i] = wanted[i].replace("<b>","<strong>");
wanted[i] = wanted[i].replace("</b>","</strong>");
wanted[i] = wanted[i].replace("<c>","<span class=\"cutWord\">");
wanted[i] = wanted[i].replace("</c>","</span>");
if( wanted[i].search("[X]") != -1 )
{
wanted[i] = "<span class=\"workDone\">" + wanted[i].replace("[X]","") + "</span>";
}
if( wanted[i].search("<ul") === -1 && wanted[i].search("</ul") === -1 )
wanted[i] = "<li>" + wanted[i]; // Open the list if no ul tags
if (i === (wanted.length-1) )
{
newString += wanted[i];
break;
}// Break early because the rest cannot be processed correctly
if( wanted[i].search("</ul") != -1 )
wanted[i] += "</li>"; // Close the list at the end of each ul
if ( wanted[i + 1].search("</ul") != -1 )
wanted[i] += "</li>";// Close the list of regular data
//alert(wanted[i]);
newString += wanted[i];
}
return newString;
};
window.onload = function(){
$.get("textData/todoData.txt", function(data) {
var compiledData = todoListMake( data );
$("#todoList").append( compiledData );
});
};
And then read from the text file like this:
<ul id="todoList" class="workList">
<h2>Release 1:</h2> <span class="important"> Completed </span>
<h2>Release 2: <span class="important"> Current Version </span></h2>
<ul>
<b>Core Additions</b>
<ul>
[X] Save Progress
[X] <c>14</c> 9 New Levels
</ul>
<b>Programmers Check List</b>
<ul>
[X] Add functionality to Level Restart
[X] Add checkpoint floater
</ul>
<b>Bug Fixes</b>
<ul>
[X] Hanging on Slopes teleport you
[X] Hanging on Slopes froze the game
[X] Fixed Menu overlay problem
</ul>
</ul>
</ul>
innerHTML
. \$\endgroup\$$.append
to edit the html inside the div because I read somewhere in the past that innerHTML some times destroys other tags and data. \$\endgroup\$