Momentum Project on react

One of the first projects that I have done with React is momentum. The idea of the momentum came from the library, which has always had a website open with a nature background telling time and some other pieces of information.

I have done a momentum project as project during my internship. by doing this project, you will get a better understanding of React, Axios, API and etc.

You can also download the source code of the project from my Github.

React

React is widely used these days by many companies. But first, let's discuss the few reasons that make React so popular.

• In ReactJS, components are individual, reusable pieces of code.The component will return a rendered HTML element after you supply input (referred to as props) if necessary. You can employ them as a main JavaScript function or as a component of a JavaScript class that makes use of the render method.
• React is very flexible. After learning it, you can use it to a wide range of platforms to create high-quality user interfaces. And also,React is NOT a framework, it is a library. React has become such a wonderful tool because to its library-based approach.
• React's design is very user friendly for testing.

Momentum

In the src folder, I made a folder named components which stored all of the components inside of it. In this project, we have eight components one for implementing the code and the other for the design. I have used the Styled library for designing Styled lets you write actual CSS in your JavaScript.

Date

The first thing that we can think about when we want to make momentum is a date. I have used the built-in date in javascript to show the date.

import React from 'react'
import { DateContainer} from './DateStyles';

const DateToday = () => {

    let today = new Date();
    let date = today.getFullYear()+ '/' + today.getMonth() + '/' + today.getDate()
    console.log(today)
  return (
    <DateContainer>
        <p>{date}</p>
    </DateContainer>
  )
}

export default DateToday

Design 💄:

import styled from 'styled-components'

export const DateContainer = styled.div`
    right:0;
    top:0;
    position: absolute;
    padding: 0 1rem;
`

Quote

It would be great if we have some Quotes in our momentum. There is a fantastic Quote API that you can use for free.

import React, {useState, useEffect} from 'react'
import axios from 'axios'

import { QuoteContainer, Text } from './QuoteStyles'

const url ='https://goquotes-api.herokuapp.com/api/v1/random?count=1'

const Quote = () => {
    const [data, setData] = useState(null)

    useEffect(() =>{
        axios.get(url).then((response) =>{
            setData(response.data)
        }).catch((error) =>{
            console.log(error)
        })
    },[])

    console.log(data)

    if(!data) return null

  return (

    <QuoteContainer>
        <Text>{data.quotes[0].text}</Text>
        <Text>-{data.quotes[0].author}</Text>
    </QuoteContainer>
  )
}

export default Quote

Design 💄:

import styled from 'styled-components'

export const QuoteContainer = styled.div`
    position: fixed;
    text-align:center;
    bottom: 0;
    width: 600px;
    left: 50%;
    margin-left: -300px;
    @media screen and (max-width: 600px) {
        width: 350px;
        margin-left: -175px;
    }
`

export const Text = styled.p`
    font-size: 1.2rem;
`

Time

In this part, I want to get a message when I want to tell the time of the user. For example, If it's morning, print Good Morning client or something like that.

import React from 'react'
import Moment from 'react-moment'
import 'moment-timezone'
import { Welcome, TimeStamp, Greeting } from './TimeStyles'


const Time = () => {

    let today = new Date()

    let greeting = () =>{
        if(today.getHours() >= 5 && today.getHours() < 11){
            return 'Good Morning, Client.'
        }else if(today.getHours() >= 11 && today.getHours() < 17){
            return 'Good Afternoon, Client.'
        }else if(today.getHours() >= 17 && today.getHours() < 24){
            return 'Good Evening, Client.'
        }else{
            return "It's a lovely day, isn't it?"
        }
    }

  return (
    <Welcome>
        <TimeStamp><Moment format='LT'></Moment></TimeStamp>
        <Greeting>{greeting()}</Greeting>
    </Welcome>
  )
}

export default Time

Design 💄:

import styled from 'styled-components'

export const Welcome = styled.div`
    position: absolute;
    text-align:center;
    padding: 1rem;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,50%);
    transform: translate(-50%,-50%);
`

export const TimeStamp = styled.p`
    font-size: 8rem;
    font-weight: 500;
    margin: 0;
    padding: 0;
    @media screen and (max-width: 600px) {
        font-size: 5rem;
    }
`

export const Greeting = styled.p`
    font-size: 4rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    @media screen and (max-width:600px) {
        font-size: 3rem;
    }
`

Weather

One of the most important things is the weather. There is a free API that you can use to get weather information. When you send the request to the API, it responds with too much information about the weather of the city that you have entered. You can also use those additional data if you want. You can find your API key from here.

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import {WeatherContainer, Temp, City } from './WeatherStyles'


const url = 'https://api.openweathermap.org/data/2.5/weather?q=budapest&units=imperial&appid=API-KEY'

const Weather = () => {
    const [data, setData] = useState(null)

    useEffect(() =>{
        axios.get(url).then((response) => {
            setData(response.data)
        }).catch((error) => {
            console.log(error)
        })
    },[])

    console.log(data)

    if(!data) return null;

  return (
    <WeatherContainer>
      <Temp>{data.main.temp.toFixed(0)}&#176;</Temp>
      <City>Budapest, HU</City>
    </WeatherContainer>

  )
}

export default Weather

Design 💄:

import styled from 'styled-components'

export const WeatherContainer = styled.div`
    margin: 1rem;
    position: absolute;
`

export const Temp = styled.p`
    font-size: 2rem;
    color: #fff;
    margin: 0;
`
export const City = styled.p`
    text-align: center;
    margin: 4px 0;
`