You are browsing as a guest. Sign up (or log in) to start making projects!

chicagOS

  • 18 Devlogs
  • 62 Total hours

This is my very own OS that can be run in the web! Chicago themed.

Ship #2

chicagOS has finally reached completion! I have spent over a month working on this project, and I am really proud of what I have accomplished. While I enjoyed working on all aspects of this project, I had the most fun playing around with CSS and creating fun animated features for the OS. I am no expert in JS or CSS, so there were many learning curves associated with this project. The biggest challenge I faced was converting my file system from localStorage to indexedDB I made this change due to the limitations of localStorage, but indexedDB uses a very different framework, so I ended up needing to completely redo the code for some of my apps. I am really excited about all the new things I learned in this process, and happy to create a fun project themed around my hometown of Chicago!

  • 13 devlogs
  • 51h
  • 9.34x multiplier
  • 478 Stardust
  • WebOS 2
Try project → See source code →
Open comments for this post

1h 2m 17s logged

chicagOS Devlog #19 - Final devlog before shipping! Not many visual changes, as I have spent a lot of time cleaning up the code, removing unused classes from CSS, deleting temporary console.log(), removing unnecessary comments, etc. I cleaned up some animations in CSS, but other than that, none of the code has really changed. I’ve really enjoyed working on this OS project, but I’m definitely excited to start something new. :yay:

1
0
84
Open comments for this post

6h 42m 58s logged

chicagOS Devlog #17 - Lots of changes! I’m wrapping up this project soon, so I am putting some final touches on the UI and making some backend changes. The file system now runs entirely using indexedDB instead of localStorage which means all file types can be saved now. The music app and gallery app have been connected to the file system. I also added a small calendar popup when you click on the time element. My biggest visual change was adding a startup screen. It was made almost entirely in CSS, and a single function in JS. I’m not sure if I’m going to add any more features before shipping, so if anyone has any suggestions lmk,

0
0
103
Open comments for this post

1h 28m 14s logged

chicagOS Devlog #16 - I am still being indecisive about possibly adding a new app, so I decided to spruce up one of my simplest apps so far, Gallery. I mainly wanted to change how the photos were displayed, which wasn’t too difficult. The only real new feature I added was the ability to add custom photos, which was pretty easy because I used direct input from the computer. I also added the ability for grid view. At first I tried rebuilding the HTML for grid view, but I decided it would be easier to just have an invisible <div> that contained the grid layout. I don’t have any ideas for other apps to update, so if anyone has new app ideas, lmk cause I ran out days ago.

0
0
71
Open comments for this post

4h 56m 4s logged

chicagOS Devlog #15 - I have created the Music player app! You can upload any audio file from your computer and queue it in the playlist on the right. There is volume control, a time slider, play/pause, and skip/reverse. It will automatically load the name of the song, artist, and cover art if it is known. I originally planned on integrating this app with the existing file system, but it turns out audio files cannot be stored in localStorage so I had to scrap that idea. Currently, the playlist is just an array, which means it unfortunately does not save once the page is reloaded. But trust me, I’m going to update the file system so it can store all file types soon! I don’t really know what apps I’m going to add next, so I guess we will see where the wind takes me.

1
0
64
Open comments for this post

4h 32m 32s logged

chicagOS- Devlog 14 I’ve added a lot more functionality to the file system. Now you can add new folders, delete folders, and rename folders. You can also drag to reorder the folders in the sidebar. I also added a custom alert/notification center, so alerts such as “cannot delete system folders,” etc will be displayed, along with any other possible notification features I might add.

Next, I plan on making a music app.

1
0
54
Open comments for this post

4h 41m 46s logged

chicagOS Devlog 13-
I have created the file explorer app, and built the new file system. Now, instead of each app being connected directly to localStorage, they all use the same newFile() and getFile() functions from a central file system. Each app has a dedicated folder within the system.

Next up, I hope to make a music player app, with the ability to add audio files.

1
0
98
Open comments for this post

4h 1m 12s logged

chicagOS #Devlog 12- Terminal app is pretty much done! Obviously, I will add new commands as the OS gets more features, but I have some basic commands done! I also added a switch to toggle the quotes visibility in the settings app. Next, I plan on adding a file explorer which will connect all the apps into a single file system!

0
0
15
Open comments for this post

4h 27m 18s logged

chicagOS Devlog 11-

The Header has been turned into a dock! I tried to reuse my existing code to open apps, but I couldn’t get it to work, so I had to end up redoing it twice. I also added some JS so that when you click on an open window it is put into focus.

This is what the dynamic background is looking like so far, hopefully I can improve it more.

Next I plan on adding some more apps, possibly including a terminal and a file explorer.

0
0
25
Open comments for this post

3h 9m 50s logged

chicagOS Devlog 10-
Dynamic wallpaper is done! (kinda) I’ve been having issues trying to use images that have the background removed, so if anyone knows how that works, please lmk!

I created a settings app to choose between the classic wallpaper (non-animated) and the dynamic wallpaper (many animated parts). The dynamic wallpaper will probably change once I can figure out the images I’m using.

Next up, I am planning on turning the header into a dock! I will probably move the quotes to a widget.

2
0
59
Open comments for this post

3h 34m 52s logged

