Wanderlust project assistance

Hello,

When I run my code. I am seeing this error message. Please help me troubleshoot. Any assistance would be appreciated.

Uncaught SyntaxError: Identifier ‘createWeatherHTML’ has already been declared

Here is my main.js for reference, API information removed:


// Page Elements

const $input = $('#city');

const $submit = $('#button');

const $destination = $('#destination');

const $container = $('.container');

const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4")];

const $weatherDiv = $("#weather1");

const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// Add AJAX functions here:

const getVenues = async () => {

    const city = $input.val();

    const urlToFetch = url + city + '&limit=10&client_id=' + clientId + '&client_secret=' + clientSecret + '&v=20180401';

    try {

        const response = await fetch(urlToFetch);

        if (response.ok) {

            const jsonResponse = await response.json();

            const venues = jsonResponse.response.groups[0].items.map(item => item.venue);

            console.log(venues);

            return venues;

        }

    } catch (error) {

        console.log(error);

    }

};

const getForecast = async () => {

    try {

        const urlToFetch = weatherUrl + '?&q=' + $input.val() + '&APPID=' + openWeatherKey;

        const response = await fetch(urlToFetch);

        if (response.ok) {

            const jsonResponse = await response.json();

        }

    } catch (error) {

      console.log(error);

    }

}

// Render functions

const renderVenues = (venues) => {

  $venueDivs.forEach(($venue, index) => {

    // Add your code here:

    const venue = venues[index];

    const venueIcon = venue.categories[0].icon;

    const venueImgSrc = '${venueIcon.prefix}bg_64${venueIcon.suffix}';

    let venueContent = createVenueHTML(venue.name, venue.location, venueImgSrc);

    $venue.append(venueContent);

  });

  $destination.append(`<h2>${venues[0].location.city}</h2>`);

}

const createWeatherHTML = (currentDay) => {

    console.log(currentDay)

    return `<h2> ${weekDays[(new Date()).getDay()]}</h2>

    <h2>Temperature: ${kelToCel(currentDay.main.temp)}&deg;C</h2>

    <h2>Condition: ${currentDay.weather[0].description}</h2>

    <img src="https://openweathermap.org/img/wn/${currentDay.weather[0].icon}@2x.png">`;

}

const kelToCel = k => ((k - 273.15)).toFixed(0);

const createVenueHTML = (name, location, iconSource) => {

    return `<h2>${name}</h2>

    <img class ="venueimage" src="${iconSource}"/>

    <h3>Address:</h3>

    <p>${location.address}</p>

    <p>${location.city}</p>

    <p>${location.country}</p>`;

}

const renderForecast = (day) => {

  // Add your code here:

  const weatherContent = createWeatherHTML(day);

  $weatherDiv.append(weatherContent);

};

const executeSearch = () => {

  $venueDivs.forEach(venue => venue.empty());

  $weatherDiv.empty();

  $destination.empty();

  $container.css("visibility", "visible");

  getVenues().then(venues => renderVenues(venues));

  getForecast().then(forecast => renderForecast(forecast));

  return false;

}

$submit.click(executeSearch)

Here is my index.html


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Wanderlust</title>

    <link rel="stylesheet" type="text/css" href="public/reset.css" />

    <link rel="stylesheet" type="text/css" href="public/style.css" />

    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Work+Sans" rel="stylesheet">

  </head>

  <body>

    <header>

      <img class="logo" src="https://content.codecademy.com/courses/intermediate-javascript-requests/wanderlust/logo.svg" alt="logo" />

    </header>

    <main>

      <h1>Where do you want to land?</h1>

      <form autocomplete="off">

        <input type="text" id="city">

        <button id="button" type="submit">Submit</button>

      </form>

    </main>

    <div class="container">

    <div id="destination">

    </div>

    <div class="sectiontitle">

      <h2>CURRENT WEATHER</h2>

    </div>

    <section id="weather">

        <div class="weather" id="weather1">

        </div>

    </section>

    <div class="sectiontitle">

      <h2>TOP ATTRACTIONS</h2>

    </div>

    <section id="venues">

      <div class="venue" id="venue1">

      </div>

      <div class="venue" id="venue2">

      </div>

      <div class="venue" id="venue3">

      </div>

    </section>

    <footer>

    </footer>

  </div>

    <script

  src="https://code.jquery.com/jquery-3.2.1.min.js"

  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

  crossorigin="anonymous"></script>

    <script src="public/helpers.js"></script>

    <script src="public/main.js"></script>

  </body>

</html>

Hi there and welcome!

If I am not wrong…
the createWeatherHTML function was already created in the helper.js file.
Then this file is included in the HTML, together with (more specifically before) this main.js file.

    <script src="public/helpers.js"></script>
    <script src="public/main.js"></script>

That might be tripping you off. What happens if you remove all of the functions defined in helper.js from main.js?