Code Monkey home page Code Monkey logo

personal-task-management's Introduction

个人任务管理系统

这是一个简单的个人任务管理系统,桌面端兼容了IE8+,chrome,firefox等,移动端只是做了一个简单的demo。for_pc中是桌面端的代码,for_mobile中是移动端的代码。

桌面端主界面如下图:

main

最左边一列是任务分类列表,最上面显示了所有任务的数量,每一个分类后面也显示了该分类下的任务数量。
第一次加载该页面时,会默认选中第一个有任务的分类,并且显示其下面的子任务分类列表。将鼠标划过某一个子任务分类,会出现删除按钮,点击该按钮可以删除该子任务分类及其下面所包括的所有任务数据。点击任何一个分类会展现其包含的所有子分类。

点击选中一个任务分类(否则是默认分类),会弹出提示框来输入任务分类的名字,确认后就在选中的任务分类中增加了一个子任务分类。

点击选择一个子任务分类,点击新增任务按钮,最右侧就会出现新增任务的界面,输入符合要求的标题,任务时间及内容点击确认按钮就可以保存该任务到你选中的子任务分类下。

new

中间列显示某一个子分类下的所有任务,默认显示所有任务,点击未完成按钮显示该子分类下的所有未完成的任务,点击已完成按钮显示该子分类下的所有已完成的任务。

最右侧默认显示选中的任务内容,点击“勾”型按钮,弹出框提示时候确认完成该任务,点击确认该任务就变成已完成任务。点击编辑按钮,可以重新编辑该任务。

src文件夹中是模块化后的js代码

personal-task-management's People

Contributors

hieeyh avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.