From 99d5e814421eceefeabb861010a6829a3c066629 Mon Sep 17 00:00:00 2001 From: Joackim Balouka Date: Wed, 18 Jan 2017 21:08:14 +0100 Subject: [PATCH 1/3] Mon 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..83283f9 --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + js basic list + + +

List of books

+ +
+ + + + From f2c8c3a13ec399f6606538ff8e410a22c963e36b Mon Sep 17 00:00:00 2001 From: Joackim Balouka Date: Wed, 18 Jan 2017 21:08:35 +0100 Subject: [PATCH 2/3] Mes styles --- index.css | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 index.css diff --git a/index.css b/index.css new file mode 100644 index 0000000..8ff7afd --- /dev/null +++ b/index.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 8f7452f94a1fe15da0604e011683d2a22d9e3b93 Mon Sep 17 00:00:00 2001 From: Joackim Balouka Date: Wed, 18 Jan 2017 21:08:58 +0100 Subject: [PATCH 3/3] Mon js --- index.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 index.js diff --git a/index.js b/index.js new file mode 100644 index 0000000..7c50cf4 --- /dev/null +++ b/index.js @@ -0,0 +1,62 @@ +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 = document.getElementById('container'); + + +for(i = 0; i < books.length; i++) { + var card = document.createElement('div'); + card.classList.add('card'); + container.appendChild(card); + + + for(var prop in books[i]) { + + var p = document.createElement('p'); + card.appendChild(p); + p.textContent = books[i][prop]; + + if (prop === 'author') { + p.innerHTML = 'By ' + books[i].author; + } + + if (prop === 'link') { + p.innerHTML = 'Link'; + } + + if (prop === 'type') { + p.setAttribute('style', 'display: none'); + } + + } + }