Scrollbar is working!!

Devlog 24 - scrollbar bug

Guys I think that this bug was (is) my personal fault, bc the scroll bar is visible in every single browser different than my current one lol I probably have some sort of extension that adds none !important or sth to my code’s head and it ruins everything, but it shall work on every other device, on every other browser.

Tbh I also used ai to fix it but it didn’t really helped bc it was my internal problem. So happy that it’s working, just wanted to clarify and log these 16min!!

If any problems with scrollbar occur, please use keyboard arrows to scroll through windows

Again, thanks for reading and have a nice day!

happy and frustrated

Devlog 23 - Dock animation, scrollbar and NGRSTApp

Dock Animation

I really like this animation!! It’s so smooth and cool and I’m so happy bc I learned new thing with the tutorial!! It came out exactly as I wanted

NGRSTApp

It’s finally finished!! I managed to add some things regardless it’s such a fresh mission. Hope yall like it!

Scrollbar

Yeah so here’s the frustrating part. I coded really pretty, unique and practical scrollbar in the css but I used webkit and it worked on microsoft but on chrome - not anymore! You can’t even see the scrollbar! I don’t have time anymore - I’m leaving in few hours, I commented it out and I hope I’ll fix it one day

Additional changes

1. Rewrited README
2. Added some events to the calendar

What’s next?

I’m gonna ship now!! Wish me luck and thank you all for your support throughout the whole voyage!!

Which one should I choose?

Devlog #22 - Timer

So I just made a timer with tutorial, but I need your help!! Should I keep miliseconds (slide 2) or keep it simple just with hours/minutes/seconds??
I kinda think that h/m/s looks better but it also seems so boring and less “advanced” than h/m/s/ms!!

Also this was such an easy tutorial, fortunately everything went smoothly!! Yall probably know bro code but if someone wants here’s the link

What’s next?

1. Dock animation
2. NGRSTApp

Thanks for reading and I’m waiting for your comments!

I’m back!!

Devlog #21 - new colors

Hi everyone! I’m finally back but from hospital… right after my trip I was diagnosed with severe anemia and had to stay in the hospital for four days. I’m feeling good but I’m a little worried bc I lost so much time and I’m leaving on next trip again in few days!! There’s not many things left in SpacecraftOS tho, so let’s summarise it

What’s new?

In the video below you can see that I adjusted the calendar colors for every theme. It was such a fun process! I like how it looks now. I also managed to fix the days align and now it works perfectly, always in 7 columns.
Hope yall like it!

What’s next?

I’m going to work on dock animation!! I also need to finish NGRSTApp but I think I’m going to keep it simple bc I don’t have so much time and I want to ship by the time I leave

Thanks for reading, take care and have a nice day!!

Reallyyyyyyy time consuming Calendar

Devlog #20 - Calendar

So I spent this whole day coding this calendar with youtube tutorial. This tutorial was only 17min but it took me 5h

Then I needed to fix some typos bc I ofc made a lot and then many many styling!!

It’s not the final result!

I’m going on a trip tomorow, so I need to take a break from coding. To adjust the width and height, make it all fit to my site, it takes so long, and then I need to change the colors, bc I was just testing with the pinks. Change colors to all of my themes 😭 But it’s okay I got this

Disappointing surprise

You can see in the video on the second slide that there are 6 columns in the next month instead of 7! I’ve been so happy bc it was working in august, and then I changed months and it was a little disappointing surprise. I’m gonna fix it later!

What’s next?

When I’ll be back I’m going to work on this app! I didn’t expected it to be that hard

Thanks for reading and see you in the next one!

More Animatiooons!

Devlog #19 Animations on scroll

Animations

So recently I’ve been working on animations on scroll! Now my Apps about spacecrafts are more interactive and less boring.

In the video below you can see all of the scroll animations I’d added till this moment.

I feel so confident with css animations, they give me so much fun!!

Icon

The video is cropped so you can’t see the snake game icon but it finally is here! I added it in the second slide so you guys can see it! Let me know what yall think.

I wanted to keep the one real-life, space themed addition (like moon in the music app) so the snake has galaxy eyes.

Nancy Grace Roman Space Telescope PROBLEM

As you can see I also added an icon for NGRST App but it’s an upcoming mission and I don’t really know what to do with it!!

Someone requested it in the feedback, so I really want to implement it but idk, maybe I shall add a countdown? But it will be outdated soon. Many things can be outdated!

Thanks for reading and have a nice day!

The most spacecraft app on spacecraft os?

Devlog #18 - MapApp!!!

ALL SPACECRAFTS IN ONE PLACE WHAT AN AMAZING FEATURE!!

What’s new?

MAAAP AAAPP

While doing research on Voyager 1 and 2 I found this “Eyes On The Solar System” from NASA, and noticed that you can embeed it, and that’s what I’ve done!

First and foremost, you can check here the position of any spacecraft you want! That’s why I called it Map App. Moreover, that’s a place with a lot of information, and whole spacecraft history!

As you can notice, it didn’t take me so long (bc it’s just embeeding), so what I’ve also completed?

1. Fixed some bugs
2. Finished icon for snake game

What’s next?

NGRST app! (Can someone guess, what does this short stand for? Hint: HST and JWST are already in spacecraftOS!)

Perfecting

Devlog #17 - snake game and organisation

What’s new?

Snake game

As you can see, I’ve styled the snake game a little! I also added start/tutorial/guide window, I added it by creating new window and setting start button as the window close button hihi work smarter not harder.
Ai usage
I couldn’t figure it out how can I set imgs as the background, food and even for snake, so I asked ai. It’s just creating const with img and adding drawImage instead of fillStyle, and I’m so happy bc now I understand it and know how to implement imgs to js!

WHERE’S THE ROCKET?

It was too hard!! I really tried, but when I managed to set the rocket as the snake’s head:

1. The rocket was too small
2. It wasn’t rotating

It looked so bad and if I wanted to continue with this idea I would need to use ai, so more ai than I would like, so I eventually there’s snake in the snake game.

More organisation

I created folders in the img folder for each app, bc the img folder was still a little messy. It was such a tedious process, but it’s much clearer now!

What’s next?

New REALLY COOL APP and snake app icon, which I’m going to edit today while watching F1 sprint

Random decision (but it was worth it)

Devlog #16 - Radio buttons and styles

What’s new?

Radio buttons

In my feedback someone suggested to add radio buttons instead of checkboxes bc then you can just choose one - and today I did it! I also styled it and added cool animation!! Each theme have different stars colors as well - you can check it in the video below.

Highscore

Somehow, I also added highscore to my snake game! I took a bit of information from tutorial 1 a bit from tutorial 2 and it’s working! Maybe not perfectly, but when you restart, new highscore will be visible, and it’s also in local storage so you can come back after a month and your highscore still will be there!!

So, why random?

It was a little unexpected bc I was working on the snake game (yeah it’s still not finished) and suddenly I gained a lot of motivation for the radio buttons. I knew I wanted to style them somehow, but I came up with the star design today, and I think it’s perfect!! What yall think about it??

What’s next?

Hopefully, I’m going to finish the snake app!

Such a challange!

Devlog 15 - snake game

Snake game?

Yeah I’m surprised too. But I really wanted to see how it works and just code sth like this (with tutorial ofc). I wanted to make it a little later but I had time today and decided - why not?

Okay but, 6 hours?!??!?!?!?!?

Yeah 😭 in short, I started with tutorial 1, but it didn’t worked, so I deleted everything and switched to another tutorial, where I realised that I just haven’t connected my snake.js to html lolll but anyways, I even liked tutorial 2 more, I feel like it gave me more styling options, but I needed to quit it because to restart you needed to refresh the site. I tried to just implement some functions, change some things but I’m not that skilled to do this yet. I deleted everything again and came back to tutorial 1 which I eventually completed!

That’s not the final results

I really want to make the snake head a rocket thats collecting fuel, but there are some problems!! Obviously lol, so I have something like this const snakeColor = "pink"; and I tried to change pink to class, to var but it didn’t worked, and I really don’t know how can I style this snake further, so I can add the rocket and fuels and many other things. That’s why I liked tutorial 2 more!

What’s next?

I will try to style the snake and this whole window basically!!
The video below is in 2x speed!

I code my function!!

Devlog 14 - animation and design

Function

I’m sooooooooo happy because yesterday I’ve managed to create my own function!!!
someone suggested to make other tab switching. I was looking for some tutorial, but couldn’t find anything so I asked ai what can I search in youtube to find it. For better or worse, the AI ​​gave me a little guidance on how it works (so I’d understand it in the tutorial, NO code), I didn’t even fully read this because when I noticed “animation” and “adding classes” I noticed, what I can do!
Few days ago I mentioned the theme switch tutorial, that helped me with understanding js!! With this knowledge and the pattern I already had from webOS tutorial, I managed to create opening app window animation!!

Additional apps

I also added left bar for the additional apps (/apps that are not about spacecrafts). For now just the background, but when I will finish every app I will also add some better animations and just style it better

Problem

At the very end of the video, you can notice such a huge problem with opening windows and theirs z-index. They open randomly, once under particular app once above, trying to catch this video when it’s smooth and they all go on top was really hard!! Please let me know if you know how to fix it
And I had also tried to make my windows resizeable but it unfortunally didn’t worked. I will get back to this later

What’s next?

To perfect it all and fix bugs! And then maybe some games?

Thanks for reading and have a nice day!!!

Feedback and roverS

Devlog 13 - Spirit and Opportunity App

Feedback

So, my project went through ratings: unfortunately, I only got 9.79 multiplier, but I also got an amazing and really valuable feedback!! People pointed out my messy repository, and indeed, it needed to be changed. I created new folders, and now it’s clear and organised!

RoverS app?

While researching, I noticed that Spirit also deserves to be mentioned! Because it’s the same mission, I decided to add Spirit to Opportunity app, and therefore it’s Rovers/Spirit&Opportunity app now!

What’s next?

I’m going to focus on improving my app and implementing the advices I received in feedback. I also have a lot of new ideas, so stay tuned!

Time-consuming animation and problemss

Devlog 12 - Opportunity App and animation

Problems!!!

I messed up positions! 😭😭 I was adjusting this rover so it’s driving perfectly around the Mars for hourss and then I decided to check it with the scroll bar, and bc the rover had position: absolute it went down with the scroll bar idk how to describe it, like, he flew out of mars lol

Solutions!!!

I’ve watched quick guide on youtube about positions and finally understood everything, because before I was just kindaaa guessing lolll now, having the knowledge, I wrapped my animation into <div style="position: relative; border: pink [...]"> , added position: absolute to my images and adjusted everything completely from scratch!! It took me so long but I think it was worth it bc it looks nice and is something different from the usual.

One more change

I added border photo to Voyager App. Adjusting also took me a while but the window is way more interesting now!

What’s next?

Finishing Opportunity App!!

Thanks for reading and have a nice day!!

More colors!!!

Devlog #11 - 3 new themes!!

I made new themes!!!!!!!

I’m so happy to introduce you to my 3 colorful themes:

1. Moon Theme - “Earth set” photo from Artemis II mission, blue-colored
2. Aurora Theme - Earth’s Aurora seen from the ISS, green-colored
3. Sunset Theme - “Cotton Candy Skies”, Falcon 9 rocket, pink-colored

No gatekeeping, I’ve been searching for tutorial like this for so long so here’s the link for the tutorial. Hope it will be helpful!

I need a feedback!!

I’m not sure about the colors tho, please let me know know if everything is readable and if you perhaps would change anything

