0

This is my first post on Stack Overflow, so please excuse any ignorance from my end. I have been pursuing HTML & JS for about 2 months now.

I am having trouble with a question I've been given for school. The question is as follows:

Create a website that will display three random Chuck Norris jokes. Use the API found here: http://www.icndb.com/api/ . You can use this URL to fetch the jokes: http://api.icndb.com/jokes/random/3 .

I am able to fetch the data (jokes) from the server and display them in my console, but can't seem to figure out how to display them on an HTML page. I believe it could be due to the fact that I'm trying to use vanilla JavaScript when working with node.js?

Here is the JavaScript (jokes.js)

require('isomorphic-fetch');

const request = async () => {
  const response = await fetch("http://api.icndb.com/jokes/random/3");
  const json = await response.json();
  console.log(json);
    joke1 = json.value[0].joke;
    document.getElementById("disp").innerHTML = joke1;
}
request();

And here is the HTML (jokes.html)

<!DOCTYPE html>

<html lang="en">

<head>
    <title>Chuck Norris Jokes</title>
    <meta charset="utf-8">
    <!--My CSS File-->
    <link href="jokes.css" rel="stylesheet" type="text/css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <!--Icons-->
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
<div class="container">

<h1>Chuck Norris Jokes</h1>
<br>

<div id="disp">

</div>

</ul>

</div>

<!--My JavaScript File-->
<script type="text/javascript" src="jokes.js"></script>

</body>

</html>

Here is the output of my console, with an error, which I have no clue what it means, even after plenty of googling. It is what happens when i type 'node jokes' in the terminal. Using VS Code.

Terminal Output with Error:

enter image description here

Thank you in advanced for the help.

Tomislav Stankovic
  • 3,080
  • 17
  • 35
  • 42
Byron Georgopoulos
  • 1
  • 1
  • 2
  • Step 1: Decide if you want to write JavaScript to run through Node.js or JavaScript to run through a ` – Quentin Apr 14 '20 at 13:20

2 Answers2

1

Since you already have the api endpoint,you dont need to fetch it using node.js you can call it directly from front end using vanilla javascript ajax (http call)or if you are using an front-end framework(angular/react).Here is the simple example, https://www.w3schools.com/xml/tryit.asp?filename=tryajax_callback

amrutk
  • 36
  • 4
0

The other post is correct by explaining to use client-side vanilla javascript (or JQuery) AJAX call and you would link it to your HTML using a script tag, like this:

<script src="myscripts.js"></script>

good AJAX in vanilla JS example Vanilla Javascript version of AJAX

Connor Musick
  • 53
  • 6