Devlog 48:

Updating the CSS styling and improving the interface visibility.

I edited the CSS stying adding more things such as box-shadow and different color border. I made sure the web os looked good and wasn’t too heavily colored, that might make the text less easy to read. I also fixed the minimize button in the link window since it was off centered, because of the small size of it compared to the normal window sized ones.

Difficulty:

For me to be honest, this was difficult not because of like syntax and stuff, but because I’m not very good at styling. I tried to like make it pop and look extra good, and I think I have done well.

Devlog 47:

Add text on icon hover, that displays window name.

I made it so that when you hover over the icons in the icon bar, it will show the name of the window that the icon is connected to. This makes it easier for users to know what icon goes to which window, without guesses based on the icon image.

What did I learn and what was difficult.

At first I thought that making this would only need a bit of HTNL and CSS, and normally it would. However I came upon a problem and CSS wasn’t fixing it, nor was the HTML, so I had to adapt and use Javascript to fix my error. Eventually it worked out in the end, and not much Javascipt was actually needed. This helped me to learn how to fix errors outside of the box, and too try different ways to fix them.

Devlog 46:

Edited some of the CSS styling on the windows and top bar.

I edited the CSS styling on things like the, text, the windows, and the top bar. I used functions such as, text-shadow and box-shadow, to make text and windows stand out and look much nicer.
I also edited the border color and size of many things to make them either pop or, look better in between colors. Things like animations scale and filter, also helped make it look much more appealing.

What did I learn and how difficult was it

I learnt more about CSS styling and how to make project look extra nice. I was playing around with the CSS learning new mechanics and functions, to help make different things and parts of project look more nicer and clean. This was fairly easy and I didn’t have any trouble with doing so.

Devlog 45:

Added a lot of in depth comments to my Javascript file.

And adding a download button to the paint window.

I went through my Javascript code and worked on improving my comments and adding more, where they were needed. I focused on being very descriptive with my comments, explaining what things do and how. I also added some hover animations to the paint board buttons.

Download button added

I added a download button to my paint window. I made it so when the user clicks the button, the browser download trigger is activated and the image is downloaded. I did this in Javascript using toDataURL().

Diffuculty

Making the comments was fairly easy, as I just went to important parts with no comments and added explanations about them. Also the Javascript for the download button wasn’t too hard, and I think I am learning more and more about Javascript, which is helping make it easier and easier.

Devlog 44:

Fixed a z-index error, adjusted the colors and styling

I found a z-index error in the Javascript file, where the images when opened, wouldn’t go to the highest z-index, so I just added z-index 99 when window open.
I also mainly adjusted the colors, experimenting in CSS, to get the best design and the best text to background ratio in CSS.

Difficulty

Not too bad, because I didn’t have to go through hidden Javascript syntax errors and stuff, so it was mostly stuff I could just look around for a bit until I find the missing parenthesis or something.

Devlog 43:

Fix camera animation

Fixing the camera animation, making it so the user cannot spam open the window, making the animation run for however many times the user tapped the icon.

Difficulty

It wasn’t too hard to do, just needed to make some simple if statement to check if the window had been opened.

Edited

Also adjusted some styling in the map window making the text hover change in css.

Devlog 42:

Minimizer button

Added a minimizer button to all of the windows. I made it so that when users press the button, the hover filter glow will show on the corrisponding icon, to let users know the window is open.

Difficulty

This was fairly simple to do, and I just had to make some code for it in the same place near the close button in the Javascript.

Devlog 41:

Styling the windows, making it look nice

Fixed some of the styling on the windows, specifically on the manual window and the welcome window, since my rating said they looked like a power point. Trying to make my website look much cleaner and have a better design.

Devlog 40:

Camera Animation Added

Added a camera flash animation when you open the gallery app. It was quiet hard to make flash show after the camera image, but it works well.

Devlog 39:

May be Last Devlog

This is going to probably be my final devlog until I ship. I have enjoyed making this project and I hope that I can maybe make it better in the future. This video shows all of my windows and stuff.

Devlog 38:

Finishing touches

Adding finishing touches to my WebOS such as fixing code to work better. Making it so if you tap a window that is behind another window, it gets moved to the front. And some other fixes.

Devlog 37:

Icon hover response

Finsished making the icons hover display to stay on the icon image, if the corrisponding window is still open. Once the window is closed the style goes back to normal, but still if you hover it will have the style.

Devlog 36:

Adding a link window

