My very own WebOS

Step 5 Finished
I am finally with this project! I’m really proud of what I’ve made so far, and I can’t wait to ship it. I won’t talk about the project as a whole, but rather what I have accomplished since that devlog.

In step 5, I made my very own app called “Shuttle Video”, which is basically a Netflix-style video app for browsing and watching my YouTube content directly on the site. I used YouTube’s thumbnail CDN and embed player to power the video app, allowing visitors to watch my content without having to leave the site.

Step 4 done!
I’m coming back to this project after a week or so, and I realised I finished step 4 without writing a devlog, so here it is.

Since my last devlog I’ve completed:

1. Added a “app” to the desktop
2. Made the icon clickable
3. Created my first app window/app
4. Personalised according to me

The guide was a bit vague this step, so I don’t know how many errors I’ve made so far, but I’ll leave that for the final devlog.

Step 3 completed!!
You might have noticed a bunch of things missing. I’ll explain why after going through what I did in Step 3.

Since the last devlog, I’ve:

1. Made the welcome window moveable
2. Created a handle to enable movement
3. Made functions to open and close the window
4. Organised my JS and CSS into files.

It would have been nice if the guide started off with using .js and .css files rather than doing it in-line, but it wasn’t too much of a hassle moving the code.
The reason why a bunch of windows are missing, is because I simply wanted to see the welcome window on its own. I will most likely add them back in step 5.

Finished step 2!!
There was A LOT of changing to my code, but I’m very happy with what I’ve done so far.

Step 2 involved:

1. Adding a background to make the website look like a desktop
2. Defining the ‘windows’
3. Creating the top bar

I started using Javascript for the first time this step, and it was very fun!
The guide I’m using showed how to add the current time, but some additional things I did were:

1. Format the date to dd/mm/yyyy (the Australian way), and not the default mm/dd/yyy.
2. Add the temperature of the area of where I live in. (this was so hard, but after a lot of searching I found this youtube video which really helped

Finished step 1!!
Step 1 involved creating the basis of the welcome page using HTML and CSS, and making the content personal. Right now it looks very similar to my first webpage project, but that will change in step 2.