simplonco · jobalouk · Jan 18, 2017 · Jan 18, 2017 · Jan 18, 2017 · Jan 18, 2017
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,47 @@
+body {
+  font-family: 'Nunito', sans-serif;
+  color: #333;
+  background: #EC6F66; /* fallback for old browsers */
+  background: -webkit-linear-gradient(to left, #EC6F66 , #F3A183); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to left, #EC6F66 , #F3A183); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  height: 100vh;
+  padding: 50px;
+  font-size: 18px;
+  font-weight: 300;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+h1 {
+  font-weight: 800;
+  text-transform: uppercase;
+  margin-bottom: 30px;
+}
+
+p {
+  margin-bottom: 0;
+}
+
+#container {
+  width: 500px;
+}
+
+.card {
+  margin-bottom: 40px;
+}
+
+
+.card p:nth-child(3) {
+  font-size: 14px;
+  margin-top: 6px;
+}
+
+.type {
+  display: none;
+}
+
+#css {
+  padding: 10px;
+  background: red;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>js basic list jquery</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700,800" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
+  </head>
+  <body>
+
+    <h1 class="text-center">List of books</h1>
+
+    <div id="container">
+    </div>
+
+    <div id="css">
+      div a faire disparaitre
+    </div>
+
+    <div id="buttons">
+      <button id="js-btn" type="button" name="button">JavaScript</button>
+      <button id="css-btn" type="button" name="button">CSS</button>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+    <script type="text/javascript" src="js/script.js"></script>
+  </body>
+</html>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,86 @@
+$(document).ready(function() {
+
+  var books = [
+  {
+    title: 'CSS: The Definitive Guide',
+    author: 'Eric Meyer',
+    link: 'http://shop.oreilly.com/product/0636920012726.do',
+    type: 'css'
+  },
+  {
+    title: 'CSS Development with CSS3',
+    author: 'Zachary Kingston',
+    link: 'http://shop.oreilly.com/product/0636920057970.do',
+    type: 'css'
+  },
+  {
+    title: 'You Don\'t Know JS: Up & Going',
+    author: 'Kyle Simpson',
+    link: 'http://shop.oreilly.com/product/0636920039303.do',
+    type: 'js'
+  },
+  {
+    title: 'Programming JavaScript Applications',
+    author: 'Eric Elliott',
+    link: 'http://shop.oreilly.com/product/0636920033141.do',
+    type: 'js'
+  },
+  {
+    title: 'Modern JavaScript',
+    author: 'unknown',
+    link: 'http://www.oreilly.com/web-platform/free/modern-javascript.csp',
+    type: 'js'
+  }
+  ];
+
+// get main container
+var container = $('#container');
+
+// iterate over the array
+for(i = 0; i < books.length; i++) {
+  var card = $('<div/>');
+  card.addClass('card');
+  container.append(card);
+
+// iterate over object props
+  for(var prop in books[i]) {
+
+    // check for type and add class
+    if(books[i][prop] === 'css') {
+      card.addClass('css');
+    }
+
+    if(books[i][prop] === 'js') {
+      card.addClass('js');
+    }
+
+    // html treatment
+    var p = $('<p/>');
+    card.append(p);
+    p.text(books[i][prop]);
+
+    if(prop === 'type') {
+      p.css('display', 'none');
+    }
+
+    if(prop === 'author') {
+      p.text('By ' + books[i].author);
+    }
+
+    if(prop === 'link') {
+      p.html('<a href = ' + books[i].link + '>Link</a>');
+    }
+  }
+}
+
+//filter
+
+$('#js-btn').on('click', function() {
+  $('.css').toggle();
+})
+
+$('#css-btn').on('click', function() {
+  $('.js').toggle();
+})
+
+});