Header component exercise

ibn5x · July 13, 2021, 11:52am

Header Component Exercise Proposed Solution
At first I wasnt sure, but now im pretty sure I like style components. Here is my solution.

Header.jsx

import React, { Component } from 'react';
import styled from 'styled-components';
import snowman from '../../snowman.png';

const Heady = styled.header`
        background-color: #282c34;
        min-height: 20vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
`;

const DIVAPP = styled.div`
     text-align: center;
     background-color: darkgrey;
`;
const H1 = styled.h1`
      font-size: 4rem;
      color: white;
`;
const Logo = styled.img`
     height: 8rem;
     pointer-events: none;

`;



export default class Header extends Component{
    render(){
        return(
            <DIVAPP>
                <Heady>
                    <Logo src={snowman} alt="logo" />
                    <H1 className="App-title">
                        Snow Trap DEX
                    </H1>

                </Heady>
            </DIVAPP>    
        );
    }
}

App.js

import AccountBalance from './components/AccountBalance/AccountBalance';
import React from 'react'; 
import { v4 as uuidv4 } from 'uuid';
import CoinList from './components/CoinList/CoinList.jsx';
import Header from './components/Header/Header.jsx';

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      balance: 10000,
      coinData: [
                {
                  key: uuidv4(),
                  name: "Bitcoin" ,
                  ticker:"BTC",
                   price: 34103.31
                },
                {
                  key: uuidv4(),
                  name: "Ethereum",
                   ticker: "ETH",
                    price: 2157.73
                },
               {
                 key: uuidv4(),
                 name: "Binance Coin", 
                 ticker: "BNB", 
                 price: 319.98
               },
              {
                key: uuidv4(),
                name: "Cardano",
                ticker: "ADA",
                price: 1.35
              },
             {
               key: uuidv4(),
               name: "XRP", 
               ticker: "XRP",
               price: 0.634853
             },
            {
              key: uuidv4(),
              name: "Dogde Coin",
              ticker: "BTC",
              price: 0.218369
            },
           {
             key: uuidv4(),
             name: "Polkadot",
             ticker: "DOT", 
             price: 15.68
           },
          {
            key: uuidv4(),
            name: "Uniswap", 
            ticker: "UNI", 
            price: 20.89
          },
         {
           key: uuidv4(),
           name: "Bitcoin Cash",
           ticker: "BCH", 
           price: 500.60
         },
        {
          key: uuidv4(),
          name: "Litecoin", 
          ticker: "LTC", 
          price: 134.79
        },
        {
          key: uuidv4(),
          name: "Solana",
          ticker: "SOL", 
          price: 32.92
        },
        {
          key: uuidv4(),
          name: "Chainlink",
          ticker: "LINK",
          price: 18.70
        },
        {
          key: uuidv4(),
          name: "Polygon",
          ticker: "MATIC",
          price: 0.99
        },
        {
          key: uuidv4(),
          name: "Ethereum Classic",
          ticker: "ETC",
          price: 47.43
        },
        {
          key: uuidv4(),
          name: "Stellar",
          ticker: "XLM",
          price: 0.24
        },
        {
          key: uuidv4(),
          name: "Theta Network",
          ticker: "THETA",
          price: 0.24
        }
      ]
    };
  }
  render()
    {
        return (
          <>
          <Header />
          <AccountBalance amount={this.state.balance} />
          <CoinList coinData={this.state.coinData} />
          </>
      
      );
  }
}

export default App;

Kippie · August 1, 2021, 9:52pm

Preferred to continue the use of the App.css file due to the numerous styling elements. Here’s the updated render from the App.js file:

render() {
      return (
        <div className="App">
          <CoinHeader />
          <div>
            <AccountBalance amount={this.state.balance} />
            <CoinList coinData={this.state.coinData} />
          </div>
        </div>
      );
    }

Here’s the CoinHeader.jsx file:

import React, { Component } from 'react'
import logo from '../../../src/logo.svg';

export default class CoinHeader extends Component {
    render() {
        return (
            <div>
                <header className="App-header">
                    <img src={logo} alt="React logo" className="App-logo" />
                    <h1 className="App-title">
                      COIN EXCHANGE
                    </h1>
                </header>
            </div>
        )
    }
}

HRMS2021 · August 2, 2021, 2:55pm

App.js:

render() {
    return (
<Div className="App">
        <AppHeader />
        <AccountBalance amount={this.state.balance} />
        <CoinList coinData={this.state.coinData} />
          </Div> 
             );
            }
          }


export default App;

AppHeader.jsx

import React, { Component } from 'react'
import logo from  './logo.svg';
import styled from 'styled-components';

const img = styled.image`
    height: 8rem;
    pointer-events: none;
`;

const Header = styled.header`
    background-color: #282c34;
    min-height: 20vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: white;
`;

const H1 = styled.h1`
    font-size: 4rem;
`;

export default class Appheader extends Component {
    render() {
        return (
            <Header className="App-header">
        <img src={logo} alt="React logo"/>
        <H1 className="App-title">
          Coin Exchange
        </H1>
        </Header>
                
            
        )
    }
}

DaveRad · August 23, 2021, 3:09pm

Hurray for components!

I had to delete my first post and repost because I forgot to post the solution.

I came up with the right code but, I was baffled as to why I was getting an error message saying “can’t resolve ‘./logo.svg’;”. I tried to type the specific path ‘./components/appHeader/AppHeader’; but, that also failed.
So…almost lol!
Anyway, the solution:

AppHeader.jsx

import React, { Component } from 'react';
import styled from 'styled-components';
import logo from './logo.svg';

const Img = styled.img`
    height: 8rem;
    pointer-events: none;
`
const Header = styled.header`
    background-color: #282c34;
    min-height: 20vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: white;
`;

const H1 = styled.h1`
    font-size: 4rem;
`

export default class AppHeader extends Component {
    render() {
        return (
            <Header>
                <Img src={logo} alt='Rect Logo'/>
                <H1>
                Coin Exchange
                </H1>
            </Header>
 
        )
    }
}

App.jsx

import CoinList from './components/CoinList/CoinList';
import AccountBalance from './components/AccountBalance/AccountBalance';
import React from 'react';
import AppHeader from './components/AppHeader/AppHeader';
import styled from 'styled-components';


const Div = styled.div`
    text-align: center;
    background-color: rgb(25, 69, 99);
    color: #cccccc;
`;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      balance: 10000,
      coinData: [
        {
          name: 'Bitcoin',
          ticker: 'BTC',
          price: 52000.99
        },
        {
          name: 'Ethereum',
          ticker: 'ETH',
          price: 3900.99
        },
        {
          name: 'Tether',
          ticker: 'USDT',
          price: 1.02
        },
        {
          name: 'Ripple',
          ticker: 'XRP',
          price: 1.07
        },
        {
          name: 'Cardano',
          ticker: 'ADA',
          price: 2.07
        },
      ]
    }
  }
    render() {
      return (
        <Div className="App">
          <AppHeader/>
          <AccountBalance amount={this.state.balance}/>
          <CoinList coinData={this.state.coinData}/>
        </Div>
      );
    }

}

export default App;

But also,
move the logo.svg to the right directory. In this case = src/components/AppHeader/logo.svg

DaveRad · August 13, 2021, 2:23pm

Hi JonBal.
How did you make the arrow/dropdowns on your post?

gregD · August 23, 2021, 2:17pm

Header.jsx

import React, { Component } from 'react'
import logo from '../../logo.svg';
import styled from 'styled-components';

const ExchangeHeader = styled.header`
background-color: #282c34;
min-height: 20vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
font-size: 36px;
color: white;
`;

const Logo = styled.img`
height: 8rem;
pointer-events: none;
`;

const Title = styled.h1`
font-size: 4rem;
`;

export default class Header extends Component {
    render() {
        return (
        <ExchangeHeader className="App-header">
          <Logo src={logo} className="App-logo" alt="logo" />
          <Title className="App-title">
            Coin Exchange
          </Title>
        </ExchangeHeader>
        )
    }
}

App.js