Creating a link window that has multiple links. The window is closable and it uses the same functions as the other windows except that you cannot drag it.

Devlog 35:

Fixed many usability errors that I had such as

• Making boundaries for dragging the window.
• Making the scroll app bar optimize for different window sizes.
• Fixing a bug where you can play all roar sounds at once and they overlap.
• And a few random glitched that I found while trying to fix these.

Devlog 34:

Adding information to manual window

Just adding some more information to my Manual, for the new things that I have made. This is where users can find information about different features in my website. I wrote it all myself.

Devlog 33:

Adding undo button to paint window

Added the undo button and made it so that it will undo lines, fill, and clear.
This means that if you accidently fill your work or clear it you can press undo and it will bring it back :).
Works for multiple times, because it saves it in a array.
I am very happy with how it came out, because it was quite challenging to make.

Devlog 32:

Adding the paint window

My Tiger Masterpiece!
Finally finished making the paint board window. I also fixed a few bugs that I had with the drag header, and it not working.
Im going to add the title to this soon and also I will add an undo button incase you accedently delete your Tiger mona lisa.

Devlog 31:

Making the drawing window function

Making drawing window. Don’t mind why it looks weird right now, I will fix it later. Also I spent a lot of time trying to fix some hidden error I didn’t know where it was and I was totally confused, so I went back a commit and put my working code back and it fixed. I think I am going to wrap up my project soon, so that I don’t create more project breaking errors.

Devlog 30:

Finally made the calculator window

