gyver98

.tesla-car {
  width: 100%;
  min-height: 350px;
  background: #fff url(../../assets/tesla.jpg) no-repeat top center;
  background-size: contain; }

.tesla-car-animation {
  -webkit-animation: slide-in-elliptic-bottom-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	-moz-animation: slide-in-elliptic-bottom-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-elliptic-bottom-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

gyver98

import React from 'react';
import './TeslaCar.css';

const TeslaCar = (props) => (
  <div className="tesla-car tesla-car-animation">
    <div className="tesla-wheels tesla-wheels-animation">
      <div className={`tesla-wheel tesla-wheel--front tesla-wheel--${props.wheelsize}`}></div>
      <div className={`tesla-wheel tesla-wheel--rear tesla-wheel--${props.wheelsize}`}></div>
    </div>
  </div>

gyver98

import React from 'react';
import './TeslaCounter.css';

class TeslaCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animationEffect: false,
      direction: ''
    }

gyver98

import React from 'react';
import './TeslaCounter.css';

class TeslaCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      direction: ''
    }
  }

gyver98

import React from 'react';
import './Header.css';
import logoUrl from '../../assets/logo.svg';

const Header = () => (
  <div className="header header-animation">
    <img src={logoUrl} alt="Tesla" />
  </div>
)

gyver98

.header {
  padding: 25px 0;
  text-align: center;
  background: #222;
}

.header img {
  width: 100px;
  height: 13px;
}

gyver98

.wrapper {
  margin: 100px 0 150px;
}

.tesla-battery {
  width: 1050px;
  margin: 0 auto;
}

.tesla-battery h1 {

gyver98

export const counterDefaultVal = {
  speed: {
    title: "Speed",
    unit: "mph",
    step: 5,
    min: 45,
    max: 70
  },
  temperature: {
    title: "Outside Temperature",

gyver98

import { counterDefaultVal } from '../constants/counterDefaultVal';

export const speedUp = (value) => {
  return {
    type: 'SPEED_UP',
    value,
    step: counterDefaultVal.speed.step,
    maxValue: counterDefaultVal.speed.max
  }
}

gyver98

import React from 'react';
import './TeslaCounter.css';

const TeslaCounter = ({ initValues, currentValue, increment, decrement }) => (
  <div className="tesla-counter">
    <p className="tesla-counter__title">{initValues.title}</p>
    <div className="tesla-counter__container cf">
      <div className="tesla-counter__item">
        <p className="tesla-counter__number">
          { currentValue }