#Added full functionality to the webapp!
Today i was working hard on adding accounts. I added a registration page, and a login page. Both pages work by sending the information a user inputs in a to a database i created for free on neon. I also added login and sign in button to the home page, and added a welcome back message with the actual user’s name!
Added add and delete homework functionallity + added it to local storage so it gets saved!
Devlog #1:
The last few days I have been working on a study assistant. The main focus for this project is to make something that is actually useful for students, and also fun to use. The first prototype had a boring dark grey look. I personally really like the horizons.hackclub.com page, so I made that the main design of my site. The design was really time consuming for my project, but I made it work. After this I added the simple timer page, and added a Homework page. These were pretty easy to make, since they are just simple coding without any external API’ s or other tools. The grades page is till now my biggest issue, I want to add API’s from different school systems, but the problem is those API’s aren’t available. You need to request them, and since I am not a big name at all, there is no reason for them to give it to me. So I changed the grades page to say it’s still a work in progress. Even that was quite difficult for me. I had to put an image of a racoon in the bottom right of a window to get the design i liked. But the racoon kept going up or down when stretching the page. After a while i fixed that issue, and started working on an inventory section, where students can earn coins, or cosmetics for their future study buddy. I haven’t built anything around the study buddy yet, so stay tuned for that!
Today I spent about an hour building my personal website. I started by creating the basic HTML structure, then added a navigation bar along with About, Projects, and Contact sections.
After that, I linked an external CSS file and worked on styling the page. I experimented with different colors, fonts, spacing, borders, and rounded corners until I found a layout I liked. I also added a profile image and project cards.
I ran into a small issue where the first line of text was appearing next to my profile picture instead of below it. After adjusting the CSS, I got the layout working the way I wanted.
Finally, I cleaned up the code, checked that all of the navigation links worked correctly, and made a few final tweaks to the spacing and overall appearance.
Overall, I’m happy with how the site turned out, and I learned a lot more about structuring pages with HTML and styling them with CSS.
Today, I developed my second desktop application for HackOS: the Projects app. One enhancement I integrated is the ability to click windows to bring them to the forefront.
The app aims to showcase the projects I’ve created and provide users with an alternative way to navigate my operating system.
I began by designing a new desktop icon labeled “Projects,” featuring a book icon positioned next to the Journal app.
Next, I set up a new window for the application that includes:
I created a JavaScript array named projectsData to store information about my projects, with each project containing:
The loadProjects() function I wrote iterates through the array and dynamically generates project cards within the app.
Current projects include:
This project proved significantly more challenging than developing the Journal app.
I spent considerable time troubleshooting why the Projects window wouldn’t open. The primary issue stemmed from an incorrect HTML structure; I had created the window’s header and content but neglected to establish the projectsWindow container that ties everything together. As a result, JavaScript couldn’t locate:
var projectsWindow = document.querySelector("#projectsWindow");
This oversight hindered the window-opening functionality. Additionally, I mistakenly placed the projects-content div within the header instead of below it.
I also mixed up several IDs, including:
projectsprojectsWindowprojectsIconThis experience reinforced the importance of maintaining consistent naming conventions as projects expand.
I discovered that organization is becoming increasingly crucial. In a growing project like HackOS, minor errors in IDs or HTML structure can disrupt entire features, such as the draggable functionality.
I also learned how to dynamically generate content using JavaScript arrays rather than hardcoding everything into the HTML.
HackOS now boasts several features:
I aim to continue enhancing HackOS by adding more applications and refining the visual design. Some ideas on my list include:
HackOS is progressively evolving into a functioning operating system rather than just a simple webpage.
Today, I launched my first application for my personal operating system: the Journal app.
I added an app icon to the desktop, allowing users to open the Journal window only when its icon is clicked, rather than having every window open automatically upon loading the website.
I incorporated several systems I had previously built, including draggable windows, open and close functionality, and reusable styling.
Inside the Journal app, I created a sidebar and a content area. The sidebar lists various journal entries, while the main section displays the contents of the selected entry.
To keep the code organized and avoid hardcoding, I stored the journal entries in a JavaScript array of objects. Each object includes:
I developed JavaScript functions to:
During development, I encountered several bugs. At one point, the Journal window appeared inside the top bar due to incorrect HTML structure. I also accidentally created duplicate IDs and nested windows, which led to both windows moving simultaneously when dragged.
After resolving these issues, the operating system became much more organized and interactive.
The following features have been implemented:
This project is gradually transforming into a genuine operating system rather than just a simple webpage. The codebase is also becoming more modular, facilitating future expansions for additional applications.
Today, I significantly improved HackOS by adding interactivity to the welcome window, making it feel more like a real operating system.
I began by organizing my project files. I moved my JavaScript code to a separate script.js file and my styles to style.css. This separation made the code cleaner and easier to navigate.
Next, I implemented drag functionality for the welcome window. Using JavaScript, I tracked the mouse position to update the window’s location as users drag it across the screen. I added a header area that serves as a handle, allowing the window to be moved only when dragging from the top section.
I also introduced a close button in the top-right corner of the window. When clicked, this button hides the window by altering its display property. To reopen the window, I used the OS name in the top bar as a toggle. Clicking it makes the window visible again.
Continuing from the previous project, I kept the live clock, which updates every second using JavaScript and remains visible in the top bar.
To facilitate future expansions, I created reusable CSS classes for windows, headers, and buttons. This approach enables me to add more windows later without having to rewrite styles.
Through this project, I gained insights into:
My favorite aspect was enabling the draggable functionality, which made the interface resemble a real desktop environment. I also enjoyed adding the close button, enhancing the window’s behavior to mirror traditional applications.
Today I created the welcome screen for my Personal OS using HTML and CSS.
I started by creating a basic HTML page with a heading and a paragraph. After that, I added an image that represents me and included a link to one of my favorite websites. This helped make the page feel more personal.
Next, I experimented with different styles. I changed the background color, adjusted the text colors, and selected a font that matched the look I wanted. I also resized my image and rounded its corners using the border-radius property.
One challenge I encountered was making the image look the correct size without becoming stretched. I solved this by setting both the width and height and using styling to keep the image looking natural.
Through this project, I learned about:
h1, p, img, and a
My favorite part was customizing the page and making it feel like my own . In the future, I want to add windows, a desktop background, and interactive features using JavaScript.
Today I expanded my Personal OS by creating a desktop layout and adding a top bar with a live clock.
I started by placing all of my welcome screen content inside a div, which acts as a window. I added a border, rounded corners, padding, and a background color so the window stood out from the desktop background.
Next, I added a desktop wallpaper by setting a background image on the body of the page. I used background-size: cover so the image would fill the screen properly.
After creating the desktop, I built a top bar. I used a flexbox layout to place the OS name on one side and the time on the other. I also added a semi-transparent background to give it a more modern operating system appearance.
Finally, I learned some basic JavaScript. I created a function that gets the current date and time using new Date().toLocaleString(). Then I displayed the time inside the top bar and used setInterval() to update it every second so the clock stays accurate.
Through this project, I learned about:
div elements as windowsposition: absolute
transform: translate()
querySelector() and innerHTML
setInterval() to run code repeatedlyMy favorite part was adding the live clock because it made the website feel more like a real operating system. Next, I would like to add more windows, applications, and interactive features to make the OS more useful.
(I put both my devlogs in here because I forgot to post my first devlog)
Added 2 more commands, advice and dogfact. Also fixed the project test link, as it was app.slack.com, now turned it into a testing channel link.
Trying to make a Slack bot, without useless functions, but with very handy functions.
