Officelite using JS, CSS Grid/flexbox, SASS

Hey, Huynh Nguyen! 👋

Congratulations on completing this challenge! 🎉

For the timer, I recommend setting the coming soon date by adding more days instead of milliseconds. So, the way it works is to

• Get today's date
• Then, create the coming soon date based on today's date + 30 days.

/* app.js | https://github.com/vanzasetia/officelite-coming-soon-site/blob/main/js/app.js */

const getThirtyDaysDateFromToday = () => {
  const TODAY = new Date();
  const THIRTY_DAYS_FROM_TODAY = new Date(
    TODAY.getFullYear(),
    TODAY.getMonth(),
    TODAY.getDate() + 30
  );
  return THIRTY_DAYS_FROM_TODAY;
};

const comingSoonDate = getThirtyDaysDateFromToday();

Also, there's no need for localStorage. You may want to use it if you want to the users to have the same coming soon when they come back to the site tomorrow (or any time in the future).

Here are some suggestions for improvements.

• For the custom select element, I recommend creating it with accessibility in mind. I recommend following the "Select-Only Combobox Example | APG | WAI | W3C".
• For the logo, the alternative text should not contain the word "logo". It should be the name of the company ("officelite"). Also, since it is wrapped by a link, the alternative text should tell the users that it is also a link ("officelite - home").
• Heading levels must always be in order to give structure to a page. I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings correctly.
• Those timer__numbers are not headings. They should be a paragraph. I would wrap the entire countdown component in one paragraph. Then, wrapped each text with a span instead.
• Avoid using JavaScript to add styling (unless you have no other option). JavaScript allows you to change the CSS code using the style property. But, to make debugging easier and improve code maintainability, it’s best to avoid it. Use CSS classes instead.

I hope this helps! Happy coding! 😄