Devlog #4: READ ME READ ME

I managed to make a README! It’s very basic, but it’ll do. Now all that’s left is to ship! (hopefully i remembered everything)

Devlog #3: Adding Some Style!

Adding CSS was probably the easiest part of the mission. I just added a font (Google Sans Code, if you’re wondering), changed the background colour (to #001), and added some pseudo elements (I omitted the zigzag, as it looked quite weird). You can see the CSS below.

Also, I think that the mountains look pretty cool. 🏔️ 🏔️

Now all that’s left to do is write a README!

Devlog #2: Stealing Fetching the Data

Time to fetch the data! You can now fetch data from the NASA API with my API key!
Today’s one is a simulation of the universe named TNG50.
Next I’m going to add some fancy CSS, then I’ll get to work on a README!

Devlog #1: Got it Published!

I’m currently working on The Daily Cosmos, a daily article with images about space.

Currently, there is nothing on the site, but I plan to add some info and a picture from NASA and some fancy CSS.

Devlog #4: Music Player

I made a music player! I used some AI since it’s been a while since I coded JavaScript, but I put together the thing myself. Here’s how it works.

First, I get the file from the user in the form of <input id="musicFile" accept"audio/*" type="file">.
Then, I listen for a change in the input by adding an event listener: musicFile.addEventListener("change", loadMusic);.
Once the user adds a file, I fetch the file :const file = this.files[0];.
Then I assign it to a blob URL: musicURL = URL.createObjectURL(file);.
Next, I assign the blob URL to the source tag: musicSource.src = musicURL;.
Finally, I reload the audio tag for the changes to take place: musicPlayer.load();.

Here’s the code:
HTML Code:

<input id="musicFile" type="file" accept="audio/*">
<audio id="musicPlayer" controls>
    <source id="musicSource" src="">
</audio>

JavaScript Code:

function loadMusic() {
  const file = this.files[0];
  if (file) {    
    if (globalThis.musicURLblob){
      URL.revokeObjectURL(globalThis.musicURLblob);    
    }
    globalThis.musicURLblob = URL.createObjectURL(file);
    musicSource.src = globalThis.musicURLblob;    
    musicPlayer.load();
    musicPlayer.play();  
  }
}

let musicURLblob = null;
const musicFile = document.querySelector("#musicFile");
const musicSource = document.querySelector("#musicSource");
const musicPlayer = document.querySelector("#musicPlayer");

musicFile.addEventListener("change", loadMusic);

Devlog 3: About Screen

About my project:

Browser!!

I’ve created a browser!
Most links don’t work(because it’s an <iframe>)

Cricket, a very basic OS

Cricket is a very basic operating system. When it’s done, it will have a lot of features, including:

• a text editor [✓],
• a terminal [-],
• a web browser [-],
• a media player/viewer [ ],
• and a bunch of other stuff.

So far, I’ve done the first one, the second two are in progress, and the third has not been started yet.

Here is an image: