如何从Codepen获取此代码？
[英]How do I get this code from Codepen to work?
问题描述
Here is the codepen: http://codepen.io/BrandonJF/pen/KGwyC 
这是codepen： 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: 现在，我一直在做的是使用Brackets，并在Brackets中打开一个文件夹，其中包含一个完全空白的 style.css页面， 完全空白的 init.js页面，以及一个几乎空白的index.html页面（此页面至少包含以下内容）码：
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
</head>
<body>
</body>
</html>
I paste the CodePen HTML in the body tag of index.html. 我将CodePen HTML粘贴到index.html的body标签中。 I paste the CodePen CSS into style.css . 我将CodePen CSS粘贴到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. 我将CodePen Javascript粘贴到init.jss中我还尝试将CodePen Javascript粘贴到index.html的body标签中，使用JS代码周围的标记“script”。
Any ideas what I am doing wrong? 我有什么想法我做错了吗？
So Clueless! 太无能了！
CodePen HTML: 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: 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: 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标签现在看起来像这样：
<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
5 已采纳 2015-03-15 03:11:57
The CodePen you linked to utilizes jQuery; 您链接的CodePen使用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? 但是，当使用文本编辑器并写入空白HTML文件时，您需要链接到jQuery库 - 你做到了吗？
If not, place an external source link to the Google-hosted jQuery script file in between <head> and </head> , using the following: 如果没有，请使用以下内容在<head>和</head>之间放置一个外部源链接到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; 编辑：要解决您遇到的CSS问题，您需要对外部工作表执行相同的步骤; 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. 通常，沙箱允许功能而不链接不同的文件，但在文本编辑器中工作时，必须提供样式表，JS文件和HTML页面之间的连接。
To link to your external CSS sheet, put the following in between <head> and </head> : 要链接到外部CSS工作表，请在<head>和</head>之间添加以下内容：
<link type="text/css" rel="stylesheet" href="style.css" />
This is the standard procedure for adding links to external CSS. 这是添加外部CSS链接的标准过程。 If the sheet is open in the Brackets editor, it should provide you with 'style.css' when you start typing it in. 如果工作表在Brackets编辑器中打开，当您开始输入时，它应该为您提供'style.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! 完成上述操作后，将CodePen中的CSS放入该CSS文件中，然后保存您正在处理的所有工作表。一切都应该工作 - 请告诉我这是否解决了您的问题！
解决方案2
1 2016-02-15 06:52:52
I have the same answer here: 我在这里有相同的答案：
How do I take code from Codepen, and use it locally? 如何从Codepen获取代码并在本地使用它？
Right click on the result frame and choose View Frame source . 右键单击result框架，然后选择“ View Frame source 。 And you can copy the source code and paste it in your own text-editor. 您可以复制源代码并将其粘贴到您自己的文本编辑器中。
解决方案3
0 2016-04-11 13:14:26
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. 从codepen复制javascript时，它在编译coffeescript时添加了一些额外的检查。 So just use http://js2.coffee/ in order to convert the coffeescript into javascript preview, which you can then use in your code. 因此，只需使用http://js2.coffee/将coffeescript转换为javascript预览，然后您可以在代码中使用它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.