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

📌 Table of Contents

💡 Features
🎯 Purpose
🛠 Installation
📝 Utilization
- 📃 To add one task
- ✏ Text editor
- 📈 Change status
- 📊 Data panel
📱 Responsive Web Design
🤝 Contributing
⚙ Technologies Used
👋 Author
🧾 License

💡 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.

📃 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

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.

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.

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.

⚙ Technologies used

Technologies that were used in the construction of the project:

🤝 Contributing

Fork the project.
Create a new branch with your changes: git checkout -b my-feature
Save your changes and create a commit message telling you what you did: git commit -m" feature: My new feature "
Submit your changes: git push origin my-feature
Now just open your pull request in the repository that you forked describing your changes
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

Igor Noia Silva

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

🧾 License

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

Made by Igor Noia 🤙

AleNoia/toDoList