js-basic-list/main.js at master · divade/js-basic-list · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
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 booksList = document.querySelector('.booksList');
for (var i = 0; i < books.length; i++) {
  booksList.innerHTML = booksList.innerHTML + '<ul class="main '+ books[i].type +'-type"><li class="title">'+ books[i].title +'</li><li class="author">'+ books[i].author +'</li><li class="type">'+books[i].type+'</li><a href="'+books[i].link+'"><button>En savoir plus</button></a></ul>';
}
var js = document.querySelector('.js'), css = document.querySelector('.css');
var filterbtn = document.querySelector('.filterbtn'),

cssType = document.querySelectorAll('.css-type'),
jsType = document.querySelectorAll('.js-type');
console.log(jsType);

filterbtn.onclick = function(){
if (js.checked && !css.checked) {
  for (var i = 0; i < cssType.length; i++) {
    cssType[i].style.display = 'none';
  }for (var i = 0; i < jsType.length; i++) {
    jsType[i].style.display = 'block';
  }document.querySelector('.nothing').style.display = 'none';
}else if (!js.checked && css.checked) {
  for (var i = 0; i < jsType.length; i++) {
    jsType[i].style.display = 'none';
  }for (var i = 0; i < cssType.length; i++) {
    cssType[i].style.display = 'block';
  }document.querySelector('.nothing').style.display = 'none';
}else if (!js.checked && !css.checked){
    document.querySelector('.nothing').style.display = 'block';
    for (var i = 0; i < jsType.length; i++) {
      jsType[i].style.display = 'none';
    }for (var i = 0; i < cssType.length; i++) {
      cssType[i].style.display = 'none';
    }
}else if (js.checked && css.checked) {
  for (var i = 0; i < jsType.length; i++) {
    jsType[i].style.display = 'block';
  }for (var i = 0; i < cssType.length; i++) {
    cssType[i].style.display = 'block';
  }
  document.querySelector('.nothing').style.display = 'none';
}
}