www.webdeveloper.com
Results 1 to 7 of 7

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

  1. #1
    Join Date
    Jun 2012
    Posts
    4

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

    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)

  2. #2
    Join Date
    Jun 2012
    Location
    california
    Posts
    1
    Hi everybody.!

  3. #3
    Join Date
    Jun 2012
    Posts
    4
    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(){
    
    }

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Question

    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?

  5. #5
    Join Date
    Jun 2012
    Posts
    4
    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;
    }
    Last edited by KyleMD; 06-12-2012 at 08:05 PM.

  6. #6
    Join Date
    Jun 2012
    Posts
    4
    I finally managed to get it all worked out.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Question

    Quote Originally Posted by KyleMD View Post
    I finally managed to get it all worked out.
    So can you share?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles