@Lauren_hackalicious

I’M BACKKK All I’ve been seeing on Instagram is “pomodoro this” and”pomodoro that”, so I’ve decided to make my very OWNNN pomodoro timer. It is plain right now as I’m figuring out the layout and structure of the clock. I’ll add this to my portfolio project for sureee. The actual update: I created the timer, added the basic start, pause, and reset buttons, and a banner that will display when the timer ends. I’ve been playing around with the @Keyframes element inside CSS, so the glowing ring around the timer is actually slowly pulsing. How cool is that?? When I implement the JavaScript function, I’m thinking about making the color change based on whether the timer is paused or resumed. When it’s paused, the ring will turn red, and when it’s ticking, it’ll be green. Additional info I would like for people to fork my GitHub repo code and customize it to their liking when I’m finished. I’d love to see what the community comes up with!!

1st Devlog I decided it was finally time to create a webpage dedicated to storing all my projects! As an aspiring computer science major, I feel this is crucial to have on deck. I played around with how I wanted things to be laid out and ended up with this design. Is it plain? Yes. Is it also straight to the point? Also yes. This will be amongst my shorter projects since all I need to do is fill out the template I created in HTML.

Ship 1!! I added all the tracks to the album, CINEMA, yay. I wanted the playlist to fit the theme of the album itself, so I made a few Google searches for what CSS hex codes would match up well. After my brief research, this is the result. I also added backgrounds to both of the music players because the black background felt too empty. The styling definitely leveled it up. I updated the music player coloring for the Submarine music player because it felt too basic compared to CINEMA. In my second ship, I plan to add The Marías’ third studio album, so stay tuned! 👀

Update: I added the CINEMA music player ^_^. I absolutely love the linear color gradient I have going on on this music player. I’m thinking about changing the font to a more retro one tbh. All I have to do next is add the music to this file, and I’ll be done! Problem I don’t know how to post a full image of the music player, which is why I have to take two screenshots.

Update Lovely CSS style revamp to the home page of my music player! I customized each album’s background to fit the album’s theme :). I also made the actual music player icon spin. I’m not sure what the deal is with videos on Stardance; I can never see uploaded videos on the website. Hopefully, everyone viewing this devlog can interact with the video to see my update in action!

I thought of a way to make this project bigger than previously anticipated. Originally, I wanted to make a music player for only the album, Submarine, but I felt unfulfilled when I completed the player. By adding a homepage, I can add as many albums as I like, while sustaining the original music player idea. Update I added a homepage to my music player. It features the freshman and sophomore studio albums from The Marías. I want to add a feature to play a sample of each song, and the album covers redirect a user to the corresponding music player.

Small Update After adding all the songs from the album, Submarine, to the playlist, I got the idea to add floating lyrics of each song adjacent to the music player. I felt that the player by itself was too static on the screen. The lyrics will provide some life to the website! I am currently playing around with the style of the lyrics; I’m thinking about changing the lyric font, but I’m not 100% sure yet. This project has been so fun to code after a long day.

Update - A LOT has happened since the last devlog, which was about 2 days ago. I have implemented a sidebar with a playlist so the user can select any song from the album, Submarine. The user can either click the 3 lines to see this menu or scroll to the right and choose a song of their choice from there. I have added the audio from the songs Ride, Hamptons, Echo, Run Your Mouth, Real Life, and Blur. Future Plans - I want to add their first studio album, CINEMA, to this website. I’m thinking that the back arrow on the top left of the box will redirect the user to a homepage. This homepage will display both playlists, and the user will be able to select either Submarine or CINEMA. If you all have any suggestions, let me know! This journey has been fun so far. Issues I have been having internet troubles, so staying consistent has been hard these past 2 days.

Updated and Polished music player I made the player muchhh bigger and added a box shadow lighter than the linear gradient background colors. I added a play, pause, and progress bar beneath the song title and credits text. Bug - When I click the player button to pause the song, the icon doesn’t switch to the pause icon. Future plans- I want to add the complete Submarine album by The Marías to the music player. I’m not sure how to do that, as I had to follow a JavaScript tutorial to get this far. Since that is my goal, I’ll figure it out by the next devlog.

I remembered the first music project I did as a tribute to the group, “The Marías”. It was super simple and only played the instrumental of the song “Paranoia”. In this project, I want to play a complete album. So far, I have created the foundation of the music player! It will be cleaned up in the next devlog.

FINAL devlog | 1. I created a fully functioning weather app using JavaScript. This took almost 3 hours because I’m new to JavaScript, so I followed a tutorial by BroCode, who is a coding tutorial creator. He doesn’t just make the program; he explains what each line of code does and how it connects to the HTML/CSS file. 2. The weather app and notes app icons are draggable. 3. The calculator app is not draggable for some reason that I cannot figure out. The weather app window is not draggable for the same reason. In my second version of my web-based OS, I plan to have all my windows draggable.

UPDATE - I replaced the music icon with a weather app icon because I plan on creating a music player as a separate JavaScript project - I updated the main window to include my GitHub profile and READ.ME - Everything is now draggable - I added a doc section to the bottom of my screen, and I plan to make them function similar to the apps in the main section of the OS

i added the calculator app to the webOS! This took almost 3 hours to do because of a lot of bug fixes ,and asking copilot for help, which ended up making things worse. I had to code the calculator myself in a seperate CSS file, so all the styling woulndn’t be in one large file. I can move the calculator window around, but I can’t close it due to some overlapping JS and CSS names.. i think. the next update willl have this fixed! I also learned that I can embed a script file into a specific div element.I used AI to program the onclick +1 on the z-index on the window. this essentially means when a person clicks a window, it is on the top layer.

I’m making a Kirby-star themed calculator! This is an upgrade from my first “mymelody” calculator from 3 months ago. I just added the buttons, and I’m currently working on making them work in JavaScript.

web-calculator v2 is COMPLETE.

I polished the buttons and gave them some color. I embedded a Kirby PNG, similar to my first iteration. I added a button click sound :) I hope you all enjoy testing out and using this calculator

I got all the buttons to work using JavaScript and have begun working on styling ideas! Compared to my first iteration, I’ve definitely improved my CSS styling. Link to my first calculator: https://example0d1n.github.io/calculator/

I’m making a Kirby-star themed calculator! This is an upgrade from my first “mymelody” calculator from 3 months ago. I just added the buttons, and I’m currently working on making them work in JavaScript.