Day_9 has been published

5 years ago · fc36b2a400
parent 56f5f03913
commit fc36b2a400
16 changed files with 14081 additions and 7 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,7 +1,6 @@
 draft.md
 react-for-everyone.md
 component.md
 09_Day_Conditional_Rendering
 10_Day_Events
 11_Day_Forms
--- a/08_Day_States/08_states.md
+++ b/08_Day_States/08_states.md
@ -21,9 +21,11 @@
 - [State](#state)
  - [What is State?](#what-is-state)
  - [How to set a state](#how-to-set-a-state)
  - [Resetting a state using a JavaScript method](#resetting-a-state-using-a-javascript-method)
  - [Exercises](#exercises)
-    - [Exercise: Level 1](#exercise-level-1)
+    - [Exercises: Level 1](#exercises-level-1)
-    - [Exercise: Level 2](#exercise-level-2)
+    - [Exercises: Level 2](#exercises-level-2)
    - [Exercises: Level 3](#exercises-level-3)
 # State
@ -65,6 +67,8 @@ ReactDOM.render(<App />, rootElement)
 If you run the above code you will see zero on the browser. We can increase or decrease the value the state by changing the value of the state using JavaScript method.
 ## Resetting a state using a JavaScript method
 Now, let's add some methods which increase or decrease the value of count by clicking a button. Let us add a button to increase and a button to decrease the value of count. To set the state we use react method _this.setState_. See the example below
 ```js
@ -132,7 +136,6 @@ ReactDOM.render(<App />, rootElement)
 ```
 Both button work well, but we need to re-structure the code well. Let us create separate methods in the component.
 If you want to see it live check it [here][https://codepen.io/asabeneh/full/jjdwyom]
 ```js
 // index.js
@ -479,11 +482,11 @@ const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
-I believe now you have a very good understanding of state. After this, we will use state in other sections too because state and props is the core of a react application.
+I believe that now you have a very good understanding of state. After this, we will use state in other sections too because state and props is the core of a react application.
 ## Exercises
-### Exercise: Level 1
+### Exercises: Level 1
 1. What was your state today? Are you happy? I hope so. If you manage to make it this far you should be happy.
 2. What is state in React ?
@ -491,7 +494,7 @@ I believe now you have a very good understanding of state. After this, we will u
 4. How do you access state in a React component ?
 5. How do you set a set in a React component ?
-### Exercise: Level 2
+### Exercises: Level 2
 1. Use React state to change the background of the page. You can use this technique to apply a dark mode for your portfolio.
@ -501,6 +504,10 @@ I believe now you have a very good understanding of state. After this, we will u
 ![Change Background](../images/08_day_select_country_exercise.gif)
 ### Exercises: Level 3
 Coming
 🎉 CONGRATULATIONS ! 🎉
 [<< Day 7](../07_Day_Class_Components/07_class_components.md) | [Day 9 >>](../09_Day_Conditional_Rendering/09_conditional_rendering.md)
--- a/09_Day_Conditional_Rendering/09_conditional_rendering.md
+++ b/09_Day_Conditional_Rendering/09_conditional_rendering.md
@ -0,0 +1,790 @@
 <div align="center">
  <h1> 30 Days Of React: Conditional Rendering</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 8](../08_Day_States/08_states.md) | [Day 10 >>](../10_Day_Events/10_events.md)
 ![30 Days of React banner](../images/30_days_of_react_banner_day_9.jpg)
 # Conditional Rendering
 As we can understand from the term, conditional rendering is a way to render different JSX or component at different condition. We can implement conditional rendering using regular if and else statement, ternary operator and &&. Let's implement a different conditional rendering.
 ## Conditional Rendering using If and Else statement
 In the code below, we have an initial state of loggedIn which is false. If the state is false we inform user to log in otherwise we welcome the user.
 ```js
 // index.js
 import React from 'react'
 import ReactDOM from 'react-dom'
 // class based component
 class Header extends React.Component {
  render() {
    console.log(this.props.data)
    const {
      welcome,
      title,
      subtitle,
      author: { firstName, lastName },
      date,
    } = this.props.data
    return (
      <header style={this.props.styles}>
        <div className='header-wrapper'>
          <h1>{welcome}</h1>
          <h2>{title}</h2>
          <h3>{subtitle}</h3>
          <p>
            {firstName} {lastName}
          </p>
          <small>{date}</small>
          <p>Select a country for your next holiday</p>
        </div>
      </header>
    )
  }
 }
 class App extends React.Component {
  state = {
    loggedIn: false,
  }
  render() {
    const data = {
      welcome: '30 Days Of React',
      title: 'Getting Started React',
      subtitle: 'JavaScript Library',
      author: {
        firstName: 'Asabeneh',
        lastName: 'Yetayeh',
      },
      date: 'Oct 7, 2020',
    }
    // conditional rendering using if and else statement
    let status
    if (this.state.loggedIn) {
      status = <h3>Welcome to 30 Days Of React</h3>
    } else {
      status = <h3>Please Login</h3>
    }
    return (
      <div className='app'>
        {this.state.backgroundColor}
        <Header data={data} />
        {status}
      </div>
    )
  }
 }
 const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 Let's add a method which allow as to toggle the status of the user. We should have a button to handle event for logging in and logging out.
 ```js
 // index.js
 import React from 'react'
 import ReactDOM from 'react-dom'
 // A button component
 const Button = ({ text, onClick, style }) => (
  <button style={style} onClick={onClick}>
    {text}
  </button>
 )
 // CSS styles in JavaScript Object
 const buttonStyles = {
  backgroundColor: '#61dbfb',
  padding: 10,
  border: 'none',
  borderRadius: 5,
  margin: 3,
  cursor: 'pointer',
  fontSize: 22,
  color: 'white',
  margin: '0 auto',
 }
 // class based component
 class Header extends React.Component {
  render() {
    console.log(this.props.data)
    const {
      welcome,
      title,
      subtitle,
      author: { firstName, lastName },
      date,
    } = this.props.data
    return (
      <header style={this.props.styles}>
        <div className='header-wrapper'>
          <h1>{welcome}</h1>
          <h2>{title}</h2>
          <h3>{subtitle}</h3>
          <p>
            {firstName} {lastName}
          </p>
          <small>{date}</small>
        </div>
      </header>
    )
  }
 }
 class App extends React.Component {
  state = {
    loggedIn: false,
  }
  handleLogin = () => {
    this.setState({
      loggedIn: !this.state.loggedIn,
    })
  }
  render() {
    const data = {
      welcome: '30 Days Of React',
      title: 'Getting Started React',
      subtitle: 'JavaScript Library',
      author: {
        firstName: 'Asabeneh',
        lastName: 'Yetayeh',
      },
      date: 'Oct 9, 2020',
    }
    let status
    let text
    if (this.state.loggedIn) {
      status = <h1>Welcome to 30 Days Of React</h1>
      text = 'Logout'
    } else {
      status = <h3>Please Login</h3>
      text = 'Login'
    }
    return (
      <div className='app'>
        {this.state.backgroundColor}
        <Header data={data} />
        {status}
        <Button text={text} style={buttonStyles} onClick={this.handleLogin} />
      </div>
    )
  }
 }
 const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 How about if our condition is more than two? Like pure JavaScript we can use if else if statement. In general, conditional rendering is not different from pure JavaScript conditional statement.
 ## Conditional Rendering using Ternary Operator
 Ternary operator is an an alternative for if else statement. However, there is more use cases for ternary operator than if else statement. For example, use can use ternary operator inside styles, className or many places in a component than regular if else statement.
 ```js
 // index.js
 import React from 'react'
 import ReactDOM from 'react-dom'
 // A button component
 const Button = ({ text, onClick, style }) => (
  <button style={style} onClick={onClick}>
    {text}
  </button>
 )
 // CSS styles in JavaScript Object
 const buttonStyles = {
  backgroundColor: '#61dbfb',
  padding: 10,
  border: 'none',
  borderRadius: 5,
  margin: 3,
  cursor: 'pointer',
  fontSize: 22,
  color: 'white',
  margin: '0 auto',
 }
 // class based component
 class Header extends React.Component {
  render() {
    console.log(this.props.data)
    const {
      welcome,
      title,
      subtitle,
      author: { firstName, lastName },
      date,
    } = this.props.data
    return (
      <header style={this.props.styles}>
        <div className='header-wrapper'>
          <h1>{welcome}</h1>
          <h2>{title}</h2>
          <h3>{subtitle}</h3>
          <p>
            {firstName} {lastName}
          </p>
          <small>{date}</small>
        </div>
      </header>
    )
  }
 }
 class App extends React.Component {
  state = {
    loggedIn: false,
  }
  handleLogin = () => {
    this.setState({
      loggedIn: !this.state.loggedIn,
    })
  }
  render() {
    const data = {
      welcome: '30 Days Of React',
      title: 'Getting Started React',
      subtitle: 'JavaScript Library',
      author: {
        firstName: 'Asabeneh',
        lastName: 'Yetayeh',
      },
      date: 'Oct 9, 2020',
    }
    let status = this.state.loggedIn ? (
      <h1>Welcome to 30 Days Of React</h1>
    ) : (
      <h3>Please Login</h3>
    )
    return (
      <div className='app'>
        {this.state.backgroundColor}
        <Header data={data} />
        {status}
        <Button
          text={this.state.loggedIn ? 'Logout' : 'Login'}
          style={buttonStyles}
          onClick={this.handleLogin}
        />
      </div>
    )
  }
 }
 const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 In addition to JSX, we can also conditionally render a component. Let's change the above conditional JSX to a component.
 ```js
 // index.js
 import React from 'react'
 import ReactDOM from 'react-dom'
 // A button component
 const Button = ({ text, onClick, style }) => (
  <button style={style} onClick={onClick}>
    {text}
  </button>
 )
 // CSS styles in JavaScript Object
 const buttonStyles = {
  backgroundColor: '#61dbfb',
  padding: 10,
  border: 'none',
  borderRadius: 5,
  margin: 3,
  cursor: 'pointer',
  fontSize: 22,
  color: 'white',
  margin: '0 auto',
 }
 // class based component
 class Header extends React.Component {
  render() {
    console.log(this.props.data)
    const {
      welcome,
      title,
      subtitle,
      author: { firstName, lastName },
      date,
    } = this.props.data
    return (
      <header style={this.props.styles}>
        <div className='header-wrapper'>
          <h1>{welcome}</h1>
          <h2>{title}</h2>
          <h3>{subtitle}</h3>
          <p>
            {firstName} {lastName}
          </p>
          <small>{date}</small>
        </div>
      </header>
    )
  }
 }
 class App extends React.Component {
  state = {
    loggedIn: false,
  }
  handleLogin = () => {
    this.setState({
      loggedIn: !this.state.loggedIn,
    })
  }
  render() {
    const data = {
      welcome: '30 Days Of React',
      title: 'Getting Started React',
      subtitle: 'JavaScript Library',
      author: {
        firstName: 'Asabeneh',
        lastName: 'Yetayeh',
      },
      date: 'Oct 9, 2020',
    }
    const Login = () => (
      <div>
        <h3>Please Login</h3>
      </div>
    )
    const Welcome = (props) => (
      <div>
        <h1>Welcome to 30 Days Of React</h1>
      </div>
    )
    const status = this.state.loggedIn ? <Welcome /> : <Login />
    return (
      <div className='app'>
        {this.state.backgroundColor}
        <Header data={data} />
        {status}
        <Button
          text={this.state.loggedIn ? 'Logout' : 'Login'}
          style={buttonStyles}
          onClick={this.handleLogin}
        />
      </div>
    )
  }
 }
 const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 ## Conditional Rendering using && Operator
 The && operator render the right JSX operand if the left operand(expression) is true.
 ```js
 // index.js
 import React from 'react'
 import ReactDOM from 'react-dom'
 // A button component
 const Button = ({ text, onClick, style }) => (
  <button style={style} onClick={onClick}>
    {text}
  </button>
 )
 // CSS styles in JavaScript Object
 const buttonStyles = {
  backgroundColor: '#61dbfb',
  padding: 10,
  border: 'none',
  borderRadius: 5,
  margin: 3,
  cursor: 'pointer',
  fontSize: 22,
  color: 'white',
  margin: '0 auto',
 }
 // class based component
 class Header extends React.Component {
  render() {
    console.log(this.props.data)
    const {
      welcome,
      title,
      subtitle,
      author: { firstName, lastName },
      date,
    } = this.props.data
    return (
      <header style={this.props.styles}>
        <div className='header-wrapper'>
          <h1>{welcome}</h1>
          <h2>{title}</h2>
          <h3>{subtitle}</h3>
          <p>
            {firstName} {lastName}
          </p>
          <small>{date}</small>
        </div>
      </header>
    )
  }
 }
 const Login = () => (
  <div>
    <h3>Please Login</h3>
  </div>
 )
 const Welcome = (props) => (
  <div>
    <h1>Welcome to 30 Days Of React</h1>
  </div>
 )
 class App extends React.Component {
  state = {
    loggedIn: false,
    techs: ['HTML', 'CSS', 'JS'],
  }
  handleLogin = () => {
    this.setState({
      loggedIn: !this.state.loggedIn,
    })
  }
  render() {
    const data = {
      welcome: '30 Days Of React',
      title: 'Getting Started React',
      subtitle: 'JavaScript Library',
      author: {
        firstName: 'Asabeneh',
        lastName: 'Yetayeh',
      },
      date: 'Oct 9, 2020',
    }
    const status = this.state.loggedIn ? <Welcome /> : <Login />
    return (
      <div className='app'>
        {this.state.backgroundColor}
        <Header data={data} />
        {status}
        <Button
          text={this.state.loggedIn ? 'Logout' : 'Login'}
          style={buttonStyles}
          onClick={this.handleLogin}
        />
        {this.state.techs.length === 3 && (
          <p>You have all the prerequisite courses to get started React</p>
        )}
        {!this.state.loggedIn && (
          <p>
            Please login to access more information about 30 Days Of React
            challenge
          </p>
        )}
      </div>
    )
  }
 }
 const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 In the previous section, we used alert box to greet people and also to display time. Let's render the greeting and time on browser DOM instead of displaying on alert box.
 ```js
 // index.js
 import React from 'react'
 import ReactDOM from 'react-dom'
 // class based component
 class Header extends React.Component {
  render() {
    console.log(this.props.data)
    const {
      welcome,
      title,
      subtitle,
      author: { firstName, lastName },
      date,
    } = this.props.data
    return (
      <header style={this.props.styles}>
        <div className='header-wrapper'>
          <h1>{welcome}</h1>
          <h2>{title}</h2>
          <h3>{subtitle}</h3>
          <p>
            {firstName} {lastName}
          </p>
          <small>{date}</small>
        </div>
      </header>
    )
  }
 }
 const Message = ({ message }) => (
  <div>
    <h1>{message}</h1>
  </div>
 )
 const Login = () => (
  <div>
    <h3>Please Login</h3>
  </div>
 )
 const Welcome = (props) => (
  <div>
    <h1>Welcome to 30 Days Of React</h1>
  </div>
 )
 // A button component
 const Button = ({ text, onClick, style }) => (
  <button style={style} onClick={onClick}>
    {text}
  </button>
 )
 // TechList Component
 // class base component
 class TechList extends React.Component {
  render() {
    const { techs } = this.props
    const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
    return techsFormatted
  }
 }
 // Main Component
 // Class Component
 class Main extends React.Component {
  render() {
    const {
      techs,
      greetPeople,
      handleTime,
      loggedIn,
      handleLogin,
      message,
    } = this.props
    console.log(message)
    const status = loggedIn ? <Welcome /> : <Login />
    return (
      <main>
        <div className='main-wrapper'>
          <p>Prerequisite to get started react.js:</p>
          <ul>
            <TechList techs={this.props.techs} />
          </ul>
          {techs.length === 3 && (
            <p>You have all the prerequisite courses to get started React</p>
          )}
          <div>
            <Button
              text='Show Time'
              onClick={handleTime}
              style={buttonStyles}
            />{' '}
            <Button
              text='Greet People'
              onClick={greetPeople}
              style={buttonStyles}
            />
            {!loggedIn && <p>Please login to access more information about 30 Days Of React challenge</p>}
          </div>
          <div style={{ margin: 30 }}>
            <Button
              text={loggedIn ? 'Logout' : 'Login'}
              style={buttonStyles}
              onClick={handleLogin}
            />
            <br />
            {status}
          </div>
          <Message message={message} />
        </div>
      </main>
    )
  }
 }
 // CSS styles in JavaScript Object
 const buttonStyles = {
  backgroundColor: '#61dbfb',
  padding: 10,
  border: 'none',
  borderRadius: 5,
  margin: 3,
  cursor: 'pointer',
  fontSize: 22,
  color: 'white',
  margin: '0 auto',
 }
 // Footer Component
 // Class component
 class Footer extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <footer>
        <div className='footer-wrapper'>
          <p>Copyright {this.props.date.getFullYear()}</p>
        </div>
      </footer>
    )
  }
 }
 class App extends React.Component {
  state = {
    loggedIn: false,
    techs: ['HTML', 'CSS', 'JS'],
    message: 'Click show time or Greet people to change me',
  }
  handleLogin = () => {
    this.setState({
      loggedIn: !this.state.loggedIn,
    })
  }
  showDate = (time) => {
    const months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December',
    ]
    const month = months[time.getMonth()].slice(0, 3)
    const year = time.getFullYear()
    const date = time.getDate()
    return `${month} ${date}, ${year}`
  }
  handleTime = () => {
    let message = this.showDate(new Date())
    this.setState({ message })
  }
  greetPeople = () => {
    let message = 'Welcome to 30 Days Of React Challenge, 2020'
    this.setState({ message })
  }
  render() {
    const data = {
      welcome: '30 Days Of React',
      title: 'Getting Started React',
      subtitle: 'JavaScript Library',
      author: {
        firstName: 'Asabeneh',
        lastName: 'Yetayeh',
      },
      date: 'Oct 9, 2020',
    }
    const techs = ['HTML', 'CSS', 'JavaScript']
    return (
      <div className='app'>
        {this.state.backgroundColor}
        <Header data={data} />
        <Main
          techs={techs}
          handleTime={this.handleTime}
          greetPeople={this.greetPeople}
          loggedIn={this.state.loggedIn}
          handleLogin={this.handleLogin}
          message={this.state.message}
        />
        <Footer date={new Date()} />
      </div>
    )
  }
 }
 const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 ## Exercises
 ### Exercises: Level 1
 1. What is conditional rendering?
 2. How do you implement conditional rendering?
 3. Which method of conditional rendering do you prefer?
 ### Exercises: Level 2
 Coming
 ### Exercises: Level 3
 Coming
 🎉 CONGRATULATIONS ! 🎉
 [<< Day 8](../08_Day_States/08_states.md) | [Day 10 >>](../10_Day_Events/10_events.md)
--- a/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/.gitignore
+++ b/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/.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*
--- a/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/README.md
+++ b/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/README.md
@ -0,0 +1,5 @@
 # 30 Days of React App: Day 3
 In the project directory, you can run to start the project
 ### `npm start`
--- a/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/package.json
+++ b/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/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"
    ]
  }
 }
--- a/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/public/index.html
+++ b/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/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>
--- a/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/data/countries.js
+++ b/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/data/countries.js
--- a/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/data/ten_most_highest_populations.js
+++ b/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/data/ten_most_highest_populations.js
@ -0,0 +1,13 @@
 export const tenHighestPopulation = [
  { country: 'World', population: 7693165599 },
  { country: 'China', population: 1377422166 },
  { country: 'India', population: 1295210000 },
  { country: 'United States of America', population: 323947000 },
  { country: 'Indonesia', population: 258705000 },
  { country: 'Brazil', population: 206135893 },
  { country: 'Pakistan', population: 194125062 },
  { country: 'Nigeria', population: 186988000 },
  { country: 'Bangladesh', population: 161006790 },
  { country: 'Russian Federation', population: 146599183 },
  { country: 'Japan', population: 126960000 },
 ]
--- a/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/asabeneh.jpg
+++ b/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/asabeneh.jpg
--- a/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/css_logo.png
+++ b/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/css_logo.png
--- a/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/html_logo.png
+++ b/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/html_logo.png
--- a/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/js_logo.png
+++ b/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/js_logo.png
--- a/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/react_logo.png
+++ b/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/react_logo.png
--- a/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/index.js
+++ b/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/index.js
@ -0,0 +1,230 @@
 // index.js
 import React from 'react'
 import ReactDOM from 'react-dom'
 // class based component
 class Header extends React.Component {
  render() {
    console.log(this.props.data)
    const {
      welcome,
      title,
      subtitle,
      author: { firstName, lastName },
      date,
    } = this.props.data
    return (
      <header style={this.props.styles}>
        <div className='header-wrapper'>
          <h1>{welcome}</h1>
          <h2>{title}</h2>
          <h3>{subtitle}</h3>
          <p>
            {firstName} {lastName}
          </p>
          <small>{date}</small>
        </div>
      </header>
    )
  }
 }
 const Message = ({ message }) => (
  <div>
    <h1>{message}</h1>
  </div>
 )
 const Login = () => (
  <div>
    <h3>Please Login</h3>
  </div>
 )
 const Welcome = (props) => (
  <div>
    <h1>Welcome to 30 Days Of React</h1>
  </div>
 )
 // A button component
 const Button = ({ text, onClick, style }) => (
  <button style={style} onClick={onClick}>
    {text}
  </button>
 )
 // TechList Component
 // class base component
 class TechList extends React.Component {
  render() {
    const { techs } = this.props
    const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
    return techsFormatted
  }
 }
 // Main Component
 // Class Component
 class Main extends React.Component {
  render() {
    const {
      techs,
      greetPeople,
      handleTime,
      loggedIn,
      handleLogin,
      message,
    } = this.props
    console.log(message)
    const status = loggedIn ? <Welcome /> : <Login />
    return (
      <main>
        <div className='main-wrapper'>
          <p>Prerequisite to get started react.js:</p>
          <ul>
            <TechList techs={this.props.techs} />
          </ul>
          {techs.length === 3 && (
            <p>You have all the prerequisite courses to get started React</p>
          )}
          <div>
            <Button
              text='Show Time'
              onClick={handleTime}
              style={buttonStyles}
            />{' '}
            <Button
              text='Greet People'
              onClick={greetPeople}
              style={buttonStyles}
            />
            {!loggedIn && (
              <p>
                Please login to access more information about 30 Days Of React
                challenge
              </p>
            )}
          </div>
          <div style={{ margin: 30 }}>
            <Button
              text={loggedIn ? 'Logout' : 'Login'}
              style={buttonStyles}
              onClick={handleLogin}
            />
            <br />
            {status}
          </div>
          <Message message={message} />
        </div>
      </main>
    )
  }
 }
 // CSS styles in JavaScript Object
 const buttonStyles = {
  backgroundColor: '#61dbfb',
  padding: 10,
  border: 'none',
  borderRadius: 5,
  margin: 3,
  cursor: 'pointer',
  fontSize: 22,
  color: 'white',
  margin: '0 auto',
 }
 // Footer Component
 // Class component
 class Footer extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <footer>
        <div className='footer-wrapper'>
          <p>Copyright {this.props.date.getFullYear()}</p>
        </div>
      </footer>
    )
  }
 }
 class App extends React.Component {
  state = {
    loggedIn: false,
    techs: ['HTML', 'CSS', 'JS'],
    message: 'Click show time or Greet people to change me',
  }
  handleLogin = () => {
    this.setState({
      loggedIn: !this.state.loggedIn,
    })
  }
  showDate = (time) => {
    const months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December',
    ]
    const month = months[time.getMonth()].slice(0, 3)
    const year = time.getFullYear()
    const date = time.getDate()
    return `${month} ${date}, ${year}`
  }
  handleTime = () => {
    let message = this.showDate(new Date())
    this.setState({ message })
  }
  greetPeople = () => {
    let message = 'Welcome to 30 Days Of React Challenge, 2020'
    this.setState({ message })
  }
  render() {
    const data = {
      welcome: '30 Days Of React',
      title: 'Getting Started React',
      subtitle: 'JavaScript Library',
      author: {
        firstName: 'Asabeneh',
        lastName: 'Yetayeh',
      },
      date: 'Oct 9, 2020',
    }
    const techs = ['HTML', 'CSS', 'JavaScript']
    return (
      <div className='app'>
        {this.state.backgroundColor}
        <Header data={data} />
        <Main
          techs={techs}
          handleTime={this.handleTime}
          greetPeople={this.greetPeople}
          loggedIn={this.state.loggedIn}
          handleLogin={this.handleLogin}
          message={this.state.message}
        />
        <Footer date={new Date()} />
      </div>
    )
  }
 }
 const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
--- a/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/yarn.lock
+++ b/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/yarn.lock