ronashco · Am-Ta · Oct 25, 2019 · Oct 25, 2019 · Oct 25, 2019 · Oct 27, 2019
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+package.lock.json
+yarn.lock
+yarn-error.log
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,13 @@
+const presets = [
+    [
+        "@babel/preset-env",
+        {
+            useBuiltIns: "usage"
+        }
+    ],
+    "@babel/preset-react"
+];
+
+const plugins = ["@babel/plugin-proposal-class-properties"];
+
+module.exports = { presets, plugins };
diff --git a/package.json b/package.json
@@ -0,0 +1,50 @@
+{
+    "name": "reactjs-card-challenge",
+    "version": "1.0.0",
+    "description": "A responsive card based design, to be implemented by React &amp; Redux",
+    "main": "index.js",
+    "scripts": {
+        "dev": "webpack-dev-server --config webpack.dev.js",
+        "build": "webpack --config webpack.prod.js",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Am-Ta/reactjs-card-challenge.git"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "bugs": {
+        "url": "https://github.com/Am-Ta/reactjs-card-challenge/issues"
+    },
+    "homepage": "https://github.com/Am-Ta/reactjs-card-challenge#readme",
+    "devDependencies": {
+        "@babel/core": "^7.6.4",
+        "@babel/plugin-proposal-class-properties": "^7.5.5",
+        "@babel/preset-env": "^7.6.3",
+        "@babel/preset-react": "^7.6.3",
+        "babel-loader": "^8.0.6",
+        "clean-webpack-plugin": "^3.0.0",
+        "css-loader": "^3.2.0",
+        "file-loader": "^4.2.0",
+        "html-webpack-plugin": "^3.2.0",
+        "mini-css-extract-plugin": "^0.8.0",
+        "node-sass": "^4.13.0",
+        "sass-loader": "^8.0.0",
+        "style-loader": "^1.0.0",
+        "webpack": "^4.41.2",
+        "webpack-cli": "^3.3.9",
+        "webpack-dev-server": "^3.9.0"
+    },
+    "dependencies": {
+        "@babel/polyfill": "^7.6.0",
+        "prop-types": "^15.7.2",
+        "react": "^16.11.0",
+        "react-dom": "^16.11.0",
+        "react-redux": "^7.1.1",
+        "redux": "^4.0.4",
+        "redux-devtools-extension": "^2.13.8",
+        "redux-thunk": "^2.3.0"
+    }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <!-- CDN for the fontawesome 5 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
+</head>
+
+<body>
+    <div id="root"></div>
+</body>
+
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,38 @@
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+
+import BtnRandGen from "./component/BtnRandGen";
+import CardBox from "./component/card/CardBox";
+
+import { connect } from "react-redux";
+import { fetchCards } from "./action/CardAction";
+
+import "./App.scss";
+
+const App = ({ cardRes: { card }, fetchCards }) => {
+    // Fetch the cards
+    useEffect(() => {
+        fetchCards();
+    }, []);
+
+    return (
+        <div className='container'>
+            <BtnRandGen />
+            {card && <CardBox />}
+        </div>
+    );
+};
+
+App.propTypes = {
+    cardRes: PropTypes.shape({ card: PropTypes.object }),
+    fetchCards: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => ({
+    cardRes: state.cardRes
+});
+
+export default connect(
+    mapStateToProps,
+    { fetchCards }
+)(App);
diff --git a/src/App.scss b/src/App.scss
@@ -0,0 +1,239 @@
+// Simple css reset
+* {
+    margin: 0;
+    padding: 0;
+}
+
+// Define font
+@font-face {
+    font-family: "JosefinSans";
+    src: url("./assets/font/JosefinSans-Regular.ttf") format("truetype");
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "JosefinSans";
+    src: url("./assets/font/JosefinSans-Bold.ttf") format("truetype");
+    font-weight: 700;
+    font-style: normal;
+}
+
+// Fix the from element font
+input,
+button,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+    outline: none;
+}
+
+// Fix the clear
+html {
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+    -webkit-box-sizing: inherit;
+    -moz-box-sizing: inherit;
+}
+
+// Variables
+$primary-color: #00a4e4;
+$success-color: #00c300;
+$danger-color: #ec1c24;
+$dark-color: #231f20;
+$light-color: #d7d7d8;
+$danger-color: #ff3d00;
+$font-stack: "JosefinSans", Arial, Helvetica, sans-serif;
+
+// Set the global font and color for whole app
+body {
+    font-family: $font-stack;
+    color: $dark-color;
+}
+
+// Container
+.container {
+    width: 90%;
+    min-height: 70vh;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+// Btn Component
+.btn {
+    background-color: transparent;
+    border: none;
+    text-decoration: none;
+    cursor: pointer;
+    padding: 0.5em 1em;
+    border-radius: 3px;
+    transition: 0.5s;
+    &.btn_success {
+        background-color: $success-color;
+        color: #fff;
+        &:hover {
+            background-color: rgba($success-color, 0.8);
+        }
+    }
+    &.btn_primary {
+        background-color: $primary-color;
+        color: #fff;
+        &:hover {
+            background-color: rgba($primary-color, 0.8);
+        }
+    }
+    &.btn_dark {
+        background-color: $dark-color;
+        color: #fff;
+        &:hover {
+            background-color: rgba($dark-color, 0.9);
+        }
+    }
+    &.btn_block {
+        width: 100%;
+    }
+}
+
+// Card-box is wrapper for card item and card updateor
+.card-box {
+    width: 200px;
+}
+
+// Card Item Component
+.card {
+    text-align: center;
+    .card__img-box {
+        width: 100%;
+        .card__img {
+            display: block;
+            width: 100%;
+        }
+    }
+    &.card_show {
+        animation: shake 0.5s ease infinite;
+        -webkit-animation: shake 0.5s ease infinite;
+        -moz-animation: shake 0.5s ease infinite;
+    }
+
+    .card__info {
+        margin: 1em;
+        .card__title {
+            padding: 0.5em;
+            display: flex;
+            justify-content: space-around;
+
+            &.card_sport {
+                color: $success-color;
+            }
+            &.card_fun {
+                color: $primary-color;
+            }
+            &.card_art {
+                color: $danger-color;
+            }
+        }
+    }
+}
+
+// Form Component
+.form {
+    .form__item {
+        margin-bottom: 1em;
+        .form__label {
+            color: $success-color;
+            display: block;
+            padding: 0.25em 0;
+        }
+        .form__input {
+            width: 100%;
+            padding: 0.5em;
+            resize: none;
+            color: rgba($dark-color, 0.8);
+            border: 1px solid #aaa;
+            &:hover,
+            &:focus {
+                border-color: $success-color;
+            }
+        }
+        textarea.form__input {
+            height: 100px;
+        }
+    }
+}
+
+// Animation for cards with code equal to 1
+@keyframes shake {
+    0% {
+        transform: translate(1px, 1px) rotate(0deg);
+        -webkit-transform: translate(1px, 1px) rotate(0deg);
+        -moz-transform: translate(1px, 1px) rotate(0deg);
+    }
+    10% {
+        transform: translate(-1px, -2px) rotate(-1deg);
+        -webkit-transform: translate(-1px, -2px) rotate(-1deg);
+        -moz-transform: translate(-1px, -2px) rotate(-1deg);
+    }
+    20% {
+        transform: translate(-3px, 0px) rotate(1deg);
+        -webkit-transform: translate(-3px, 0px) rotate(1deg);
+        -moz-transform: translate(-3px, 0px) rotate(1deg);
+    }
+    30% {
+        transform: translate(3px, 2px) rotate(0deg);
+        -webkit-transform: translate(3px, 2px) rotate(0deg);
+        -moz-transform: translate(3px, 2px) rotate(0deg);
+    }
+    40% {
+        transform: translate(1px, -1px) rotate(1deg);
+        -webkit-transform: translate(1px, -1px) rotate(1deg);
+        -moz-transform: translate(1px, -1px) rotate(1deg);
+    }
+    50% {
+        transform: translate(-1px, 2px) rotate(-1deg);
+        -webkit-transform: translate(-1px, 2px) rotate(-1deg);
+        -moz-transform: translate(-1px, 2px) rotate(-1deg);
+    }
+    60% {
+        transform: translate(-3px, 1px) rotate(0deg);
+        -webkit-transform: translate(-3px, 1px) rotate(0deg);
+        -moz-transform: translate(-3px, 1px) rotate(0deg);
+    }
+    70% {
+        transform: translate(3px, 1px) rotate(-1deg);
+        -webkit-transform: translate(3px, 1px) rotate(-1deg);
+        -moz-transform: translate(3px, 1px) rotate(-1deg);
+    }
+    80% {
+        transform: translate(-1px, -1px) rotate(1deg);
+        -webkit-transform: translate(-1px, -1px) rotate(1deg);
+        -moz-transform: translate(-1px, -1px) rotate(1deg);
+    }
+    90% {
+        transform: translate(1px, 2px) rotate(0deg);
+        -webkit-transform: translate(1px, 2px) rotate(0deg);
+        -moz-transform: translate(1px, 2px) rotate(0deg);
+    }
+    100% {
+        transform: translate(1px, -2px) rotate(-1deg);
+        -webkit-transform: translate(1px, -2px) rotate(-1deg);
+        -moz-transform: translate(1px, -2px) rotate(-1deg);
+    }
+}
+
+// Screen min-width 40em
+@media screen and (min-width: 40em) {
+    .container {
+        width: 80%;
+        flex-direction: row;
+    }
+}