Merge pull request #14 from AlokTakshak/development

updated the home page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-react-webpack",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "create-react-webpack ",
   "main": "scripts/create.js",
   "bin": {

scripts/dependencies.js

@@ -13,6 +13,7 @@ const DEV_DEPENDENCIES = [
   "css-loader",
   "eslint",
   "eslint-plugin-react",
+  "file-loader",
   "html-webpack-plugin",
   "husky",
   "jest",

template/src/App.css

@@ -10,24 +10,68 @@ html {
   box-sizing: inherit;
 }
 
-.app {
-  background-color: antiquewhite;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 98vh;
+.App {
+  font-family: sans-serif;
+  text-align: center;
+  width: 100%;
+  height: 100vh;
+}
+
+.black {
+  background-color: rgb(46, 43, 43);
   width: 100%;
+  height: 30%;
 }
 
 .button {
-  background-color: red;
-  border-radius: 20px;
-  color: white;
-  font-size: 20px;
-  font-weight: bold;
+  border-radius: 50%;
+  font-size: 30px;
   margin: 10px;
+  width: 40px;
+  height: 40px;
   outline: none;
-  padding-left: 20px;
-  padding-right: 20px;
+}
+.loaderContainer {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-position: center;
+  background-size: 160px;
+  background-repeat: no-repeat;
+  height: 180px;
+  top: -90px;
+  animation: counterClock 3s linear infinite;
+  filter: brightness(0.93);
+}
+
+.loader {
+  width: 100px;
+  height: 100px;
+  animation: clock 2s linear infinite;
+  background-size: 150%;
+  background-position: center;
+}
+
+.text {
+  font-size: 24px;
+  padding: 10px;
+}
+
+@keyframes clock {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes counterClock {
+  0% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
 }

template/src/App.js

@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import { hot } from "react-hot-loader";
 import "./App.css";
+import logo from "../logo/logo.svg";
+import border from "../logo/border.svg";
 
 class App extends Component {
   constructor(props) {
@@ -10,28 +12,31 @@ class App extends Component {
     };
   }
 
+  handleCount(input) {
+    this.setState(prevState => ({ count: prevState.count + input }));
+  }
+
   render() {
     return (
-      <div className="app">
-        <h1>Hello World!</h1>
-        <h2>{`Count : ${this.state.count}`}</h2>
-        <div>
-          <button
-            className="button"
-            onClick={() => {
-              this.setState(state => ({ count: state.count + 1 }));
-            }}
-          >
-            +
-          </button>
-          <button
-            className="button"
-            onClick={() => {
-              this.setState(state => ({ count: state.count - 1 }));
-            }}
+      <div>
+        <div className="App">
+          <div className="black" />
+          <div
+            className="loaderContainer"
+            style={{ backgroundImage: `url(${border})` }}
           >
-            -
-          </button>
+            <img className="loader" src={logo} width={100} height={100} />
+          </div>
+          <div className="text">Hello World!</div>
+          <div className="text">{this.state.count}</div>
+          <div className="buttons">
+            <button className="button" onClick={() => this.handleCount(1)}>
+              +
+            </button>
+            <button className="button" onClick={() => this.handleCount(-1)}>
+              -
+            </button>
+          </div>
         </div>
       </div>
     );

template/webpack.config.base.js

@@ -20,6 +20,10 @@ module.exports = {
         test: /\.css$/,
         use: ["style-loader", "css-loader"],
         exclude: /node_modules/
+      },
+      {
+        test: /\.svg$/,
+        use: "file-loader"
       }
     ]
   },