Home Explore Help
Register Sign In
surstrommed
/
react-layout
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Commit with changes in React layout

Bonyant 2 years ago
parent
8d90ee32c8
commit
d619f85fec
37 changed files with 1178 additions and 16175 deletions
Split View Show Diff Stats
  1. 1 0
      .eslintcache
  2. 254 16006
      package-lock.json
  3. 20 9
      package.json
  4. 10 28
      public/index.html
  5. 275 33
      src/App.css
  6. 9 30
      src/App.js
  7. 0 5
      src/Box.js
  8. 67 0
      src/Components/DigitManager.js
  9. 47 0
      src/Components/Employee.js
  10. 45 0
      src/Components/Employees.js
  11. 60 0
      src/Components/Header.js
  12. 11 0
      src/Components/Person.js
  13. 19 0
      src/Components/Post.js
  14. 11 0
      src/Components/Spinner.js
  15. 73 0
      src/Components/Stopwatch.js
  16. 27 0
      src/Components/Timer.js
  17. 0 7
      src/Content.js
  18. 0 7
      src/Footer.js
  19. 0 7
      src/Header.js
  20. 39 0
      src/Pages/About.js
  21. 45 0
      src/Pages/Contacts.js
  22. 49 0
      src/Pages/Home.js
  23. 16 0
      src/Pages/News.js
  24. 20 0
      src/Pages/Numbers.js
  25. 13 0
      src/Pages/Team.js
  26. 0 7
      src/Sidebar.js
  27. 0 7
      src/Sidebar2.js
  28. 0 8
      src/Wrapper.js
  29. 40 0
      src/data/data.json
  30. 22 0
      src/data/db.json
  31. BIN
      src/images/banner.jpg
  32. BIN
      src/images/logo192.png
  33. BIN
      src/images/logo512.png
  34. BIN
      src/images/road.jpg
  35. BIN
      src/images/site.jpg
  36. 0 13
      src/index.css
  37. 5 8
      src/index.js

File diff suppressed because it is too large
+ 1 - 0
.eslintcache


File diff suppressed because it is too large
+ 254 - 16006
package-lock.json


+ 20 - 9
package.json
View File 

@@ -1,15 +1,20 @@
 
 {
 
-  "name": "first_task",
 
+  "name": "react-layout",
 
   "version": "0.1.0",
 
   "private": true,
 
   "dependencies": {
 
-    "@testing-library/jest-dom": "^5.14.1",
 
-    "@testing-library/react": "^11.2.7",
 
-    "@testing-library/user-event": "^12.8.3",
 
-    "react": "^17.0.2",
 
-    "react-dom": "^17.0.2",
 
-    "react-scripts": "4.0.3",
 
-    "web-vitals": "^1.1.2"
 
+    "@testing-library/jest-dom": "^5.11.6",
 
+    "@testing-library/react": "^11.1.2",
 
+    "@testing-library/user-event": "^12.2.2",
 
+    "bootstrap": "^4.5.3",
 
+    "react": "^17.0.1",
 
+    "react-bootstrap": "^1.4.0",
 
+    "react-dom": "^17.0.1",
 
+    "react-layout-components": "^3.0.6",
 
+    "react-router": "^5.2.0",
 
+    "react-router-dom": "^5.2.0",
 
+    "react-scripts": "4.0.0",
 
+    "web-vitals": "^0.2.4"
 
   },
 
   "scripts": {
 
     "start": "react-scripts start",
 
@@ -34,5 +39,11 @@
 
       "last 1 firefox version",
 
       "last 1 safari version"
 
     ]
 
-  }
 
+  },
 
+  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
 
+  "main": "index.js",
 
+  "devDependencies": {},
 
+  "keywords": [],
 
+  "author": "",
 
+  "license": "ISC"
 
 }

+ 10 - 28
public/index.html
View File 

@@ -5,39 +5,21 @@
 
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta name="theme-color" content="#000000" />
 
-    <meta
 
-      name="description"
 
-      content="Web site created using create-react-app"
 
-    />
 
+    <meta name="description" content="Web site created using create-react-app" />
 
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-    <!--
 
-      manifest.json provides metadata used when your web app is installed on a
 
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 
-    -->
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-    <!--
 
-      Notice the use of %PUBLIC_URL% in the tags above.
 
-      It will be replaced with the URL of the `public` folder during the build.
 
-      Only files inside the `public` folder can be referenced from the HTML.
 
-
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
 
-      work correctly both with client-side routing and a non-root public URL.
 
-      Learn how to configure a non-root public URL by running `npm run build`.
 
-    -->
 
-    <title>React App</title>
 
+    <title>WhiteSource</title>
 
   </head>
 
+
 
   <body>
 
-    <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id="root"></div>
 
