From 77a736955889415c5ae38a98f9ce056d187cb330 Mon Sep 17 00:00:00 2001
From: diegobaena89 <diegobf.cello@gmail.com>
Date: Tue, 17 May 2022 14:59:38 -0300
Subject: [PATCH] exercises day 02

---
 solutions/day-01/Level2.js    |   0
 solutions/day-01/countries.js |  13 +++
 solutions/day-01/index.html   |   2 +-
 solutions/day-01/web_techs.js |   9 ++
 solutions/day-02/index.html   | 198 ++++++++++++++++++++++++++++++++++
 5 files changed, 221 insertions(+), 1 deletion(-)
 create mode 100644 solutions/day-01/Level2.js
 create mode 100644 solutions/day-01/countries.js
 create mode 100644 solutions/day-01/web_techs.js
 create mode 100644 solutions/day-02/index.html
diff --git a/solutions/day-01/Level2.js b/solutions/day-01/Level2.js
new file mode 100644
index 0000000..e69de29
diff --git a/solutions/day-01/countries.js b/solutions/day-01/countries.js
new file mode 100644
index 0000000..f00a89e
--- /dev/null
+++ b/solutions/day-01/countries.js
@@ -0,0 +1,13 @@
+const countries = [
+    'Albania',
+    'Bolivia',
+    'Canada',
+    'Denmark',
+    'Ethiopia',
+    'Finland',
+    'Germany',
+    'Hungary',
+    'Ireland',
+    'Japan',
+    'Kenya',
+  ]
\ No newline at end of file
diff --git a/solutions/day-01/index.html b/solutions/day-01/index.html
index 984d787..c9629fe 100644
--- a/solutions/day-01/index.html
+++ b/solutions/day-01/index.html
@@ -4,6 +4,6 @@
     <title>30DaysOfScript:Internal Script</title>
   </head>
   <body>
-    <script src="./30DaysOfJS .js"></script>
+    <script src="./Level2.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/solutions/day-01/web_techs.js b/solutions/day-01/web_techs.js
new file mode 100644
index 0000000..24e835d
--- /dev/null
+++ b/solutions/day-01/web_techs.js
@@ -0,0 +1,9 @@
+const webTechs = [
+    'HTML',
+    'CSS',
+    'JavaScript',
+    'React',
+    'Redux',
+    'Node',
+    'MongoDB',
+  ]
\ No newline at end of file
diff --git a/solutions/day-02/index.html b/solutions/day-02/index.html
new file mode 100644
index 0000000..f590c67
--- /dev/null
+++ b/solutions/day-02/index.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>30 Days Of React Challenge</title>
+    <style>
+      /* == General style === */
+      * {
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+      }
+
+      html,
+      body {
+        height: 100%;
+        line-height: 1.5;
+        font-family: 'Montserrat';
+        font-weight: 300;
+        color: black;
+      }
+
+      .root {
+        min-height: 100%;
+        position: relative;
+      }
+
+      .header-wrapper,
+      .main-wrapper,
+      .footer-wrapper {
+        width: 85%;
+        margin: auto;
+      }
+
+      .header-wrapper,
+      .main-wrapper {
+        padding: 10px;
+        margin: 2px auto;
+      }
+
+      h1 {
+        font-size: 70px;
+        font-weight: 300;
+      }
+
+      h2,
+      h3 {
+        font-weight: 300;
+      }
+
+      header {
+        background-color: #61dbfb;
+        padding: 10px;
+      }
+
+      main {
+        padding: 10px;
+        padding-bottom: 60px;
+        /* Height of the footer */
+      }
+
+      ul {
+        margin-left: 15px;
+      }
+
+      ul li {
+        list-style: none;
+      }
+
+      footer {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 60px;
+        /* Height of the footer */
+        background: #6cf;
+      }
+
+      .footer-wrapper {
+        font-weight: 400;
+        text-align: center;
+        line-height: 60px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="root"></div>
+
+    <script
+      crossorigin
+      src="https://unpkg.com/react@16/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
+    ></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script type="text/babel">
+      // To get the root element from the HTML document
+      const rootElement = document.querySelector('.root')
+      // JSX element, header
+      const welcome = 'Welcome to 30 Days Of React Challenge'
+      const title = 'Getting Started React'
+      const subtitle = 'JavaScript Library'
+      const author = {
+        firstName: 'Asabeneh',
+        lastName: 'Yetayeh',
+      }
+      const date = 'Oct 2, 2020'
+
+      // JSX element, header
+      const header = (
+        <header>
+          <div className='header-wrapper'>
+            <h1>{welcome}</h1>
+            <h2>{title}</h2>
+            <h3>{subtitle}</h3>
+            <p>
+              Instructor: {author.firstName} {author.lastName}
+            </p>
+            <small>Date: {date}</small>
+          </div>
+        </header>
+      )
+
+      const numOne = 3
+      const numTwo = 2
+
+      const result = (
+        <p>
+          {numOne} + {numTwo} = {numOne + numTwo}
+        </p>
+      )
+
+      const yearBorn = 1820
+      const currentYear = 2020
+      const age = currentYear - yearBorn
+      const personAge = (
+        <p>
+          {' '}
+          {author.firstName} {author.lastName} is {age} years old
+        </p>
+      )
+
+      // JSX element, main
+      const techs = ['HTML', 'CSS', 'JavaScript']
+      const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
+
+      // JSX element, main
+      const main = (
+        <main>
+          <div className='main-wrapper'>
+            <p>
+              Prerequisite to get started{' '}
+              <strong>
+                <em>react.js</em>
+              </strong>
+              :
+            </p>
+            <ul>{techsFormatted}</ul>
+            {result}
+            {personAge}
+          </div>
+        </main>
+      )
+
+      const copyRight = 'Copyright 2020'
+
+      // JSX element, footer
+      const footer = (
+        <footer>
+          <div className='footer-wrapper'>
+            <p>{copyRight}</p>
+          </div>
+        </footer>
+      )
+
+      // JSX element, app
+      const app = (
+        <div className='app'>
+          {header}
+          {main}
+          {footer}
+        </div>
+      )
+
+      // we render the JSX element using the ReactDOM package
+      ReactDOM.render(app, rootElement)
+    </script>
+  </body>
+</html>
\ No newline at end of file
