Responsive design using flexbox, HTML CSS, and JS

Hello @leanghok120

I want to express a big thank 🙌 to you for your javascript code especially the part about attaching the timestamp to the URL. I was initially facing an issue in Firefox and I referred to your solution. Your solution helped me fix my issue in Firefox 🥳

I wish to provide some feedback on your code:

• I notice that you have used units like 15px, 28px for your font-sizes. It is better to use units like rem instead of pixels because rem is good for accessibility. For example, when users change the font setting in their browser to "very large", they would expect the font size to scale. Unfortunately, px is fixed. rem will help us to achieve the scalability.

• I observe in your style.css that you have used #dice-btn to define your styles. While syntax wise this is fine ids like #dice-btn has higher specificity than elements. In CSS, it is better to go for lower specific css styles. Therefore instead of defining #dice-btn in your style.css, I would just do the following:

button {
  width: 4.0625rem;  /*1rem = 16px*/
  height: 4.0625rem;
  border-radius: 50%;
  border: none;
  background-color: var(--neon-green);
  cursor: pointer;
  transition: all 0.15s ease;
  margin: 0 auto -3.75rem;
}

• You might want to consider using <picture> element for showing and hiding of the divider since it is better for performance. Grace Snow's article talks about how one can use <picture> element and eliminate the need to add display:block and display:none for various form factors.

• You can consider renaming the ids like advice-id, advice-text, dice-btn by appending -js because they are used in the javascript. So when you look at your html code and see the ids as advice-id-js, advice-text-js, dice-btn-js, you know immediately that they are used in your javascript.

• For future development/improvement , you can consider disabling the button while the fetching of the advice is in progress.

Let me know if the above suggestions work. And thank you once again 🤩