All comments

• 

  Aaron Rutherford•300

  @Hazipan

  Submitted almost 3 years ago

  

  Countries Project Using React

  #react

  1

  30
  

  Maksim Baravy•220

  @maximkatut

  Posted almost 3 years ago

  Hi Aaron! This is a very nice solution! Everything looks great!

  There are some issues that I can point out:

  • If you have a list of items - make sure you use list tag and list item tags <ul><li>item1</li><li>item2</li>...</ul> . That is a very good practice.
  • If an item is clickable and it's not an anchor tag or button put cursor: pointer into the styles
  • You can try react-router in your next project, it gives your app a more professional touch
  • Also you can improve your code by doing this:

  if (!renderDetails) {
    <div className='search'>...</div>
    <div className='regionContainer'>...</div>
    <div className='countryGrid'>All tiles</div>
  } else {
    <Details country={details} close={toggleDetails} countryInfo={countryInfo} />
  }
  

  You can improve your accessibility by adding a span tag inside a button and then hiding it like so:

  <button><span className="visually-hidden">Belarus</span></button>
  

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  

  Happy codding!

  1

  Marked as helpful
• 

  CSamu7•50

  @CSamu7

  Submitted almost 3 years ago

  

  Expenses chart with HTML, CSS, JS and Chart.js

  #chart-js#fetch

  1

  20
  

  Maksim Baravy•220

  @maximkatut

  Posted almost 3 years ago

  Hi Samu!

  This is a very good job! Looks very good!

  I found couple of issues with accessibility:

  • Don't forget to put lang="en" in your html tag
  • And you have to have the header in each section, so you can add tag h2 for example and hide it like so:

  <h2 class="visually-hidden">Some title</h2>

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  } 
  

  1