How to make random quote machine work outside codepen?

JavaScript
1

Here’s the link to the challenge

Codepen has lots of things being done behind the scene.I don’t know how to make my code work in other code editors without that feature.i.e. should I write javascript in a different file from html and css?And how do I connect javascript to html and css,are there any link tags,script tags or something to add in my html file or css file?

2

You can link scripts and style-sheets from another server like CDN libraries or your local files (relative paths to your project’s root or current folder)

The CSS linkage is done via a style tag:

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

This tag should be placed before the closing </head> tag

And the JS linkage is done using a script tag:

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

Preferably before the closing </body> tag.

3

I tried this.CSS worked perfectly but javascript still not.
In my HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>randomquote</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
  
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  <link rel="stylesheet" href="style randomquote.css">

</head>
<body>
                            .
                            .
                            .
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="randomquote.js"></script>
</body>
</html>

What am I doing wrong?

4

might want to review this line of code

<link rel="stylesheet" href="style randomquote.css">
5

Also it’s better if you move all the scripts to be the last children of the body element. Basically the scripts have to be immediately above the </body> closing tag.
This is because sometimes it could take a while to load the scripts and you would want to reduce the displaying time of the page to the minimum.