title: How do I get this code from Codepen to work?
body: <p>Here is the codepen: <a href="http://codepen.io/BrandonJF/pen/KGwyC" rel="noreferrer">http://codepen.io/BrandonJF/pen/KGwyC</a></p>
  
  <p>In case the page can't be accessed, a copy of the code is below.</p>
  
  <p>Now, what I have been doing is using Brackets, and opening a folder in Brackets that contains a <em>completely blank</em> style.css page, <em>completely blank</em> init.js page, and an <em>almost</em> blank index.html page (this page at least has the following code: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--
  
  --&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Any ideas what I am doing wrong? </p>
  
  <p>So Clueless!</p>
  
  <p>CodePen HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;header&gt;
           &lt;h1&gt;Task List&lt;/h1&gt;
        &lt;a href="#" id="clear"&gt;Clear all&lt;/a&gt;
  
      &lt;/header&gt;
      &lt;section id="taskIOSection"&gt;
          &lt;div id="formContainer"&gt;
              &lt;form id="taskEntryForm"&gt;
                  &lt;input id="taskInput" placeholder="What would you like to do today?" /&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;ul id="taskList"&gt;&lt;/ul&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CodePen CSS:</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>CodePen Javascript:</p>
  
  <pre><code>$(document).ready(function () {
      var i = 0;
      for (i = 0; i &lt; localStorage.length; i++) {
          var taskID = "task-" + i;
          $('#taskList').append("&lt;li id='" + taskID + "'&gt;" + localStorage.getItem(taskID) + "&lt;/li&gt;");
      }
      $('#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("&lt;li class='task' id='" + taskID + "'&gt;" + taskMessage + "&lt;/li&gt;");
              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();
          });
  
      });
  
  
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>So the head tag looks like this now:</p>
  
  <pre><code>&lt;head&gt;
      &lt;link type="text/css" rel="stylesheet" href="css/styleok.css" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
  
  
  
  &lt;/head&gt;
  </code></pre>
  
  <p>Make sure that when you are writing the link tag, the href="YOURCSSFILENAME.css" includes all the correct folders!!! </p>
  
  <p>Best wishes to all.</p>