How do I add jQuery to codepen?

1

I’m making my tribute site and would like to add so jQuerr. What are the steps?

Thanks?

2

Do you know how to add Bootstrap?

1 Like
3

go to your pen page

Settings > Javascript > Quick-add > Save & close

2 Likes
4

See the Pen Steve Jobs Tribute Page by Vincent Collins (@Tillix) on CodePen.

This is my tribute page. I’m trying to add type effeect to the quote.

5

Hello @Tillix7, the <p id="example1"></p> you added in the javascript section of your pen shouldn’t be there it can break the code, you either append it to something or fix in your html section and call it using javascript and most importantly, make sure you add the cdn link on the javascript
sectiion.

6

Okay I’ll try that. How does the page look so far?

7

Love your layout and the color scheme…cheers

8

Thanks, but it’s still not working. I’m adding the CDN to the html and it’s still not working.

9

In lines 3-5 of your HTML, get rid of

<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="typeit.js"></script>

(The last two just cause errors because it’s not a full path). Copy https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js and go to Settings > JavaScript, click the black +add another resource button toward the bottom right of the modal and paste it into the field. Make sure it’s listed AFTER jQuery.

If you read the documentation, you’ll see you can either put your strings to be typed out in the HTML or in the JavaScript. Anything put in HTML will override whatever is in the JS. It’s better to have it in the HTML I think (in case JS is disabled they can still read it without the effect)

10

Thank you so MUCH! :slight_smile:

11

No problem! :smiley: You can now get rid of all script tags in your HTML. In fact lines 1-9 (everything above the opening <section> tag) can be gotten rid of. Also get rid of the closing </div> before the closing </section> tag as there is already a closing </div> at the bottom of the page. (In fact consider moving the closing </section> tag to the very bottom of the page.)

Consider changing

<span class="type-it"><h2 class=text-center> "Innovation distinguishes between a leader and a follower."</h2></span>

to (because the <center> is deprecated.)

<h2 class="text-center type-it">"Innovation distinguishes between a leader and a follower.&quot;</h2>
<img class="mx-auto d-block" src="http://graphichive.net/uploaded/fordesigner/1313309042.jpg" />

And on the transparent image of Steve Jobs change

<p><img style="float:left" src="http://www.stock42.com/img/steve-jobs-quote.png"  />
<!-- Lorem Ipsum stuff --> </p>

to

<img class="float-left img-fluid" src="http://www.stock42.com/img/steve-jobs-quote.png" />
<p> <!-- Lorem ipsum stuff --> </p>

These classes on the images help them look better on phones and stuff :smiley:

12

I would say first off that you should start off by using the jQuery CDN that can be found here.

13

Use the Bootstrap CDN.