Skip to content

Commit 8a7e87b

Browse files
committedJan 22, 2020
day 21
1 parent d6254a9 commit 8a7e87b

File tree

6 files changed

+98
-2026
lines changed

6 files changed

+98
-2026
lines changed
 

‎21_Day/dom.md ‎21_Day/21_day_dom.md

+31-4
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
- [Exercise: Level 1](#exercise-level-1)
5252
- [Exercise: Level 2](#exercise-level-2)
5353
- [Exercise: Level 3](#exercise-level-3)
54-
- [DOM: Mini Projects](#dom-mini-projects)
54+
- [DOM: Mini project 1](#dom-mini-project-1)
5555

5656
# Day 20
5757

@@ -742,19 +742,46 @@ We can access all the key numbers of the keyboard using different event listener
742742
8. Select all paragraphs and loop through each elements and give the first and third paragraph a color of color, and the second and the fourth paragraph a red color
743743
9. Remove all the paragraph and create them using JavaScript
744744
10. Set text content, id and class to each paragraph
745-
11. Create a div container on HTML document and create 100 numbers dynamically and append to the container div. Put each number in 150px by 150px box. If the number is even the background will be lightgreen else lightblue.
745+
746746

747747
### Exercise: Level 2
748748

749+
1. Create a div container on HTML document and create 100 numbers dynamically and append to the container div. Put each number in 150px by 150px box. If the number is even the background will be lightgreen else lightblue.
750+
749751
1. Use the rgb color generator function or hexaColor generator to create 10 divs with random background colors
750752

751753
### Exercise: Level 3
752754

753-
1. Use the countries.js to visualize all the countries on the HTML document. You need one wrapper div and box for each countries. In the box display, the letter the country starts with, the name of the country and the number of characters for the country name.
755+
#### DOM: Mini project 1
754756

757+
1. Develop the following application, use the following HTML elements to get started with. You will get the same code on starter folder. Apply all the styles and functionality using JavaScript only.
755758

756-
### DOM: Mini Projects
759+
```html
760+
<!-- index.html -->
761+
<!DOCTYPE html>
762+
<html>
763+
<head>
764+
<title>JavaScript for Everyone:DOM</title>
765+
</head>
766+
<body>
767+
<div class="wrapper">
768+
<h1>Asabeneh Yetayeh challenges in 2020</h1>
769+
<h2>30DaysOfJavaScript Challenge</h2>
770+
<ul>
771+
<li>30DaysOfPython Challenge Done</li>
772+
<li>30DaysOfJavaScript Challenge Ongoing</li>
773+
<li>30DaysOfReact Challenge Coming</li>
774+
<li>30DaysOfFullStack Challenge Coming</li>
775+
<li>30DaysOfDataAnalysis Challenge Coming</li>
776+
<li>30DaysOfReactNative Challenge Coming</li>
777+
<li>30DaysOfMachineLearning Challenge Coming</li>
778+
</ul>
779+
</div>
780+
</body>
781+
</html>
782+
```
757783

784+
![Project 1](../images/projects/dom_getting_elements_project_1.gif)
758785

759786
🎉 CONGRATULATIONS ! 🎉
760787

0 commit comments

Comments
 (0)