diff --git a/README.md b/README.md index 00a150e..66e4069 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ +# DAVID IL BOIT DU SPRITE SA MERE!! + + # js-basic-list diff --git a/main.css b/main.css new file mode 100644 index 0000000..4c78831 --- /dev/null +++ b/main.css @@ -0,0 +1,58 @@ +*{ + margin: 0; + padding: 0; + +} + +body{ + font-family: futura; +} + +.container{ + width: 100vw; + /*height: 100vh;*/ + display: flex; + align-items: center; + justify-content: space-around; + flex-direction: column; +} +.booksList{ + list-style: none; + font-family: futura; +} +ul { + list-style: none; +} +.checkbox{ + display: flex; + flex-direction: column; + margin-bottom: 30px; +} +.main{ + border: 1px solid black; + padding: 10px 5px; + width: 417px; +} +.title{ + font-size: 20px; + font-weight: bold; +} +.author{ + font-size: 14px; + font-weight: 100; +} +.type{ + font-size: 15px; + font-style: italic; +} +.nothing{ + display: none; +} +button{ + border: none; + border-radius: 5px; + background-color: rgb(224, 130, 140); + color: white; + width: 100px; + height: 30px; +} diff --git a/main.html b/main.html new file mode 100644 index 0000000..31f4449 --- /dev/null +++ b/main.html @@ -0,0 +1,27 @@ + + + + + + + + + +
+
+
+ +
+
+ +
+ +
+ +
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..c170050 --- /dev/null +++ b/main.js @@ -0,0 +1,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 + ''; +} +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'; +} +}