Coder Legion - Recent posts tagged 30daysofcode

Day 5 of 30 - Tip Calculator App (Part - 2)

Thu, 08 Oct 2026 19:42:13 +0000

I finally got the Tip calculator to function!

For real I'm still trying to figure if this JavaScript is for me because, why did it have to stress me so much?!😭

For this phase of the challenge, my goal was:

To get the UI looking as close as possible like the design.
Design active states.
Get the buttons and inputs to function as expected.
Display the calculated result.

My Process:

I declared all relevent DOM elements as inputs in JavaScript.
Wrote a calculateTip() function to calculate Total Tip / person and Total Amount/person, if both Bill and Number of Persons inputs were not zero.
I rendered the tip buttons as a loop and called the calculateTip() function on each button with a click event.
At Reset, I declared all variables back to 0 (except number of persons which I left at 1).

Challenges and AI collaboration:

I faced several challenges and bugs but after several hours of brain wracking, I worked with Gemini to figure things out. I didn't just ask the AI to generate the codes. I asked how things were done and when the AI suggested, I tried them out.

Continued development

I didn't do so much form validation in this phase of the project, except a condition to check that the inputs were not 0. For further development, I plan to learn more about form validation in JavaScript, then do a better job in validating the forms.

I'm not sure what the next project holds but I'm excited.😊

Day 4 Of 30 - Tip Calculator App (Part - 1)

Tue, 06 Oct 2026 19:28:31 +0000

For #Day 4, after learning several more JavaScript topics, I decided to step away from my course a little to try a real project from scratch.

So I picked up this project from Frontend Mentor to get my hands dirty.

However, for today, I was only able to complete the HTML and CSS. Will continue with the Javascript section tomorrow.

The challenge

Users should be able to:

View the optimal layout for the app depending on their device's screen size .
See hover states for all interactive elements on the page.
Calculate the correct tip and total cost of the bill per person.

My process

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox
CSS Grid
Mobile-first workflow
Media Queries for responsiveness
JavaScript

What I learned

I learned to dynamically render the Select Tip part of the ui with JavaScript. My initial challenge was how to render the Custom input which was different from the buttons but with some google research, I was able to get that done.

I also learned to place the $ icon on the Bill input with HTML data-attribute and CSS pseudo-class.

Continued development

To complete this project:

I'll be adding relevant states to the button and input components.
I'll be writing the JavaScript functions to ensure the data are dynamically rendered and the Tip Calculator works as expected.

I'm Starting A 30days Of Code Challenge

Tue, 29 Sep 2026 13:16:32 +0000

Hello Legionnaires!🖐

I'm starting a 30 days of code challenge. Might continue to 60, 90 or 100 days challenge if I'm able to complete the first 30 days but yeah, let's see how it goes.

I'm an API and Product Documentation Engineer and I really do enjoy working with developer tools and the developer community. But all my effort to learn coding and actually get to build real stuff myself has been futile. I either get to start a course and do not finish or get distracted with some other stuff.

But I'm here again to try this once because, I just do not want to be a tech writer, but a writer who actually builds stuff and enjoys talking about them. On this note, I'll be taking a fullstack dev course on freecodecamp youtube channel. It's a 48 hrs long course and very practical.

I have some background knowledge in frontend, so I guess I'll just be picking up from where I left. The truth is, I've never felt like I've known JavaScript enough so I always get that impostor feeling when I have to build with it. I'll be starting this challenge with some JavaScript topics, especially topics I still haven't felt confident about. And I'll be building progressively as I go.

My goal for this course is to complete it with a fullstack Next.js project within the next 30days.

Once I'm done with the course, I plan to pick up challenges from frontendmentor to build. I do not plan to rush this process, but take the time to understand what I'm actually doing...However, I also wish to be hirable by the end of the year.

I'm putting this out here to help me stay accountable and I do not promise this will be perfect but I hope it is.

I hope to make this an enjoyable learning experience and would really appreciate your support with feedback or anything else you might want to share.

And if you're on this same journey or learning just anything this season, I'd be happy to do this together with you! Please do well to share in the comment!

Finally, I guess I need all the energy I can get for consistency...wish me luck guysss!🤭