javascript - How do I get this code from Codepen to work?

Here is the codepen:

In case the page can't be accessed, a copy of the code is below.

Now, what I have been doing is using Brackets, and opening a folder in Brackets that contains a pletely blank style.css page, pletely blank init.js page, and an almost blank index.html page (this page at least has the following code:

<!DOCTYPE html>
<!--

-->
<html lang="en">
    <head>

    </head>
    <body>



    </body>
</html>

I paste the CodePen HTML in the body tag of index.html. I paste the CodePen CSS into style.css . I paste the CodePen Javascript into init.jss I have also tried pasting the CodePen Javascript into the body tag of index.html, using the tag "script" around the JS code.

Any ideas what I am doing wrong?

So Clueless!

CodePen HTML:

<div id="container">
    <header>
         <h1>Task List</h1>
      <a href="#" id="clear">Clear all</a>

    </header>
    <section id="taskIOSection">
        <div id="formContainer">
            <form id="taskEntryForm">
                <input id="taskInput" placeholder="What would you like to do today?" />
            </form>
        </div>
        <ul id="taskList"></ul>
    </section>
</div>

CodePen CSS:

@import url(+Sans:400, 300, 600);
 * {
    padding:0;
    margin:0;
}
body {
  background:url('.png?1');
    background-color:#2a2a2a;
    font-family:'Open Sans', sans-serif;
}
#container {
    background-color: #111216;
    color:#999999;
    width:350px;
    margin: 50px auto auto auto;
    padding-bottom:12px;
}
#formContainer {
    padding-top:12px
}
#taskIOSection {
}
#taskInput {

    font-size:14px;
    font-family:'Open Sans', sans-serif;
    height:36px;
    width:311px;
    border-radius:100px;
    background-color:#202023;
    border:0;
    color:#fff;
    display:block;
    padding-left:15px;
   -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}
#taskInput:focus{
  box-shadow: 0px 0px 1pt 1pt #999999;
 background-color:#111216; 
  outline:none;
}
::-webkit-input-placeholder {
    color: #333333;
    font-style:italic;
    /* padding-left:10px; */
}
:-moz-placeholder {
    /* Firefox 18- */
    color: #333333;
    font-style:italic;
}
::-moz-placeholder {
    /* Firefox 19+ */
    color: #333333;
    font-style:italic;
}
:-ms-input-placeholder {
    color: #333333;
    font-style:italic;
}
header {
    margin-top:0;
    background-color:#F94D50;
    width:338px;
    height:48px;
    padding-left:12px;
}
header h1 {
    font-size:25px;
    font-weight:300;
    color:#fff;
    line-height:48px;
  width:50%;
  display:inline;
}
header a{

  width:40%;
  display:inline;
  line-height:48px;
}
#taskEntryForm {
    background-color:#111216;
    width:326px;
    height: 48px;
    border-width:0px;
    padding: 0px 12px 0px 12px;
    font-size:0px;
}
#taskList {
    width: 350px;
    margin:auto;
    font-size:19px;
    font-weight:600;
}
ul li {
    background-color:#17181D;
    height:48px;
    width:314px;
    padding-left:12px;
    margin:0 auto 10px auto;
    line-height:48px;
    list-style:none;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

CodePen Javascript:

$(document).ready(function () {
    var i = 0;
    for (i = 0; i < localStorage.length; i++) {
        var taskID = "task-" + i;
        $('#taskList').append("<li id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>");
    }
    $('#clear').click(function () {
        localStorage.clear();
    });
    $('#taskEntryForm').submit(function () {
        if ($('#taskInput').val() !== "") {
            var taskID = "task-" + i;
            var taskMessage = $('#taskInput').val();
            localStorage.setItem(taskID, taskMessage);
            $('#taskList').append("<li class='task' id='" + taskID + "'>" + taskMessage + "</li>");
            var task = $('#' + taskID);
            task.css('display', 'none');
            task.slideDown();
            $('#taskInput').val("");
            i++;
        }
        return false;
    });

    $('#taskList').on("click", "li", function (event) {
        self = $(this);
        taskID = self.attr('id');
        localStorage.removeItem(taskID);
        self.slideUp('slow', function () {
            self.remove();
        });

    });


});

EDIT: To anyone who stumbles upon this post, here are the things that made my code work. As per jswebb's suggestion, I referenced what I needed in the head of the index.html.

So the head tag looks like this now:

<head>
    <link type="text/css" rel="stylesheet" href="css/styleok.css" />
    <script src=".11.2/jquery.min.js"></script>



</head>

Make sure that when you are writing the link tag, the href="YOURCSSFILENAME.css" includes all the correct folders!!!

Best wishes to all.

Here is the codepen: http://codepen.io/BrandonJF/pen/KGwyC

In case the page can't be accessed, a copy of the code is below.

<!DOCTYPE html>
<!--

-->
<html lang="en">
    <head>

    </head>
    <body>



    </body>
</html>

Any ideas what I am doing wrong?

So Clueless!

CodePen HTML:

<div id="container">
    <header>
         <h1>Task List</h1>
      <a href="#" id="clear">Clear all</a>

    </header>
    <section id="taskIOSection">
        <div id="formContainer">
            <form id="taskEntryForm">
                <input id="taskInput" placeholder="What would you like to do today?" />
            </form>
        </div>
        <ul id="taskList"></ul>
    </section>
</div>

CodePen CSS:

@import url(http://fonts.googleapis./css?family=Open+Sans:400, 300, 600);
 * {
    padding:0;
    margin:0;
}
body {
  background:url('http://dribbble./images/attachments/attachments-bg.png?1');
    background-color:#2a2a2a;
    font-family:'Open Sans', sans-serif;
}
#container {
    background-color: #111216;
    color:#999999;
    width:350px;
    margin: 50px auto auto auto;
    padding-bottom:12px;
}
#formContainer {
    padding-top:12px
}
#taskIOSection {
}
#taskInput {

    font-size:14px;
    font-family:'Open Sans', sans-serif;
    height:36px;
    width:311px;
    border-radius:100px;
    background-color:#202023;
    border:0;
    color:#fff;
    display:block;
    padding-left:15px;
   -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}
