SebastianDevelops/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Javascript Calculator</title>

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.4/redux.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.1.0/react-redux.js"></script>


    <link href="https://fonts.googleapis.com/css?family=Comfortaa|Graduate&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/3431e6ad2c.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <script src="src/App.js" type="text/babel"></script>
    <div class="root-container" id = "root"></div>
    <footer>
        <p class="footer-text">Created by Sebastian Van Rooyen for the "<a class="footer-link"
                href="https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator"
                title="Build a JavaScript calculator in FreeCodeCamp">Build a JavaScript Calculator
                challenge</a>" at FreeCodeCamp (January, 2021)</p>

        <a class="footer-link" href="https://github.com/SebastianDevelops" target="_blank" title="Link to my GitHub profile">
            <i class="fab fa-github fa-3x profile-icon"></i></a>
        <a class="footer-link" href="https://www.freecodecamp.org/SebastianDevelops" target="_blank"
            title="Link to my FreeCodeCamp profile">
            <i class="fab fa-free-code-camp fa-3x profile-icon"></i></a>
    </footer>
</body>

</html>

## javascript-calculator.markdown

      
    Raw
  

              javascript-calculator.markdown
            
          
    JavaScript Calculator

A Pen by SebastianDevelops on CodePen.
License.

  
## script.js
//COMPONENTS

//DISPLAY
const Display = (props) => {
    return (
        <div className="display-container" id="display-container">
            <div id="display-input" className="display">
                {props.input}
            </div>
            <div id="display" className="display">
                {props.operation}
            </div>
        </div>
    )
}

const contains_decimal = (/\./)

//NUMPAD
const NumPad = (props) => {

    function handleNumPadClick(e) {
        if (e.target.value == "." && !contains_decimal.test(props.input)) {
            props.addNewDecimal()
        } else if (e.target.value == "0") {
            props.addNewZero()
        } else if (props.input.length == 1 && props.input == 0) {
            props.addFirstNumber_dispatched(e.target.value)
        } else if((/[0-9]/).test(e.target.value)){
            props.addNewNumber(e.target.value)
        }
    }


    return (
        <div className="keypad numpad" onClick={handleNumPadClick}>
            <button id="one" value="1">1</button>
            <button id="two" value="2">2</button>
            <button id="three" value="3">3</button>
            <button id="four" value="4">4</button>
            <button id="five" value="5">5</button>
            <button id="six" value="6">6</button>
            <button id="seven" value="7">7</button>
            <button id="eight" value="8">8</button>
            <button id="nine" value="9">9</button>
            <button id="zero" value="0">0</button>
            <button id="decimal" tabIndex="0" value=".">.</button>
        </div>
    )
}

//OPERATOR PAD
const Operators = (props) => {
    function handleOperatorsClick(e) {
        if (e.target.value == "=") {
            props.evaluateOperation_dispatched(props.operation)
        } else if (e.target.value == "clear") {
            props.clearResultAndOperation_dispatched()
        } else {
            props.addNewOperator(e.target.value)
        }
    }

    return (
        <div className="keypad operators" onClick={handleOperatorsClick} tabIndex="1">
            <button id="add" value="+">+</button>
            <button id="subtract" value="-">-</button>
            <button id="multiply" value="*">x</button>
            <button id="divide" value="/">/</button>
            <button id="equals" value="=">=</button>
            <button id="clear" value="clear">AC</button>
        </div>
    )
}

//PRESENTATIONAL COMPONENT

class Presentational extends React.Component {
    constructor(props) {
        super(props);
        this.handleKeyDown = this.handleKeyDown.bind(this)
    }

    handleKeyDown(e) {
        if (e.key == "." && !contains_decimal.test(this.props.input)) {
            this.props.addNewDecimal()
        } else if (e.key == "0") {
            this.props.addNewZero()
        } else if (this.props.input.length == 1 && this.props.input == 0) {
            this.props.addFirstNumber_dispatched(e.key)
        } else if ((/[0-9]/).test(e.key)){
            this.props.addNewNumber(e.key)
        } else if (e.key == "=") {
            this.props.evaluateOperation_dispatched(this.props.operation)
        } else if(e.key =="C" || e.key == "c") {
            this.props.clearResultAndOperation_dispatched()
        } else if ((/\/|\*|\-|\+/).test(e.key)){
            this.props.addNewOperator(e.key)
        }
    }

    componentDidMount(){
        document.addEventListener("keydown", this.handleKeyDown, false);
      }

