Jquery to-do list

Developer
Drew Adams
Size
7,354 Kb
Views
28,336
  1. Jquery to-do list Previews
  2. Jquery to-do list HTML Codes
  3. Jquery to-do list CSS Codes
  4. Jquery to-do list JS Codes

How do I make an jquery to-do list?

What is a jquery to-do list? How do you make a jquery to-do list? This script and codes were developed by Drew Adams on 04 October 2022, Tuesday.

Jquery to-do list Previews
IQ Test

Jquery to-do list - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jquery to-do list</title> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="add-item-prompt-container">	<div class="add-item-prompt">	<p>Task Title</p>	<input name="task-title" type="text" />	<p>Task Description</p>	<textarea name="task-description" type="text"></textarea>	<div class="submit no-select">Submit</div>	</div>	</div>	<div class="header">	<p class="date"></p>	</div>	<div class="content">	<div class="picker">	<p>Date:</p>	<input class="date-picker" type="text">	<div class="add-item">+</div>	</div>	<div class="task-container">
<!--	<div class="task">	<p class="task-name">task name</p>	<p class="task-description">this is the task description</p>	</div>	<div class="task">	<p class="task-name">task name</p>	<p class="task-description">this is the task description</p>	</div>	<div class="task">	<p class="task-name">task name</p>	<p class="task-description">this is the task description</p>	</div> -->	</div>	</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Jquery to-do list - Script Codes CSS Codes

html { box-sizing: border-box;
}
*:before, *:after { box-sizing: border-box;
}
.no-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
}
.container { background-color: #c0c0c0; border: 1px solid #002F51; font-family: 'Roboto', sans-serif; height: 568px; width: 320px; margin: 35px auto 0; overflow: hidden; position: relative;
}
.container .add-item-prompt-container { background-color: rgba(0, 0, 0, 0.5); display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0;
}
.container .add-item-prompt-container .add-item-prompt { background-color: #c0c0c0; margin: 85px auto 0; padding: 20px 15px;
}
.container .add-item-prompt-container .add-item-prompt input { margin-bottom: 15px;
}
.container .add-item-prompt-container .add-item-prompt textarea { height: 90px; width: 97%;
}
.container .add-item-prompt-container .add-item-prompt .submit { border: 1px solid #002F51; border-radius: 7px; cursor: pointer; display: inline-block; margin-top: 10px; padding: 7px 15px; position: relative; left: 50%; text-align: center; text-transform: uppercase; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; transform: translateX(-50%);
}
.container .add-item-prompt-container .add-item-prompt .submit:hover { background-color: #4886a1; color: #ffffff;
}
.container .add-item-prompt-container .add-item-prompt .submit:active { background-color: #002F51; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none;
}
.container .header { background-color: #002F51; border-bottom: 1px solid #002F51; color: #ffffff; padding: 10px 0; text-align: center;
}
.container .header .date { font-size: 18px;
}
.container .content { padding: 10px;
}
.container .content .picker { border-bottom: 2px dashed #002F51; padding-bottom: 15px;
}
.container .content .picker p { display: inline-block; vertical-align: middle;
}
.container .content .picker .date-picker { cursor: pointer; display: inline-block; font-size: 16px; text-align: center; max-width: 120px;
}
.container .content .picker .add-item { border: 2px solid white; border-radius: 50%; color: white; cursor: pointer; float: right; font-size: 24px; font-weight: bold; height: 100%; padding: 0 5px; transition: all 0.3s ease-in-out;
}
.container .content .picker .add-item:hover { border-color: #002F51; color: #002F51;
}
.container .content .task-container { margin: 15px 0 0 15px;
}
.container .content .task-container .task { cursor: pointer; margin-bottom: 15px;
}
.container .content .task-container .task:last-child { margin: 0;
}
.container .content .task-container .task:hover { background-color: rgba(0, 0, 0, 0.3);
}
.container .content .task-container .task .task-description { font-size: 14px; font-style: italic;
}
.container #ui-datepicker-div { left: 50%;
}

Jquery to-do list - Script Codes JS Codes

