diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..835c13d
--- /dev/null
+++ 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
new file mode 100644
index 0000000..834c8f4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+ js basic list jquery
+
+
+
+
+
+
+ List of books
+
+
+
+
+
+ div a faire disparaitre
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..39cdedc
--- /dev/null
+++ 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 = $('');
+ 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 = $('');
+ 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('Link');
+ }
+ }
+}
+
+//filter
+
+$('#js-btn').on('click', function() {
+ $('.css').toggle();
+})
+
+$('#css-btn').on('click', function() {
+ $('.js').toggle();
+})
+
+});