├── src ├── assets │ ├── logo.webp │ ├── todo.png │ ├── todo.webp │ └── favicon.ico ├── main.js ├── style.css ├── App.vue └── main.css ├── .vscode └── extensions.json ├── public ├── projectimages │ ├── taskgenius.gif │ └── taskgenius.png └── todo-genius.svg ├── .gitignore ├── index.html ├── vite.config.js ├── package.json ├── LICENSE └── README.md /src/assets/logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lucas-Erkana/TodoGenius-app/HEAD/src/assets/logo.webp -------------------------------------------------------------------------------- /src/assets/todo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lucas-Erkana/TodoGenius-app/HEAD/src/assets/todo.png -------------------------------------------------------------------------------- /src/assets/todo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lucas-Erkana/TodoGenius-app/HEAD/src/assets/todo.webp -------------------------------------------------------------------------------- /src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lucas-Erkana/TodoGenius-app/HEAD/src/assets/favicon.ico -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /public/projectimages/taskgenius.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lucas-Erkana/TodoGenius-app/HEAD/public/projectimages/taskgenius.gif -------------------------------------------------------------------------------- /public/projectimages/taskgenius.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lucas-Erkana/TodoGenius-app/HEAD/public/projectimages/taskgenius.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import './main.css' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | todo-genius 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | // vite.config.js 2 | import { defineConfig } from 'vite' 3 | import vue from '@vitejs/plugin-vue' 4 | import path from 'path' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [vue()], 9 | resolve: { 10 | alias: { 11 | '@': path.resolve(__dirname, 'src'), 12 | }, 13 | extensions: ['.js', '.vue', '.json', '.webp'], 14 | }, 15 | optimizeDeps: { 16 | include: ['@fortawesome/free-brands-svg-icons'], 17 | }, 18 | }) 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-todo-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@fortawesome/fontawesome-svg-core": "^6.4.2", 13 | "@fortawesome/free-brands-svg-icons": "^6.4.2", 14 | "@fortawesome/vue-fontawesome": "^3.0.3", 15 | "vue": "^3.2.36" 16 | }, 17 | "devDependencies": { 18 | "@vitejs/plugin-vue": "^4.2.3", 19 | "path": "^0.12.7", 20 | "vite": "^4.4.5" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 LUCAS ERKANA 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | a { 27 | font-weight: 500; 28 | color: #646cff; 29 | text-decoration: inherit; 30 | } 31 | a:hover { 32 | color: #535bf2; 33 | } 34 | 35 | body { 36 | margin: 0; 37 | display: flex; 38 | place-items: center; 39 | min-width: 320px; 40 | min-height: 100vh; 41 | } 42 | 43 | h1 { 44 | font-size: 3.2em; 45 | line-height: 1.1; 46 | } 47 | 48 | button { 49 | border-radius: 8px; 50 | border: 1px solid transparent; 51 | padding: 0.6em 1.2em; 52 | font-size: 1em; 53 | font-weight: 500; 54 | font-family: inherit; 55 | background-color: #1a1a1a; 56 | cursor: pointer; 57 | transition: border-color 0.25s; 58 | } 59 | button:hover { 60 | border-color: #646cff; 61 | } 62 | button:focus, 63 | button:focus-visible { 64 | outline: 4px auto -webkit-focus-ring-color; 65 | } 66 | 67 | .card { 68 | padding: 2em; 69 | } 70 | 71 | #app { 72 | max-width: 1280px; 73 | margin: 0 auto; 74 | padding: 2rem; 75 | text-align: center; 76 | } 77 | 78 | @media (prefers-color-scheme: light) { 79 | :root { 80 | color: #213547; 81 | background-color: #ffffff; 82 | } 83 | a:hover { 84 | color: #747bff; 85 | } 86 | button { 87 | background-color: #f9f9f9; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 150 | -------------------------------------------------------------------------------- /src/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary: #EA40A4; 3 | --business: #3A82EE; 4 | --personal: var(--primary); 5 | --light: #EEE; 6 | --grey: #888; 7 | --dark: #313154; 8 | --danger: #ff5b57; 9 | 10 | --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 11 | 12 | --business-glow: 0px 0px 4px rgba(58, 130, 238, 0.75); 13 | --personal-glow: 0px 0px 4px rgba(234, 64, 164, 0.75); 14 | } 15 | 16 | * { 17 | margin: 0; 18 | padding: 0; 19 | box-sizing: border-box; 20 | font-family: 'montserrat', sans-serif; 21 | } 22 | 23 | input:not([type="radio"]):not([type="checkbox"]), button { 24 | appearance: none; 25 | border: none; 26 | outline: none; 27 | background: none; 28 | cursor: initial; 29 | } 30 | 31 | body { 32 | background: var(--light); 33 | color: var(--dark); 34 | } 35 | 36 | section { 37 | margin-top: 2rem; 38 | margin-bottom: 2rem; 39 | padding-left: 1.5rem; 40 | padding-right: 1.5em; 41 | } 42 | 43 | h3 { 44 | color: var(--dark); 45 | font-size: 1rem; 46 | font-weight: 400; 47 | margin-bottom: 0.5rem; 48 | } 49 | 50 | h4 { 51 | color: var(--grey); 52 | font-size: 0.875rem; 53 | font-weight: 700; 54 | margin-bottom: 0.5rem; 55 | } 56 | 57 | .greeting .title { 58 | display: flex; 59 | } 60 | 61 | .greeting .title input { 62 | margin-left: 0.5rem; 63 | flex: 1 1 0%; 64 | min-width: 0; 65 | } 66 | 67 | .greeting .title, 68 | .greeting .title input { 69 | color: var(--dark); 70 | font-size: 1.5rem; 71 | font-weight: 700; 72 | } 73 | 74 | .create-todo input[type="text"] { 75 | display: block; 76 | width: 100%; 77 | font-size: 1.125rem; 78 | padding: 1rem 1.5rem; 79 | color: var(--dark); 80 | background-color: #FFF; 81 | border-radius: 0.5rem; 82 | box-shadow: var(--shadow); 83 | margin-bottom: 1.5rem; 84 | } 85 | 86 | .create-todo .options { 87 | display: grid; 88 | grid-template-columns: repeat(2, 1fr); 89 | grid-gap: 1rem; 90 | margin-bottom: 1.5rem; 91 | } 92 | 93 | .create-todo .options label { 94 | display: flex; 95 | flex-direction: column; 96 | align-items: center; 97 | justify-content: center; 98 | padding: 1.5rem; 99 | background-color: #FFF; 100 | border-radius: 0.5rem; 101 | box-shadow: var(--shadow); 102 | cursor: pointer; 103 | } 104 | 105 | input[type="radio"], 106 | input[type="checkbox"] { 107 | display: none; 108 | } 109 | 110 | .bubble { 111 | display: flex; 112 | align-items: center; 113 | justify-content: center; 114 | width: 20px; 115 | height: 20px; 116 | border-radius: 50%; 117 | border: 2px solid var(--business); 118 | box-shadow: var(--business-glow); 119 | } 120 | 121 | .bubble.personal { 122 | border-color: var(--personal); 123 | box-shadow: var(--personal-glow); 124 | } 125 | 126 | .bubble::after { 127 | content: ""; 128 | display: block; 129 | opacity: 0; 130 | width: 0px; 131 | height: 0px; 132 | background-color: var(--business); 133 | box-shadow: var(--business-glow); 134 | border-radius: 50%; 135 | transition: 0.2s ease-in-out; 136 | } 137 | 138 | .bubble.personal::after { 139 | background-color: var(--personal); 140 | box-shadow: var(--personal-glow); 141 | } 142 | 143 | input:checked ~ .bubble::after { 144 | width: 10px; 145 | height: 10px; 146 | opacity: 1; 147 | } 148 | 149 | .create-todo .options label div { 150 | color: var(--dark); 151 | font-size: 1.125rem; 152 | margin-top: 1rem; 153 | } 154 | 155 | .create-todo input[type="submit"] { 156 | display: block; 157 | width: 100%; 158 | font-size: 1.125rem; 159 | padding: 1rem 1.5rem; 160 | color: #FFF; 161 | background-color: var(--primary); 162 | border-radius: 0.5rem; 163 | box-shadow: var(--personal-glow); 164 | cursor: pointer; 165 | transition: 0.2s ease-in-out; 166 | } 167 | 168 | .create-todo input[type="submit"]:hover { 169 | opacity: 0.75; 170 | } 171 | 172 | .todo-list .list { 173 | margin: 1rem 0; 174 | } 175 | 176 | .todo-list .todo-item { 177 | display: flex; 178 | align-items: center; 179 | background-color: #FFF; 180 | padding: 1rem; 181 | border-radius: 0.5rem; 182 | box-shadow: var(--shadow); 183 | margin-bottom: 1rem; 184 | } 185 | 186 | .todo-item label { 187 | display: block; 188 | margin-right: 1rem; 189 | cursor: pointer; 190 | } 191 | 192 | .todo-item .todo-content { 193 | flex: 1 1 0%; 194 | } 195 | 196 | .todo-item .todo-content input { 197 | color: var(--dark); 198 | font-size: 1.125rem; 199 | } 200 | 201 | .todo-item .actions { 202 | display: flex; 203 | align-items: center; 204 | } 205 | 206 | .todo-item .actions button { 207 | display: block; 208 | padding: 0.5rem; 209 | border-radius: 0.25rem; 210 | color: #FFF; 211 | cursor: pointer; 212 | transition: 0.2s ease-in-out; 213 | } 214 | 215 | .todo-item .actions button:hover { 216 | opacity: 0.75; 217 | } 218 | 219 | .todo-item .actions .edit { 220 | margin-right: 0.5rem; 221 | background-color: var(--primary); 222 | } 223 | 224 | .todo-item .actions .delete { 225 | background-color: var(--danger); 226 | } 227 | 228 | .todo-item.done .todo-content input { 229 | text-decoration: line-through; 230 | color: var(--grey); 231 | } 232 | 233 | .main.app { 234 | position: relative; 235 | } 236 | 237 | .social-icons { 238 | position: absolute; 239 | top: 0; 240 | right: 0; 241 | display: flex; 242 | gap: 10px; 243 | font-size: 24px; 244 | } 245 | 246 | img { 247 | width: 37px; 248 | height: 25px; 249 | top: 0; 250 | right: 91px; 251 | display: flex; 252 | position: absolute; 253 | } 254 | 255 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Task Genius App 🤘

