Build a comprehensive project tracking webapp with intuitive interface for managing team projects, tasks, and milestones. Features: - Dashboard with visual overview of all projects - Color-coded status indicators (on-track, at-risk, blocked, completed) - Project management with full CRUD operations - Task tracking with assignees and due dates - Milestone tracking with achievement status - Local storage for data persistence - Responsive design for all screen sizes - Sample data included for demonstration Technical implementation: - Vanilla JavaScript (ES6+) with no framework dependencies - Modern CSS with Grid and Flexbox layouts - Clean, maintainable code structure - Browser-based local storage for persistence The webapp provides team leaders with quick visibility into project health and helps identify risks that need immediate attention.
turn.js 4th release
Get the new turn.js on turnjs.com
What's new?
-
Added option
autoCenter -
Added option
zoom -
Added property
animating -
Added property
zoom -
Added method
center -
Added method
destroy -
Added method
is -
Added method
zoom -
Added event
missing -
Added event
zooming -
Added class
.even -
Added class
.fixed -
Added class
.hard -
Added class
.odd -
Added class
.own-size -
Added class
.sheet -
Added the ignore attribute
-
New turn.html4.js
-
New scissors.js
-
Changed the class
.turn-pageto.page -
Improved the animation frame generator with requestAnimationFrame
-
Improved the animation speed for hard pages with CSS3 transitions
-
Redesigned the event sequence to listen to only three events
-
Fixed issue #79
-
Fixed issue #91
-
Fixed issue about the event order turning + turned
-
Fixed issue about appending pages in wrong locations
Available only on turnjs.com
turn.js 3rd release
Make a flip book with HTML5
Turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine. It works in all modern browsers including touch devices.
What's new?
-
New
addPagefor creating pages dynamically. -
New
displayfor single and double pages. -
Gradients for non-webkit browsers.
Usage
CSS code:
#magazine{
width: 800px;
height: 400px;
}
#magazine .turn-page{
background-color:#ccc;
}
HTML code:
<div id='magazine'> <div> Page 1 </div> <div> Page 2 </div> <div> Page 3 </div> </div>
JavaScript code:
$('#magazine').turn({gradients: true, acceleration: true});
Requirements
jQuery 1.7 or later
Browser support
- Chrome 12, Safari 5, Firefox 10, IE 9
License
Released under a non-commercial BSD license