day 18 has been added

juliarnasution · Oct 18, 2020 · 6821f7c · 6821f7c
1 parent ce21cee
commit 6821f7c
Show file tree

Hide file tree

Showing 17 changed files with 14,826 additions and 123 deletions.
diff --git a/17_React_Router/17_react_router.md b/17_React_Router/17_react_router.md
diff --git a/17_React_Router/17_react_router_boilerplate/src/index.js b/17_React_Router/17_react_router_boilerplate/src/index.js
diff --git a/18_projects/18_projects.md b/18_projects/18_projects.md
@@ -0,0 +1,45 @@
+<div align="center">
+  <h1> 30 Days Of React: Projects</h1>
+  <a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
+  <img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
+  </a>
+  <a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
+  <img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
+  </a>
+
+<sub>Author:
+<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
+<small> October, 2020</small>
+</sub>
+
+</div>
+
+[<< Day 17](../17_React_Router/17_react_router.md) | [Day 19>>]()
+
+![30 Days of React banner](../images/30_days_of_react_banner_day_18.jpg)
+
+- [Projects](#projects)
+- [Exercises](#exercises)
+  - [Exercises: Level 1](#exercises-level-1)
+  - [Exercises: Level 2](#exercises-level-2)
+  - [Exercises: Level 3](#exercises-level-3)
+
+# Projects
+
+Congratulations for making it to this far. Now, you have a solid understanding of React. I believe we have cover most of the feature of React and your are ready to work on projects. What we have cover so far is the old version of React. Starting from Day 20 we will learn React Hooks. In the next three days you will work on only projects.
+
+# Exercises
+
+## Exercises: Level 1
+
+## Exercises: Level 2
+
+coming
+
+## Exercises: Level 3
+
+coming
+
+🎉 CONGRATULATIONS ! 🎉
+
+[<< Day 17](../17_React_Router/17_react_router.md) | [Day 19>>]()
diff --git a/18_projects/18_projects/.gitignore b/18_projects/18_projects/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/18_projects/18_projects/README.md b/18_projects/18_projects/README.md
@@ -0,0 +1,5 @@
+# 30 Days of React App: Day 17
+
+In the project directory, you can run to start the project
+
+### `npm start`
diff --git a/18_projects/18_projects/package.json b/18_projects/18_projects/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "30-days-of-react",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/18_projects/18_projects/public/index.html b/18_projects/18_projects/public/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
+      rel="stylesheet"
+    />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+
+    <title>30 Days Of React App</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: 25;
+        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;
+      }
+      .user-card {
+        margin-top: 10px;
+      }
+      .user-card > img {
+        border-radius: 50%;
+        width: 14%;
+      }
+
+    </style>
+
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>