Client

50 | 51 | ### Key Features 52 | 53 | > - Add User name 54 | > - Add task 55 | > - Choose Business or Personal 56 | > - Choose completed task 57 | > - Delete task 58 | 59 | 60 | 61 |

(back to top)

62 | 63 | 64 | 65 | ## 💻 Getting Started 66 | 67 | ## To get a local copy up and running, follow these steps. 68 | 69 | ### Prerequisites 70 | 71 | In order to run this project you need: 72 | 73 | - A Mac or PC 74 | - NPM (Node Package Manager) installed on your machine 75 | - Understanding of Vue.js 76 | - A web browser such as Google Chrome 77 | - A code editor such as Visual Studio Code with Git and Node.js installed. 78 | I apologize for any confusion. Here's an updated example with the correct information: 79 | 80 | ### Setup 81 | 82 | To set up the TodoGenius-app project, follow the steps below: 83 | 84 | 1. Clone this repository to your desired folder: 85 | 86 | ```sh 87 | git clone https://github.com/Lucas-Erkana/TodoGenius-app.git 88 | ``` 89 | 90 | 2. Navigate into the cloned folder: 91 | 92 | ```sh 93 | cd TodoGenius-app 94 | ``` 95 | 96 | ### Install 97 | 98 | 1. Install the dependencies with NPM: 99 | 100 | ```sh 101 | npm install 102 | ``` 103 | 104 | ### Run 105 | 106 | 1. Start the development server with: 107 | 108 | ```sh 109 | npm run dev 110 | ``` 111 | 112 | After running the `npm run dev` command, the development server will start, and you can access the TodoGenius-app by navigating to `http://localhost:5173` in your web browser. 113 | 114 | 115 |

