C17-Sharks-Raha

[Ramora6627]

No description provided.

[audreyandoy]

Nice work Raha! Project grade: 🟢

Key takeaways:

• Event listeners are our friend! They search for HTML elements to apply functions to instead of requiring us to invoke functions in our HTML files. We can clean up the HTML file by removing all function calls and replacing them with event listners in index.js. I provided an example of how in the PR.
• Always make sure you have a .gitignore file to add .env file to. Never push up your .env file to github! This leaves your API keys vulnerable for others to steal!
• venv/ is NOT needed for javascript projects, only for python projects. Be wary of what you push inside of PRs!

Other than that keep up the great work Raha!

[audreyandoy]

This is dangerous, your API keys are open to the public and vulnerable to strangers using your account! You need to create a .gitignore file and add .env to it in order to prevent local environment files from being pushed publicly.

[audreyandoy]

Consider moving the url into a constant variable towards the top of this file to improve readability.

[audreyandoy]

Nice error handling. Perhaps we can write more descriptive errors such as 'temperature not found' or 'location not found'. We could also display a div containing the error in case it's useful to an end user.

[audreyandoy]

☀️🫖

[audreyandoy]

We should try to avoid invoking functions in our HTML so that this file's sole responsibility it just to display UI (practicing separating of concerns). We can achieve this by setting event listeners on with elements with specific id's. Here is how we'd change this button to have an id, and how we would apply an event listener to that button in Javascript:

HTML

<button id="reset"> Reset City </button>

Javascript

const resetCity = function () {
  city = 'Atlanta';
  document.querySelector('#cityname').value = 'Atlanta';
  const curWeatherHeader = document.getElementById('cityQuote');
  curWeatherHeader.textContent = 'Hotlanta! The City of Sweet tea and Sunshine';
  getCurrentTemp();
  updatteLandBasedonTemp();
};

const registerEventHandlers = () => {
  // This function will contain all the event listeners we add to elements in index.html
  const resetCityButton = document.getElementById('reset');
  resetCityButton.addEventListener('click', resetCity);
}

// This line executes registerEventHandlers immediately on load.
document.addEventListener('DOMContentLoaded', registerEventHandlers);

[audreyandoy]

Consider storing these "global" variables in an object. This simulates how 'state' is managed in most frontend frameworks and is a common pattern you'll see in industry.

[audreyandoy]

Notice how there's only one line of code that differs between these two functions. We could combine these two functions and identify the exact element that was clicked using event data like so:

const changeTemp = (e) => {
  const degreeCountContainer = document.getElementById("temperature");
  if (e.target.id == 'temp-up') {
      state.temp += 1;
  }
  else if (e.target.id == 'temp-down') {
      state.temp -= 1;
  }
  newTemperature();
};

const registerEventHandlers = () => {
    const tempUp = document.getElementById('temp-up'); 
    tempUp.addEventListener('click', changeTemp); 

    const tempDown = document.getElementById('temp-down'); 
    tempDown.addEventListener('click', changeTemp);
}

[audreyandoy]

Good work performing the nested API call using the locationIQ API call and the weather API.

[audreyandoy]

Also great work with the design of your weather report! The layout is really neat and I love the images you chose for the landscape and the sky!! I'd say my one feedback is to make the font a little bit bigger so it's easier to read the buttons and options.