day 21

5 years ago · 8a7e87b9e0
parent d6254a901f
commit 8a7e87b9e0
6 changed files with 98 additions and 2026 deletions
--- a/21_Day/21_day_dom.md
+++ b/21_Day/21_day_dom.md
@ -51,7 +51,7 @@
    - [Exercise: Level 1](#exercise-level-1)
    - [Exercise: Level 2](#exercise-level-2)
    - [Exercise: Level 3](#exercise-level-3)
-    - [DOM: Mini Projects](#dom-mini-projects)
+      - [DOM: Mini project 1](#dom-mini-project-1)

 # Day 20

@ -742,19 +742,46 @@ We can access all the key numbers of the keyboard using different event listener
 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
 9. Remove all the paragraph and create them using JavaScript
 10. Set text content, id and class to each paragraph
-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.
+

 ### Exercise: Level 2

+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.
+
 1. Use the rgb color generator function or hexaColor generator to create 10 divs with random background colors
  
 ### Exercise: Level 3

-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.
+#### DOM: Mini project 1

+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.

-### DOM: Mini Projects
+  ```html
+<!-- index.html -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>JavaScript for Everyone:DOM</title>
+  </head>
+  <body>
+    <div class="wrapper">
+        <h1>Asabeneh Yetayeh challenges in 2020</h1>
+        <h2>30DaysOfJavaScript Challenge</h2>
+        <ul>
+            <li>30DaysOfPython Challenge Done</li>
+            <li>30DaysOfJavaScript Challenge Ongoing</li>
+            <li>30DaysOfReact Challenge Coming</li>
+            <li>30DaysOfFullStack Challenge Coming</li>
+            <li>30DaysOfDataAnalysis Challenge Coming</li>
+            <li>30DaysOfReactNative Challenge Coming</li>
+            <li>30DaysOfMachineLearning Challenge Coming</li>
+        </ul>
+    </div>
+  </body>
+</html>
+```

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

 🎉 CONGRATULATIONS ! 🎉

--- a/21_Day/21_day_starter/data/countries_data.js
+++ b/21_Day/21_day_starter/data/countries_data.js
--- a/21_Day/21_day_starter/dom_getting_elements_project_1.gif
+++ b/21_Day/21_day_starter/dom_getting_elements_project_1.gif
--- a/21_Day/21_day_starter/index.html
+++ b/21_Day/21_day_starter/index.html
@ -6,10 +6,19 @@
 </head>

 <body>
-    <h1>30DaysOfJavaScript:21 Day</h1>
-    <h2>Document Object Model</h2>
-
-    <script src="./data/countries_data.js"></script>
+    <div class="wrapper">
+        <h1>Asabeneh Yetayeh challenges in 2020</h1>
+        <h2>30DaysOfJavaScript Challenge</h2>
+        <ul>
+            <li>30DaysOfPython Challenge Done</li>
+            <li>30DaysOfJavaScript Challenge Ongoing</li>
+            <li>30DaysOfReact Challenge Coming</li>
+            <li>30DaysOfFullStack Challenge Coming</li>
+            <li>30DaysOfDataAnalysis Challenge Coming</li>
+            <li>30DaysOfReactNative Challenge Coming</li>
+            <li>30DaysOfMachineLearning Challenge Coming</li>
+        </ul>
+    </div>
    <script src="./scripts/main.js"></script>

 </body>
--- a/images/projects/dom_getting_elements_project_1.gif
+++ b/images/projects/dom_getting_elements_project_1.gif
--- a/index.html
+++ b/index.html
@ -10,15 +10,16 @@
 <body>

    <div class="wrapper">
-        <h1>Asabeneh Yetayeh challenges in 2020</h1>
+        <h1>Asabeneh Yetayeh challenges in <span>2020</span></h1>
        <h2>30DaysOfJavaScript Challenge</h2>
+        <p></p>
        <ul>
            <li>30DaysOfPython Challenge Done</li>
            <li>30DaysOfJavaScript Challenge Ongoing</li>
            <li>30DaysOfReact Challenge Coming</li>
+            <li>30DaysOfReactNative Challenge Coming</li>
            <li>30DaysOfFullStack Challenge Coming</li>
            <li>30DaysOfDataAnalysis Challenge Coming</li>
-            <li>30DaysOfReactNative Challenge Coming</li>
            <li>30DaysOfMachineLearning Challenge Coming</li>
        </ul>
    </div>
@ -35,13 +36,40 @@
            return hexa
        }

+        const showDateTime = () => {
+            const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+                'October', 'November', 'December'
+            ]
+            const now = new Date()
+            const year = now.getFullYear()
+            const month = months[now.getMonth()]
+            const date = now.getDate()
+            let hours = now.getHours()
+            let minutes = now.getMinutes()
+            let seconds = now.getSeconds()
+            if (hours < 10) {
+                hours = '0' + hours
+            }
+            if (minutes < 10) {
+                minutes = '0' + minutes
+            }
+            if (seconds < 10) {
+                seconds = '0' + seconds
+            }
+
+            const dateMonthYear = `${month} ${date}, ${year}`
+
+            const time = hours + ':' + minutes
+            const fullTime = dateMonthYear + ' ' + time
+            return fullTime + `:${seconds}`
+        }
+
        const wrapper = document.querySelector('.wrapper')
+        const year = document.querySelector('span')
+        const time = document.querySelector('p')
        wrapper.style.width = '50%'
        wrapper.style.margin = 'auto'
        const title = document.querySelector('h1')
-        setInterval(() => {
-            title.style.color = hexaColor()
-        }, 1000)
        const subTitle = document.querySelector('h2')
        title.style.textAlign = 'center'
        title.style.fontFamily = 'Montserrat'
@ -50,6 +78,27 @@
        subTitle.style.textAlign = 'center'
        subTitle.style.fontFamily = 'Montserrat'
        subTitle.style.fontWeight = 300
+        subTitle.style.textDecoration = 'underline'
+
+
+        time.style.textAlign = 'center'
+        time.style.fontFamily = 'Montserrat'
+        time.style.fontWeight = 400
+
+        setInterval(() => {
+            year.style.color = hexaColor()
+            year.style.fontSize = '96px'
+            year.style.fontWeight = 700;
+            time.textContent = showDateTime()
+            time.style.background = hexaColor()
+            time.style.width = "25%"
+            time.style.margin = 'auto'
+            time.style.padding = '10px'
+
+        }, 1000)
+
+
+
        const ul = document.querySelector('ul')
        const lists = document.querySelectorAll('li')
        for (const list of lists) {