Create a ToDo APP using GitHub Copilot

I decided to create a TODO app to see how powerful GitHub Copilot can be. I started from scratch. This is what my workspace looked like. Lets ask copilot to create everything including the files and linking CSS and JS.

The initial prompt helped me create all the files in one click. This is how it looked initially. The UI it created is pretty descent and functional.

There is a problem. Nothing Works ! The JavaScript is throwing an error in the console. Lets ask copilot to fix that. Copy pasting the error from the console.

This didn't solve the problem; the error is still there. It's trying to change the code to fix it, but the actual issue isn't with the code, it's with the JS linking.

I discovered that the problem was because the JS script was at the end of the HTML. I moved it inside the head tag, and it started working.

Now we need can try to get a delete button on the right to delete items from the to do app. After few prompts I got to the intended solution.

Things i learned on this small experiment:

  • AI can quickly provide what you need, including small changes, refactoring, and minor UI fixes.

  • Real engineering problems and issues related to browser optimisations might be overlooked.

I hope this article was useful to you in getting started with AI based coding or understanding copilot features and limitations. If you are interested in APIs checkout LiveAPI : AI based Super convenient API documentation.