From 669a80bd55be58681a3525ceb921b094d06ae3be Mon Sep 17 00:00:00 2001 From: Joackim Balouka Date: Wed, 18 Jan 2017 12:15:55 +0100 Subject: [PATCH 01/10] js directory --- js/app.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 js/app.js diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..e69de29 From d506a34345639a50d7fa063c842bd7dd94b1fa2c Mon Sep 17 00:00:00 2001 From: Joackim Balouka Date: Wed, 18 Jan 2017 15:54:43 +0100 Subject: [PATCH 02/10] modif html --- index.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..fa8303e --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + js basic list jquery + + + + + + +

List of books

+ +
+ + + + + From 6df8bb8ffeec470b1a1f17dbd777c7072c0f2f5e Mon Sep 17 00:00:00 2001 From: Joackim Balouka Date: Wed, 18 Jan 2017 15:55:40 +0100 Subject: [PATCH 03/10] mes css --- css/style.css | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 css/style.css diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..8ff7afd --- /dev/null +++ b/css/style.css @@ -0,0 +1,42 @@ +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; +} From d55c153b084399fb1bd6bdfbf8a63658a25dec0e Mon Sep 17 00:00:00 2001 From: Joackim Balouka Date: Wed, 18 Jan 2017 15:56:10 +0100 Subject: [PATCH 04/10] mon jquery --- js/app.js | 0 js/script.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 54 insertions(+) delete mode 100644 js/app.js create mode 100644 js/script.js diff --git a/js/app.js b/js/app.js deleted file mode 100644 index e69de29..0000000 diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..1c74bba --- /dev/null +++ b/js/script.js @@ -0,0 +1,54 @@ +$(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' + } + ]; + + +var container = $('#container'); + +for(i = 0; i < books.length; i++) { + var card = $('
'); + card.addClass('card'); + container.append(card); + + for(var prop in books[i]) { + var p = $('

'); + card.append(p); + p.text(books[i][prop]); + } + + + +} + +}); From 3a2ca97efec5dae848e00f2e6f29d82c1a3dccf5 Mon Sep 17 00:00:00 2001 From: Joackim Balouka Date: Wed, 18 Jan 2017 16:34:38 +0100 Subject: [PATCH 05/10] polish jquery --- js/script.js | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/js/script.js b/js/script.js index 1c74bba..d4ea20f 100644 --- a/js/script.js +++ b/js/script.js @@ -45,10 +45,27 @@ for(i = 0; i < books.length; i++) { 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 + +// ajouter une classe quand je clique sur un bouton +// en ajouter une autre et faire disparaitre la première en appyant sur una utre bouton +// afficher tout + + + }); From d39dab2d3aa73d2509cd2f2e5f543f2ed426a1f0 Mon Sep 17 00:00:00 2001 From: Joackim Balouka Date: Wed, 18 Jan 2017 21:19:36 +0100 Subject: [PATCH 06/10] js --- js/script.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/js/script.js b/js/script.js index d4ea20f..86306f3 100644 --- a/js/script.js +++ b/js/script.js @@ -42,6 +42,7 @@ for(i = 0; i < books.length; i++) { container.append(card); for(var prop in books[i]) { + var p = $('

'); card.append(p); p.text(books[i][prop]); @@ -57,6 +58,7 @@ for(i = 0; i < books.length; i++) { if(prop === 'link') { p.html('Link'); } + } } @@ -66,6 +68,9 @@ for(i = 0; i < books.length; i++) { // en ajouter une autre et faire disparaitre la première en appyant sur una utre bouton // afficher tout +$('#js-btn').on('click', function() { + $('#css').toggle(); +})// toggle() animation method }); From 34232bc601ac6cc1fb700e50d91c67d072859c04 Mon Sep 17 00:00:00 2001 From: Joackim Balouka Date: Wed, 18 Jan 2017 21:32:57 +0100 Subject: [PATCH 07/10] last commit --- js/script.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/js/script.js b/js/script.js index 86306f3..97b4069 100644 --- a/js/script.js +++ b/js/script.js @@ -42,6 +42,15 @@ for(i = 0; i < books.length; i++) { container.append(card); 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'); + } var p = $('

'); card.append(p); @@ -64,13 +73,13 @@ for(i = 0; i < books.length; i++) { //filter -// ajouter une classe quand je clique sur un bouton -// en ajouter une autre et faire disparaitre la première en appyant sur una utre bouton -// afficher tout - $('#js-btn').on('click', function() { - $('#css').toggle(); -})// toggle() animation method + $('.css').toggle(); +}) + +$('#css-btn').on('click', function() { + $('.js').toggle(); +}) }); From 95d30731f511c67cc774dcfbc1fa6c12d85c2257 Mon Sep 17 00:00:00 2001 From: Joackim Balouka Date: Wed, 18 Jan 2017 21:35:25 +0100 Subject: [PATCH 08/10] last commit --- js/script.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/js/script.js b/js/script.js index 97b4069..39cdedc 100644 --- a/js/script.js +++ b/js/script.js @@ -33,17 +33,19 @@ $(document).ready(function() { } ]; - +// 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 + // check for type and add class if(books[i][prop] === 'css') { card.addClass('css'); } @@ -52,6 +54,7 @@ for(i = 0; i < books.length; i++) { card.addClass('js'); } + // html treatment var p = $('

'); card.append(p); p.text(books[i][prop]); @@ -67,7 +70,6 @@ for(i = 0; i < books.length; i++) { if(prop === 'link') { p.html('Link'); } - } } @@ -81,5 +83,4 @@ $('#css-btn').on('click', function() { $('.js').toggle(); }) - }); From ad767f4451f16485fffef6109eb9862d7b369d04 Mon Sep 17 00:00:00 2001 From: Joackim Balouka Date: Wed, 18 Jan 2017 21:35:53 +0100 Subject: [PATCH 09/10] modified --- css/style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/css/style.css b/css/style.css index 8ff7afd..835c13d 100644 --- a/css/style.css +++ b/css/style.css @@ -40,3 +40,8 @@ p { .type { display: none; } + +#css { + padding: 10px; + background: red; +} From a49cec075ae6a5031c1bb7549f8f3a58b4ce5628 Mon Sep 17 00:00:00 2001 From: Joackim Balouka Date: Wed, 18 Jan 2017 21:36:21 +0100 Subject: [PATCH 10/10] modified --- index.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index fa8303e..834c8f4 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,17 @@

List of books

-
+
+
+ +
+ div a faire disparaitre +
+ +
+ + +