Skip to content
OverviewSolutions
9
Comments
28

John_diddles

@JohndiddlesLagos, Nigeria470 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

MongoDB, NodeJs, Express Js, Wordpress, Solidity,

Latest solutions

View more solutions

Latest comments

  • John_diddles•470
    @Johndiddles

    Hi Desha,

    Really great work on this challenge.

    You can look into the line-heights for your texts and also, you can add transition {say 0.2s} to the .icon-circle class to make the transition between the hover and normal state a bit more interesting.

    Also for your colors, you can look into using rgba(). This can be a lot interesting and I'm sure you'll love it.

    These aren't major things but you can always consider them. Still, really great job on this challenge. I love your solution.

  • John_diddles•470
    @Johndiddles

    Hi Nguyen, this is nice. I like it.

    about your questions, I'll probably go with grid because it'd be easier for me to move things around with grid. But you can sure get this same task done using flexbox. My solution to this task was done with flex and it was very is easy getting it done. Secondly, like Marvin said, you can add some transition effect to the hover effect.

    But still, nice work. Keep coding......cheers 🍻 🥂

  • John_diddles•470
    @Johndiddles

    Hi Oussama! A very solid job you did here being your first react app.

    About your questions, I have made some modifications to your detail component to fix the challenges you're having. I'll paste code here so you can compare it with yours and hopefully you can understand the fixes I made.

    import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
export default function Details(props) {
  const { darkMode } = props;
  const addDarkMode = darkMode ? "darkMode" : "";
  const { countrieName } = useParams();
  const [countrie, setCountrie] = useState([]);
  const [allCountries, setAllCountries] = useState(null);
  const [allBorders, setAllBorders] = useState(null);

  const fetchData = async () => {
    fetch(`https://restcountries.com/v2/name/${countrieName}`)
      .then((response) => response.json())
      .then((data) => setCountrie(data[0]));
  };

  useEffect(() => {
    fetch("https://restcountries.com/v2/all")
      .then((response) => response.json())
      .then((data) => setAllCountries(data));
  }, [countrie]);

  const {
    name,
    nativeName,
    population,
    region,
    subregion,
    capital,
    flag,
    topLevelDomain,
    borders,
    languages,
    currencies,
  } = countrie;

  useEffect(() => {
    let borderCountry = [];
    if (borders) {
      for (let i = 0; i < borders.length; i++) {
        allCountries.filter((country) =>
          country.alpha3Code === borders[i]
            ? borderCountry.push(country.name)
            : ""
        );
      }
    }

    setAllBorders(borderCountry);
  }, [allCountries]);

  useEffect(() => {
    fetchData();
  }, [countrieName]);

  console.log(countrie);

  return (
    <div className={`details ${addDarkMode}`}>
      <div className="container countrie-container">
        <Link to="/">
          <button className="btn home-btn">
            <i className="fa-solid fa-arrow-left"></i> Back
          </button>
        </Link>
        <div className="countrie">
          <div className="countrie-img">
            <img src={flag} alt={name} />
          </div>
          <div className="countrie-details">
            <h2>{name}</h2>
            <div className="countrie-description">
              <p>
                <span className="text">Native Name </span>: {nativeName}
              </p>
              <p>
                <span className="text">Population </span>: {population}
              </p>
              <p>
                <span className="text">Region </span>: {region}
              </p>
              <p>
                <span className="text">Sub Regions </span>: {subregion}
              </p>
              <p>
                <span className="text">Capital </span>: {capital}
              </p>
              <p>
                <span className="text">Top Level Domain </span>:{" "}
                {topLevelDomain}
              </p>
              <p>
                <span className="text">Currencies </span>:
                {currencies
                  ? currencies.map((currency) => ` ${currency.name} `)
                  : "loading currencies"}
              </p>
              <p>
                <span>Languages</span>:
                {languages
                  ? languages.map((language) => " " + language.name + " ")
                  : "loading languages"}
              </p>
            </div>
            <div className="border-countries">
              <span className="text">Border Countries :</span>

              {!allBorders ? (
                <div>Loading border countries...</div>
              ) : (
                allBorders.map((country) => (
                  <Link key={country} to={`../detail/${country}`}>
                    <button className="btn">{country}</button>
                  </Link>
                ))
              )}

              {/* <Link to="ou">
                <button className="btn">France</button>
              </Link>
              <Link to="ou">
                <button className="btn">France</button>
              </Link>
              <Link to="ou">
                <button className="btn">France</button>
              </Link> */}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

    if you have any questions, please feel free to reply below, I'll be glad to jump back in here. Again, really solid job you did. Keep coding! cheers 🍻 🥂

    Marked as helpful
  • John_diddles•470
    @Johndiddles

    Hi Riha! I checked back and saw that you've fixed your live link. That's great.

    Your solution is nicely done. I saw that you used margins to give your flex items some spaces between them. That works. But a better practice is to give the containing div with the display of flex a gap attribute. something like this;

    .container {
  display: flex;
  gap: 2em;
}

    this separates all of the flex items by 2em both horizontally and vertically.

    You can also consider using relative units such as 'em', 'rem' instead of px for your sizes especially your fonts.

    Every other thing looks great. Good job! Cheers 🍻

  • John_diddles•470
    @Johndiddles

    The link to the github code now works but the live link shows the content of your gh-pages branch. I think you have to go to your settings on this repo and click on pages, then change the source to main (which is the branch that has your code) and then click save. I think this should fix it.

    Marked as helpful
  • John_diddles•470
    @Johndiddles

    Hi Mahmoud! I really love your solution. You did really good with this.

    I see you gave your grid items some margin to space out the items, it is a better practice to use gap instead of margin just like this;

    .container {
  display: grid;
  gap: 20px;
}

    This will evenly space out all the items in the grid by 20px both vertically and horizontally and you won't be needing the margins.

    Also you can consider using other size units (such as em) for your texts instead of 'px'. I also see you have the same text color for all your p tags, but I think according to the designs, the colors are meant to be different. The white backgrounds have darker texts while the other ones have much lighter texts.

    Overall, you did a solid solid job. Cheers 🍻

    Marked as helpful
View more comments