Jump to content

Help Adding a Time Stamp to a To-Do List


forex4noobs

Recommended Posts

Hi Guys,

 

I need some help please. I am coding a mootools based to-do list for my website.

 

http://www.Domain Name Spam Removed.com/forex-tools/trade-list.php

 

In the link above if you put something in the 'add' field and click the button it adds it to the box below. It works perfectly so far however I want a timestamp added every time a new item is created.

 

Is there any way to get this done with PHP?

 

I am a complete PHP newbie I am guessing this very easy stuff but it is beyond me.

 

Thanks,

Nick

Link to comment
Share on other sites

Ok I will try an explain it in more detail.

 

I am creating a mootools javascript based to-do list. The list is extremely simple. It has a single field into which you enter some text. Once you press the button the entered text is added to the to-do list. In the example below you see I have added 'blah 1' 'blah 2' ect.

 

blahs.png

 

The problem I have so far is that I want a timestamp added to each item. I believe this can be accomplished via PHP. However, it is beyond my skill level. So what I want is a timestamp added to in front of each item on the list showing when the item was added to the list. Ideally I would want something like what is show in the image below:

 

blah2.png

 

The time would be based on the users computer time. The current code is below:

 

HTML:

    <div id="tradeList">
    <form id="addTask">
  	  <input type="text" id="newTask" />
	  <input type="submit" value="Add!" />
  </form>

  <div id="listArea">
	  <ol id="todo"></ol>
  </div>

  <div id="data"/></div>
  </div>

 

JS

window.addEvent('domready', function() {

//This is the function that will run every time a new item is added or the 
//list is sorted.
var showNewOrder = function() {
	//This function means we get serialize() to tell us the text of each 
	//element, instead of its ID, which is the default return.
	var serializeFunction = function(el) { return el.get('text'); };
	//We pass our custom function to serialize();
	var orderTxt = sort.serialize(serializeFunction);
	//And then we add that text to our page so everyone can see it.
	$('data').set('text', orderTxt.join(' '));
};

//This code initalizes the sortable list.
var sort = new Sortables('.todo', {
	handle: '.drag-handle',
	//This will constrain the list items to the list.
	constrain: true,
	//We'll get to see a nice cloned element when we drag.
	clone: true,
	//This function will happen when the user 'drops' an item in a new place.
	onComplete: showNewOrder
});

//This is the code that makes the text input add list items to the <ul>,
//which we then make sortable.
var i = 1;
$('addTask').addEvent('submit', function(e) {
	e.stop();
	//Get the value of the text input.
	var val = $('newTask').get('value');
	//The code here will execute if the input is empty.
	if (!val) {
		$('newTask').highlight('#f00').focus();	
		return; //Return will skip the rest of the code in the function. 
	}
	//Create a new <li> to hold all our content.
	var li = new Element('li', {id: 'item-'+i, text:val});
	//This handle element will serve as the point where the user 'picks up'
	//the draggable element.
	var handle = new Element('div', {id:'handle-'+i, 'class':'drag-handle'});
	handle.inject(li, 'top');
	//Set the value of the form to '', since we've added its value to the <li>.
	$('newTask').set('value', '');
	//Add the <li> to our list.
	$('todo').adopt(li);
	//Do a fancy effect on the <li>.
	li.highlight();
	//We have to add the list item to our Sortable object so it's sortable.
	sort.addItems(li);
	//We put the new order inside of the data div.
	showNewOrder();
	i++;
});

});

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.