render () {
    return (
      <div className="App">
        <Header />
        <AccountBalance amount={this.state.balance} />
        <CoinList coinData={this.state.coinData} />
      </div>
    );
  }

gregD · August 23, 2021, 2:18pm

When you’re writing a post click the far right ‘settings’ icon then ‘hide details’

DaveRad · August 23, 2021, 2:57pm

Thank you for the answer gregD!

Sieg · September 22, 2021, 7:18pm

App.js

import './App.css';
import AccountBalance from './components/AccountBalance/AccountBalance';
import React, { Component } from 'react';
import { v4 as uuidv4 } from 'uuid';
import CoinList from './components/CoinList/CoinList';
import AppHeader from './components/AppHeader';

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      balance: 10000,
      coinData: [
        {key :uuidv4(),name:'bitcoin',ticker:'btc',price:9999},
        {key :uuidv4(),name:'ether',ticker:'eth',price:5999},
        {key :uuidv4(),name:'xxxxx',ticker:'xxx',price:5999},
        {key :uuidv4(),name:'zzzzzz',ticker:'zzzz',price:9999999999},
        {key :uuidv4(),name:'yyyy',ticker:'yyy',price:299}
      ]
    }
  }

  render() {
    return (
      <div className='App'>
        <AppHeader />
        <AccountBalance amount={this.state.balance}/>
        <CoinList coinData={this.state.coinData}/>
      </div>
    )
  }
}

AppHeader.js

import React, { Component } from 'react';

import logo from './logo.svg';

import styled from 'styled-components';

const Header=styled.header`

    background-color: #282c34;

    min-height: 15vh;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: flex-start;

    color: white;

`;

const Img=styled.img`

    height: 8rem;

    pointer-events: none;

`;

const H1=styled.h1`

    font-size: 4.5rem;

`;

export default class AppHeader extends Component {

    render() {

        return (

        <Header>

            <Img src={logo} alt='React Logo'/>

            <H1>Coin Exchange</H1>

        </Header>
        )
    }
}

How can we keep :
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

theaussie86 · September 28, 2021, 9:31am

import React from 'react'
import logo from '../../logo.svg';


export default function Header() {
    return (
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">
            Coin Exchange
          </h1>
        </header>
    )
}

Acex13 · October 31, 2021, 11:42am

Removed the separate component folders and moved the files into the ‘components’ folder, as I prefer the simplicity. Didn’t make the H1 a styled component, but would do so if there were more attributes that would change, in this case.

PageHeader.jsx

import React, { Component } from ‘react’
import logo from ‘…/logo.svg’;
import styled from ‘styled-components’;
import ‘…/App.css’;

const Img = styled.img height: 8rem; pointer-events: none;;

const Header = styled.header background-color: black; min-height: 20vh; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; color: white;;

export default class PageHeader extends Component {

render() {
    return (
        <Header>
            <Img src={logo} alt="React logo" />
            <h1 className="App-title">
            Coin Exchange
            </h1>
        </Header>
    )
}

}

DJaySplash · November 4, 2021, 10:09pm

App.js

import React from 'react';

import AccountBalance from './components/AccountBalance/AccountBalance'

import CoinList from './components/CoinList/CoinList';

import AppHeader from './components/AppHeader/AppHeader';

import styled from 'styled-components';

const Content = styled.div `

text-align: center;

background-color: rgb(20, 56, 97);

color: #cccccc;`;

class App extends React.Component {

  constructor(props){

    super(props);

    this.state = {

      balance: 10000,

      coinData: [

        {

          name:'Bitcoin',

          ticker: 'BTC',

          price: '9999.99'

        },

        {

          name:'Ethereum',

          ticker:'ETH',

          price: '299.99'

        },

        {

          name:'Tether',

          ticker:'USDT',

          price:'1.0'

        },

        {

          name:'Ripple',

          ticker:'XRP',

          price:'0.2'

        },

        {

          name:'Bitcoin Cash',

          ticker:'BCH',

          price:'298.99'

        }

      ]

    }

  }

   

  render(){

    return (

      <Content>

        <AppHeader/>

        <AccountBalance amount={this.state.balance}/>

        <CoinList coinData={this.state.coinData}/>

      </Content>

    );

  }

}

