All comments

• 

  Aaron Rutherford•300

  @HazipanSubmitted over 2 years ago

  Wow this one was fun! It was a fun journey learning how to implement an API using XMLHttpRequest. I would love any feedback. Also, how's my accessibility? What should I do to improve it?

  

  Countries Project Using React

  1

  30
  

  Maksim Baravy•220

  @maximkatutPosted over 2 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!

  Marked as helpful

  1
• 

  CSamu7•50

  @CSamu7Submitted over 2 years ago

  The most difficult thing about the practice was making the chart, at first, I tried doing it with Canvas but it was so difficult for me, so I started to search for a library that helps me make the chart.

  I'm not really sure about the HTML code and some parts of the CSS code. So I would like if someone could recommend me better practices.

  

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

  1

  20
  

  Maksim Baravy•220

  @maximkatutPosted over 2 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