Попыркина Мария, М3337

src/app/app.css

@@ -1,27 +1,18 @@
-.app {
-  text-align: center;
+body {
+  height: 600px;
+  background-color: #e5eaf0;
+  margin: 0;
+  /*background-color: black;*/
 }
 
-.app-header {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: #282c34;
-  color: #fff;
-  font-size: calc(10px + 2vmin);
-}
-
-.app-link {
-  color: #61dafb;
-}
-
-@keyframes app-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+/*@font-face {*/
+/*  font-family: 'HelveticaNeueCyr-Medium';*/
+/*  src: url('./src/sourse/fonts/HelveticaNeueCyr-Medium.eot');*/
+/*  src: url('sourse/fonts/HelveticaNeueCyr-Medium.eot?#iefix') format('embedded-opentype'),*/
+/*  url('./sourse/fonts/HelveticaNeueCyr-Medium.svg#HelveticaNeueCyr-Medium') format('svg'),*/
+/*  url('./sourse/fonts/HelveticaNeueCyr-Medium.ttf') format('truetype'),*/
+/*  url('./sourse/fonts/HelveticaNeueCyr-Medium.woff') format('woff'),*/
+/*  url('./sourse/fonts/HelveticaNeueCyr-Medium.woff2') format('woff2');*/
+/*  font-weight: normal;*/
+/*  font-style: normal;*/
+/*}*/

src/app/app.jsx

@@ -1,24 +1,14 @@
 import React, { Component } from 'react';
 
 import './app.css';
+import { Header } from './header/Header';
+import { Main } from './main/Main';
 
 export class App extends Component {
   render() {
     return (
       <div className="app">
-        <header className="app-header">
-          <p>
-            Edit <code>src/app/app.jsx</code> and save to reload.
-          </p>
-          <a
-            className="app-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+        <Main />
       </div>
     );
   }

src/app/functions/Functions.jsx

@@ -0,0 +1,44 @@
+const senders = ['Mom', 'Dad', 'Cat', 'Dog', 'Apple', 'Teacher', 'Homie', 'Mole',
+  'Hare', 'BB-8', 'Porg', 'Totoro'];
+
+const actions = ['runs', 'waits', 'flies', 'sleeps', 'lays', 'jumps', 'sings',
+  'writes', 'reads', 'executes', 'exists', 'builds', 'tests'];
+
+const adverbs = ['rapidly', 'at home', 'at school', 'at the university', 'on bed',
+  'highly', 'alone', 'sadly', 'today'];
+
+const punctuationMarks = ['.', '...', '!', '?', '?!'];
+
+export function getRandomFromRange(minTime, maxTime) {
+  return Math.random() * (maxTime - minTime) + minTime;
+}
+
+function getRandomInt(minRange, maxRange) {
+  return Math.trunc(getRandomFromRange(minRange, maxRange));
+}
+
+function genColor() {
+  const n = getRandomInt(0, 255);
+  let res = n.toString(16);
+  while (res.length < 2) {
+    res = `0${  res}`;
+  }
+  return res;
+}
+
+export function genLetterText() {
+  const letterLen = getRandomInt(2, 2);
+  let answer = '';
+  for (let i = 0; i < letterLen; i++) {
+    const send = senders[getRandomInt(0, senders.length)];
+    const act = actions[getRandomInt(0, actions.length)];
+    const adv = adverbs[getRandomInt(0, adverbs.length)];
+    const punMark = punctuationMarks[getRandomInt(0, punctuationMarks.length)];
+    answer += `${send  } ${act} ${  adv  }${punMark  } `;
+  }
+  const curDate = new Date();
+  const letterDate = `${curDate.getDate()  } ${  curDate.toLocaleString('ru', { month: 'short' })}`;
+  const senderOne = senders[getRandomInt(0, senders.length)];
+  const colorLetter = `#${  genColor()  }${genColor()  }${genColor()}`;
+  return {deleted: false, letterText: answer, sender: senderOne, date: letterDate, color: colorLetter };
+}