#taskInput:focus{
  box-shadow: 0px 0px 1pt 1pt #999999;
 background-color:#111216; 
  outline:none;
}
::-webkit-input-placeholder {
    color: #333333;
    font-style:italic;
    /* padding-left:10px; */
}
:-moz-placeholder {
    /* Firefox 18- */
    color: #333333;
    font-style:italic;
}
::-moz-placeholder {
    /* Firefox 19+ */
    color: #333333;
    font-style:italic;
}
:-ms-input-placeholder {
    color: #333333;
    font-style:italic;
}
header {
    margin-top:0;
    background-color:#F94D50;
    width:338px;
    height:48px;
    padding-left:12px;
}
header h1 {
    font-size:25px;
    font-weight:300;
    color:#fff;
    line-height:48px;
  width:50%;
  display:inline;
}
header a{

  width:40%;
  display:inline;
  line-height:48px;
}
#taskEntryForm {
    background-color:#111216;
    width:326px;
    height: 48px;
    border-width:0px;
    padding: 0px 12px 0px 12px;
    font-size:0px;
}
#taskList {
    width: 350px;
    margin:auto;
    font-size:19px;
    font-weight:600;
}
ul li {
    background-color:#17181D;
    height:48px;
    width:314px;
    padding-left:12px;
    margin:0 auto 10px auto;
    line-height:48px;
    list-style:none;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

CodePen Javascript:

$(document).ready(function () {
    var i = 0;
    for (i = 0; i < localStorage.length; i++) {
        var taskID = "task-" + i;
        $('#taskList').append("<li id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>");
    }
    $('#clear').click(function () {
        localStorage.clear();
    });
    $('#taskEntryForm').submit(function () {
        if ($('#taskInput').val() !== "") {
            var taskID = "task-" + i;
            var taskMessage = $('#taskInput').val();
            localStorage.setItem(taskID, taskMessage);
            $('#taskList').append("<li class='task' id='" + taskID + "'>" + taskMessage + "</li>");
            var task = $('#' + taskID);
            task.css('display', 'none');
            task.slideDown();
            $('#taskInput').val("");
            i++;
        }
        return false;
    });

    $('#taskList').on("click", "li", function (event) {
        self = $(this);
        taskID = self.attr('id');
        localStorage.removeItem(taskID);
        self.slideUp('slow', function () {
            self.remove();
        });

    });


});

EDIT: To anyone who stumbles upon this post, here are the things that made my code work. As per jswebb's suggestion, I referenced what I needed in the head of the index.html.

So the head tag looks like this now:

<head>
    <link type="text/css" rel="stylesheet" href="css/styleok.css" />
    <script src="https://ajax.googleapis./ajax/libs/jquery/1.11.2/jquery.min.js"></script>



</head>

Make sure that when you are writing the link tag, the href="YOURCSSFILENAME.css" includes all the correct folders!!!

Best wishes to all.

Share Improve this question edited Mar 15, 2015 at 5:24 asked Mar 15, 2015 at 3:02 Sherri 3172 gold badges6 silver badges14 bronze badges

2 You should improve your question's title to start with. – j08691 Commented Mar 15, 2015 at 3:09
1 "Any ideas what I am doing wrong?" ~ You didn't even describe a problem. – Sparky Commented Mar 15, 2015 at 3:09
The problem is that the code isn't working in my Brackets project in the way that the code works on Codepen. There is no style applying to the box, and the functionality of the code is not working (can't add to the list). – Sherri Commented Mar 15, 2015 at 3:12
Please fix your question by clicking the "edit" link on your question and fully describe the expected results vs. the observed results. – Sparky Commented Mar 15, 2015 at 3:13
Sherri, see my answer below - have you linked to the externally hosted jQuery library file, in the head of your HTML document? – jswebb Commented Mar 15, 2015 at 3:14

| Show 3 more ments

3 Answers 3

Sorted by: Reset to default 6

The CodePen you linked to utilizes jQuery; however, when using a text editor and writing to a blank HTML file, you need to link to the jQuery library - have you done this?

If not, place an external source link to the Google-hosted jQuery script file in between <head> and </head>, using the following:

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Let me know if that solves the issue for you!

EDIT: To solve the CSS issue you are having, you need to follow the same procedure for the external sheet; in general, sandboxes allow functionality without linking different files, but when working in text editors, you must supply the connection between stylesheets, JS files and the HTML page.

To link to your external CSS sheet, put the following in between <head> and </head>:

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

This is the standard procedure for adding links to external CSS. If the sheet is open in the Brackets editor, it should provide you with 'style.css' when you start typing it in.

Once you do the above, place the CSS from the CodePen into that CSS file, and then save all of the sheets you're working in. Everything should work - let me know if that solved your issues!

I have the same answer here:

How do I take code from Codepen, and use it locally?

Right click on the result frame and choose View Frame source. And you can copy the source code and paste it in your own text-editor.

Ensure you are not missing jQuery which is a dependancy for the javascript

While copying javascript from codepen, it was adding some addition checks whilst piling the coffeescript. So just use http://js2.coffee/ in order to convert the coffeescript into javascript preview, which you can then use in your code.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How do I get this code from Codepen to work? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)