esemv

I added a third command to automatically insert classes from HTML files into a selected CSS file. I made it so that when the HTML file is saved it checks for new classes and adds them into the CSS file. These are the 3 commands I wanted to add to this extension, so I will now figure out adding it to the VS Code marketplace before shipping.

I was able to add a command that automatically adds the current classes in the selected HTML file to the completion list. This works well, but I still need to make it so that it automatically updates with the changes when the selected HTML file is saved. I’m not yet sure how to do this as I have tried to research it and it seems confusing but I will continue to research it.

I was able to reformat the selected classes into a string to insert into the selected stylesheet. I then entered the CSS file at the end and inserted the text at the end of the file with all the classes.

I was able to take the selected text from the file and search for the classes within it. I then returned those classes in an array, without repeating any of the classes. I did this using a regex string looping through the selected text to get all the instances. Next I will get those classes and format them to CSS syntax and have to figure out how to paste them into the bottom of the selected CSS file.
(NOTE: the photo is seemingly of the code but that is because it shows the console log of the returned classes (which is the output))

I added a new command which will eventually transfer classes within selected text in an HTML file, to the selected CSS file. So far I made it so that when the command is run, it opens a quick pick selector that displays all the CSS files in the current workspace. Next I will have to figure out how to:

1. Find the classes from within the selected HTML
2. Edit that CSS file by adding the new classes

I ran the npm commands to create a new VS Code Extension with JS. A lot of tutorials are in TS but I am much more familiar with JS and figure it should be easy enough to work out how to do it with JS. It gave me a prebuilt template with an example command showing the ‘Hello World’ message, which was a start in how to create commands. I next want to figure out how to manipulate and read files with my commands.

I had to create my own custom map inspired by the one I already had as I tried to contact the creator of the original to clarify copyright requirements but they never replied and I’d really like to get this shipped. So I used Inkarnate to create the map with similar features to the others one, as to not change the locations too much, but with my own style to differentiate from the original. I then had to adjust the locations slightly in the CSS and JS to fit with the new map.

I created the Files app with a fake file system. It has 3 folders: pictures, documents, and apps. The pictures folder has a couple of random images that are openable. The documents app has a secret.txt document which you’ll have to open to find out what it is. The apps folders has shortcuts to all the apps in the OS that can be used as an alternative to riding the train. This was a lot more complex than all the other apps as it involved creating a file path system with undo and redo functions and entering folders. It also involved creating the ability to open all the respective files and shortcuts through their own functions and windows. To simplify it a little I started by roughly writing the functions within comments so that there were no distracting errors and I could just focus on the logic rather than on the actual perfect code. Then I took it out of comments and perfected it so that it was in a working (or at least testable) condition. Overall, I’m pretty proud of the Files app!

I added the ToDo app with the ability to create tasks, check off tasks, delete tasks, and change their name. This used similar logic to the CRUD operations in the Notes app, but was a bit more different than I thought. This was because the info was displayed only within the list and there was no extra display area for editing like the Notes app. This meant that I had to handle indexing a bit differently to make sure the correct task was being performed an operation on. Next up is creating the Files app which I think I will just fill with a bunch of dummy files.

I added the internet browser. This involved a lot more complicated requirements than I thought due to security and privacy issues. This meant I had to use Wikipedia as the web browser which generally still allows for a good amount of research so works ok in this case. Google would not allow me to use it due to the security risk, as well as Bing, so Wikipedia was the next best option. Next I am going to work on the ToDo app which will use similar CRUD logic to the notes app so should not be too difficult to make.

I added a Calculator app with basic operations. This was simpler than I thought it would be which was good. I think next I will try to embed some sort of web browser into the web app, which I’m not sure of how to do at all so that should be interesting!

I added a Notes app that saves to localStorage where you can edit text, save changes, discard changes, delete notes, and create new notes. This was difficult in a few ways as it was something new for me and there was a lot of issues to run into. Next I will move onto some others of the apps.

I was able to create the basics of a welcome screen as well as app icons. The train moves around the different landmarks so that the app icons appear at the corresponding landmark. Next I will add the click events for the apps and the windows with app functionality.

I’m working on my first project! This is so exciting. I can’t wait to share more updates as I build.