This project is a simple web application of one to do list implemented with Vue.js.
- 💡 Features
- 🎯 Purpose
- 🛠 Installation
- 📝 Utilization
- 📱 Responsive Web Design
- 🤝 Contributing
- ⚙ Technologies Used
- 👋 Author
- 🧾 License
- 📃 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.
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
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
It is very simple to use the toDoList.
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() {
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) { // 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.
data() {
return {
tasks: [] //Tasks array
}
},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 : []
},
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)
},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.
},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
}
}
},The ToDoList is fully responsive.
Technologies that were used in the construction of the project:
- 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 🙂
If you want to contact, mail me or send a message on Twitter
Released in 2021. This project is under the MIT license.
Made by Igor Noia 🤙