Design comparison
Solution retrospective
👾 Hello, Frontend Mentor coding community. This is my solution for the Todo app.
Feel free to leave any feedback and help me improve my solution or make the code clean!✨❤️
Community feedback
- @AdarshRai0Posted over 2 years ago
Thankz for such an Explantion..!!!✨ Surely Implimenting this Thought in code..
1@fadhilradhPosted over 2 years ago@AdarshRai0 You're welcome Adarsh, just tell me if something is not working !
0 - @fadhilradhPosted over 2 years ago
Hi Adarsh,
Your app looks amazing, without bugs and has great animations, well done !
I have one feedback for you when I forked your project and looked at your
script.js
file. It is quite long and not very readable, especially themain
function. What you can do is you can extract some code inside your function to another smaller function. Example : Instead of :function main() { code... code.. code.. }
You can write as :
function main() { function1() function2() function3() }
This is more readable for the one who will read your code (your co-workers) and cleaner as it follow the principle of one function should only do one thing and one thing only. Also, make sure your function name is meaningful so others can understand its job in one glance.
Secondly, you can further improve your code by separating your code into several files, grouping similar functions and variables inside a file and making use of import and export statements.
For example you can split into three files :
script.js
for storing your global variables andmain
function,addTodo.js
for adding todo andutils.js
for other functions. Then, you can export function to be available in another file. For example :Firstly, you need to make change to your HTML file, add type="module" to your link to script.js file. This will make your JS files able to import and export function and variables to each other.
For example :
// addTodo.js export function addTodo() { …doAwesomeThings() }
// main.js import { addTodo} from “./addTodo.js” function main() { ...code... addTodo() ...code... }
You can do this for every other function and group similar functions in one js file.
Just reply me if something is not working.
Hope it helps and good luck Adarsh!
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord