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!!!