Repository files navigation

ScreenShot=>

..............................................................................................

Project Structure=>│──src/│ ├── components/│ │ ├── TodoForm.vue│ │ ├── TodoList.vue│ │ ├── TodoItem.vue│ ├── App.vue│ ├── main.jss│── package.json

..................................................................................................

Features=>1-TodoForm.vue → नया टास्क जोड़न क लए2 TodoItem.vue → एक-एक टास्क को दखान और actions (complete/delete) करन क लए3 TodoList.vue → सार टास्क को लस्ट क रूप म दखान क लए4-App.vue → Parent component जो इन सबको मनज करगा

1->TodoForm.vue → नया टास्क जोड़न क लए�इसका काम क्या ह?✅newTodo → यह input field को track करता ह।✅जब "Enter" दबाया जाता ह या "➕जोड़" बटन िक्लक होता ह, तो event emit करता ह।✅Parent (App.vue) इस event को सनकर todos list म नया टास्क जोड़ दगा।

2->TodoItem.vue → एक-एक टास्क को दखान और actions (complete/delete) करन क लए�इसका काम क्या ह?✅यह todo को display करता ह।✅Complete/Incomplete toggle करन क लए toggleComplete event emit करता ह।✅Delete करन क लए deleteTodo event emit करता ह।

3->TodoList.vue → सार टास्क को लस्ट क रूप म दखान क लए�इसका काम क्या ह?✅यह todos1 array को loop करक Todo म भजता ह।✅अगर कोई event emit होता ह (toggle-complete2 या delete-todo2), तो यह उस Parent (App.vue)को forward करता ह।

4->App.vue (Main Component - लास्ट म दखगा!)�इसका काम क्या ह?✅todos list को track करता ह।✅TodoForm स event आन पर नया टास्क जोड़ता ह।newTodo data goto app.vue(todos.value.push({ text: todoText.trim(), completed: false });) by app.vue(<TodoForm @add-todo="addTodo"/>)✅TodoList स event आन पर toggle या delete करता ह।✅

..............................................................................................................................

कैसे चलाएं (install/runFRONTEND WORK:-0-Node.js Install (अगर पहले से नहीं है) Node.js download :https://nodejs.orgfor check node install or not:- open cmd-command and type (node -v) then enter .you will see v22.11.0

1-download all(vue.js Todo_App project) from github

2-how run download project from local environment--1- you open this vue.js3-project with visual-studio-code .---2-opend cmd-command and type (cd ..) then enter like this you continue (cd ..) when till you will not found c:\ and in last you cmd-command look like this c:/---3-you cmd-command look like this: c:/ and open visual-studio-code goto file-menu click(open-folder) then select Todo_App project(all files and folder) where you download this Todo_App from github after open folder and select Todo_App you will see vue.js project .--4- goto view-menu select (terminal) . from terminal you find path then you copy only just example like this:(\Users\Rajkumar\Desktop\project1\todoApps\todoApp) . same as your computer do like this but your computer will be your path you copy and you used own path, do not use my path ok.--5-paste(\Users\Rajkumar\Desktop\project1\todoApps\todoApp) into cmd. same as you paste own path like this ok, not my path ok.cmd:- C: \Users\Rajkumar\Desktop\project1\todoApps\todoApp> then you do enter and agin type (npm run dev) in lastC: \Users\Rajkumar\Desktop\project1\todoApps\todoApp>npm run dev ...(then enter your vue.js project will be run . you typehttp://localhost:5173/ into browser)

6-open browser and type (http://localhost:5173/) into browser address bar you found Todo_App display

.............................................................................................................................

Tech Stack=> (HTML, css3, javascript,bootstrap5, vue.js3 composition-api)

..........................................................................................................................