Thanks for reading, hope you like it!

new app and new ideas!

Devlog 10 - Full Voyager App

Full Voyager App

I finished coding new app!! It’s about Voyager mission, so basically Voyager 1 and Voyager 2. Research took me so long again!! But I’m happy with the results

New idea

So since I started this project I’ve been thinking about how do I arrange the blank space next to the rating images. Today, I added a brief text that’s describing the photo. Just a little, but now you’ll know what the images shows! You can see it on the 1st screenshoot below. Both screenshots are from the new app

What’s next?

I would love to make new function in the settings so you can change the background photo!! Wish me luck

Thanks for reading and have a nice day!!

New app!!

Devlog #9 Voyager Photos App

Guys I finished rating other projects and I have to admit that my devlogs are way too long
So today let’s keep it brief:

Voyager Photos App!!!

I’m gonna create another app just about voyager, but this is some sort of gallery of (only) 11 photos from these spacecrafts. I made cool infinite images slider with tutorial - it went really smoothly, and then I’ve been trying to make an information window appear when you place your cursor on the “?”. I don’t feel so comfortable in js yet but I wanted to do it all by myself so I went with css, and I really like the final results! You can see it in the video below

What’s next?

Full Voyager App, I hope!

See you in the next one, thanks for reading!!

15 min can’t be lost!

Devlog 8 - fixed all typos and changed the start text

So, what I changed in these 15 min?

• I changed all the typos in artemis app
• FORTUNATELY I checked the start window, and changed the description because it was really outdated! And therefore, I needed to change the image in my readme. I also adjusted it to width: 100%; height: auto because when I opened readme on my phone it was really stretched!

Below I leave a screenshoot of the app I’ve been adjusting, with the artemis II crew because they’ve been my motivation through this whole process!

I can’t wait to work more on SpacecraftOS!! Wish me luck on shipping ^^

One more devlog!

Devlog 7 - title and start animation

I wanted to ship already but lo and behold, I’ve added some changes!

So, what’s new?

1. I finally designed the header of my site! now it says SpacecraftOS and displays a rocket icon!
2. Updated Artemis App - I’ve added some information about Artemis IV and V
3. WELCOMING ANIMATIONNN!!!!!! - I’m very happy because I’ve managed to add a start animation, like welcoming screen or sth like this, idk how is it called, but now, when you enter my page, you can see an animation with my baner! It’s in the video below

What’s next?

I’ve also finished writing the README so now I will just read everything top to bottom again and SHIP!!!

Darkmode!!

Devlog 6 - dark mode and more photos on the borders

What’s new?

Darkmode and settings

I’m so happpyyyy I’ve managed today to create new very cool app - settings - where you can switch between lightmode and darkmode! At the beginning I tought that it would be a nightmaree but turns out, when I really focused, it was a smooth process and I really enjoyed it! But one thing is not working.. not so important but when I’m adding this app to the rising on top function everything crashes and I can’t open any app. I’ll try to fix it later.
There ofcourse will be more functions soon in this app so stay tuned!

More images on borders

I added more photos on the borders!

1. ISS
2. NASA astronaut working on Hubble
3. The Golden Record spinning on the Artemis II playlist app (I think it’s a really cool idea)
   Adjusting the astronaut was really hard, and the background did not removed well but I’ve managed to add some blur and eventually it looks okayy
   I’ve also changed the position of Artemis astronaut - I wanted to put it on the left but unfortunatelly, it cannot be here because then it covers the scroll bar. Adjusting the rotation helped a little and it looks way better!

What’s next?

I think I’m gonna ship soon! I’ve already writed the README and I just need to check everything. But don’t worry, it’s not the end of SpacecraftOS! I already have a lot of ideas

My website is all around Artemis now!

Devlog #5 - two new apps fully finished!

I finished the image slider I’ve been writing about in the previous devlog and added new app! I tought it will take me so much longer, but here I am!
But let’s start from the outset:

Finished Artemis Mission App

