Wanderlust project assistance


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);


            return venues;


    } catch (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) {




// 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);





const createWeatherHTML = (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}"/>






const renderForecast = (day) => {

  // Add your code here:

  const weatherContent = createWeatherHTML(day);



const executeSearch = () => {

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



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

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

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

  return false;



Here is my index.html

<!DOCTYPE html>



    <meta charset="utf-8">


    <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">




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



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

      <form autocomplete="off">

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

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



    <div class="container">

    <div id="destination">


    <div class="sectiontitle">

      <h2>CURRENT WEATHER</h2>


    <section id="weather">

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



    <div class="sectiontitle">

      <h2>TOP ATTRACTIONS</h2>


    <section id="venues">

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


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


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










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

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



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?