    componentWillUnmount(){
        document.removeEventListener("keydown", this.handleKeyDown, false);
    }


    render() {
        return (
            <div className="container">
                <Display
                    input={this.props.input}
                    operation={this.props.operation}
                    result={this.props.result} />
                <div className="keypad-container">
                    <NumPad
                        input={this.props.input} addFirstNumber_dispatched={this.props.addFirstNumber_dispatched} addNewNumber={this.props.addNewNumber} addNewDecimal={this.props.addNewDecimal} addNewZero={this.props.addNewZero} />

                    <Operators
                        operation={this.props.operation}
                        addNewOperator={this.props.addNewOperator}
                        evaluateOperation_dispatched={this.props.evaluateOperation_dispatched}
                        result={this.props.result}
                        clearResultAndOperation_dispatched={this.props.clearResultAndOperation_dispatched} />
                </div>
            </div >
        )
    }
}

////////////////////////////////////////////////
// REDUX

const FIRST_NUMBER = 'FIRST_NUMBER'
const ADD_NUMBER = 'ADD_NUMBER'
const ADD_DECIMAL = 'ADD_DECIMAL'
const ADD_ZERO = 'ADD_ZERO'
const ADD_OPERATOR = 'ADD_OPERATOR'
const EVALUATE = 'EVALUATE'
const CLEAR = 'CLEAR'

//ACTION CREATOR
const addFirstNumber = (number) => {
    return {
        type: FIRST_NUMBER,
        number: number
    }
}

const addNumber = (number) => {
    return {
        type: ADD_NUMBER,
        number: number
    }
}

const addDecimal = () => {
    return {
        type: ADD_DECIMAL
    }
}

const addZero = (number) => {
    return {
        type: ADD_ZERO,
        number: number
    }
}

const addOperator = (operator) => {
    return {
        type: ADD_OPERATOR,
        operator: operator
    }
}

const evaluateOperation = (operation) => {
    return {
        type: EVALUATE,
        operation: operation
    }
}

const clearResultAndOperation = () => {
    return {
        type: CLEAR,
    }
}

//REDUCER

const inputReducer = (state = '0', action) => {
    switch (action.type) {
        case FIRST_NUMBER:
            return eval(parseInt(state + action.number))
        case ADD_NUMBER:
            return state + action.number
        case ADD_DECIMAL:
            if (state.toString().length == 1) {
                console.log("asd")
                return state + '.'//if it's first number just add the decimal
            } else if (state[state.length - 1].indexOf('.') == -1) {
                return state + '.'//if it's not the first number, check that the last character is not a decimal to avoid repetition
            }
            return state
        case ADD_ZERO:
            if (contains_decimal.test(state) || state != "0") {
                return state + "0"
            }
            return state
        case ADD_OPERATOR:
            return action.operator
        case EVALUATE:
            try {
                return eval(state)
            } catch (err) {
                return state
            }
        case CLEAR:
            state = '0'
        default:
            return state
    }
}

const outputReducer = (state = '0', action) => {
    switch (action.type) {
        case FIRST_NUMBER:
            return eval(parseInt(state + action.number))
        case ADD_NUMBER:
            return state + action.number
        case ADD_DECIMAL:
            if (state.toString().length == 1) {
                return state + '.'
            } else if (state[state.length - 1].indexOf('.') == -1) {
                return state + '.'
            }
            return state
        case ADD_ZERO:
            if (contains_decimal.test(state) || state != "0") {
                return state + "0"
            }
            return state
        case ADD_OPERATOR:
            var is_operator = (/\/|\*|\-|\+/)
            var is_number = (/[0-9]/)
            var two_operators = /(\/|\*|\-|\+){2}/

            if (two_operators.test(state.toString().slice(-2))) {
                return state.replace(state.toString().slice(-2), action.operator)
            } else if (is_number.test(state) && state.toString().length == 1 || is_number.test(state[state.length - 1])) {
                return state + action.operator

            } else if (is_operator.test(state[state.length - 1]) && action.operator != "-") {
                return state.substring(0, state.length - 1) + action.operator
            } else if (is_operator.test(state[state.length - 1]) && state[state.length - 1] != "-") {
                return state + action.operator
            }
            return state + action.operator

        case EVALUATE:
            try {
                return eval(state)
            } catch (err) {
                alert("Please finish the operation or clear input (AC)")
                return state
            }
        case CLEAR:
            state = '0'
        default:
            return state
    }
}

//STORE

