Fancy Idea Notepad

Wrote the description for the README file and list all the features of the project.

I’ve spent the past 2 hours trying to deploy my project on github pages, but to no avail. Hopefully I can figure out what I need to do soon.

Added accessibility features to hidden button.

Styled the scrollbars for the textArea component and the main page.

I added favoriting! You can now favorite ideas, which both moves them in front of non-favorited ideas and prevents you from deleting them.

I created severity levels for my buttons. All it changes is the color, but it adds a lot to the feel and importance of the buttons.

I added a confirmation dialog and a delete confirmation dialog. Now when you press the delete button, a dialog pops up asking to confirm that you want to delete the idea.

Spent some good time working on the styling of my website. I feel like it looks a lot better now. I adjusted the coloring of the page as well as formatting of the ideas and page itself.

Started making a Settings page for features like dark/light mode. It doesn’t work very well. so I didn’t add any way to change to the page outside of the url route.

Spent the last hour just following tutorials to make a switch, and I honestly don’t know if it works lol.

I reworked how my edit feature works. Now, instead of pressing an edit button, you simply click the idea card, and it takes you to a redesigned edit dialog. I make a lot of behind-the-scene changes too, like separating the idea card into a generic Card component and an IdeaCard component.

I added a GetIdeas function that gets all ideas saved in local storage and displays it in a list of idea cards. I also added edit and delete buttons, so you can edit existing ideas and delete undesired ones. All of this works dynamically and should essentially be a fully working prototype. There’s definitely more to work on, but I have the core functionality now.

Screenshot 1: just some test items that help demonstrate the new features in the later pictures
Screenshot 2: The “Edit Test” item is actually edited from Screenshot 1
Screenshot 3: “Delete Test” is deleted from the list
Screenshot 4: Created a new item to show that the Get and Create features work

I was about to post this devlog when I realised that my text was not clearing when I closed the dialog. It turned out that there was a reactivity issue in Vue where I had to watch the modelValue prop. But for actual progress, I implemented the pseudo-API for the New Idea Dialog, which allows for whatever is typed into the inputs to be saved to local storage. All it does now is clear log it to the console, but that should change soon.

I got a pseudo-API set up using the local storage. It has get, add, and delete, along with a set function that does the actual dirty work of saving data to local storage. I also made a basic id generator that should be random enough to not contain duplicates, but that remains to be seen.

(Since this is basically all code, I don’t really have way to show my actual work. The best I can do is this duck I found)

I added my new button component to my New Ideas popup, along with the logic associated with saving from the popup.

I added a button component that allows for Font Awesome icons to be used through a single property

I added some content to the popup dialog, such as a header, idea field, and description field. I also created some custom form components which allow me to have custom styling and properties that should make using them later a lot easier.

I made the basic concept of the ideas list. Everything is still hard coded though. I’m also realizing that I need to make some components that allow for enhanced functionality (ex. specialized text/number inputs), so there’s a decent chance I’ll make an npm package for them or something at some point. But for now, I’ll just leave it as part of this project.