(back to top)

116 | 117 | 118 | 119 | ## 👥 Authors 120 | 121 | 👤 **Lucas Erkana** 122 | 123 | - GitHub: [@Lucask-Erkana](https://github.com/Lucask-Erkana) 124 | - Twitter: [@Lucas_David_22](https://twitter.com/@Lucas_David_22) 125 | - LinkedIn: [Lucas Erkana](https://www.linkedin.com/in/lucas-erkana/) 126 | - Frontend Mentor - [@Lucask-Erkana](https://www.frontendmentor.io/profile/Lucask-Erkana) 127 | 128 |

(back to top)

129 | 130 | 131 | 132 | ## 🔭 Future Features 133 | 134 | - [ ] **Add option to add a time and date** 135 | - [ ] **Edit current list of tasks** 136 | - [ ] **Sort according to task** 137 | - [ ] **Send notification to email for remainders 30 minutes away** 138 | 139 |

(back to top)

140 | 141 | 142 | 143 | ## 🤝 Contributing 144 | 145 | Contributions, issues, and feature requests are welcome! 146 | 147 | Feel free to check the [issues page](https://github.com/Lucas-Erkana/TodoGenius-app/issues). 148 | 149 |

(back to top)

150 | 151 | 152 | 153 | ## ⭐️ Show your support 154 | 155 | If you like this project, please leave a ⭐️ 156 | 157 |