/*
when you have a project, first identify the technologies/languages you may need to complete it (e.g. color pickers (photoshop), jQuery, etc
map out your plan	take the design (if you’ve been given one) and break it down into ‘sections’	white boarding, sketches, etc	UML (unified modeling language) - draw example
start building	caveman vs spaceman	imo, coding is one of the only times where it’s better to understand the why behind a language rather than memorize different parts of the language
never feel ashamed of not knowing methods or syntax	toString() - one of the more common methods among different languages	c#, js : Object.toString()	c++ : to_string(Object)	python : str(Object)	write to consoele	c# : Console.writeline(Object)	c++ : cout << Object	java : System.out.println(Object)	js : console.log(Object)
*/
var $addItem = $('.add-item');
var $addItemPrompt = $('.add-item-prompt-container');
var $datePicker = $('.date-picker');
var $submit = $('.submit');
var $taskContainer = $.extend($('.task-container'), {	// adds task to task-container's html	addTask: function(newTask, taskNumber) {	var taskHTML = '<div class="task" data-task-number="' + taskNumber + '">' +	'<p class="task-name">' + newTask.title + '</p>' +	'<p class="task-description">' + newTask.description + '</p></div>';	this.html(this.html() + taskHTML);	},	// remove all tasks from task-container's html	clearTasks: function() {	this.html('');	}
});// end $taskContainer
var $taskTitle = $('input[name="task-title"]');
var $taskDescription = $('textarea[name="task-description"]');
var currentDate; // stores the current selected date
var month = {	january: 0,	february: 01,	march: 02,	april: 03,	may: 04,	june: 05,	july: 06,	august: 07,	september: 08,	october: 09,	november: 10,	december: 11
};
var myCookieName = 'l&l_cookie';
var tasks = []; // array to store individual tasks
$(document).ready(function() {	// display today's date at the top of the app and in the date picker	$('.date').text(getDate());	$datePicker.val(getDate());	currentDate = $datePicker.val();	// initialize the date-picker	$datePicker.datepicker({ dateFormat: "m/d/yy" }).on('change', function(e) {	var selectedDate = e.target.value;	if(currentDate != selectedDate) {	currentDate = selectedDate;	updateTaskList();	}	});	// add random tasks to the tasks array if nothing is cached	var myCookie = Cookies.get(myCookieName);	if(myCookie == undefined) {	tasks.push(new task('awesome', 'some super cool description', setDate(month.april, 2, 2017)));	tasks.push(new task('meh', 'some super cool description', setDate(month.march, 30, 2017)));	tasks.push(new task('nom nom', 'some super cool description', setDate(month.march, 31, 2017)));	tasks.push(new task('jquery', 'some super cool description', setDate(month.april, 2, 2017)));	tasks.push(new task('a title', 'some super cool description', setDate(month.march, 31, 2017)));	tasks.push(new task('..what?', 'some super cool description', setDate(month.march, 31, 2017)));	alert('here');	}	else {	tasks = JSON.parse(myCookie);	}	// load today's tasks in the task container	updateTaskList();	//	$addItem.click(function() {	// display the add item pop-up	$addItemPrompt.fadeIn();	$addItemPrompt.click(function(e) {	// hide the item prompt	$(this).fadeOut();	});// end $addItemPrompt click event	});// end $addItem click event	$submit.click(function() {	if(inputIsValid()) {	updateTasks();	$addItemPrompt.fadeOut();	}	});	// prevent click events for $addItemPrompt from firing if clicking	// within it's children	$addItemPrompt.find('.add-item-prompt').click(function(e) {	e.stopPropagation();	});
});// end document ready
// purpose: update the displayed tasks
// parameters: none
// returns: nothing
function updateTaskList() {	// clear the displayed tasks	$taskContainer.clearTasks();	// display tasks matching the selected date	for(var i in tasks) {	console.log(tasks[i].dueDate);	console.log(currentDate);	if(tasks[i].dueDate == currentDate) {	$taskContainer.addTask(tasks[i], i);	}	}// end for-loop	// store the tasks in a cookie	setCookie(tasks);	// updated the click events for each task	establishTaskClick();
}// end updateTaskList()
// purpose: returns today's date
// parameters: none
// returns: Date
function getDate() {	var date = new Date();	return date.toLocaleDateString();
}// end getDate()
// purpose: converts the passed date values to a short date
// parameters: month, date, year
// returns: Date
function setDate(month, date, year) {	var date = new Date(year, month, date);	return date.toLocaleDateString();
}// end setDate(date)
// purpose: task object to store task information
// parameters: title, description, dueDate
// returns: nothing
function task(title, description, dueDate) {	this.title = title;	this.description = description;	this.dueDate = dueDate;	this.taskNum = tasks.length + 1;
}// end task object
// purpose: determine if the added item is valid (no blank input)
// parameters: none
// returns: bool
function inputIsValid() {	var returnedVal = true;	// check if the task title is blank	if($taskTitle.val() == '') {	$taskTitle.css({ 'border-color': 'red' });	returnedVal = false;	}	else	$taskTitle.css({ 'border-color': 'initial' });	// check if the task description is blank	if($taskDescription.val() == '') {	$taskDescription.css({ 'border-color': 'red' });	returnedVal = false;	}	else	$taskDescription.css({ 'border-color': 'initial' });	return returnedVal;
}// end inputIsValid()
// purpose: push the new task to the tasks array, reset title and description values
// parameters: none
// returns: nothing
function updateTasks() {	tasks.push(new task($taskTitle.val(), $taskDescription.val(), $('.date-picker').val()));	// reset title and description values	$taskTitle.text('');	$taskDescription.text('');	updateTaskList();
}// end updateTasks()
// purpose: check (alert) if the user wants to delete the selected task
// parameters: none
// returns: nothing
function establishTaskClick() {	// check (alert) if the user wants to delete the selected task	$('.task').click(function() {	var $this = $(this);	if(confirm('Delete this task?')) {	// remove the task from the tasks array and container	tasks.splice($this.data('task-number'), 1);	$this.remove();	}	});// end task click event
}// end establishTaskClick
//
function setCookie(array) {	var jsonString = JSON.stringify(array);	Cookies.set(myCookieName, jsonString, { expires: 1 });
}// end setCookie(array)
/*! * JavaScript Cookie v2.1.3 * https://github.com/js-cookie/js-cookie * * Copyright 2006, 2015 Klaus Hartl & Fagner Brack * Released under the MIT license */
;(function (factory) {	var registeredInModuleLoader = false;	if (typeof define === 'function' && define.amd) {	define(factory);	registeredInModuleLoader = true;	}	if (typeof exports === 'object') {	module.exports = factory();	registeredInModuleLoader = true;	}	if (!registeredInModuleLoader) {	var OldCookies = window.Cookies;	var api = window.Cookies = factory();	api.noConflict = function () {	window.Cookies = OldCookies;	return api;	};	}
}(function () {	function extend () {	var i = 0;	var result = {};	for (; i < arguments.length; i++) {	var attributes = arguments[ i ];	for (var key in attributes) {	result[key] = attributes[key];	}	}	return result;	}	function init (converter) {	function api (key, value, attributes) {	var result;	if (typeof document === 'undefined') {	return;	}	// Write	if (arguments.length > 1) {	attributes = extend({	path: '/'	}, api.defaults, attributes);	if (typeof attributes.expires === 'number') {	var expires = new Date();	expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);	attributes.expires = expires;	}	try {	result = JSON.stringify(value);	if (/^[\{\[]/.test(result)) {	value = result;	}	} catch (e) {}	if (!converter.write) {	value = encodeURIComponent(String(value))	.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);	} else {	value = converter.write(value, key);	}	key = encodeURIComponent(String(key));	key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);	key = key.replace(/[\(\)]/g, escape);	return (document.cookie = [	key, '=', value,	attributes.expires ? '; expires=' + attributes.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE	attributes.path ? '; path=' + attributes.path : '',	attributes.domain ? '; domain=' + attributes.domain : '',	attributes.secure ? '; secure' : ''	].join(''));	}	// Read	if (!key) {	result = {};	}	// To prevent the for loop in the first place assign an empty array	// in case there are no cookies at all. Also prevents odd result when	// calling "get()"	var cookies = document.cookie ? document.cookie.split('; ') : [];	var rdecode = /(%[0-9A-Z]{2})+/g;	var i = 0;	for (; i < cookies.length; i++) {	var parts = cookies[i].split('=');	var cookie = parts.slice(1).join('=');	if (cookie.charAt(0) === '"') {	cookie = cookie.slice(1, -1);	}	try {	var name = parts[0].replace(rdecode, decodeURIComponent);	cookie = converter.read ?	converter.read(cookie, name) : converter(cookie, name) ||	cookie.replace(rdecode, decodeURIComponent);	if (this.json) {	try {	cookie = JSON.parse(cookie);	} catch (e) {}	}	if (key === name) {	result = cookie;	break;	}	if (!key) {	result[name] = cookie;	}	} catch (e) {}	}	return result;	}	api.set = api;	api.get = function (key) {	return api.call(api, key);	};	api.getJSON = function () {	return api.apply({	json: true	}, [].slice.call(arguments));	};	api.defaults = {};	api.remove = function (key, attributes) {	api(key, '', extend(attributes, {	expires: -1	}));	};	api.withConverter = init;	return api;	}	return init(function () {});
}));
Jquery to-do list - Script Codes
Jquery to-do list - Script Codes
Home Page Home
Developer Drew Adams
Username drewtadams
Uploaded October 04, 2022
Rating 3
Size 7,354 Kb
Views 28,336
Do you need developer help for Jquery to-do list?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Drew Adams (drewtadams) Script Codes
Name
A lot of Alerts - Exercise
Parallax scrolling
Beescientific
CSS Speech Bubble
Amchart column graph
Jquery 2d character movement
Binary clock
Currency formatter
Zombie Follow - In Progress
Generic button
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!