Environment setup for "random quote machine" project

#1

Hello I’m trying to start with the “random quote machine” project but I have problems setting up the environment:

If I use codepen, I can’t get to work the simple example code from the Jquery/Json lessons (cat photo finder).
Until I don’t understand why it is not working I cant go ahead… please help me, https://codepen.io/rhinoted/pen/pRqexK

the code is from this lesson, it should change the text https://www.freecodecamp.com/challenges/change-text-with-click-events

#2

Don’t use script tags on codepen. Your JavaScript code should go to the JS column.

#3

Thanks @LordMathis, I had no idea!

How can I work it out in the text editor instead of codepen? this is my basic HTML page setup, where should I put the jquery code of the previous example? And should I add the jquery file also in the header?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <title>Page Title</title>

<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
 </head>
  <body>



<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
  </body>
</html>
#4

You can put it inside script tags or you can put it in a separate file and link it with a link tag. I would suggest separate file because it’s more readable even with a lot of javascript.

1 Like
#5