Overview

Today was massive for Poorup. I officially made the first steps into the website, creating the backend for the hompage and creating the CSS..

Transitioning From HTML to CSS

I officially finished the basic HTML path on freeCodeCamp! It feels great to have the basic foundation down. I am still missing a lot of depth in semantic HTML and more advanced stuff, but I have enough of experienc to now build on it. I just need to learn some more js and CSS.

I then watched some video regarding CSS and worked on it. I realised that CSS is really simple but involes alot of googling to find certain functions . I did one rooky mistake which was having the css file not in the right folder so it wasnt loading correctly and i was quite suprised

Backend & Real-Time Socket.io Integration

This is where the real engineering started today. Since Poorup is a real-time multiplayer board game, I can’t just use standard HTTP requests where the browser has to reload every time a player moves. I needed a permanent, open connection between the browser and the server.

I set up a Node.js server with Express in server/server.js to serve my static folder. Then, I integrated Socket.io:

• Express Server: Serving the public folder on http://localhost:3000.
• Socket.io Setup: Wrapped the Express app in an HTTP server and configured the connection listeners.
• Client-Side JS: Wrote client.js to capture input data and handle form events.

The Struggle: I ran into a bug where clicking “Play” triggered the server connection even when the username field was completely empty, which bypassed my HTML required attribute. After digging into my event listeners, I realized I was listening to the click event on the button instead of the submit event on the form. Since the browser’s native validation only checks fields during a form submission, the click listener was bypassing it. Switching my listener to form.addEventListener("submit") fixed the empty-name validation instantly.

When I run node server/server.js now and type a name in the browser, the server terminal immediately logs the connection and prints the player’s name in real-time.

Next Steps & Screen Switching

Now that the backend is running and successfully communicating with the client, my next step is handling the UI transitions. Since we don’t want a full page reload (which would kill the WebSocket connection), I am working on setting up a Single Page Application (SPA) structure ,aksed ki what to do next by usign my earlier stated Lab approach in which i dont get code but how to do stuff and have to implement it.

I am currently working on Lab Challenge 9, where I will be wrapping the login screen in a #landing-screen div and the lobby in a #lobby-screen div. I’ll use JS to dynamically swap the .hidden class as soon as the server acknowledges that a player has successfully joined.

Conclusion

Overall, this phase was a huge step up from just writing static tags. I’m taking active notes on everything which you will later find in a second repo so you can build it your own with all the Lab challenges. I find it to be quite rewarding but now i have to lock in for school cause i got a vocabulary test in 2 days. I will probally upload a demo soon an do some major changes to color, theme, name and etc for copyright reasons