I’ve finally finished it! In my previous devlog I said that I found another tutorial on how to make image slider, and it was a bullseye!! After I adjusted it a little so it fits my images it’s working perfectly!! And looking so so good! I’m so happy!!

New app - Artemis II Playlist

So, I really wanted to implement some music into my website. But because it’s a SPACECRAFT operating system I knew it cannot be just basic music app. While working on the Artemis App I came up with this amazing idea - I’m pretty sure that you heard about the wake up songs from Artemis II Mission. I decided to do an app with that playlist! Since it’s just embeeding the code from spotify it wasn’t such a big problem. I think that the hardest thing here was to make the app icon, which is the moon listening to music on headphones!! I really like this idea, let me know what you think about it

What’s next?

I want to add some images on the borders like in the Artemis App. And then another app!!

Thanks for reading and have a nice day!

Such a messs!!

Devlog #4 - Artemis App!

Your opinion

Before we begin, I’d like to know your opinion about the images layout. The 3 first screenshoots below shows different layouts.

• Screenshoot 1: This is the first version I coded. But it covers the close button and most importantly - the scroll bar which is so unpractical
• Screenshoot 2: this is how I had imagined it when this idea came to my mind. It also covers the close button and the scroll
• Screenshoot 3: last version I’ve coded. I did not planned this layout but I think it looks great and is the most practical!
  Unfortunately the 3rd option covers the move button but by adding some z-index everything works well, and looks better than when adding z-index to the scroll bar bc the rocket/astronaut is either covered by the scroll or too far away.

Please let me know what you think!

Challange 1

Adjusting these images was such a challange. But I wrote it all down from memory! I added the position: fixed so it can exceed the window and adjusted the position several times! The biggest problem, as I said, was that they were covering the scroll bar and close button and then the move button as well. But I found the solution! I added the appropriate z-index to each of the elements and it worked!! (I’m really surprised tbh it was so easy and didn’t took me that long to figure out! I’m getting good at coding )

So finally, what’s new?

I added the Artemis Mission App!! It’s not an app just about the artemis II. It’s an app where you can learn about the whole mission, the SLS rocket, the Orion capsule and get to know some fun-facts!
Doing the research on all of these thing took me sooo much time! And then writing it down, deciding what is worth the attention and so on… it was kinda exhausting! But I’m so happy with the (not yet) final results!
Yeah, not yet meaning…

Challange 2

On the last screenshoot you can see the biggest mess on this app! Few photos totally without rhyme or reason! I was coding with image slider tutorial. Everything was going smoothly, till the creator of the tutorial said that now we shall see our photo aaaand yup I did not see anything. I was checking several times if I writed down everything the right way, I was looking for solution and eventually I created new repository and copied the whole code which he pasted in the comments (just to clarify - in this project I do NOT copied any code, I writed everything by myself). In this repository everything worked. When I saw the final results in the repository I had also noticed that it’s not really what I wanted to have in the Artemis App. Bc the code did not worked (probably because it already was in several divs and not like raw or sth) and bc it didn’t align with my vision I decided to just delete this whole code. I’ve already found another tutorial, with better design so I will keep you updated on how it’ll turn out!

What’s next?

1. Fixing the mess and finishing the app
2. New app (it’s going to be music app linked to the Artemis II mission!)

Thanks for reading and stay tuned!!

AYYYY FINAL DEVLOG!

Devlog #3 - more apps and final changes

Guys I can’t believe I did this!! (It’s such an achievement for me okay ) Let’s break all the changes I’ve made to some points:
(if you don’t want to read it all please skip to the last point because it’s about Poland in space and I love Poland and Space)

APPS! AND MANY MORE PROBLEMS.

Let’s start from the problems…