export default App;

AppHeader.jsx

import React, { Component } from 'react'

import logo from '../../logo.svg';

import styled from 'styled-components'

const Header = styled.header`

background-color: #282c34;

min-height: 20vh;

display: flex;

flex-direction: row;

align-items: center;

justify-content: flex-start;

font-size: 36px;

color: white;

`;

const H1 = styled.h1`

font-size: 4rem;

`;

const Logo = styled.img`

height: 8rem;

pointer-events: none;

`;

export default class AppHeader extends Component {

    render() {

        return (

            <div>

                <Header>

                    <Logo src={logo} alt="React logo"/>

                    <H1>Coin Exchange</H1>

                </Header>                

            </div>

        )

    }

}

CoinList.jsx

import React, { Component } from 'react'

import Coin from '../Coin/Coin';

import styled from 'styled-components';

const Table = styled.table`

margin: 50px auto 50px auto;

display: inline-block;

font-size: 1.4rem;

`;

export default class CoinList extends Component {

    render() {

        return (

            <div>

        <Table>

          <thead>

            <tr>

              <th>Name</th>

              <th>Ticker</th>

              <th>Price</th>

            </tr>

          </thead>

          <tbody>

            {

              this.props.coinData.map( ({name, ticker, price}) =>

                <Coin key={ticker} name={name} ticker={ticker} price={price} />

                )

            }  

          </tbody>

        </Table>

            </div>

        )

    }

}

2tijan7 · November 5, 2021, 5:43pm

Here is my solution:

App.js

  render() {
    return (
      <div className="App">
        <Header />
        <AccountBalance amount={this.state.balance}/>
        <CoinList coinData={this.state.coinData} />
      </div>
    );
  }

Header.jsx

import React, { Component } from 'react';
import logo from "../../logo.svg";
import styled from 'styled-components';

const HeaderHTML = styled.header`
    background-color: #282c34;
    min-height: 10vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: white;
`;
const H1 = styled.h1`
    font-size: 3rem;
`;
const Img = styled.img`
    height: 5rem;
    pointer-events: none;
`;

export default class Header extends Component {
    render() {
        return (
            <HeaderHTML>
            <Img 
              src={logo}
              alt="React Logo"
              className="App-logo"
            />
            <H1 className="App-title">Coin Exchange</H1>
          </HeaderHTML>
        )
    }
}

Ernest_SG · December 14, 2021, 3:05am

Here my solution:

import React, { Component } from 'react';
import logo from '../../logo.svg';
import styled from 'styled-components';

const Header = styled.header`
    background-color: #282c34;
    min-height: 20vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 36px;
    color: white;
`;

const Img = styled.img`
    height: 6rem;
    pointer-events: none;
`;

const H1 = styled.h1`
    font-size: 4rem;
`;


export default class ExchangeHeader extends Component {
    render() {
        return (

        <Header className="App-header">
          <Img src={logo} alt="react-logo" className="App-logo"/>
          <H1 className="App-title">
            Coin Exchange
          </H1>
        </Header>

        )
    }
}

Markus_Bielaszka · December 16, 2021, 5:20pm

ExchangeHeader.jsx

import React, { Component } from "react";
import logo from "./logo.svg";
import styled from "styled-components";

const Div = styled.div ` 
  text-align: center;
  background-color: #024952;
  color: #cccccc;
  height: 969px;
`

const Header = styled.header `
  background-color: #0c404a;
  height: 59px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  color: white;
`

const H1 = styled.h1 `
  font-size: 26px;
`

const Img = styled.img `
  height: 52px;
  pointer-events: none;
`

export default class ExchangeHeader extends Component {
render() {
    return (
      <Div>
        <Header>
          <Img src={logo} alt="react-logo" />
          <H1>Coin Exchange</H1>
        </Header>
        <AccountBalance amount={this.state.balance} />
        <CoinList coinData={this.state.coinData} />
      </Div>
    );
  }
}

Attiss · January 4, 2022, 9:16am

import React, { Component } from 'react'
import logo from '../../logo.svg'
import styled from 'styled-components'

