[RESOLVED] Need help with To-Do list. New to JS

**KyleMD** · 06-12-2012 12:29 PM

Alright, I'm at the end of my sanity and I'm trying to figure out where to begin. Basically what I need to do is be able to take inputs from a form and output them in a string.

So, if I have a form that's like:

HTML Code:

<body>
   <section id="sidebar">
      <input type="button" id="new_button" value="Add Task">
      <ul id="todo_tasks">
      </ul>
	  <ul id="completed_tasks">
	  </ul>
    </section> 
    <section id="main">
      <form>
        <ol>
        <li>
            <input type="submit" id="save_button" value="Save" onsubmit="AddItem()"/>
        </li>
        <li>
            <label for="title">Title</label>
            <input type="text" id="title" required pattern="[a-zA-Z ]+" />
        </li>

        <li>
            <label for="note">Note</label>
            <textarea id="note" required pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{5,12}$" ></textarea>
        </li>
		<li>
				<label for="priority">Priority</label>
				<select name="priority">
					<option value="high">High</option>
					<option value="low">Low</option>
				</select>
		</li>
		<li>
			<input type="radio" name="complete" id="complete" value="todo"  checked="checked" />
			<label for="todo">To Do</label>
			<input type="radio" name="complete" id="complete" value="completed" />
			<label for="complete">Complete</label>
		</li>
        </ol>
      </form>
    </section>
</body>

However, I haven't really used JavaScript in almost a year and I've forgotten a lot of the commands and syntax.

In short, I'm not sure if I'm able to have a function where it basically says:

document.write("Title" + "Note" + "Priority") and then post it into todo_tasks or completed_tasks based on what radio input is selected when the user clicks the Save button.

I know how to do this with HTML5 localstorage, but I need to be able to do this on IE, and I'm not even sure where to begin with it.

As for JavaScript, what I have is just the functions I -think- I'll need, but I don't know where to begin with what I need to have in the brackets to make them work.

Code:

function newItem(){

}

function completeItem(){
document.getElementbyId("complete")
	if (value=="completed") {
	document.write("");
	} else {
	document.write("");
}

function onClick(){

}

function editItem(){

}

Any help, direction, advice, or links are greatly appreciated.

(Yes, I know this looks like a train wreck)

**jdinflatable** · 06-12-2012 02:32 PM

Hi everybody.!

**KyleMD** · 06-12-2012 04:04 PM

Ok, so a few more hours after working with it, I think I have enough of a JavaScript awareness again to at least ... kinda make the functions look like they're supposed to do what I want them to.

Basically what I'm trying to accomplish is a to-do list that posts the Title, Note, and Priority as a string like

"title" + "note" + "priority" so it might look like:
"Store | Get milk, eggs, bread | Low"

If I could get suggestions on how to figure a way to sort it so higher priority items are at the the top, that'd be great, but my focus right now is just getting the list to work.

In order to "check off" items, I'm trying to get it to apply a the "complete" class which turns the background color of the <li> that has that string black.

So, "Store | Get milk, eggs, bread | Low"
becomes equivalent to
"Store | Get milk, eggs, bread | Low"
so it's basically not seen.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="include/js/form.js"></script>
<link rel="stylesheet" type="text/css" href="include/css/core.css" />
<title>To Do List</title>
</head>


<body>	
    <section id="main">
      <form>
        <ol>
		<li>
		<input type="button" id="new_button" value="Add Task" action="resetField()">
		</li>
        <li>
            <label for="title">Title</label>
            <input type="text" id="title" required pattern="[a-zA-Z ]+" />
        </li>

        <li>
            <label for="note">Note</label>
            <textarea id="note" required pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{5,12}$" ></textarea>
        </li>
		<li>
				<label for="priority">Priority</label>
				<select name="priority" id="priority">
					<option value="high">High</option>
					<option value="low">Low</option>
				</select>
		</li>
        <li>
            <input type="submit" id="save_button" value="Save" onsubmit="newNote()"/>
        </li>
        </ol>
      </form>
    </section>
	
   <section id="list">
	<h3 style="text-align:center;">To-Do List</h3>
      <ul id="tasks">
      </ul>
    </section> 
	
</body>
</html>

Code:

function newNote(){
	var $title = getElementbyId("title");
	var $note = getElementbyId("note");
	var $priority = getElementbyId("priority");
	$printList();
	return newNote();
}

function printList(){
	var list = document.getElementById('tasks');
	var $listNote = document.write("$title" + "|" + "$note" + "|" + "$priority");
	var li = document.createElement('li');
	list.insertAfter(li, list.firstChild);
}

function completeItem(){
	document.getElementbyId("li").className = "";
	document.getElementbyId("li").onmousedown = toggleColor;

}

function toggleColor(evt){
if (evt) {
	var thisNote = evt.target;
} else {
	var thisNote = window.event.srcElement;
}
if (thisNote == "") {
	thisNote.className = "completed";
} else {
	thisNote.className = "";
}

}

function resetField(){

}

**JMRKER** · 06-12-2012 05:22 PM

Can you post the CSS info so I could test your code.
Can I assume that the form.js information is in the second half of your post #3?

**KyleMD** · 06-12-2012 06:48 PM

Yeah, sorry about that, lemme get the current code (made some more progress)

index.html

HTML Code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="include/js/form.js"></script>
<link rel="stylesheet" type="text/css" href="include/css/core.css" />
<title>To Do List</title>
</head>


<body>	
    <section id="main">
      <form>
        <ol>
        <li>
            <label for="title">Title</label>
            <input type="text" id="title" />
        </li>

        <li>
            <label for="note">Note</label>
            <textarea id="note"></textarea>
        </li>
		<li>
				<label for="priority">Priority</label>
				<select name="priority" id="priority">
					<option value="High">High</option>
					<option value="Low">Low</option>
				</select>
		</li>
        <li>
            <input type="button" id="add_task" value="Add Task" onClick="newNote()"/>
        </li>
        </ol>
      </form>
    </section>
	
   <section id="list">
	<h3 style="text-align:center;">To-Do List</h3>
      <ul id="tasks">
	  <li id="blah">test</li>
      </ul>
    </section> 
	
</body>
</html>

form.js

Code:

function testMe() {
    var title = document.getElementById("title").value;
    alert(title);
    }
	
function newNote() {
	var title = document.getElementById('title').value;
	var note = document.getElementById('note').value;
	var priority = document.getElementById('priority').value;
	var listItem = title+' | '+note+' | '+priority;
	alert(listItem);
	printList();
	return newNote();
}

function printList() {
	var list = document.getElementById('tasks');
	var listNote = document.write(title+note+priority);
	var li = document.createElement('li');
}

function completeItem() {
	document.getElementById('li').className = ""; 
	document.getElementById('li').onmousedown = toggleColor;
}

function toggleColor(evt) {
if (evt) {
	var thisNote = evt.target;
} else {
	var thisNote = window.event.srcElement;
}

if (thisNote == "") {
	thisNote.className = "completed";
} else {
	thisNote.className = "";
}

}

function resetField() {

}

core.css

Code:

#list, #main {
	display: block;
	float: left;
}

#list {
	width: 35&#37;;
}

#main {
	width: 75%;
}

form ol {
	list-style:none;
	margin:0;
	padding:0;
}

form li {
	padding:5px 0px 5px 0px;
	margin:0;
}

form li label {
	display:block;
}

#title, #note {
	width:100%;
	font-size:14px;
	border: 1px solid #000;
}

#title {
	height:20px;
}

#note {
	height: 40px;
}

.complete {
	background-color:black;
}