(back to top)

158 | 159 | 160 | 161 | ## 🙏 Acknowledgments 162 | 163 | - I would like to express my gratitude to [Tyler Potts](https://github.com/TylerPottsDev) for provided a detailed and helpful YouTube video for the construction of the TaskGenius app. Their video was instrumental in guiding me through the development process. 164 | 165 |

(back to top)

166 | 167 | ## ❓ FAQ (OPTIONAL) 168 | 169 | > Add at least 2 questions new developers would ask when they decide to use your project. 170 | 171 | - **How can I deploy the TaskGenius app to a web server and make it accessible to others?** 172 | 173 | - To deploy the TaskGenius app, you have several options. One common approach is to use a hosting service like Heroku, AWS, or Azure. These services provide easy-to-use deployment options for web applications like TaskGenius. Typically, you'll need to push your project to a Git repository (e.g., GitHub) and then configure the hosting service to deploy the app automatically whenever you push changes. Each hosting service has its own documentation and guides on how to set up the deployment for web applications. 174 | 175 | - **How can I modify the TaskGenius app to fit my specific needs?** 176 | 177 | - Modifying the TaskGenius app involves modifying the existing code and adding your own features. Here are some steps you can take to customize the app: 178 | 179 | - Change Content: Update the text in the components to fit your specific needs. For example, you can update the task categories or add new ones. 180 | 181 | - Add Features: If you want to add new features to the app, you can create a new component or modify an existing one. For example, you can add a feature to set reminders for tasks or to share tasks with other users. 182 | 183 | - Styling: To change the appearance, you can modify the CSS styles in the index.css file or create a separate CSS file and import it into the components where you need custom styling. You can update colors, fonts, spacing, and other visual elements to match your preferences. 184 | 185 | I hope this helps! Let me know if you have any further questions or concerns. 186 | 187 |

(back to top)

188 | 189 | 190 | 191 | ## 📝 License 192 | 193 | This project is [MIT](./LICENSE) licensed. 194 | 195 |

(back to top)

196 | -------------------------------------------------------------------------------- /public/todo-genius.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------

75 | What's up, 76 |

CREATE A TODO

What's on your todo list?

Pick a category

TODO LIST

Task Genius App 🤘