Responsive website using React, TailwindCSS.

Community feedback

• 

  Aleksei•200

  @AlekseiBestuzhevPosted over 1 year ago

  Hello.

  Congratulations on completing this difficult task. Cool start page. 🔥

  There are a few items that need fixing:

  • Not all countries open on the details page. The error "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" is thrown.
  • On the details page "cursor: pointer" anywhere on the page. In theory, it should be only at the buttons.
  • When clicking on the "border countries" element, the country details page should open.
  • Need to handle missing values. For example, the capital of Antarctica. Also for this reason, the error about which I wrote earlier falls. Not all countries have neighbors and it turns out that you are passing the undefind to the map method.
  • A lot of code is duplicated, especially in classes.

  try:

  const className = "border-2 px-2 py-0 md:px-3 md:py-2 rounded-sm ${
  darkMode 
  ? 'bg-darkBlue border-veryDarkBlue2 text-white' 
  : 'bg-white border-darkGray text-darkGray'
  }";
  

  Note that I intentionally used double quotes (should be backticks) to correctly apply text formatting.

  instead:

  className={
  darkMode
  ? "bg-darkBlue border-2 border-veryDarkBlue2 text-white px-2 py-0 md:px-3 md:py-2 rounded-sm"
  : "bg-white border-2 border-darkGray text-darkGray px-2 py-0 md:px-3 md:py-2 rounded-sm "
  }
  

  Find the common and apply the ternary operator only to the different parameters. The same can be done inside the transfer of props.

  • In general, for colors, I would recommend CSS variables. It also greatly reduces duplication.

  I hope this will be helpful. Good luck!🤚

  Marked as helpful

  0

  ---

  

  Aditya Surve•220

  @AdityaSurvePosted over 1 year ago

  @AlekseiBestuzhev Thank you very much for pointing out the errors and suggesting areas where I can improve my code. I really appreciate your help!

  0