Github

Live Website

"Guess the Capital" is a React project that interacts with an API, delivering precise information on the names of world capitals in a user-friendly interface. Users are prompted to guess the capital of a randomly selected country, and a score card in the top left corner keeps a "right" and "wrong" score of their guesses.

The primary challenge I faced in this project revolved around accurately aligning user-provided guesses with the special characters of the capitals coming in through the API. This required managing the variety of characters that may be in the capital data that we receive from the API, so that if the letters in the guess were correct but the user did not input a specific character, the user would still receive a "right" score point.

Below is a snippet of the code illustrating how I managed these edge cases:

const [correctCapital, setCorrectCapital] = useState("");
  
    useEffect(() => {
      async function getData() {
        try {
          const url = await axios.get(
            `https://restcountries.com/v3.1/name/${props.place}?fullText=true`
          );
  

          let capital = url.data[0].capital[0];
  
  
          let capitalUppercase = capital
            .toUpperCase()
            .normalize("NFD")
            .replace(/[\u0300-\u036f]/g, "")
            .replace(/.|,|'/g, "")
            .replace(/_|-/g, " ");
  
          setCorrectCapital(capitalUppercase);
  
          props.addCapital(capitalUppercase);
          props.addCapitalNormalCase(capital);
        } catch (err) {
          alert("The API used in this project is down");
        }
      }
  
      getData();
    }, [props.place]);