diff --git a/Week1/homework/js2-exercises/1-books.css b/Week1/homework/js2-exercises/1-books.css new file mode 100644 index 000000000..c272e5223 --- /dev/null +++ b/Week1/homework/js2-exercises/1-books.css @@ -0,0 +1,4 @@ +img{ + width: 350px; + height: 350px; + } \ No newline at end of file diff --git a/Week1/homework/js2-exercises/1-books.html b/Week1/homework/js2-exercises/1-books.html new file mode 100644 index 000000000..91c5e5dd7 --- /dev/null +++ b/Week1/homework/js2-exercises/1-books.html @@ -0,0 +1,17 @@ + + + + + + + Book list + + +

My book list

+ + + + + \ No newline at end of file diff --git a/Week1/homework/js2-exercises/1-books.js b/Week1/homework/js2-exercises/1-books.js new file mode 100644 index 000000000..0f25f9a83 --- /dev/null +++ b/Week1/homework/js2-exercises/1-books.js @@ -0,0 +1,64 @@ +const books = [ + { + title : 'An Artist of the Floating World', + author : 'Kazuo Ishiguro', + alreadyRead :false, + imgSrc : 'https://upload.wikimedia.org/wikipedia/en/thumb/e/e1/ArtistOfTheFloatingWorld.jpg/220px-ArtistOfTheFloatingWorld.jpg' + + }, + { + title : 'Underworld', + author : 'Don DeLillo', + alreadyRead :true, + imgSrc : 'http://xoxoafterdark.com/wp-content/uploads/2014/10/Delillo-Underworld.jpg' + + }, + { + title : 'أطفال مزعجون', + author : 'مصطفى أبو سعد', + alreadyRead :true, + imgSrc : 'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1244583516i/6536897._UY341_SS341_.jpg' + } +]; + + const ul = document.createElement('ul'); + // 1 + + for (let obj of books) { + // 2 + const p = document.createElement('p'); + p.innerText = `${obj.title} was written by ${obj.author}`; + + const img = document.createElement('img'); + img.src = obj.imgSrc; + + // 5 + + //let color =p.style.color; // it's not work :( + let style = p.style; + if (obj.alreadyRead === true ? style.color = 'green': style.color = 'red'); + + + // 3 + const li = document.createElement('li'); + ul.appendChild(li); + li.appendChild(p); + li.appendChild(img); + document.body.appendChild(ul); + } + + // 4 + /* + let img1 = document.createElement('img'); + let img2 = document.createElement('img'); + let img3 = document.createElement('img'); + + img1.src = 'https://upload.wikimedia.org/wikipedia/en/thumb/e/e1/ArtistOfTheFloatingWorld.jpg/220px-ArtistOfTheFloatingWorld.jpg'; + img2.src = 'http://xoxoafterdark.com/wp-content/uploads/2014/10/Delillo-Underworld.jpg'; + img3.src = 'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1244583516i/6536897._UY341_SS341_.jpg'; + + let lis = document.querySelectorAll('li'); + lis[0].appendChild(img1); + lis[1].appendChild(img2); + lis[2].appendChild(img3); + */ \ No newline at end of file diff --git a/Week1/homework/js2-exercises/2-aboutMe.html b/Week1/homework/js2-exercises/2-aboutMe.html new file mode 100644 index 000000000..d4bf948f8 --- /dev/null +++ b/Week1/homework/js2-exercises/2-aboutMe.html @@ -0,0 +1,18 @@ + + + + + About Me + + +

About Me