const rootReducer = Redux.combineReducers({ input: inputReducer, operation: outputReducer });

const store = Redux.createStore(rootReducer);

//CONNECT TO REACT-REDUX
const Provider = ReactRedux.Provider;

//MAP STATE AND PROPS
function mapStateToProps(state) {
    return ({
        input: state.input,
        operation: state.operation,
    })
}

function mapDispatchToProps(dispatch) {
    return ({
        addFirstNumber_dispatched: (number) => {
            dispatch(addFirstNumber(number))
        },
        addNewNumber: (number) => {
            dispatch(addNumber(number))
        },
        addNewDecimal: () => {
            dispatch(addDecimal())
        },
        addNewZero: (number) => {
            dispatch(addZero(number))
        },
        addNewOperator: (operator) => {
            dispatch(addOperator(operator))
        },
        evaluateOperation_dispatched: (operation) => {
            dispatch(evaluateOperation(operation))
        },
        clearResultAndOperation_dispatched: () => {
            dispatch(clearResultAndOperation())
        }
    })
}

const Container = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(Presentational)

class AppWrapper extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <Container />
            </Provider>
        )
    }
}

ReactDOM.render(<AppWrapper />, document.getElementById("root"))

## style.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #203055;
    display: flex;
    font-family: 'Comfortaa', cursive;
    justify-content: center;
}

.root-container {
    background: #EDEEF1;
    border: 2px solid black;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    position: absolute;
    top: 42.5%;
    transform: translateY(-50%);
}

.display-container {
    display: flex;
    flex-direction: column;

    background: #6b778d;
    cursor: default;
    font-family: 'Graduate', cursive;
    font-size: 1.2em;
    text-align: right;
    margin-bottom: 3px;
    padding: 2px 5px 2px 0;
    width: 223px;
}

.display {
    display: flex;
    justify-content: flex-end;
    overflow-x: auto;
}

.keypad-container {
    display: flex;
    width: 220px;
}

.keypad>button {
    border: none;
    cursor: pointer;
    font-size: 1em;
    font-family: 'Comfortaa', cursive;
    transition: 0.15s;
}

.keypad>button:hover {
    background: #EDEEF1;
}

.numpad>button:active {
    background: #ff6768;
}

.operators>button:active {
    background: #6b778d;
}

.numpad {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    background: #ff6768;
    margin-right: 2px;
    width: 180px;
}

.numpad>button {
    background: #ff6768;
    height: 55px;
    width: 55px;
}

button[value="0"] {
    width: 62%;
}

.operators {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #6b778d;
    width: 40px;
}

.operators>button {
    background: #6b778d;
    font-weight: bold;
    height: 45px;
    width: 45px;
}

footer {
    background: #EDEEF1;
    bottom: 0;
    font-size: 0.9em;
    left: 0;
    padding: 10px 0;
    position: absolute;
    right: 0;
    text-align: center
}

.footer-link {
    text-decoration: none;
}

.footer-link:hover {
    color: gray;
}

.footer-text {
    display: none;
    padding-bottom: 10px;
}

.fab {
    color: black;
}

.fab:hover {
    color: gray
}

@media only screen and (min-width : 640px) and (min-height: 600px) {
    .display-container {
        height: 70px;
        width: 268px;
    }

    .display {
        align-items: center;
        font-size: 1.2em;
        height: 40px;
    }

    .keypad-container {
        width: auto;
        height: auto;
        border: 1px solid red;
    }

    .keypad>button {
        font-size: 1.2em;
    }

    .numpad {
        margin-right: 10px;
        width: 210px;
    }

    .numpad>button {
        height: 70px;
        width: 70px;
    }

    .operators>button {
        height: 55px;
        width: 55px;
    }

    .footer-text {
        display: block;
    }
}

