Sharks/Hailey M.

[HaileyMatz]

No description provided.

[audreyandoy]

Hi Hailey! Your project meets all requirements and looks great. Not only that but you made your own designs come to life!!!!!

I left some comments on how to refactor. Great work on making your design responsive, however, I would consider adjusting the text size so that it doesn't shrink too much.

Other than that, fantastic work Hailey :)

Grade: 🟢

[audreyandoy]

👍 Nice work creating a state object. This is very similar to how 'state' aka global data is shared across an entire app and we'll see React use a similar pattern of storing data in objects.

[audreyandoy]

👍 . Good work with error handling and using console.log to confirm the behavior of your get request. However, the nature of PR's is to provide code you eventually want your team to have. In this case, we can keep the console.logs local to our project and remove them for PRs.

[audreyandoy]

Nice work using the lat and lon stored in state to pass into the API call.

[audreyandoy]

Also nice work in converting kelvin to Fahrenheit!

[audreyandoy]

The name clickBtn is very generic, we'll often have several buttons on a web app. A function name should describe what the function does! In this case, we're setting the location in state and then getting the lat and longitude. Perhaps we might want to change this to "setCity" or "setLocation".

[audreyandoy]

I LOVED this enhancement, Hailey! It's so cool to see you develop an app based on your very own designs. I remember you being nervous about this feature during a 1:1 and I'm so proud of you for making it work ✨ YOU did that ❤️ 🔥 !!!

[audreyandoy]

There's a lot of repetition in this function. Notice how in each conditional, you are setting the same three elements to the same background color? We can DRY up our code by using the conditionals to instead change the value of a variable and THEN set that color to the elements backgrounds.

const changeRanges = () => {
  const input = document.getElementById('range');
  input.addEventListener('input', (event) => {
    let color = ''
    if (input.value >= 80) {
      color = '#EA9A9F';
    } else if (input.value >= 70) {
      color = '#E8BCC3';
    } else if (input.value >= 60) {
      color = '#E5DDE7';
    } else if (input.value >= 50) {
      color = '#CECEE0';
    } else if (input.value < 50) {
      color = '#AEBFDD';
    }
    document.getElementById('city-circle').style.background = color;
    document.getElementById('temp-circle').style.background = color;
    document.getElementById('sky-circle').style.background = color;
  });
};

[audreyandoy]

Hm... changeColors and changeRangeS are very similar. There's probably a way of combining both of them!