+ + + + + \ No newline at end of file diff --git a/Week1/homework/js2-exercises/2-aboutMe.js b/Week1/homework/js2-exercises/2-aboutMe.js new file mode 100644 index 000000000..c4b9013bb --- /dev/null +++ b/Week1/homework/js2-exercises/2-aboutMe.js @@ -0,0 +1,18 @@ + +document.body.style.fontFamily=`Arial,sans-serif`; + +document.querySelector('#nickname').innerText='David'; +document.querySelector('#fav-food').innerText='Charcoal grilled meat'; +document.querySelector('#hometown').innerText='London'; + +const items=document.querySelectorAll('ul li'); +items.forEach(item=> {item.classList.add('list-item')}) + + +const styleTag=document.createElement('style'); +document.querySelector("head").appendChild(styleTag); +document.querySelector('style').innerText= '.list-item {color:red}' + +const img = document.createElement('img'); +img.src = 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/d9585883-0c30-448b-8cee-6eac6d5c695f/d80kp71-a8d13ec7-6e9a-4268-9312-222184443314.png/v1/fill/w_1024,h_576,q_75,strp/real_madrid_david_beckham_wallpaper_by_sameerhd-d80kp71.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwic3ViIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl0sIm9iaiI6W1t7InBhdGgiOiIvZi9kOTU4NTg4My0wYzMwLTQ0OGItOGNlZS02ZWFjNmQ1YzY5NWYvZDgwa3A3MS1hOGQxM2VjNy02ZTlhLTQyNjgtOTMxMi0yMjIxODQ0NDMzMTQucG5nIiwid2lkdGgiOiI8PTEwMjQiLCJoZWlnaHQiOiI8PTU3NiJ9XV19.DsmMSnKtljCP7zEAAUsax4S3Lf9oASSChxWHmyPAT0g' +document.body.appendChild(img); \ No newline at end of file diff --git a/Week1/homework/js2-exercises/3-hijackGoogleLogo.js b/Week1/homework/js2-exercises/3-hijackGoogleLogo.js new file mode 100644 index 000000000..5682cec8e --- /dev/null +++ b/Week1/homework/js2-exercises/3-hijackGoogleLogo.js @@ -0,0 +1,16 @@ +function hijackGoogleLogo () { + let googleImage=document.querySelector('#hplogo') + googleImage.src='https://www.hackyourfuture.dk/static/logo-dark.svg' + googleImage.srcset='https://www.hackyourfuture.dk/static/logo-dark.svg' + +} +hijackGoogleLogo (); + +// or like this way +/* +function hijackGoogleLogo() { + const logo = document.querySelector('#hplogo'); + logo.setAttribute('srcset', 'https://www.hackyourfuture.dk/static/logo-dark.svg'); +} + +hijackGoogleLogo();*/ \ No newline at end of file diff --git a/Week1/homework/js2-exercises/4-forTime.css b/Week1/homework/js2-exercises/4-forTime.css new file mode 100644 index 000000000..4398237a8 --- /dev/null +++ b/Week1/homework/js2-exercises/4-forTime.css @@ -0,0 +1,8 @@ +div { + height: 100px; + background-color: lightgray; + text-align: center; + font-weight: 900; + font-size: 90px; + color: orange; +} \ No newline at end of file diff --git a/Week1/homework/js2-exercises/4-showCurrentTime.js b/Week1/homework/js2-exercises/4-showCurrentTime.js new file mode 100644 index 000000000..e478545c0 --- /dev/null +++ b/Week1/homework/js2-exercises/4-showCurrentTime.js @@ -0,0 +1,7 @@ + +function eenklok() { + const datum = new Date(); + const tijd = datum.toLocaleTimeString(); + document.querySelector('#klok').innerHTML = tijd; +} +setInterval(eenklok, 1000); \ No newline at end of file diff --git a/Week1/homework/js2-exercises/4-theTime.html b/Week1/homework/js2-exercises/4-theTime.html new file mode 100644 index 000000000..8041e6f02 --- /dev/null +++ b/Week1/homework/js2-exercises/4-theTime.html @@ -0,0 +1,15 @@ + + + + + Klok :) + + + + +
+ + + + \ No newline at end of file diff --git a/Week1/homework/js2-exercises/5-catWalking.html b/Week1/homework/js2-exercises/5-catWalking.html new file mode 100644 index 000000000..1d5a69df4 --- /dev/null +++ b/Week1/homework/js2-exercises/5-catWalking.html @@ -0,0 +1,13 @@ + + + + + Cat Walk + + + + + + \ No newline at end of file diff --git a/Week1/homework/js2-exercises/5-catWalking.js b/Week1/homework/js2-exercises/5-catWalking.js new file mode 100644 index 000000000..dbf0adba6 --- /dev/null +++ b/Week1/homework/js2-exercises/5-catWalking.js @@ -0,0 +1,23 @@ +const img = document.querySelector('img'); +const srcCatWalking = 'http://www.anniemation.com/clip_art/images/cat-walk.gif'; +const srcCatDancIng = 'https://media2.giphy.com/media/3mXcJgVhPxWZa/giphy.gif'; +let left = 0 + +function catWalk() { + setInterval(frame, 50) + function frame() { + left = left > 1280 ? 0 : left; + img.style.left = left + 'px'; + + if (left === 640) { + if (img.src != srcCatDancIng){ + setTimeout(() => { img.src = srcCatWalking; left += 10 }, 5000) + img.src = srcCatDancIng; + } + }else { + img.style.left; + left += 10; + } + } +} +catWalk(); \ No newline at end of file diff --git a/Week1/homework/js2-exercises/img.gif b/Week1/homework/js2-exercises/img.gif new file mode 100644 index 000000000..c2b2b5349 Binary files /dev/null and b/Week1/homework/js2-exercises/img.gif differ diff --git a/Week1/homework/js2-exercises/project w1 quateGenerator.css b/Week1/homework/js2-exercises/project w1 quateGenerator.css new file mode 100644 index 000000000..23c7ae962 --- /dev/null +++ b/Week1/homework/js2-exercises/project w1 quateGenerator.css @@ -0,0 +1,59 @@ +section{ + background-image: url(./img.gif); + background-size: cover; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + position: relative; + margin: auto; + } + #mid-box{ + margin-top: 30%; + } + #quote-text { + color:whitesmoke; + position: relative; + height: 40%; + display: flex; + justify-items: stretch; + justify-content: space-around; + + } + .btn-wrapper { + position: relative; + align-items: center; + display: flex; + justify-content: center; + bottom: 20px; + } + + #btn { + position: relative; + border: solid rgb(255, 255, 255) 1px; + border-radius: 10px; + font-size: 1em; + text-align: center; + padding: 10px; + font-family: 'Source Sans Pro', sans-serif; + background-color: transparent; + color:whitesmoke; + } + #btn:active { + box-shadow: 0 0 40px 40px rgba(255, 255, 255, 0.281) inset; + position: relative; + top: 2px; + } + p { + font-size: 3em; + } + .text-wrapper { + padding-top: 20%; + } + #name { + right: 0px; + text-align: end; + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + + } \ No newline at end of file diff --git a/Week1/homework/js2-exercises/project w1 quateGenerator.html b/Week1/homework/js2-exercises/project w1 quateGenerator.html new file mode 100644 index 000000000..e77eb3946 --- /dev/null +++ b/Week1/homework/js2-exercises/project w1 quateGenerator.html @@ -0,0 +1,38 @@ + + + + + + + + + quote generator + + + +
+
+
+
+ +
+

