Skip to content

This project is a simple web application of one to do list implemented with Vue.js.

License

Notifications You must be signed in to change notification settings

AleNoia/toDoList

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

50 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

image

This project is a simple web application of one to do list implemented with Vue.js.

GitHub language count Repository size License GitHub last commit


πŸ“Œ Table of Contents


πŸ’‘ Features

  • πŸ“ƒ List your day-to-day tasks.
  • πŸ“ˆ Have a data panel with the data of your tasks.
  • ✏ Have a simple text editor to build your tasks.
  • πŸ“± Responsive application.

🎯 Purpose

My purpose with this project is to learn more about the Vue.js framework, also learn how to:

  • create a text editor
  • create a documentation
  • work with data and create a data panel
  • work with local storage
  • work with date and time
  • work with Ui and Ux design
  • work with Scss
  • work with responsive web design

πŸ›  Installation

You need to install Node.js, git and Vue.js, then in order to clone the project, run this command:


git clone https://github.com/AleNoia/todolist.git

Install dependencies


npm install

Run the aplication


npm run serve


πŸ“ Utilization

It is very simple to use the toDoList.

image

πŸ“ƒ To add one task

To add a new task, just click the "Click here to add one" button or the button in the bottom right corner. Both buttons will open a modal to add your task.

Task storage is responsible for the save() and the addTask(task) method.

save()

save() {
    let id = Date.now() // Creatgin a id by the date.now()
    let tit = document.getElementById("title").innerHTML // Taking the task and storing on the let tit.

    if (tit.length === 0) { // Verifying that the task is not empty.
        this.showNotification = true;
        setTimeout(() => { // If it is empty, a notification will appear.
            this.showNotification = false;
        }, 4500)
    } else {
        // If it is not empty, all data will be stored in the task object.
        let task = {
            id,
            tit,
            concluded: false,
            dateCreate: factory.BuildDate(new Date()), // It will create a custom date according to the current date.
            hourCreate: factory.BuildTime(new Date()), // It will create a custom time according to the current date.
            concludedDate: String,
            concludedHour: String,
        }
        // It will emit an event that will be heard by the parent component (Home) and the task will be passed to it.
        this.$emit('taskAdded', {
            task: task
        })
        // Finally, the modal will close.
        this.modal = false
    }

},

addTask(task)

addTask(task) { // receiving task and pushing to tasks array
    this.tasks.push(task)
    console.log(this.tasks)
}

All tasks will be stored in the task array in the home component and also in the browser's local storage.

Tasks array

data() {
 return {
    tasks: [] //Tasks array
  }
},

Local storage

watch:{ // stoing task to local storage
    tasks:{
      deep: true,
      handler(){
        localStorage.setItem('tasks', JSON.stringify(this.tasks))
      }
    }
  }, 
created(){ // receiving tasks from local storage
    const json = localStorage.getItem('tasks')
    const array = JSON.parse(json) 
    this.tasks = Array.isArray(array) ? array : []
  },

✏ Text editor

image

Obs: This application uses execCommand. This feature is deprecated!

The toDoList text editor is very simple, there is the option to:

  • Make text bold
boldFunc() {
    document.execCommand("bold", false, null)
},
  • Italicize the text
italicFunc() {
    document.execCommand("italic", false, null)
},
  • Underline the text
underlineFunc() {
    document.execCommand("underline", false, null)
},
  • Insert ordered list
orderNumFunc() {
    document.execCommand("insertOrderedList", false, null)
},
  • Insert unordered list
unorderedNumFunc() {
    document.execCommand("insertUnorderedList", false, null)
},
  • Justify to left
justifyleftFunc() {
    document.execCommand("justifyleft", false, null)
},
  • Justify to center
justifycenterFunc() {
    document.execCommand("justifycenter", false, null)
},
  • Justify to right
justifyrightFunc() {
    document.execCommand("justifyright", false, null)
},

πŸ“ˆ Change status

To change the status of the task to completed or to pending just click on the card.

image

The responsibility for this change lies with the donetask() method.

donetask() {
    this.task.task.concluded = !this.task.task.concluded // Changing status
    this.task.task.concludedDate = factory.BuildDate(new Date()) // Including task completion date.
    this.task.task.concludedHour = factory.BuildTime(new Date()) // Including task completion time.
},

πŸ“Š Data panel

The data panel data comes from component tasks.

image

The data panel has this data:

  • Tasks total
  • Tasks to do
  • Tasks done
  • Percentage of the tasks you have done
computed: {
    status() {
        let tasksTotal = this.tasks.length // Task total 
        let tasksToDo = this.tasks.filter(tasks => tasks.task.concluded == false).length // Tasks pending 
        let tasksDone = this.tasks.filter(tasks => tasks.task.concluded == true).length // Tasks done
        let tasksPercent = Math.round(tasksDone / tasksTotal * 100) || 0 // Tasks percent
        return {
            tasksTotal,
            tasksToDo,
            tasksDone,
            tasksPercent
        }
    }
},

πŸ“± Responsive Web Design

The ToDoList is fully responsive.

image image image image image image


βš™ Technologies used

Technologies that were used in the construction of the project:


🀝 Contributing

  1. Fork the project.
  2. Create a new branch with your changes: git checkout -b my-feature
  3. Save your changes and create a commit message telling you what you did: git commit -m" feature: My new feature "
  4. Submit your changes: git push origin my-feature
  5. Now just open your pull request in the repository that you forked describing your changes
  6. After the merge of your pull request is done, you can delete yout branch

If you have any questions check this guide on how to contribute

Feel free to contribute πŸ™‚


πŸ‘‹ Author

If you want to contact, mail me or send a message on Twitter

Gmail Badge badge


🧾 License

Released in 2021. This project is under the MIT license.

Made by Igor Noia πŸ€™

About

This project is a simple web application of one to do list implemented with Vue.js.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published