simplonco · PaulPourtout · Jan 23, 2017 · Mar 26, 2017
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # jquery-basic-list
 
+You can see the web page [here](https://paulpourtout.github.io/jquery-basic-list/).
+
 ### 1. Afficher les données ci-dessus sous forme de liste dans une page html.
 
 ### Vous devez utilisez la librairie jQuery :

diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,96 @@
+header {
+    text-align: center;
+}
+
+header h1 {
+    text-transform: uppercase;
+    font-size: 2rem;
+    color: rgb(8, 196, 100);
+}
+
+.btn-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.btn {
+    border: none;
+    background-image: linear-gradient(to top, rgb(8, 196, 100), rgb(43, 228, 134));
+    box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.1);
+    color: #fff;
+    padding: 10px 30px;
+    border-radius: 30px;
+    margin: 20px 2%;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+#card-container {
+    display: flex;
+    flex-flow: wrap row;
+    justify-content: center;
+}
+
+.card {
+    box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.1);
+    padding: 15px;
+    text-align: center;
+    border-radius: 3px;
+    width: 20%;
+    margin: 20px;
+    height: 20rem;
+    position: relative;
+    transition: 0.3s ease;
+}
+
+.card:hover {
+    box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+.card img {
+    width: 6rem;
+    height: 8rem;
+}
+
+.card h3 {
+    color: rgb(8, 196, 100);
+    text-transform: capitalize;
+    font-size: 1.6rem;
+    margin-bottom: 0.5rem;
+}
+
+.card p {
+    font-style: italic;
+    color: rgb(22, 134, 76);
+    margin: 0.2rem 0;
+}
+
+.card a {
+    display: block;
+    margin-top: 1rem;
+    text-decoration: none;
+    background-color: rgb(8, 196, 100);
+    color: #fff;
+    font-weight: bold;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: .8rem 0;
+    border-radius: 0 0 3px 3px;
+    width: 100%;
+    transition: 0.3s ease;
+}
+
+.card a:hover {
+    background-color: rgb(28, 162, 93);
+}
+
+
+.js {
+  display: block;
+}
+
+.css {
+  display: block;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+   <meta charset="utf-8">
+   <title>Basic List jQuery</title>
+<link rel="stylesheet" href="css/style.css" media="screen" title="no title">
+   <!-- jQuery -->
+   <script src="js/jquery.min.js">
+   </script>
+   <!-- Script -->
+   <script src="js/script.js">
+   </script>
+</head>
+
+<body>
+  <header>
+     <h1>Ma super bibliothèque de developpeur</h1>
+     <div class="btn-container">
+        <button type="button" name="button" id="btn-js" class="btn">Livres sur Javascipt</button>
+        <button type="button" name="button" id="btn-css" class="btn">Livres sur CSS</button>
+        <button type="button" name="button" id="btn-all" class="btn">Tous les livres</button>
+     </div>
+  </header>
+  <div id="card-container">
+     <!-- Cards Books JS -->
+  </div>
+
+
+</body>
+
+</html>
diff --git a/js/jquery.min.js b/js/jquery.min.js
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,63 @@
+$(document).ready(function() {
+  var books = [{
+    title: 'CSS: The Definitive Guide',
+    author: 'Eric Meyer',
+    link: 'http://shop.oreilly.com/product/0636920012726.do',
+    type: 'css',
+    illustrationLink: 'http://akamaicovers.oreilly.com/images/9780596527334/cat.gif'
+  }, {
+    title: 'CSS Development with CSS3',
+    author: 'Zachary Kingston',
+    link: 'http://shop.oreilly.com/product/0636920057970.do',
+    type: 'css',
+    illustrationLink: 'https://www.packtpub.com/sites/default/files/bookretailers/CSS%20Development%20with%20CSS3_500x617.jpg'
+  }, {
+    title: 'You Don\'t Know JS: Up & Going',
+    author: 'Kyle Simpson',
+    link: 'http://shop.oreilly.com/product/0636920039303.do',
+    type: 'js',
+    illustrationLink: 'https://images-na.ssl-images-amazon.com/images/I/41L18FvA5rL._SX331_BO1,204,203,200_.jpg'
+  }, {
+    title: 'Programming JavaScript Applications',
+    author: 'Eric Elliott',
+    link: 'http://shop.oreilly.com/product/0636920033141.do',
+    type: 'js',
+    illustrationLink: 'http://orm-other.s3.amazonaws.com/progjsappssplash/cover.jpg'
+  }, {
+    title: 'Modern JavaScript',
+    author: 'unknown',
+    link: 'http://www.oreilly.com/web-platform/free/modern-javascript.csp',
+    type: 'js',
+    illustrationLink: 'https://addyosmani.com/resources/essentialjsdesignpatterns/cover/cover.jpg'
+  }];
+
+  // Création des elements contenant les livres
+  for (var i in books) {
+    $('#card-container').append('<div class="card"></div>');
+    $('.card').eq(i).append('<img src="' + books[i].illustrationLink + '"/>');
+    $('.card').eq(i).append('<h3>' + books[i].title + '</h3>');
+    $('.card').eq(i).append('<p>' + books[i].author + '</p>');
+    $('.card').eq(i).append('<a href="' + books[i].link + '">Go Buy it !</a>');
+  }
+
+  var filter = function(filtre) {
+    for (var i in books) {
+      if (books[i].type === filtre) {
+        $('.card').eq(i).css('display', 'block');
+      } else {
+        $('.card').eq(i).css('display', 'none');
+      }
+    }
+  };
+
+  $('#btn-js').on('click', function() {
+    filter('js');
+  });
+  $('#btn-css').on('click', function() {
+    filter('css');
+  });
+  $('#btn-all').on('click', function(){
+    $('.card').css('display','block');
+  });
+
+});