title: How do i display object on Javascript
body: <p>I am currently doing a course on Udemy on JavaScript and i have been stuck on a project for a couple of weeks, I have followed the instruction to the best of my abilities many times but i seem to be missing a vital part that is stopping the project form displaying an object.</p>
  
  <p>The purpose of this project to display cocktail drinks and the ingredients when you submit your favourite cocktail into a form. I have  four JavaScript files app.js this is the main section of the JS code, then CocktailAPI.js this holds a class that handles the API queries, then we have UI.js this is for the interface behaviour and lastly the part i have not yet reached is the COcktailDB.js.</p>
  
  <p>The problem i am facing is that i have created the class that handles the API request and the tutor starts by converting it into json and then turn the response into a object which is then logged on the console log to prove that everything is working fine.The problem i am facing is that even though i have copied the tutor the object does not display on my console and i get a error message that reads: </p>
  
  <blockquote>
    <p>Access to fetch at '<a href="http://www.thecocktaildb.com/api/json/v1/1/search.php?s=vodka" rel="nofollow noreferrer">http://www.thecocktaildb.com/api/json/v1/1/search.php?s=vodka</a>' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.</p>
  </blockquote>
  
  <p>I have checked the url many times and even copied and paste the url to eliminate that as the problem, i have solved this problem before but ended up starting the project again because i encountered another problem and though starting again would solve it. However when i reached this point again i didn't not know what i done to solve the problem as i tried so many things.</p>
  
  <p>As there is 2 files that are currently in use at the moment as i am still quite early into the project there is nothing on 2 files so i will only post the 2 js files.If this is not enough please let me know what i need to add.</p>
  
  <p><strong><em>app.js</em></strong></p>
  
  <pre><code>//Instanciate the classes
  const ui = new UI(),
    cocktail = new CocktailAPI();
  
  
  //Create the event listeners
  function eventListeners() {
    //Add event listeners when the form is submittted
    const searchForm = document.querySelector('#search-form');
    if (searchForm) {
      searchForm.addEventListener('submit', getCocktails);
    }
  }
  
  eventListeners();
  
  
  //Get cocktail function
  function getCocktails(e) {
    e.preventDefault();
  
    const searchTerm = document.querySelector('#search').value;
  
    //Check something is on the search input
    if (searchTerm === '') {
      ui.printMessage('Please add something intot the form', 'danger');
    } else {
      //Query by name of the drink
      cocktail.getDrinkByName(searchTerm)
        .then(cocktails =&gt; {
          console.log(cocktails);
        })
    }
  }
  </code></pre>
  
  <p><strong><em>Cocktail.js</em></strong></p>
  
  <pre><code>class UI {
    //Display a custom message
    printMessage(message, className) {
      const div = document.createElement('div');
  
      //Add the HTML
      div.innerHTML = `
            &lt;div class="alert alert-dismissable alert-${className}"&gt;
            &lt;button type="button" class="close" data-dismiss="alert"&gt;X&lt;/button&gt;
            ${message}
            &lt;/div&gt;
        `;
  
      //Insert befrore
      const reference = document.querySelector('.jumbotron h1');
      const parentNode = reference.parentElement;
      parentNode.insertBefore(div, reference);
  
      //Remove after 3 seconds
      setTimeout(() =&gt; {
        document.querySelector('.alert').remove();
      }, 3000);
  
    }
  }
  </code></pre>
  
  <p><strong><em>cocktailAPI.js</em></strong></p>
  
  <pre><code>class CocktailAPI {
    //Get recipe by name
    async getDrinkByName(name) {
  
      //Search by name
      const apiResponse = await fetch(`http://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name}`);
  
      //returns json respnse
      cocktails = await apiResponse.json();
  
      return {
        cocktails
      }
    }
  }
  </code></pre>
  
  <p>It may become clearer what i am trying to produce when you load up all the files</p>
  
  <p>I understand that this may not be enough information but if you ask me i will be able to explain in more detail, but the code is mean to display the response of the API in the console log with all the properties</p>
  
  <p>I will copy the code so that it can be viewed if any one want the files itself to look into more deeply.</p>