如何从Codepen获得这段代码?

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

下面是代码页:http://codepen.io/BrandonJF/pen/KGwyC

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 completely blank style.css page, completely blank init.js page, and an almost blank index.html page (this page at least has the following code:

现在，我所做的是使用括号，并在括号中打开一个包含完全空白样式的文件夹。css页面，完全空白的init。一个几乎是空白的索引。html页面(该页面至少有以下代码:

<!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.

我将代码页HTML粘贴到index.html的body标记中。我将代码页CSS粘贴到样式中。css。我将代码页Javascript粘贴到init中。我还尝试将代码页Javascript粘贴到index的body标记中。html，使用标签“脚本”围绕JS代码。

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.com/css?family=Open+Sans:400, 300, 600);
 * {
    padding:0;
    margin:0;
}
body {
  background:url('http://dribbble.com/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.

编辑:对于任何偶然发现这篇文章的人，以下是使我的代码工作的东西。根据jswebb的建议，我在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.com/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!!!

确保在编写链接标记时，href="YOURCSSFILENAME "。css“包含所有正确的文件夹!!!

Best wishes to all.

最好的祝愿。

3 个解决方案

#1

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?

您链接到的代码页使用jQuery;但是，当使用文本编辑器并将其写入空白HTML文件时，您需要链接到jQuery库——您这样做过吗?

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

如果没有，在和之间放置一个外部源链接到google托管的jQuery脚本文件，使用以下方法:

<script src="https://ajax.googleapis.com/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.

编辑:要解决你的CSS问题，你需要遵循同样的程序为外部工作表;通常，沙箱允许不链接不同文件的功能，但是在使用文本编辑器时，必须提供样式表、JS文件和HTML页面之间的连接。

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

要链接到您的外部CSS页面，请在和之间插入以下内容:

<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.

这是向外部CSS添加链接的标准过程。如果在方括号编辑器中打开了该表单，它应该为您提供“样式”。当你开始输入的时候。

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!

完成上述操作后，将CSS从CodePen放到那个CSS文件中，然后保存正在使用的所有表。一切都应该工作-让我知道如果那解决了你的问题!

#2

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.

右键单击结果帧并选择View frame source。您可以复制源代码并将其粘贴到您自己的文本编辑器中。

#3

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

确保您没有遗漏jQuery，这是javascript的一个依赖项

While copying javascript from codepen, it was adding some addition checks whilst compiling 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.

在从codepen复制javascript时，它在编译coffeescript时添加了一些附加检查。所以使用http://js2。为了将coffeescript转换成javascript预览，您可以在代码中使用它。

#1