Menu
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.
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:
<!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(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.
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!!!
Best wishes to all.
230
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.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.
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!
118
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.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