Click to enlighten yourself

+
+

+
+ +
+ +
+
+ +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/Week1/homework/js2-exercises/project w1 quateGenerator.js b/Week1/homework/js2-exercises/project w1 quateGenerator.js new file mode 100644 index 000000000..aea0fde8e --- /dev/null +++ b/Week1/homework/js2-exercises/project w1 quateGenerator.js @@ -0,0 +1,36 @@ +'use strict'; + +let quotes = [{ + text: 'Be a joke unto yourself', + author: 'Osho' +}, +{ + text: 'Be a light unto yourself', + author: 'Lord Buddha' +}, { + text: 'Know thyself', + author: 'Socrates' +}, { + text: 'It takes time to understand nothing', + author: 'Zen proverb' +}, { + text: 'This too shall pass', + author: 'Zen proverb' +}, { + text: 'What you seek is seeking you', + author: 'Rumi' +}, { + text: 'Judge not, that ye be not judged', + author: 'Jesus Christ' +}] + +function pickQuote() { + const randomNum = Math.floor((Math.random() * quotes.length)); + const quoteEl = document.querySelector('.text-wrapper').firstElementChild; + const authorEl = document.querySelector('#name').firstElementChild; + quoteEl.innerText = `${quotes[randomNum].text}`; + authorEl.innerText = `${quotes[randomNum].author}`; +} +window.onload = pickQuote; +const btnEl = document.querySelector('#btn'); +btnEl.addEventListener('click', pickQuote); \ No newline at end of file