diff --git a/.vscode/settings.json b/.vscode/settings.json index 91171c0fe..fdb1a3f24 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,13 +7,29 @@ "cSpell.words": [ "Debouncing", "Maartje", + "ahlam", + "alnabati", + "alsamman", + "azazil", "blabla", + "byrne", "codewars", + "coelho", + "ghadah", + "jubran", "keyup", + "khalil", "maartje's", "maartjes", + "miserables", + "mustaghanmi", + "nabati", "roverjs", + "samman", + "stinson", "taalmap", - "trollface" + "trollface", + "yusef", + "zaidan" ] } \ No newline at end of file diff --git a/README.md b/README.md index 25dc59dce..b0a12eea9 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,36 @@ > Please help us improve and share your feedback! If you find better tutorials -or links, please share them by [opening a pull request](https://github.com/FooCoding/JavaScript2/pulls). +> or links, please share them by [opening a pull request](https://github.com/FooCoding/JavaScript2/pulls). # JavaScript 2 +- link to homework week1 : https://mahertawila.github.io/JavaScript2/Week1/homework/ + Here you can find course content and homework for the JavaScript2 module -|Week|Topic|Read|Homework| -|----|-----|----|--------| -|1.|• Capturing user input through forms
• [Events](http://javascript.info/introduction-browser-events)
• [Basic DOM manipulations](../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)
• [Code debugging using the browser](http://javascript.info/debugging-chrome)
• [Code commenting](../../../fundamentals/blob/master/fundamentals/code_commenting.md)
• Structuring code files
• [Code formatting](../../../fundamentals/blob/master/fundamentals/code_formatting.md)
• [Handing in homework via PR](../../..//fundamentals/blob/master/fundamentals/homework_pr.md) |[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)| -|2.|• Functions + JSON/Arrays
• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)
• JSON
• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)
• Arrow functions |[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)| -|3.|• [Closures](../../../fundamentals/blob/master/fundamentals/scope_closures_this.md)
• Callbacks|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)| +| Week | Topic | Read | Homework | +| ---- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------- | +| 1. | • Capturing user input through forms
• [Events](http://javascript.info/introduction-browser-events)
• [Basic DOM manipulations](../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)
• [Code debugging using the browser](http://javascript.info/debugging-chrome)
• [Code commenting](../../../fundamentals/blob/master/fundamentals/code_commenting.md)
• Structuring code files
• [Code formatting](../../../fundamentals/blob/master/fundamentals/code_formatting.md)
• [Handing in homework via PR](../../..//fundamentals/blob/master/fundamentals/homework_pr.md) | [Reading Week 1](/Week1/README.md) | [Homework Week 1](/Week1/MAKEME.md) | +| 2. | • Functions + JSON/Arrays
• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)
• JSON
• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)
• Arrow functions | [Reading Week 2](/Week2/README.md) | [Homework Week 2](/Week2/MAKEME.md) | +| 3. | • [Closures](../../../fundamentals/blob/master/fundamentals/scope_closures_this.md)
• Callbacks | [Reading Week 3](/Week3/README.md) | [Homework Week 3](/Week3/MAKEME.md) | ## Test -At the end of this module you'll be doing a formative test. It will be done on **paper** and will consist of **4 exercises** that will test your JavaScript1 and JavaScript2 knowledge. + +At the end of this module you'll be doing a formative test. It will be done on **paper** and will consist of **4 exercises** that will test your JavaScript1 and JavaScript2 knowledge. Why on paper, you might ask? Fundamental understanding should become intuitive. Only after having learned and mastered a concept deeply will you be able to use it creatively. If you rely too much on others, or Google, you'll make it very hard to cultivate the habit to think for yourself. Also important to note: this test is done for 2 reasons only. -(1) **We want to know** what skill level you are at. +(1) **We want to know** what skill level you are at. (2) The test will **give you an indication** of what skill level you are at. - ### Overall + A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](../../../fundamentals/blob/master/fundamentals/README.md) and research/ ask for help (Slack!) with the concepts that are not entirely clear. --- + Credit goes to [HackYourFuture](https://github.com/HackYourFuture) which this is based upon. Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 79b197b83..4ec17cbfd 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -52,6 +52,8 @@ If the answer is 'yes' to all preceding questions you are ready to follow these - [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md) +- homework week1 : https://mahertawila.github.io/JavaScript2/Week1/homework/ + ## Step 2: **FreeCodeCamp challenges:** _Deadline Sunday morning_ diff --git a/Week1/homework/app.js b/Week1/homework/app.js index a9b5f75d8..02a69cff8 100644 --- a/Week1/homework/app.js +++ b/Week1/homework/app.js @@ -1,11 +1,120 @@ 'use strict'; { - const bookTitles = [ - // Replace with your own book titles - 'harry_potter_chamber_secrets', - ]; - - // Replace with your own code - console.log(bookTitles); -} + // const bookTitles = [ + // // Replace with your own book titles + // 'bro_code', + // 'the_secret', + // 'eat_pray_love', + // 'azazil', + // 'the_miserables', + // 'cockroach_man', + // 'the_black_suits_you', + // 'the_broken_wings', + // 'the_alchemist', + // 'aleph', + // ]; + + const books = { + bro_code: { + title: 'Bro Code', + language: 'English', + author: 'Barney Stinson', + }, + the_secret: { + title: 'The Secret', + language: 'English', + author: 'Rhonda Byrne', + }, + eat_pray_love: { + title: 'Eat Pray Love', + language: 'English', + author: 'Elizabeth Gilbert', + }, + azazil: { + title: 'Azazil', + language: 'Arabic', + author: 'Yusef Zaidan', + }, + the_miserables: { + title: 'The Miserables', + language: 'Arabic', + author: 'Victor Hugo', + }, + alnabati: { + title: 'Al-Nabati', + language: 'Arabic', + author: 'Yusef Zaidan', + }, + the_black_suits_you: { + title: 'The Black Suits You', + language: 'Arabic', + author: 'Ahlam Mustaghanmi', + }, + the_broken_wings: { + title: 'The Broken Wings', + language: 'Arabic', + author: 'Jubran Khalil Jubran', + }, + the_alchemist: { + title: 'The Alchemist', + language: 'Arabic', + author: 'Paulo Coelho', + }, + aleph: { + title: 'Aleph', + language: 'Arabic', + author: 'Paulo Coelho', + }, + }; + + const booksImages = { + bro_code: './images/bro_code.jpg', + the_secret: './images/the_secret.jpg', + eat_pray_love: './images/eat_pray_love.jpg', + azazil: './images/azazil.jpg', + the_miserables: './images/the_miserables.jpg', + alnabati: './images/alnabati.jpg', + the_black_suits_you: './images/the_black_suits_you.jpg', + the_broken_wings: './images/the_broken_wings.jpg', + the_alchemist: './images/the_alchemist.jpg', + aleph: './images/aleph.jpg', + }; + + function listMaker() { + const list = document.createElement('ul'); + list.className = 'container'; + document.body.appendChild(list); + for (const key of Object.keys(books)) { + const item = document.createElement('li'); + item.className = 'list-item'; + const heading = document.createElement('h2'); + heading.className = 'item-heading'; + heading.innerText = books[key].title; + item.appendChild(heading); + const contentContainer = document.createElement('div'); + contentContainer.setAttribute('id', key); + contentContainer.className = 'content-container'; + item.appendChild(contentContainer); + const content = document.createElement('div'); + content.className = 'item-content'; + content.innerHTML = `

Language: ${books[key].language}

Author: ${ + books[key].author + }

`; + contentContainer.appendChild(content); + list.appendChild(item); + } + for (const key of Object.keys(booksImages)) { + const contentContainer = document.getElementById(key); + const imageContainer = document.createElement('div'); + imageContainer.className = 'item-image'; + contentContainer.appendChild(imageContainer); + const bookImage = document.createElement('img'); + bookImage.setAttribute('src', booksImages[key]); + bookImage.setAttribute('alt', `book ${booksImages[key].replace('_', ' ')} cover`); + imageContainer.appendChild(bookImage); + } + } + listMaker(); + +} \ No newline at end of file diff --git a/Week1/homework/images/aleph.jpg b/Week1/homework/images/aleph.jpg new file mode 100644 index 000000000..b4776ccd4 Binary files /dev/null and b/Week1/homework/images/aleph.jpg differ diff --git a/Week1/homework/images/alnabati.jpg b/Week1/homework/images/alnabati.jpg new file mode 100644 index 000000000..5c28acba2 Binary files /dev/null and b/Week1/homework/images/alnabati.jpg differ diff --git a/Week1/homework/images/azazil.jpg b/Week1/homework/images/azazil.jpg new file mode 100644 index 000000000..bfaf63812 Binary files /dev/null and b/Week1/homework/images/azazil.jpg differ diff --git a/Week1/homework/images/bro_code.jpg b/Week1/homework/images/bro_code.jpg new file mode 100644 index 000000000..9acd3381b Binary files /dev/null and b/Week1/homework/images/bro_code.jpg differ diff --git a/Week1/homework/images/eat_pray_love.jpg b/Week1/homework/images/eat_pray_love.jpg new file mode 100644 index 000000000..996c3e840 Binary files /dev/null and b/Week1/homework/images/eat_pray_love.jpg differ diff --git a/Week1/homework/images/the_alchemist.jpg b/Week1/homework/images/the_alchemist.jpg new file mode 100644 index 000000000..74e1b7804 Binary files /dev/null and b/Week1/homework/images/the_alchemist.jpg differ diff --git a/Week1/homework/images/the_black_suits_you.jpg b/Week1/homework/images/the_black_suits_you.jpg new file mode 100644 index 000000000..3f367aa29 Binary files /dev/null and b/Week1/homework/images/the_black_suits_you.jpg differ diff --git a/Week1/homework/images/the_broken_wings.jpg b/Week1/homework/images/the_broken_wings.jpg new file mode 100644 index 000000000..89339de31 Binary files /dev/null and b/Week1/homework/images/the_broken_wings.jpg differ diff --git a/Week1/homework/images/the_miserables.jpg b/Week1/homework/images/the_miserables.jpg new file mode 100644 index 000000000..e9b016ac2 Binary files /dev/null and b/Week1/homework/images/the_miserables.jpg differ diff --git a/Week1/homework/images/the_secret.jpg b/Week1/homework/images/the_secret.jpg new file mode 100644 index 000000000..1ef184319 Binary files /dev/null and b/Week1/homework/images/the_secret.jpg differ diff --git a/Week1/homework/index.html b/Week1/homework/index.html index b22147cd1..b2486a17a 100644 --- a/Week1/homework/index.html +++ b/Week1/homework/index.html @@ -1 +1,16 @@ - \ No newline at end of file + + + + + + + + Codestin Search App + + + + + + + + \ No newline at end of file diff --git a/Week1/homework/style.css b/Week1/homework/style.css index bab13ec23..a0c9e1916 100644 --- a/Week1/homework/style.css +++ b/Week1/homework/style.css @@ -1 +1,45 @@ -/* add your styling here */ \ No newline at end of file +/* add your styling here */ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +.container { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + list-style: none; + padding: 5px; +} + +.list-item { + width: calc(100% / 3 - 10px); + padding: 10px; + margin: 5px; + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 3px; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); +} + +.item-heading { + padding-bottom: 5px; + margin-bottom: 10px; + border-bottom: 2px solid saddlebrown; +} + +.content-container { + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; +} + +.item-image { + width: 30%; + margin-right: 10px; +} + +.item-image img { + width: 100%; + object-fit: cover; +} \ No newline at end of file