-    <!--
 
-      This HTML file is a template.
 
-      If you open it directly in the browser, you will see an empty page.
 
-
 
-      You can add webfonts, meta tags, or analytics to this file.
 
-      The build step will place the bundled scripts into the <body> tag.
 
 
-      To begin the development, run `npm start` or `yarn start`.
 
-      To create a production bundle, use `npm run build` or `yarn build`.
 
-    -->
 
+    <script type="text/javascript">
 
+      window.addEventListener('scroll', ()=>{
 
+          let header = document.querySelector('.fix');
 
+          header.classList.toggle('sticky', window.scrollY>0)
 
+      });
 
+    </script>
 
   </body>
 
+  
 </html>

+ 275 - 33
src/App.css
View File 

@@ -1,48 +1,290 @@
 
-.wrapper {
 
-  margin: 2rem;
 
+body {
 
+  height: auto;
 
+  scroll-behavior: smooth;
 
 }
 
-
 
-.sign {
 
-  margin: 0 2rem;
 
+.heading {
 
+  margin: 100px 0;
 
+  text-align: center;
 
+}
 
+.fix {
 
+  position: fixed;
 
+  z-index: 1000;
 
+  width: 100%;
 
+  top: 0;
 
+}
 
+.date {
 
+  text-align: right;
 
   font-weight: bold;
 
 }
 
-
 
-.main {
 
+.headcont {
 
+  margin: 50px 0;
 
+  color: black;
 
+  text-align: center;
 
+}
 
+.headcont h2 {
 
+  margin: 0 0 50px 0;
 
+}
 
+.fix.sticky {
 
+  position: fixed;
 
+  z-index: 1000;
 
+  width: 100%;
 
+  top: 0;
 
+}
 
+.textBt {
 
+  margin: 0 100px;
 
+}
 
+.content {
 
   display: flex;
 
-  flex-grow: 1;
 
-  flex-direction: row;
 
-  height: 50rem;
 
+  justify-content: space-between;
 
+  padding: 0 50px;
 
+  margin: 100px 0;
 
 }
 
-
 
-.main .content {
 
-  flex-grow: 3;
 
+.contentBx {
 
+  padding-right: 30px;
 
 }
 
-
 
-.header {
 
+.contentBx h3 {
 
   font-size: 24px;
 
-  padding: 2rem;
 
-  background-color: blanchedalmond;
 
-  text-align: center;
 
+  margin-bottom: 10px;
 
 }
 
-
 
-.content {
 
-  padding: 2rem;
 
-  background-color: lightcoral;
 
+.banner {
 
+  position: relative;
 
+  min-height: 100vh;
 
+  background: url(./images/banner.jpg);
 
+  background-size: cover;
 
+  background-position: right;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
 }
 
-
 
-.sidebar {
 
-  background-color: goldenrod;
 
-  padding: 2rem;
 
+.banner h2 {
 
+  font-size: 3em;
 
+  color: #fff;
 
+  font-weight: 500;
 
+  line-height: 1.5em;
 
+}
 
+.banner h2 span {
 
+  font-size: 1.5em;
 
+  font-weight: 700;
 
+}
 
+.banner h3 {
 
+  font-size: 1.5em;
 
+  color: #fff;
 
+  font-weight: 500;
 
+}
 
+.about {
 
+  height: 110vh;
 
+}
 
+.btnAbout {
 
+  position: relative;
 
+  background: #2196f3;
 
+  display: inline-block;
 
+  color: #fff;
 
+  margin-top: 20px;
 
+  padding: 10px 30px;
 
+  font-size: 18px;
 
+  text-transform: uppercase;
 
+  text-decoration: none;
 
+  letter-spacing: 2px;
 
+  font-weight: 500;
 
 }
 
 
-.sidebar2 {
 
-  background-color: green;
 
-  padding: 2rem;
 
+.btnAbout:hover {
 
+  text-decoration: none;
 
 }
 
 
-.footer {
 
-  font-size: 24px;
 
-  padding: 2rem;
 
-  background-color: lightblue;
 
+.text-muted {
 
+  font-style: italic;
 
+  color: grey;
 
+}
 
+.fa {
 
+  padding: 20px;
 
+  font-size: 20px;
 
   text-align: center;
 
+  text-decoration: none;
 
+  display: inline-block;
 
+  border-radius: 20px;
 
+}
 
+.fa span {
 
+  margin: 0 0 0 10px;
 
+}
 
+.fa:hover {
 
+  text-decoration: none;
 
+  color: white;
 
+  border: 1px solid black;
 
+  font-size: 19px;
 
+}
 
+.fa-facebook {
 
+  background: #3b5998;
 
+  color: white;
 
+}
 
+.fa-twitter {
 
+  background: #55acee;
 
+  color: white;
 
+}
 
+.fa-youtube {
 
+  background: #c4302b;
 
+  color: white;
 
+}
 
+.fa-instagram {
 
+  background: #e1306c;
 
+  color: white;
 
+}
 
+.contactus {
 
+  background-color: white;
 
+  padding: 40px 70px;
 
+  height: 80vh;
 
+}
 
+.contactusBx {
 
+  text-align: center;
 
+  width: 100%;
 
+}
 
+.space {
 
+  white-space: normal;
 
+}
 
+.spacepd {
 
+  padding: 10px 0;
 
+}
 
+.spmar {
 
+  margin: 50px 0 0 0;
 
+}
 
+.prodst {
 
+  width: 14rem;
 
+  padding: 10px;
 
+  height: 30rem;
 
+}
 
+.flexview {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  flex-wrap: wrap;
 
+  margin: 20px;
 
+}
 
+.toDown {
 
+  position: absolute;
 
+  bottom: 10px;
 
+  left: 10px;
 
+}
 
+.toCenter {
 
+  position: absolute;
 
+  bottom: 70px;
 
+  left: 10px;
 
+}
 
+.forImg {
 
+  width: 80%;
 
+}
 
+.forButton {
 
+  margin: 70px 0;
 
+  text-align: center;
 
+}
 
+.w50 {
 
+  width: 50%;
 
+}
 
+.loader {
 
+  margin: 100px 0;
 
+  border: 10px solid #f3f3f3;
 
+  border-top: 10px solid #000000;
 
+  border-radius: 50%;
 
+  width: 60px;
 
+  height: 60px;
 
+  animation: spin 2s linear infinite;
 
+}
 
+@keyframes spin {
 
+  0% {
 
+    transform: rotate(0deg);
 
+  }
 
+  100% {
 
+    transform: rotate(360deg);
 
+  }
 
+}
 
+@media (max-width: 1050px) {
 
+  .bgw50 {
 
+    min-width: 0;
 
+    width: 100%;
 
+    position: absolute;
 
+    left: 0;
 
+    top: 100%;
 
+    margin: 0;
 
+  }
 
+  .w50 {
 
+    margin: 0;
 
+    flex-direction: column;
 
+    text-align: justify;
 
+    height: 80%;
 
+    min-width: 0;
 
+  }
 
+  .content {
 
+    padding: 20px 50px;
 
+    margin: 0;
 
+  }
 
+  .heading {
 
+    margin: 30px;
 
+    color: black;
 
+    text-align: center;
 
+  }
 
+}
 
+@media (max-width: 500px) {
 
+  .bgw50 {
 
+    min-width: 0;
 
+    width: 100%;
 
+    position: absolute;
 
+    left: 0;
 
+    top: 150%;
 
+    margin: 0;
 
+    background-image: "./images/site.jpg";
 
+    background-repeat: no-repeat;
 
+  }
 
+  .textBt h2 {
 
+    font-size: 2.4em;
 
+    font-weight: 500;
 
+    line-height: 1em;
 
+  }
 
+  .textBt h3 {
 
+    font-size: 2em;
 
+    font-weight: 500;
 
+  }
 
+  .textBt {
 
+    padding: 20px;
 
+    margin: 20px;
 
+  }
 
+  .flexview {
 
+    display: flex;
 
+    justify-content: center;
 
+    flex-wrap: wrap;
 
+    margin: 20px 20px;
 
+  }
 
+}
 
+@media (max-width: 700px) {
 
+  .fa {
 
+    padding: 20px;
 
+    font-size: 15px;
 
+    text-align: center;
 
+    text-decoration: none;
 
+    border-radius: 20px;
 
+    display: flex;
 
+    justify-content: center;
 
+    align-self: stretch;
 
+  }
 
+}
 
+@media (max-width: 900px) {
 
+  .fa {
 
+    padding: 20px;
 
+    font-size: 15px;
 
+    text-align: center;
 
+    border-radius: 20px;
 
+  }
 
+  .fa span {
 
+    display: flex;
 
+    width: 200px;
 
+    justify-content: center;
 
+  }
 
+  .fa:hover {
 
+    font-size: 14px;
 
+  }
 
+  .contactusBx {
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+  }
 
+  .heading {
 
+    margin: 20%;
 
+  }
 
 }

+ 9 - 30
src/App.js
View File 

@@ -1,32 +1,11 @@
 
-import React from "react";
 
 import "./App.css";
 
-import Wrapper from "./Wrapper";
 
-import Header from "./Header";
 
-import Sidebar from "./Sidebar";
 
-import Sidebar2 from "./Sidebar2";
 
-import Content from "./Content";
 
-import Footer from "./Footer";
 
+import "bootstrap/dist/css/bootstrap.min.css";
 
+import Header from "./Components/Header";
 
 
-export default function App() {
 
-  return (
 
-    <Wrapper>
 
-      <Header className="header" text="This is the header text." />
 
-      <div className="main">
 
-        <Sidebar className="sidebar" text="This is the sidebar text." />
 
-        <Content
 
-          className="content"
 
-          text={
 
-            <>
 
-              Content <br /> More content than we had before so this column is
 
-              now quite tall. Lorem ipsum dolor sit amet consectetur adipisicing
 
-              elit. In nulla laborum dignissimos voluptates officia. Sed aperiam
 
-              quis voluptates.
 
-            </>
 
-          }
 
-        />
 
-        <Sidebar2 className="sidebar2" text="This is the sidebar2 text." />
 
-      </div>
 
-      <Footer className="footer" text="This is the footer text." />
 
-    </Wrapper>
 
-  );
 
-}
 
+const App = () => (
 
+  <>
 
+    <Header />
 
+  </>
 
+);
 
+
 
+export default App;

+ 0 - 5
src/Box.js
View File 

@@ -1,5 +0,0 @@
 
-const Box = ({ className, children }) => (
 
-  <div className={`box ${className}`}>{children}</div>
 
-);
 
-
 
-export default Box;

+ 67 - 0
src/Components/DigitManager.js
View File 

@@ -0,0 +1,67 @@
 
+import React, { Component } from "react";
 
+import {Button, Container} from "react-bootstrap";
 
+
 
+export default class DigitManager extends Component {
 
+  constructor(props) {
 
+    super(props);
 
+    this.state = {
 
+      digit: 0,
 
+      color: "blue"
 
+    };
 
+  }
 
+
 
+  handleInc() {
 
+    this.setState((state) => ({
 
+      digit: state.digit + 1,
 
+    }));
 
+  }
 
+
 
+  handleDec() {
 
+    this.setState((state) => ({
 
+      digit: state.digit - 1,
 
+    }));
 
+  }
 
+
 
+  handleReset() {
 
+    this.setState({
 
+      digit: 0,
 
+      color: "blue"
 
+    });
 
+  }
 
+
 
+  handleColor() {
 
+    this.setState({
 
+      color: "#" + Math.floor(Math.random() * 16777215).toString(16),
 
+    });
 
+  }
 
+
 
+  render() {
 
+    return (
 
+      <>
 
+        <h1
 
+          style={{
 
+            color: this.state.color,
 
+            textAlign: "center",
 
+            margin: "20px 0",
 
+          }}
 
+        >
 
+          {this.state.digit}
 
+        </h1>
 
+        <Container style={{ textAlign: "center" }}>
 
+        <Button variant="success" onClick={() => this.handleInc()}>
 
+          +
 
+        </Button>{" "}
 
+        <Button variant="danger" onClick={() => this.handleDec()}>
 
+          -
 
+        </Button>{" "}
 
+        <Button variant="warning" onClick={() => this.handleReset()}>
 
+          Reset
 
+        </Button>{" "}
 
+        <Button variant="info" onClick={() => this.handleColor()}>
 
+          Color
 
+        </Button>
 
+        </Container>
 
+      </>
 
+    );
 
+  }
 
+}

+ 47 - 0
src/Components/Employee.js
View File 

@@ -0,0 +1,47 @@
 
+import React, { Component } from "react";
 
+import Image from "react-bootstrap/Image";
 
+import Spinner from "./Spinner";
 
+
 
+export default class Employee extends Component {
 
+  state = {
 
+    loading: true,
 
+    person: null,
 
+  };
 
+
 
+  componentDidMount() {
 
+    fetch("https://randomuser.me/api/")
 
+      .then((res) => res.json())
 
+      .then((data) =>
 
+        this.setState({
 
+          person: data.results[0],
 
+          loading: false,
 
+        })
 
+      );
 
+  }
 
+
 
+  render() {
 
+    if (this.state.loading) {
 
+      return (
 
+        <div>
 
+          <Spinner />
 
+        </div>
 
+      );
 
+    }
 
+    return (
 
+      <div>
 
+        <h1>Employee Of The Month</h1>
 
+        <div className="text-center">
 
+          <h4>
 
+            {this.state.person.name.first} {this.state.person.name.last}
 
+          </h4>
 
+          <Image
 
+            className="mx-auto d-block"
 
+            style={{ width: "200px", height: "200px" }}
 
+            src={this.state.person.picture.large}
 
+            roundedCircle
 
+          />
 
+        </div>
 
+      </div>
 
+    );
 
+  }
 
+}

+ 45 - 0
src/Components/Employees.js
View File 

@@ -0,0 +1,45 @@
 
+import React, { Component } from "react";
 
+import Person from "./Person";
 
+import Spinner from "./Spinner";
 
+
 
+export default class Employees extends Component {
 
+  state = {
 
+    loading: true,
 
+    people: [],
 
+  };
 
+
 
+  async componentDidMount() {
 
+    const url = "https://randomuser.me/api/?results=12";
 
+    const response = await fetch(url);
 
+    const data = await response.json();
 
+    this.setState({
 
+      people: data.results,
 
+      loading: false,
 
+    });
 
+  }
 
+
 
+  render() {
 
+    if (this.state.loading) {
 
+      return (
 
+        <div>
 
+          <Spinner />
 
+        </div>
 
+      );
 
+    }
 
+    return (
 
+      <div className="mt-10">
 
+        <h1>Our Team</h1>
 
+        <div className="d-flex flex-wrap justify-content-center">
 
+          {this.state.people.map((person, index) => (
 
+            <Person
 
+              key={index}
 
+              fname={person.name.first}
 
+              lname={person.name.last}
 
+              img={person.picture.large}
 
+            />
 
+          ))}
 
+        </div>
 
+      </div>
 
+    );
 
+  }
 
+}

+ 60 - 0
src/Components/Header.js
View File 

@@ -0,0 +1,60 @@
 
+import React, { Component } from "react";
 
+import { Container, Navbar, NavLink, Nav } from "react-bootstrap";
 
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
+import Home from "../Pages/Home";
 
+import About from "../Pages/About";
 
+import Contacts from "../Pages/Contacts";
 
+import News from "../Pages/News";
 
+import Numbers from "../Pages/Numbers";
 
+import Team from "../Pages/Team";
 
+import logo from "../images/logo192.png";
 
+
 
+export default class Header extends Component {
 
+  render() {
 
+    return (
 
+      <>
 
+        <Navbar
 
+          collapseOnSelect
 
+          expand="md"
 
+          bg="dark"
 
+          variant="dark"
 
+          className="fix"
 
+        >
 
+          <Container>
 
+            <Navbar.Brand href="/">
 
+              <img
 
+                alt="Logo"
 
+                src={logo}
 
+                width="30"
 
+                height="30"
 
+                className="d-inline-block align-top"
 
+              />{" "}
 
+              Home
 
+            </Navbar.Brand>
 
+
 
+            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
 
+            <Navbar.Collapse id="responsive-navbar-nav">
 
+              <Nav className="ml-auto">
 
+                <NavLink href="/about">About</NavLink>
 
+                <NavLink href="/contacts">Contacts</NavLink>
 
+                <NavLink href="/news">News</NavLink>
 
+                <NavLink href="/team">Our Team</NavLink>
 
+                <NavLink href="/numbers">Numbers</NavLink>
 
+              </Nav>
 
+            </Navbar.Collapse>
 
+          </Container>
 
+        </Navbar>
 
+        <Router>
 
+          <Switch>
 
+            <Route exact path="/" component={Home} />
 
+            <Route exact path="/about" component={About} />
 
+            <Route exact path="/numbers" component={Numbers} />
 
+            <Route exact path="/contacts" component={Contacts} />
 
+            <Route exact path="/news" component={News} />
 
+            <Route exact path="/team" component={Team} />
 
+          </Switch>
 
+        </Router>
 
+      </>
 
+    );
 
+  }
 
+}

+ 11 - 0
src/Components/Person.js
View File 

@@ -0,0 +1,11 @@
 
+import React from 'react'
 
+import Image from 'react-bootstrap/Image'
 
+
 
+export default function Person(props) {
 
+    return (
 
+        <div className="m-4 text-center">
 
+            <p>{props.fname} {props.lname}</p>
 
+            <Image src={props.img} roundedCircle />
 
+        </div>
 
+    )
 
+}

+ 19 - 0
src/Components/Post.js
View File 

@@ -0,0 +1,19 @@
 
+import React from "react";
 
+import NewsData from "../data/data.json";
 
+import Jumbotron from "react-bootstrap/Jumbotron";
 
+import { Container } from "react-bootstrap";
 
+
 
+
 
+export default function Post(props) {
 
+  return (
 
+    <div>
 
+      <Jumbotron fluid>
 
+        <Container>
 
+          <h1>{NewsData.news[props.id].title}</h1>
 
+          <p>{NewsData.news[props.id].content}</p>
 
+          <p className="date">{NewsData.news[props.id].date}</p>
 
+        </Container>
 
+      </Jumbotron>
 
+    </div>
 
+  );
 
+}

+ 11 - 0
src/Components/Spinner.js
View File 

@@ -0,0 +1,11 @@
 
+import React from "react";
 
+import {Container} from "react-bootstrap"
 
+
 
+const Spinner = () => {
 
+  return (
 
+    <Container>
 
+      <div className="mx-auto loader"></div>
 
+    </Container>
 
+  );
 
+};
 
+export default Spinner;

+ 73 - 0
src/Components/Stopwatch.js
View File 

@@ -0,0 +1,73 @@
 
+import React, { Component } from "react";
 
+import { Button, Container } from "react-bootstrap";
 
+
 
+export default class Stopwatch extends Component {
 
+  constructor(props) {
 
+    super(props);
 
+    this.state = {
 
+      digit: 0,
 
+      color: "#111",
 
+      isDisabled: false,
 
+    };
 
+  }
 
+
 
+  handleStart() {
 
+    this.setState(() => ({ isDisabled: true }));
 
+    this.timerID = setInterval(() => this.tick(), 1000);
 
+  }
 
+
 
+  tick() {
 
+    this.setState((state) => ({
 
+      digit: state.digit + 1,
 
+      color: "#" + Math.floor(Math.random() * 16777215).toString(16),
 
+    }));
 
+  }
 
+
 
+  handleStop() {
 
+    this.setState(() => ({ isDisabled: false }));
 
+    clearInterval(this.timerID);
 
+  }
 
+
 
+  handleReset() {
 
+    this.setState({ digit: 0, color: "#111" });
 
+  }
 
+
 
+  render() {
 
+    return (
 
+      <>
 
+        <h1
 
+          style={{
 
+            textAlign: "center",
 
+            margin: "20px 0",
 
+            color: this.state.color,
 
+          }}
 
+        >
 
+          {this.state.digit}
 
+        </h1>
 
+        <Container style={{ textAlign: "center" }}>
 
+          <Button
 
+            variant="success"
 
+            disabled={this.state.isDisabled}
 
+            onClick={() => this.handleStart()}
 
+          >
 
+            Start
 
+          </Button>{" "}
 
+          <Button
 
+            variant="danger"
 
+            disabled={!this.state.isDisabled}
 
+            onClick={() => this.handleStop()}
 
+          >
 
+            Stop
 
+          </Button>{" "}
 
+          <Button
 
+            variant="warning"
 
+            disabled={this.state.isDisabled}
 
+            onClick={() => this.handleReset()}
 
+          >
 
+            Reset
 
+          </Button>{" "}
 
+        </Container>
 
+      </>
 
+    );
 
+  }
 
+}

+ 27 - 0
src/Components/Timer.js
View File 

@@ -0,0 +1,27 @@
 
+import React, { Component } from "react";
 
+
 
+export default class Timer extends Component {
 
+  constructor(props) {
 
+    super(props);
 
+    this.state = { seconds: 0, color: "#111"};
 
+  }
 
+
 
+  componentDidMount(){
 
+      this.timerID = setInterval(() => this.tick(), 1000)
 
+  }
 
+
 
+  componentWillUnmount(){
 
+      clearInterval(this.timerID);
 
+  }
 
+
 
+  tick() {
 
+      this.setState(state => ({
 
+          seconds: state.seconds + 1,
 
+          color: Math.floor(Math.random()*16777215).toString(16)
 
+      }));
 
+  }
 
+
 
+  render() {
 
+    return <h2 style={{ color: "#" + this.state.color, textAlign: "center", margin: "20px 0 0 0" }}>Timer: {this.state.seconds}</h2>
 
+  }
 
+}

+ 0 - 7
src/Content.js
View File 

@@ -1,7 +0,0 @@
 
-import Box from "./Box";
 
-
 
-const Sidebar = (props) => {
 
-  return <Box className={props.className} children={props.text} />;
 
-};
 
-
 
-export default Sidebar;

+ 0 - 7
src/Footer.js
View File 

@@ -1,7 +0,0 @@
 
-import Box from "./Box";
 
-
 
-const Footer = (props) => {
 
-  return <Box className={props.className} children={props.text} />;
 
-};
 
-
 
-export default Footer;

+ 0 - 7
src/Header.js
View File 

@@ -1,7 +0,0 @@
 
-import Box from "./Box";
 
-
 
-const Header = (props) => {
 
-  return <Box className={props.className} children={props.text} />;
 
-};
 
-
 
-export default Header;

+ 39 - 0
src/Pages/About.js
View File 

@@ -0,0 +1,39 @@
 
+import React from "react";
 
+import siteImage from "../images/site.jpg";
 
+
 
+export default function About() {
 
+  return (
 
+    <div>
 
+      <section className="about">
 
+        <div className="heading">
 
+          <p className="space"></p>
 
+          <h2>About WhiteSource</h2>
 
+        </div>
 
+        <p className="space"></p>
 
+        <p className="space"></p>
 
+        <div className="content">
 
+          <div className="contentBx w50">
 
+            <h3>The function of this site is versatility.</h3>
 
+            <p>
 
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
 
+              Deleniti, earum. Exercitationem aliquam atque ab cum quod, beatae,
 
+              doloribus velit, quam ratione ipsum iure rerum porro. Et
 
+              necessitatibus nam repellendus rerum. Lorem ipsum dolor sit amet,
 
+              consectetur adipisicing elit. Nesciunt facilis nobis dolorum
 
+              aliquid adipisci facere nam rem ducimus ratione distinctio
 
+              voluptatem explicabo ipsam soluta, omnis neque commodi consectetur
 
+              quisquam! Molestias?<p className="space"></p>
 
+              <p className="space"></p>Lorem ipsum dolor sit amet consectetur
 
+              adipisicing elit. Neque, doloremque. Deleniti vero maiores aut
 
+              odit impedit sint officia animi. Fugit tempore, dolorum earum
 
+              molestias repudiandae iure necessitatibus commodi a nulla.
 
+            </p>
 
+          </div>
 
+          <div className="w50">
 
+            <img src={siteImage} alt="Site" />
 
+          </div>
 
+        </div>
 
+      </section>
 
+    </div>
 
+  );
 
+}

+ 45 - 0
src/Pages/Contacts.js
View File 

@@ -0,0 +1,45 @@
 
+import React from "react";
 
+
 
+export default function Contacts() {
 
+  return (
 
+    <div>
 
+      <section class="contactus">
 
+        <div class="headcont">
 
+          <h2>Contacts</h2>
 
+          <p className="space"></p>
 
+          <p>
 
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio
 
+            officiis facilis vel veniam? Delectus quo voluptates veritatis
 
+            obcaecati necessitatibus architecto dignissimos perspiciatis itaque
 
+            earum temporibus atque quis, asperiores sunt voluptatum?
 
+          </p>
 
+          <p>
 
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio
 
+            officiis facilis vel veniam? Delectus quo voluptates veritatis
 
+            obcaecati necessitatibus architecto dignissimos perspiciatis itaque
 
+            earum temporibus atque quis, asperiores sunt voluptatum?
 
+          </p>
 
+          <div className="content">
 
+            <div className="contactusBx">
 
+              <a href="/" className="fa fa-facebook">
 
+                <span>Facebook</span>
 
+              </a>{" "}
 
+              <span className="spmar"></span>
 
+              <a href="/" className="fa fa-twitter">
 
+                <span>Twitter</span>
 
+              </a>{" "}
 
+              <span className="spmar"></span>
 
+              <a href="/" className="fa fa-instagram">
 
+                <span>Instagram</span>
 
+              </a>{" "}
 
+              <span className="spmar"></span>
 
+              <a href="/" className="fa fa-youtube">
 
+                <span>YouTube</span>
 
+              </a>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </section>
 
+    </div>
 
+  );
 
+}

+ 49 - 0
src/Pages/Home.js
View File 

@@ -0,0 +1,49 @@
 
+import road from "../images/road.jpg";
 
+
 
+const Home = () => (
 
+  <div>
 
+    <section className="banner">
 
+      <div className="textBt">
 
+        <h2>
 
+          Hello, I'm
 
+          <br />
 
+          <span>Zadorozhnyi A.</span>
 
+        </h2>
 
+        <h3>I'm a Front End Developer.</h3>
 
+        <a href="#about" className="btnAbout">
 
+          About me
 
+        </a>
 
+      </div>
 
+    </section>
 
+    <section className="about" id="about">
 
+      <div className="heading">
 
+        <h2>About me</h2>
 
+      </div>
 
+      <div className="content">
 
+        <div className="contentBx w50">
 
+          <h3>I'm a Front End Developer.</h3>
 
+          <p>
 
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti,
 
+            earum. Exercitationem aliquam atque ab cum quod, beatae, doloribus
 
+            velit, quam ratione ipsum iure rerum porro. Et necessitatibus nam
 
+            repellendus rerum. Lorem ipsum dolor sit amet, consectetur
 
+            adipisicing elit. Nesciunt facilis nobis dolorum aliquid adipisci
 
+            facere nam rem ducimus ratione distinctio voluptatem explicabo ipsam
 
+            soluta, omnis neque commodi consectetur quisquam! Molestias?
 
+            <br />
 
+            <br />
 
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque,
 
+            doloremque. Deleniti vero maiores aut odit impedit sint officia
 
+            animi. Fugit tempore, dolorum earum molestias repudiandae iure
 
+            necessitatibus commodi a nulla.
 
+          </p>
 
+        </div>
 
+        <div className="w50">
 
+          <img src={road} alt="Road" />
 
+        </div>
 
+      </div>
 
+    </section>
 
+  </div>
 
+);
 
+
 
+export default Home;

+ 16 - 0
src/Pages/News.js
View File 

@@ -0,0 +1,16 @@
 
+import React from "react";
 
+import Post from "../Components/Post";
 
+import NewsData from "../data/data.json";
 
+
 
+export default function News() {
 
+  return (
 
+    <div>
 
+      <div className="heading">
 
+        <h1>The Latest News</h1>
 
+      </div>
 
+      {NewsData.news.map((post, index)=>{
 
+          return <Post id={index} />
 
+      })}
 
+    </div>
 
+  );
 
+}

+ 20 - 0
src/Pages/Numbers.js
View File 

@@ -0,0 +1,20 @@
 
+import React from "react";
 
+import Timer from "../Components/Timer";
 
+import Stopwatch from "../Components/Stopwatch";
 
+import DigitManager from "../Components/DigitManager";
 
+
 
+export default function Numbers() {
 
+  return (
 
+    <>
 
+      <div className="spmar">
 
+        <hr />
 
+        <Timer />
 
+        <hr />
 
+        <DigitManager />
 
+        <hr />
 
+        <Stopwatch />
 
+        <hr />
 
+      </div>
 
+    </>
 
+  );
 
+}

+ 13 - 0
src/Pages/Team.js
View File 

@@ -0,0 +1,13 @@
 
+import React from "react";
 
+import { Container } from "react-bootstrap";
 
+import Employee from "../Components/Employee";
 
+import Employees from "../Components/Employees";
 
+
 
+export default function Team() {
 
+  return (
 
+    <Container>
 
+      <Employee />
 
+      <Employees />
 
+    </Container>
 
+  );
 
+}

+ 0 - 7
src/Sidebar.js
View File 

@@ -1,7 +0,0 @@
 
-import Box from "./Box";
 
-
 
-const Sidebar = (props) => {
 
-  return <Box className={props.className} children={props.text} />;
 
-};
 
-
 
-export default Sidebar;

+ 0 - 7
src/Sidebar2.js
View File 

@@ -1,7 +0,0 @@
 
-import Box from "./Box";
 
-
 
-const Sidebar2 = (props) => {
 
-  return <Box className={props.className} children={props.text} />;
 
-};
 
-
 
-export default Sidebar2;

+ 0 - 8
src/Wrapper.js
View File 

@@ -1,8 +0,0 @@
 
-const Wrapper = (props) => (
 
-  <>
 
-    <div className="sign">Anton Zadorozhnyi, task #1</div>
 
-    <div class="wrapper">{props.children}</div>
 
-  </>
 
-);
 
-
 
-export default Wrapper;

File diff suppressed because it is too large
+ 40 - 0
src/data/data.json


+ 22 - 0
src/data/db.json
View File 

@@ -0,0 +1,22 @@
 
+{
 
+  "images": [
 
+    {
 
+      "id": 1,
 
+      "src": "https://i.ibb.co/8sNyzMJ/Portfolio.jpg",
 
+      "alt": "Portfolio",
 
+      "url": "http://azportfolio.zzz.com.ua/"
 
+    },
 
+    {
 
+      "id": 2,
 
+      "src": "https://i.ibb.co/S3gKzzv/Clocks.jpg",
 
+      "alt": "Clocks",
 
+      "url": "http://simpleclocks.zzz.com.ua/react/"
 
+    },
 
+    {
 
+      "id": 3,
 
+      "src": "https://i.ibb.co/SxKY5HB/White-Source.jpg",
 
+      "alt": "WhiteSource",
 
+      "url": "http://whitesource.zzz.com.ua/team"
 
+    }
 
+  ]
 
+}

BIN
src/images/banner.jpg
View File


BIN
src/images/logo192.png
View File


BIN
src/images/logo512.png
View File


BIN
src/images/road.jpg
View File


BIN
src/images/site.jpg
View File


+ 0 - 13
src/index.css
View File 

@@ -1,13 +0,0 @@
 
-body {
 
-  margin: 0;
 
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 
-    sans-serif;
 
-  -webkit-font-smoothing: antialiased;
 
-  -moz-osx-font-smoothing: grayscale;
 
-}
 
-
 
-code {
 
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 
-    monospace;
 
-}

+ 5 - 8
src/index.js
View File 

@@ -1,11 +1,8 @@
 
-import React from "react";
 
-import ReactDOM from "react-dom";
 
-import "./index.css";
 
-import App from "./App";
 
+import React from 'react';
 
+import ReactDOM from 'react-dom';
 
+import App from './App';
 
 
 ReactDOM.render(
 
-  <React.StrictMode>
 
-    <App />
 
-  </React.StrictMode>,
 
-  document.getElementById("root")
 
+    <App />,
 
+  document.getElementById('root')
 
 );