@media only screen and (min-width : 640px) and (min-height: 900px) {
    .display-container {
        height: 100px;
        width: 378px;
    }

    .display {
        align-items: center;
        font-size: 1.5em;
        height: 50px;
    }

    .keypad-container {
        width: 380px;
    }

    .keypad>button {
        font-size: 1.4em;
    }

    .numpad {
        margin-right: 20px;
        width: 300px;
    }

    .numpad>button {
        height: 100px;
        width: 100px;
    }

    .operators>button {
        height: 75px;
        width: 75px;
    }

    .footer-text {
        display: block;
    }
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Javascript Calculator</title>

	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.4/redux.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.1.0/react-redux.js"></script>


	<link href="https://fonts.googleapis.com/css?family=Comfortaa\|Graduate&display=swap" rel="stylesheet">
	<script src="https://kit.fontawesome.com/3431e6ad2c.js"></script>
	<link rel="stylesheet" href="styles.css">
	</head>

	<body>
	<script src="src/App.js" type="text/babel"></script>
	<div class="root-container" id = "root"></div>
	<footer>
	<p class="footer-text">Created by Sebastian Van Rooyen for the "<a class="footer-link"
	href="https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator"
	title="Build a JavaScript calculator in FreeCodeCamp">Build a JavaScript Calculator
	challenge</a>" at FreeCodeCamp (January, 2021)</p>

	<a class="footer-link" href="https://github.com/SebastianDevelops" target="_blank" title="Link to my GitHub profile">
	<i class="fab fa-github fa-3x profile-icon"></i></a>
	<a class="footer-link" href="https://www.freecodecamp.org/SebastianDevelops" target="_blank"
	title="Link to my FreeCodeCamp profile">
	<i class="fab fa-free-code-camp fa-3x profile-icon"></i></a>
	</footer>
	</body>

	</html>
	//COMPONENTS

	//DISPLAY
	const Display = (props) => {
	return (
	<div className="display-container" id="display-container">
	<div id="display-input" className="display">
	{props.input}
	</div>
	<div id="display" className="display">
	{props.operation}
	</div>
	</div>
	)
	}

	const contains_decimal = (/\./)

	//NUMPAD
	const NumPad = (props) => {

	function handleNumPadClick(e) {
	if (e.target.value == "." && !contains_decimal.test(props.input)) {
	props.addNewDecimal()
	} else if (e.target.value == "0") {
	props.addNewZero()
	} else if (props.input.length == 1 && props.input == 0) {
	props.addFirstNumber_dispatched(e.target.value)
	} else if((/[0-9]/).test(e.target.value)){
	props.addNewNumber(e.target.value)
	}
	}


	return (
	<div className="keypad numpad" onClick={handleNumPadClick}>
	<button id="one" value="1">1</button>
	<button id="two" value="2">2</button>
	<button id="three" value="3">3</button>
	<button id="four" value="4">4</button>
	<button id="five" value="5">5</button>
	<button id="six" value="6">6</button>
	<button id="seven" value="7">7</button>
	<button id="eight" value="8">8</button>
	<button id="nine" value="9">9</button>
	<button id="zero" value="0">0</button>
	<button id="decimal" tabIndex="0" value=".">.</button>
	</div>
	)
	}

	//OPERATOR PAD
	const Operators = (props) => {
	function handleOperatorsClick(e) {
	if (e.target.value == "=") {
	props.evaluateOperation_dispatched(props.operation)
	} else if (e.target.value == "clear") {
	props.clearResultAndOperation_dispatched()
	} else {
	props.addNewOperator(e.target.value)
	}
	}

	return (
	<div className="keypad operators" onClick={handleOperatorsClick} tabIndex="1">
	<button id="add" value="+">+</button>
	<button id="subtract" value="-">-</button>
	<button id="multiply" value="*">x</button>
	<button id="divide" value="/">/</button>
	<button id="equals" value="=">=</button>
	<button id="clear" value="clear">AC</button>
	</div>
	)
	}

	//PRESENTATIONAL COMPONENT

	class Presentational extends React.Component {
	constructor(props) {
	super(props);
	this.handleKeyDown = this.handleKeyDown.bind(this)
	}

	handleKeyDown(e) {
	if (e.key == "." && !contains_decimal.test(this.props.input)) {
	this.props.addNewDecimal()
	} else if (e.key == "0") {
	this.props.addNewZero()
	} else if (this.props.input.length == 1 && this.props.input == 0) {
	this.props.addFirstNumber_dispatched(e.key)
	} else if ((/[0-9]/).test(e.key)){
	this.props.addNewNumber(e.key)
	} else if (e.key == "=") {
	this.props.evaluateOperation_dispatched(this.props.operation)
	} else if(e.key =="C" \|\| e.key == "c") {
	this.props.clearResultAndOperation_dispatched()
	} else if ((/\/\|\*\|\-\|\+/).test(e.key)){
	this.props.addNewOperator(e.key)
	}
	}

	componentDidMount(){
	document.addEventListener("keydown", this.handleKeyDown, false);
	}

	componentWillUnmount(){
	document.removeEventListener("keydown", this.handleKeyDown, false);
	}


	render() {
	return (
	<div className="container">
	<Display
	input={this.props.input}
	operation={this.props.operation}
	result={this.props.result} />
	<div className="keypad-container">
	<NumPad
	input={this.props.input} addFirstNumber_dispatched={this.props.addFirstNumber_dispatched} addNewNumber={this.props.addNewNumber} addNewDecimal={this.props.addNewDecimal} addNewZero={this.props.addNewZero} />

	<Operators
	operation={this.props.operation}
	addNewOperator={this.props.addNewOperator}
	evaluateOperation_dispatched={this.props.evaluateOperation_dispatched}
	result={this.props.result}
	clearResultAndOperation_dispatched={this.props.clearResultAndOperation_dispatched} />
	</div>
	</div >
	)
	}
	}

	////////////////////////////////////////////////
	// REDUX

	const FIRST_NUMBER = 'FIRST_NUMBER'
	const ADD_NUMBER = 'ADD_NUMBER'
	const ADD_DECIMAL = 'ADD_DECIMAL'
	const ADD_ZERO = 'ADD_ZERO'
	const ADD_OPERATOR = 'ADD_OPERATOR'
	const EVALUATE = 'EVALUATE'
	const CLEAR = 'CLEAR'

	//ACTION CREATOR
	const addFirstNumber = (number) => {
	return {
	type: FIRST_NUMBER,
	number: number
	}
	}

	const addNumber = (number) => {
	return {
	type: ADD_NUMBER,
	number: number
	}
	}

	const addDecimal = () => {
	return {
	type: ADD_DECIMAL
	}
	}

	const addZero = (number) => {
	return {
	type: ADD_ZERO,
	number: number
	}
	}

	const addOperator = (operator) => {
	return {
	type: ADD_OPERATOR,
	operator: operator
	}
	}

	const evaluateOperation = (operation) => {
	return {
	type: EVALUATE,
	operation: operation
	}
	}

	const clearResultAndOperation = () => {
	return {
	type: CLEAR,
	}
	}

	//REDUCER

	const inputReducer = (state = '0', action) => {
	switch (action.type) {
	case FIRST_NUMBER:
	return eval(parseInt(state + action.number))
	case ADD_NUMBER:
	return state + action.number
	case ADD_DECIMAL:
	if (state.toString().length == 1) {
	console.log("asd")
	return state + '.'//if it's first number just add the decimal
	} else if (state[state.length - 1].indexOf('.') == -1) {
	return state + '.'//if it's not the first number, check that the last character is not a decimal to avoid repetition
	}
	return state
	case ADD_ZERO:
	if (contains_decimal.test(state) \|\| state != "0") {
	return state + "0"
	}
	return state
	case ADD_OPERATOR:
	return action.operator
	case EVALUATE:
	try {
	return eval(state)
	} catch (err) {
	return state
	}
	case CLEAR:
	state = '0'
	default:
	return state
	}
	}

	const outputReducer = (state = '0', action) => {
	switch (action.type) {
	case FIRST_NUMBER:
	return eval(parseInt(state + action.number))
	case ADD_NUMBER:
	return state + action.number
	case ADD_DECIMAL:
	if (state.toString().length == 1) {
	return state + '.'
	} else if (state[state.length - 1].indexOf('.') == -1) {
	return state + '.'
	}
	return state
	case ADD_ZERO:
	if (contains_decimal.test(state) \|\| state != "0") {
	return state + "0"
	}
	return state
	case ADD_OPERATOR:
	var is_operator = (/\/\|\*\|\-\|\+/)
	var is_number = (/[0-9]/)
	var two_operators = /(\/\|\*\|\-\|\+){2}/

	if (two_operators.test(state.toString().slice(-2))) {
	return state.replace(state.toString().slice(-2), action.operator)
	} else if (is_number.test(state) && state.toString().length == 1 \|\| is_number.test(state[state.length - 1])) {
	return state + action.operator

	} else if (is_operator.test(state[state.length - 1]) && action.operator != "-") {
	return state.substring(0, state.length - 1) + action.operator
	} else if (is_operator.test(state[state.length - 1]) && state[state.length - 1] != "-") {
	return state + action.operator
	}
	return state + action.operator

	case EVALUATE:
	try {
	return eval(state)
	} catch (err) {
	alert("Please finish the operation or clear input (AC)")
	return state
	}
	case CLEAR:
	state = '0'
	default:
	return state
	}
	}

	//STORE

	const rootReducer = Redux.combineReducers({ input: inputReducer, operation: outputReducer });

	const store = Redux.createStore(rootReducer);

	//CONNECT TO REACT-REDUX
	const Provider = ReactRedux.Provider;

	//MAP STATE AND PROPS
	function mapStateToProps(state) {
	return ({
	input: state.input,
	operation: state.operation,
	})
	}

	function mapDispatchToProps(dispatch) {
	return ({
	addFirstNumber_dispatched: (number) => {
	dispatch(addFirstNumber(number))
	},
	addNewNumber: (number) => {
	dispatch(addNumber(number))
	},
	addNewDecimal: () => {
	dispatch(addDecimal())
	},
	addNewZero: (number) => {
	dispatch(addZero(number))
	},
	addNewOperator: (operator) => {
	dispatch(addOperator(operator))
	},
	evaluateOperation_dispatched: (operation) => {
	dispatch(evaluateOperation(operation))
	},
	clearResultAndOperation_dispatched: () => {
	dispatch(clearResultAndOperation())
	}
	})
	}

	const Container = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(Presentational)

	class AppWrapper extends React.Component {
	render() {
	return (
	<Provider store={store}>
	<Container />
	</Provider>
	)
	}
	}

	ReactDOM.render(<AppWrapper />, document.getElementById("root"))
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	background: #203055;
	display: flex;
	font-family: 'Comfortaa', cursive;
	justify-content: center;
	}

	.root-container {
	background: #EDEEF1;
	border: 2px solid black;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	padding: 10px;
	position: absolute;
	top: 42.5%;
	transform: translateY(-50%);
	}

	.display-container {
	display: flex;
	flex-direction: column;

	background: #6b778d;
	cursor: default;
	font-family: 'Graduate', cursive;
	font-size: 1.2em;
	text-align: right;
	margin-bottom: 3px;
	padding: 2px 5px 2px 0;
	width: 223px;
	}

	.display {
	display: flex;
	justify-content: flex-end;
	overflow-x: auto;
	}

	.keypad-container {
	display: flex;
	width: 220px;
	}

	.keypad>button {
	border: none;
	cursor: pointer;
	font-size: 1em;
	font-family: 'Comfortaa', cursive;
	transition: 0.15s;
	}

	.keypad>button:hover {
	background: #EDEEF1;
	}

	.numpad>button:active {
	background: #ff6768;
	}

	.operators>button:active {
	background: #6b778d;
	}

	.numpad {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	background: #ff6768;
	margin-right: 2px;
	width: 180px;
	}

	.numpad>button {
	background: #ff6768;
	height: 55px;
	width: 55px;
	}

	button[value="0"] {
	width: 62%;
	}

	.operators {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;

	background: #6b778d;
	width: 40px;
	}

	.operators>button {
	background: #6b778d;
	font-weight: bold;
	height: 45px;
	width: 45px;
	}

	footer {
	background: #EDEEF1;
	bottom: 0;
	font-size: 0.9em;
	left: 0;
	padding: 10px 0;
	position: absolute;
	right: 0;
	text-align: center
	}

	.footer-link {
	text-decoration: none;
	}

	.footer-link:hover {
	color: gray;
	}

	.footer-text {
	display: none;
	padding-bottom: 10px;
	}

	.fab {
	color: black;
	}

	.fab:hover {
	color: gray
	}

	@media only screen and (min-width : 640px) and (min-height: 600px) {
	.display-container {
	height: 70px;
	width: 268px;
	}

	.display {
	align-items: center;
	font-size: 1.2em;
	height: 40px;
	}

	.keypad-container {
	width: auto;
	height: auto;
	border: 1px solid red;
	}

	.keypad>button {
	font-size: 1.2em;
	}

	.numpad {
	margin-right: 10px;
	width: 210px;
	}

	.numpad>button {
	height: 70px;
	width: 70px;
	}

	.operators>button {
	height: 55px;
	width: 55px;
	}

	.footer-text {
	display: block;
	}
	}

	@media only screen and (min-width : 640px) and (min-height: 900px) {
	.display-container {
	height: 100px;
	width: 378px;
	}

	.display {
	align-items: center;
	font-size: 1.5em;
	height: 50px;
	}

	.keypad-container {
	width: 380px;
	}

	.keypad>button {
	font-size: 1.4em;
	}

	.numpad {
	margin-right: 20px;
	width: 300px;
	}

	.numpad>button {
	height: 100px;
	width: 100px;
	}

	.operators>button {
	height: 75px;
	width: 75px;
	}

	.footer-text {
	display: block;
	}
	}