Skip to content

Instantly share code, notes, and snippets.

Avatar

gyver98

  • Melbourne Australia
View GitHub Profile
View TeslaCar-part3.css
.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;
View TeslaCar-part3.js
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>
View final TeslaCounter-part3.js
import React from 'react';
import './TeslaCounter.css';
class TeslaCounter extends React.Component {
constructor(props) {
super(props);
this.state = {
animationEffect: false,
direction: ''
}
View TeslaCounter-part3.js
import React from 'react';
import './TeslaCounter.css';
class TeslaCounter extends React.Component {
constructor(props) {
super(props);
this.state = {
direction: ''
}
}
View Header.js
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>
)
View Header.css
.header {
padding: 25px 0;
text-align: center;
background: #222;
}
.header img {
width: 100px;
height: 13px;
}
View App.css
.wrapper {
margin: 100px 0 150px;
}
.tesla-battery {
width: 1050px;
margin: 0 auto;
}
.tesla-battery h1 {
View counterDefaultVal.js
export const counterDefaultVal = {
speed: {
title: "Speed",
unit: "mph",
step: 5,
min: 45,
max: 70
},
temperature: {
title: "Outside Temperature",
View index.js
import { counterDefaultVal } from '../constants/counterDefaultVal';
export const speedUp = (value) => {
return {
type: 'SPEED_UP',
value,
step: counterDefaultVal.speed.step,
maxValue: counterDefaultVal.speed.max
}
}
View TeslaCounter.js
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 }