If you tought that in the second devlog I’ve finally managed to make working apps - you are so wrong. Barely 2 hours later I realised, that the (window) part was not a problem. Turned out, that when I changed this to the id of my app window, next apps opened the 1st app window, and not theirs window. I’ve been searching for solutions for HOURSS! Eventually I had asked ai for help. I had described my problem really pricesely. It found the problem! In this function function handleIconTap(element) I was supposed to write (element, window)… Fortunately, now it fully works!! I’m so happy because this was sooo frustrating.

New apps!

So, I’ve made two new apps! One similar to James Webb Space Telescope App, and one for notes and ideas. Let me introduce you toooo:

1. Hubble Space Telescope App! - As I said, this one is similar to JWSTApp but it’s around Hubble! You can rate photos, learn some facts about it and just admire another amazing spaceship.
2. NASCApp also known as Spacecraft Ideas. So from where is the abbreviation “NASCApp”??? Well, previously it was named “Notes About Spacecrafts”, but I decided that it’s so boring. Spacecraft Ideas is not really mind blowing name but it’s way better. I also had few problems with this app but after longer reflections, I decided to keep it simple.
   You can see these apps on screenshoots below.

Starlink Catch Guide and Minor Changes

I finished writing about starlink satellites in the Starlink Catch Guide window and added some minor changes to every window on my webOS after reading them all again. It was such a long process, but I like how it all looks together now.

POLAND IN SPAAAAAACE AND PIEROGI!

I added youtube video to the ISS Catch Guide window about Polish astronaut - Sławosz Uznański, eating delicious polish pierogi, on the ISS! I think that this is the most important part of my webOS. POLSKA GUROM!! (You can watch Sławosz eating pierogi on the ISS here )

What’s next?

I’m going to read it all again, write README, complete project info and finally, SHIP!!

Don’t worry it’s not the end of the journey because I started to like coding so much and I want to continue with webOS 2!

Thank’s for being with me and have a nice day!

I did itttt!!

Devlog #2 - Apps

Hi!!! I’m so glad to announce that my apps are finally working! There’re still few problems though. But let’s start from the outset:

James Webb Space Telescope App

This app provides few basic information and interesting facts about JWST. I had also added some photos which you can rate from 1 to 5 stars! You can see the app in the screenshots below.

Problems

1. As you can see, there’s so much space on the right from the images you can rate. I’m considering a lot of options, one of them is to just make two/three photos in one row, what do you think? Would this look better?
2. Double click app opening - the if and else statements made my app open at the second click, and not at the first when it’s selected. It selects with the first click and then, with second click, deselects and opens. Idk if it’s supposed to work this way. I think that now I’m going to leave it because at this point I’m just celebrating it works and I want to focus on other things.

Problems fixed 🥳🥳🥳

Yall don’t even know how happy I am because of these apps working!! It indeed was much easier than I tought, guess what stupid mistake I had made this time… in the function I did not changed (window) to my actual window. Lol. It was not the only problem on the way but it was definitely the main mistake. I’m so happy because now I can get creative and continue working on the apps design!!

Upcoming changes

Next I’m going to add few more apps. Can’t wait!

Thanks for reading this devlog. Hope you’ll have and amazing day!!

I dont know what I’m doing but I hope it will be worth it!!

devlog #1 - SpacecraftOS

Hi everyone! I detached the WebOS mission from ISS HUNT and created this project - Spacecraft OS. I noticed that it’s not really the way I want ISS hunt to look like, to be like.
To be honest - this tutorial is SOOOOO hard to me! The apps get me everytime! And besides it I made a lot of minor mistakes. For example, once I could move the start window alone but the guide window was moving only with the start one. And the blur wasn’t working, I was so frustrated and reallyyy confident that there are NOT any stupid mistakes like wrong id. Until I realised that the top bar only blurs the start window… I haven’t closed the div. Yeah. That is a stupid mistake. Even tho it’s hard to me I’m not giving up! Others have done it so can I!

For now, I created the top bar and completed the start window and the ISS catch guide. Currently I’m working on starlink catch guide and then I’m gonna work more on these wretched apps 😭 Wish me luck!