From f9490d579a99f2c685bb71dc935b1e0eaca775f1 Mon Sep 17 00:00:00 2001
From: seanj29 <seanotto29@gmail.com>
Date: Sat, 28 Oct 2023 18:03:59 +0100
Subject: [PATCH] day 2 finished.

---
 Solutions/Day-02/Day02.jsx  |   0
 Solutions/Day-02/index.html | 195 ++++++++++++++++++++++++++++++++++++
 2 files changed, 195 insertions(+)
 create mode 100644 Solutions/Day-02/Day02.jsx
 create mode 100644 Solutions/Day-02/index.html
diff --git a/Solutions/Day-02/Day02.jsx b/Solutions/Day-02/Day02.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/Solutions/Day-02/index.html b/Solutions/Day-02/index.html
new file mode 100644
index 0000000..778dedc
--- /dev/null
+++ b/Solutions/Day-02/index.html
@@ -0,0 +1,195 @@
+<!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: #373738;
+          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: rgb(131, 146, 153);
+        }
+  
+        .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">
+        const rootElement = document.querySelector('.root')
+        
+        const welcome = 'Welcome to 30 Days Of React'
+        const title = 'Getting Started React'
+        const subtitle = 'JavaScript Library'
+        const author = {
+        firstName: 'Asabeneh',
+        lastName: 'Yetayeh',
+      }
+        const date = 'Oct 1, 2020'
+
+        // JSX element
+      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 = 1990
+    const currentYear = new Date().getFullYear()
+    const age = currentYear - yearBorn
+    const personAge = (
+        <p>
+          {' '}
+          {author.firstName} {author.lastName} is {age} years old
+        </p>
+      )
+
+    const techs = ['HTML', 'CSS', 'JavaScript']
+    // JSX element for the main part of the website
+    const main = (
+        <main>
+          <div className='main-wrapper'>
+            <p>
+              Prerequisite to get started{' '}
+              <strong>
+                <em>react.js</em>
+              </strong>
+              :
+            </p>
+            <ul>
+                {techs.map((tech) => <li key ={tech}>{tech}</li>)}
+                {result}
+                {personAge}
+            </ul>
+          </div>
+        </main>
+    )
+
+    const copyRight = 'Copyright 2023'
+    // JSX element for the footer part of the website
+    const footer = (
+        <footer>
+          <div className='footer-wrapper'>
+            <p>{copyRight}</p>
+          </div>
+        </footer>
+    )
+
+    // JSX element which contain all, it is a container or parent
+    const app = (
+        <div className = 'app'>
+            {header}
+            {main}
+            {footer}
+        </div>
+    )
+
+        // we render the JSX element using the ReactDOM package
+        // ReactDOM has the render method and the render method takes two arguments
+        ReactDOM.render(app, rootElement)
+    </script>
+  </body>
+</html>
\ No newline at end of file
