How many days old app

Hey guys!

I am still practicing my javascript skills doing small projects on my own.

This is the first one I make completely from scratch (HTML, CSS & JS) without following any tutorial or guideline.

Here is the link to the codepen:

I would appreciate feedback, especially on the JS part, things are working, but I don’t really know if I am doing things the right way.

Also, I am planning to re-make this but using OOP and classes, just for practice. But I find it difficult to get started on that, I just don’t know where to start, so any pointer on that would be appreciated.

Oh, and one more question: would this kind of small project go on a portfolio? Or is this still to small and simple for that?

Thanks always.

1 Like

Cool, good job. I think working on little side projects like this are a great way to learn.

If I put on my code review hat… and please keep in mind that I am a picky reviewer…

You use let a lot when you should be using const. Only use let with primitives that you need to change or reference types that you will need to reassign.

You should indent your if statements. Formatting your code is extremely important - develop good habits early.

let daysOld = parseInt(difference / 1000 / 60 / 60 / 24);

Try to avoid “magic numbers”. Those numbers have no meaning on their own, I have to read it and figure it out. Imagine having to read through tens of. thousands of lines of code - every little speedbump can be frustrating. Putting something like:

const MS_IN_DAY = 1000 * 60 * 60 * 24;

somewhere out of the way and then using it:

let daysOld = parseInt(difference / MS_IN_DAY);

makes the code more readable. True, what you had may be kind of borderline on readability, but it’s a good habit to get into.

  <p>You are <span class="blue-text">${daysOld}</span> days old!</p>
  <button type="button" id="clear-btn">Clear</button>

What if they enter a date that is yesterday? True, it’s an edge case and unlikely, but these are the kinds of things that programmers have to think about. What about:

  <p>You are <span class="blue-text">${daysOld}</span> ${daysOld === 1 ? 'day' : 'days'} old!</p>
  <button type="button" id="clear-btn">Clear</button>

You could also do that logic earlier and store that string in a variable.

I don’t see anything else that jump out at me.

Oh, and one more question: would this kind of small project go on a portfolio? Or is this still to small and simple for that?

I would think that this is probably too small and simple. But if that is the best you have so far, put it on there and then keep building newer and better apps. But I like your initiative - when I was applying for jobs, I think the apps that I came up with (instead of curriculum projects or tutorial things) where the ones that attracted the most attention. So, I think you’re on the right path.

Good work.

Thank you vey much @kevinSmith.
I appreciate you taking the time to give me a honest and detailed review.

I will keep your advice in mind going forward, and thank you also for giving me a little confidence boost saying that I am on the right path! The self-taught path can be lonely sometimes :laughing:

The self-taught path can be lonely sometimes

Yeah definitely. Once we are out of the apocalypse, I highly recommend looking for a meetup somewhere. That was a real lifeline when I was learning, being able to talk to other people that were learning, hearing about their struggles and sharing mine, giving and taking advice, reviewing each others’ code. It really made a big difference. It’s tough right now with in person meetups not coming back soon, but there might be something online.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.