Merge pull request #3 from pouyio/gh-pages

pouyio · web-flow · commit 28d932704289 · 2017-06-20T20:10:42.000+02:00
day 15
diff --git a/15-localStorage/README.md b/15-localStorage/README.md
@@ -0,0 +1,2 @@
+# Object and Arrays - Reference VS Copy
+Watch this challenge live in [codepen](https://codepen.io/pouyio/pen/wegbpP/).
diff --git a/15-localStorage/app.js b/15-localStorage/app.js
@@ -0,0 +1,49 @@
+window.onload = () => {
+
+  const addCloud = document.querySelector('.add-clouds');
+  const clearClouds = document.querySelector('.clear-clouds');
+  const cloudList = document.querySelector('.clouds');
+  let clouds = JSON.parse(localStorage.getItem('clouds')) || [];
+
+  function addCloudEvent(e) {
+      e.preventDefault();
+      const text = (this.querySelector('[name=cloud]')).value;
+      const cloud = {
+        text,
+        done: false
+      }
+      clouds.push(cloud);
+      populateList(clouds, cloudList);
+      localStorage.setItem('clouds', JSON.stringify(clouds));
+      this.reset();
+  }
+
+  function populateList(clouds = [], cloudList) {
+    cloudList.innerHTML = clouds.map((cloud, i) => {
+      return `<li>
+        <input type="checkbox" id="item${i}" data-id="${i}" ${cloud.done? 'checked': ''}></input>
+        <label for="item${i}">${cloud.text}</label>
+      </li>`
+    }).join('');
+  }
+
+  function toggle(e) {
+    if(!e.target.matches('input')) return;
+    const el = e.target;
+    const index = el.dataset.id;
+    clouds[index].done = !clouds[index].done;
+    localStorage.setItem('clouds', JSON.stringify(clouds));
+    populateList(clouds, cloudList);
+  }
+
+  function clearCloudsEvent() {
+    localStorage.clear();
+    clouds = [];
+    populateList(clouds, cloudList);
+  }
+
+  addCloud.addEventListener('submit', addCloudEvent);
+  cloudList.addEventListener('click', toggle);
+  clearClouds.addEventListener('click', clearCloudsEvent);
+  populateList(clouds, cloudList);
+}
diff --git a/15-localStorage/index.html b/15-localStorage/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>LocalStorage and Event delegation</title>
+    <style media="screen">
+      body{
+        font-family: sans-serif;
+        font-size: 1.8em;
+        color: #383838;
+        min-height: 100vh;
+        margin: 0;
+        padding: 1em;
+        box-sizing: border-box;
+        background-color: #e7e4e4;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+      }
+    </style>
+  </head>
+  <body>
+    <ul class="clouds">
+      <li>Loading...</li>
+    </ul>
+    <form class="add-clouds">
+      <input type="text" name="cloud" placeholder="Cloud name">
+      <input type="submit" value="Add cloud">
+      <input class="clear-clouds" type="button" value="Clear clouds">
+    </form>
+    <code>And reload the page!</code>
+    <script type="text/javascript" src="./app.js">
+    </script>
+  </body>
+</html>
diff --git a/15-localStorage/style.css b/15-localStorage/style.css
@@ -0,0 +1,41 @@
+body {
+    font-family: sans-serif;
+    color: #383838;
+    font-size: 1.5rem;
+    min-height: 100vh;
+    padding: 1em;
+    box-sizing: border-box;
+    background-color: #e7e4e4;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.content {
+  text-align: justify;
+}
+
+img {
+  width: 220px;
+  height: auto;
+  padding: .8em;
+  opacity: 0;
+  transition: all .5s;
+}
+
+.al-right {
+  float: right;
+  padding-right: 0;
+}
+
+.al-left {
+  float: left;
+  padding-left: 0;
+}
+
+.active {
+  opacity: 1;
+}
diff --git a/README.md b/README.md
@@ -18,8 +18,8 @@ My goal is simply to learn the basics by doing many simple things rather than st
 11. [x] [Custom Video Player](./11-custom-html5-video-player) - [Codepend](http://codepen.io/pouyio/full/bByVLB/)
 12. [x] [Key Sequence Detection](./12-key-sequence-detection)- [Codepen](http://codepen.io/pouyio/full/vywmwQ/)
 13. [x] [Slide in on Scroll](./13-slide-in-on-scroll) - [Codepen](http://codepen.io/pouyio/full/ENzdzv/)
-14. [x] [JavaScript References vs. Copying](./14-reference-copying)- [Codepen](https://codepen.io/pouyio/pen/wegbpP)
-15. [ ] LocalStorage
+14. [x] [JavaScript References vs. Copying](./14-reference-copying) - [Codepen](https://codepen.io/pouyio/pen/wegbpP)
+15. [x] [LocalStorage](./15-localStorage) - [Codepen](https://codepen.io/pouyio/full/XgRpOd/)
 16. [ ] Mouse Move Shadow
 17. [ ] Sort Without Articles
 18. [ ] Adding Up Times with Reduce

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# Object and Arrays - Reference VS Copy`
	`2`	`+Watch this challenge live in [codepen](https://codepen.io/pouyio/pen/wegbpP/).`