chicagOS Devlog 9-
The Mind Map app is finally working! all of the nodes are draggable, and you can zoom in and out. Turns out the issue was that new nodes coordinates were being calculated from the root node instead of their parent node, so the line drawing function couldn’t find the new nodes.

Also, I expanded the notes app! Before you could not save notes, but now you can! I added a side bar to display the saved notes, and also added the ability to remove saved notes.

Next I plan to make some more UI improvements, maybe even a dynamic background?

0
0
21
Open comments for this post

3h 19m 11s logged

chicagOS Devlog #8 - Browser app is completed! I used i-frame to display the browser window. The search bar takes web addresses, and if what is entered is not a valid web address, it automatically inputs it as a Google search prompt instead. I also added some bookmarked web pages, and forward and backward buttons that work by storing the web history. Next, I want to add more functionality to the notes app, including the ability to save and delete notes.

0
0
12
Open comments for this post

4h 1m 13s logged

chicagOS Devlog 7-

The Paint app is mostly done! I added functionality to the save and load paintings button. I also updated the UI of the toolbar. I created the UI for the browser app, which currently doesn’t have any functionality. I plan to use an iframe to display webpages and also provide some bookmarked websites.

0
0
13
Open comments for this post

5h 11m 16s logged

chicagOS Devlog 6-

A lot of progress has been made! I’ve been waiting for my ship to be approved for WebOS1, which it just was! Yay! But in the last 4 days, I have made a lot of changes, so prepare yourselves.

#1 - The UI has had major improvements! I went down the W3Schools rabbit hole and added a bunch of things to make the UI look cleaner, including the first animated element of the UI!

#2- Paint app! - I added the paint app, and it currently has pretty basic functionality. You can draw, change colors, change brush size, erase, and clear the canvas. I plan to add a save feature soon. (The button currently doesn’t do anything.)

#3- I WILL FIGURE OUT THIS MIND MAP APP! I fixed a few things, but some things still aren’t working. Currently, lines don’t get drawn past the root node, and I think it has something to do with the ID hierarchy? We will see.

#4- I added a feature of the desktop header that rotates through quotes about Chicago! It has the same animated background as the welcome window.

That’s it for now; hopefully I can continue to improve the UI and the paint app!

0
0
23
Ship #1

This is the Chicago-themed web OS I made for the WebOS 1 mission. I learned a lot about JS, HTML, and CSS. I have some experience with JS and HTML, but it is my first time using non-inline CSS, which has been fun. I had a great time designing the website and creating all of the features and apps. Some challenges included dealing with importing images, which took a very long time, and making certain UI elements look good.

Try project → See source code →
Open comments for this post

31m 20s logged

chicagOS Devlog #5- Getting ready to complete the guide for WebOS 1! I cleaned up a few things with the UI, and I have decided that the Mind Map app will not be included in this first ship :( But trust, when I get smarter it will be coming back!

0
0
16
Open comments for this post

3h 4m 40s logged

chicagOS devlog #4-
Not that much progress recently! Turns out working with images is very frustrating.

I created the gallery app, which had its surprising challenges. I figured that the JS logic for cycling between the photos and looping back to the first image would be easy, but I was severely mistaken. I spent at least an hours trying to stop the images from taking up the whole window, repeating, stretching, somehow being mirrored, just about every issue you can imagine. All of these had very simple fixes, but I couldn’t figure out what I should put in the CSS file, and which needed to be in-line (spoiler alert- pretty much none of it). But either way, the images act like normal images now! Yay! More functionality in the notes app is what I have planned next.

0
0
19
Open comments for this post

3h 24m 19s logged

chicagOS devlog #3 - Alright so I have changed a few things recently. #1 - I rethemed the whole OS, but later I might add a way to choose a theme in a setting app? idk I haven’t decided yet. // #2, I started working on the Mind Map App, but I quickly realized that its actually more complicated than I originally thought, and since I’m not that good at this I decided that I will come back to that app later. // #3 I made a calculator app, which is fully functioning and (as far as i’m aware) doesn’t have any bugs. // #4 I finished the notes app, but I might add more functionality later. // Thats it in terms of new features, my future plans include possibly some sort of settings app, finishing the Mind Map App, and I would like to add some sort of photo gallery app, which is what I plan to work on next.

0
0
11
Open comments for this post

2h 16m 31s logged

chicagOS log 2 - I have since added the actual window for the notes app, and basic functionality including adding notes and writing in them. I plan to add a save feature, and the ability to have multiple notes open at the same time. While working through the guide, it told me to make a “mind map” using paper for brainstorming. I thought about how I didn’t want to get up to grab a piece of paper, and I knew what my next app would be: a Mind Map app! now I will never have to get up again.:nod: I haven’t added any functionality to this app yet, but it should be relatively simple. (currently the app icons are placeholders from google, I promise they will be better eventually!)

0
0
16
Open comments for this post

1h 16m 2s logged

The basics of the webOS are done! It is Chicago themed, and all the apps will be useful to someone who lives/is visiting Chicago. I actually sent more time on this project but I couldn’t figure out hackatime :( Regardless, I finished the background, top bar, and welcome screen that is draggable and able to be opened and closed. I plan to work on the first app soon, which will likely be a notes type app.

0
0
26

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…