Idk how I managed to make it, but maybe the tutorial I was watching before was just not it. However, this one is: (https://youtu.be/KM8PIiqq97c?si=RgpvGnOKA7ZbfZoQ).
Anyone wanting to make a good calculator, check out that tutorial because he saved me! Thanks KennyYipCoding on youtube. Also surprisingly simple.

Devlog 29:

Struggling on the calculator window

4 hours down the drain. I worked for 4 hours trying to get a simple thing like a calculator to work. Some how it kept not working even when I followed a tutorial correctly. I will try again tomorrow maybe with a different tutorial, but honestly idk what happend. Also part of it was me trying to code in python and that turned out a disaster, but then I went to JavaScript and still didn’t work??. I know it might seem weird and also stardance if your reading this you can like delete the 4 hours or whatever from my thing Incase idk if this is fraud or something.

Devlog 28:

Added achievement alert

Added some nice animations to stuff and added a achievement/alert for the snake game, when you hit a specific score.

Devlog 27:

Designing the snake game window

Design on the Tiger Snake Game app is finished.
I added the instructions in the manual app, but the game is pretty simple to play.
I added a skin feature in case the stripes moving are a bit hard on some peoples eyes.
I added the high score tracker which saves your high score even if you close the tab.
And just fixed the lay out made it look nice.

Devlog 26:

Finished adding the tiger snake game

Finished making my Tiger snake game. I watched a very good and easy tutorial, link: (https://youtu.be/Je0B3nHhKmM?si=DQiSr36gDDSM3Psj)
I still need to design it more to make it look more like a real Tiger snake, like the logo if you can see all the way down there.
I think also I could make some Instructions and a highscore button, so that will be for next time.

Devlog 25:

Secret button editing

Just added the hover glow to the secret button so you can be more sure your on something special. So far I think my project is close to the end and I just need to do now fixing up to make perfect. And maybe even an extra feature.

This is what the front of my page looks like
(there more apps and features, the app side bar is scrollable, as you can see from my other devlogs).

Devlog 24:

Added the secret button

Finished Adding the Secret feature!
I cannot show you yet because it’s secret, but you could try and find it on my site (It’s not that hard its pretty obvious to find the secret).
Also I added a ding when you find the secret and as you can see the alert in the image at the bottom, so you will know if you found it.

Devlog 23:

Making the weather window look nice

Made the weather app have a default weather image now, but when the user inputs city it will change to the correct one. Also as you can see I made the handle a starling, and also in the bottom right corner there is 3 of them. The handle starling is for all of the windows and is how you drag, by holding it. That is for something I am making right now, however I am not finsihed yet. Just trying to make my website look as good as possible right now, while keeping the simple theme. (edit: I actually just realized that this devlog is exactly 1 second longer than the previous one).

Devlog 22:

Designing the manual window, welcome window, and other windows

Finished designing the manual app. It looks not too bad. Also I edit the welcome window bit, but I still have some work to do, to make it stand out. This took a while as I was playing around with the CSS also fixing other windows and stuff.

Devlog 21:

Adding content to manual window

Just added some information into the Manual app. Im not finished yet, I still need to make it look nicer. I will add some images and stuff to it next.

Devlog 20:

Added icon side bar, making new window, and fixing roar sound errors

Finished making the side bar with the icons. The side bar is scrollable, because I had too many icons and so that keeps them stored there better. I also started making the manual window, but I haven’t added any content yet. I also fixed some errors such as, the roar sound button would keep playing, even when the window was closed, so I thought it might be better if it stopped the sound when the sound window is closed. I also fixed some other errors and stuff, but everything looks good now.

Devlog 19:

Real working weather window added

Finally finished the weather window. It was very hard to do for me. I’m not done yet I still need to edit it to make the design look more good. The api works, and it runs smoothly. Need to change a few things also like the app icon side bar. Used a bit of AI to learn how to set up the api, since I was using a different one than the tutorial, it was much harder, but still uses same main core code. Overall I am happy with how It turned out. There’s still a lot to improve on, however I learn a lot from this.

Devlog 18:

Adding fun fact window app icon

Adding fun fact window app icon, and fixing some other stuff finished up the window. This is for the old weather window that I gave up on, that is now gonna be a weather fun fact window. I will still have both windows, its just one will be for a fun fact and one for a working API weather app.

Devlog 17:

Trying to make Working Weather window again

Trying again to make a real working weather window. Im still gonna keep the other one as like a cool fact, but this one is gonna work. I have found a good tutorial and I am really trying to make this work.

Devlog 16:

Scratch the weather API idea

Slight change in idea. No more weather api. Its a static window that shows the hottest day in Madhya Pradesh, home to the highest population of tigers in an Indian state. Looks pretty nice though.

Devlog 15:

Started trying to make weather window

Just started making a new weather window. I’m 15 minutes through the tutorial and now I need to add the api. I have never used an API before so this might be hard.

Devlog 14:

Adding comments to js and making new window

Finally finished sorting out my code so its easier to move and navigate around, using comments and stuff. I also made this Tiger information window, that shows some interesting information and facts about tigers. The window is scrollable and there is more information below this. Took me a while to do all of this and find information and stuff, but it looks like it turned out not too bad.

Devlog 13:

Adding comments to my CSS

Just sorting out my CSS so its easier to read. Adding comments and making specific parts for different windows and features so that they are easy to find.

Devlog 12:

Added start up animation

Made an animation on site startup. The text comes in from the left and then the tiger drops down. It wasn’t too hard, but I did find some struggle. I used Canva to make the design for the banner here and in my README are the credits to all of the photos and resources I have used from other people.

Devlog 11:

Added dark/light mode switcher feature

Just made a dark/light mode switcher in the settings window. Also if you close the tab it will stay the way you left it (This is the same for the background switcher as well). I also fixed many of the errors that I had, such as it not saving.

Devlog 10:

Making an images and audio file, and fixing a few errors

Just fixing an few errors and tidying things up. I had a few errors in my code so I just fixed that and then made my images and audio files more neater.

Devlog 9:

Added a settings window with a background changer

Finally finished the settings window. Its a background changer and it took so long to make and even longer to layout. The background changer works perfectly and looks good in both backgrounds. Was a bit hard though.

Devlog 8:

Added a new tiger map window

Added Tiger species habitat map. It shows where different Tiger species live and a bit more info. (Image from Wildlife foundation in Thailand (WFFT)).

Devlog 7:

Added multiple sound effects

Added some different Tiger species sounds to the window, so you can see the slight differences and similarities. First Devlog after first ship.

Devlog 6:

Readme added

Readme Added now ready to ship (There is more to the Readme than the image shows). The README includes information about my website and how I made it.

Devlog 5:

New window added - roar sound effect

Added a working Tiger roar sound effect button to a new window. When you press the button is makes a roar sound effect.

Devlog 4:

Adding tiger gallery window

Added a new photo gallery window to my site. There is also now a close button that closes the window, and I finished the tutorial this is just what I made instead of the tutorials other window, but it uses the same properties.

Devlog 3:

Adding drag and open buttons

Added the drag buttons to the window, also added the open button as you can see in the top left corner. I made this In JavaScript using event listeners .On part 4 of the guide.

Devlog 2:

Adding the working date/time

Adding a working date/time at the top right corner. It updates live according to where you live. Still on the tutorial.

Devlog 1:

The start of my WebOS

Making my first WebOS. Finished part one of the tutorial. here’s what it looks like right now.