const AppHead = styled.header`
    background-color: #282c34;
    min-height: 20vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 36px;
    color: white;
    `

const AppTitle = styled.h1`
    font-size: 4rem;
    `

const AppLogo = styled.img`
    height: 8rem;
    pointer-events: none;
    `

export default class AppHeader extends Component {
    render() {
        return (
            <AppHead>
            <AppLogo src={logo} alt="React logo" />
            <AppTitle>
                Coin Exchange       
            </AppTitle>
            </AppHead>
        )
    }
}

KK_Cheah · January 12, 2022, 7:48am

import React, { Component } from 'react'
import logo from '../../logo.svg';
import styled from 'styled-components'

const Header1 = styled.header`
    background-color: #282c34;
    max-height: 30vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 30px;
    color: white;
`
const Title = styled.h1`
    background-color: #282c34;
    max-height: 30vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 30px;
    color: white;
`


export default class Header extends Component {
    render() {
        return (
            <Header1>
                <img className="React-Logo" src= {logo} alt="React Logo"/>
                <Title>
                PhoenixXxplorer
                </Title>
                <h1>
                </h1>
            </Header1>
        )
    }
}

Madlearner · January 13, 2022, 6:46am

Header.jsx

import React, { Component } from 'react';
import logo from './logo.svg';


export default class DexHeader extends Component {
    render() {
        return (
            <Header>
            <img src={logo} alt="React logo" className="App-logo" />
            <h1 className="App-title">
              NFT Crypto DEX
            </h1>
          </Header>
        )
    }
}

crypto-djent76 · January 18, 2022, 9:33pm

Here is my solution. I got rid of the App.css folder and instead did the styled-components in each file that was required.

TitleList.js

import React, { Component } from 'react';
import logo from '../../logo.svg';
import styled from 'styled-components';

const Header = styled.header`
    background-color: #282c34;
    min-height: 20vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: white;
`;

const Image = styled.img`
    height: 10rem;
    pointer-events: none;
`;

const H1 = styled.h1`
    font-size: 4rem;
`;

export default class TitleList extends Component {
    render() {
        return (
            <Header>
                <Image src={logo} alt="React logo" />
                    <H1>
                        Coin-Exchange
                    </H1>
            </Header>
        )
    }
}

App.js

import React from 'react';
import AccountBalance from './components/AccountBalance/AccountBalance';
import CoinList from './components/CoinList/CoinList';
import TitleList from './components/TitleList/TitleList';
import styled from 'styled-components';

const Div = styled.div`
  text-align: center;
  background-color: rgb(20, 56, 97);
  color: #cccccc;
`;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      balance: 10000,
      coinData: [
        {
          name: 'Bitcoin',
          ticker: 'BTC',
          price: 42050.77
        },
        {
          name: 'Ethereum',
          ticker: 'ETH',
          price: 3129.90
        },
        {
          name: 'Tether',
          ticker: 'USDT',
          price: 1.0
        },
        {
          name: 'Solana',
          ticker: 'SOL',
          price: 121.50
        },
        {
          name: 'Crypto.com',
          ticker: 'CRO',
          price: 0.34
        }
      ]
    }
  }
  render() {
    return (
      <Div>
        <TitleList header={this.state.header} />
        <AccountBalance amount={this.state.balance} />
        <CoinList coinData={this.state.coinData} />
      </Div>
    );
  }
}
  

export default App;

diegosan · February 19, 2022, 7:32pm

I found this assignment helpful to start consolidating some of the concepts we’ve learned so far.

My solution: > Header.jsx

import React, { Component } from 'react';
import logo from '../../logo.svg';
import styled from 'styled-components';

const HeaderStyled = styled.header `
    background-color: #282c34;
    min-height: 20vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: white;
`

const Image = styled.img `
    height: 7rem;
    pointer-events: none;
`

const H1 = styled.h1 `
    font-size: 3.5rem;
`

export default class Header extends Component {
  render() {
    return (
        <HeaderStyled>
            <Image src={logo} alt="React logo" />
            <H1>
              Coin Exchange
            </H1>
          </HeaderStyled>
    )
  }
}