Offline site

jquery

#1

Hello

I tried putting all code together in notepad, so it would work offline, not in codecademy site. I copied all code exactly as it was, there was index, style and js file. Even added jQuery CDN to my html file but it still don't work.

It's even possible to do so? How do I get that jQuery works?


#2

Hi Enzee,

Would you mind posting your code so we can find the problem? jQuery should work anywhere.


#3

html code:

<!DOCTYPE html>
<html>
    <head>
        <title>To Do</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div>
            <h2>To Do</h2>
            <form name="checkListForm">
            <input type="text" name="checkListItem"/>
            </form>
            <div id="button">Add!</div>
            <br/>
            <div class="list"></div>
        </div>
    </body>
</html>

css code:

h2 {
    font-family:arial;
    text-align:center;
}

form {
    display: inline-block;
}

#button{
    display: inline-block;
    height:20px;
    width:70px;
    background-color:#cc0000;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius: 5px;
    text-align:center;
    margin-top:2px;
}

.list {
    font-family:garamond;
    color:#cc0000;
}

js code:

$(document).ready(function(){
    $('#button').click(function(){
        var toAdd = $('input[name=checkListItem]').val();
        $('.list').append('<div class="item">' + toAdd + '</div>');
    });
    $(document).on('click', '.item', function() {
        $(this).remove();
    });
});

#4

@enzee // defaults to the current protocol. So if you're on an HTTPS page, it'll load the asset from an HTTPS URL (if possible), and if it's an HTTP page, it'll be loaded with the HTTP protocol. It sounds great, but it shouldn't be used.
The problem though, is that you're accessing your HTML file using the file protocol (file:///whatever/index.html), but file is only for local resources. So HTTP(S) pages can't access resources using the file protocol.

So,

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>

should be:

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- what's this one for? you already have a link to jquery-->
<script src="script.js"></script> <!-- ← `type="text/javascript"` is optional; i prefer to remove it -->

#5

Thanks for your help. Now all went good. I copied thouse lines from official jquery site. So I guess that they have mede mistake there.


#6

@enzee // is still commonly used since most people don't know better, so that's not a mistake, just a case of not knowing any better on their part.
For the second <script> though, I'm wondering about that. It doesn't seem like the official jQuery site would recommend you have two links to different versions of jQuery right beside each other for no obvious reason :confused: