init

Author: Archakov06

package-lock.json

@@ -9,6 +9,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
+    "sass": "^1.52.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

package.json

@@ -1,23 +1,14 @@
-import logo from './logo.svg';
-import './App.css';
+import './index.scss';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <div>
+        <h2>Счетчик:</h2>
+        <h1>0</h1>
+        <button className="minus">- Минус</button>
+        <button className="plus">Плюс +</button>
+      </div>
     </div>
   );
 }

src/App.css

@@ -1,17 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
+
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/App.js

@@ -0,0 +1,71 @@
+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;
+  background-color: #edf6f9;
+}
+
+.App {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  text-align: center;
+
+  h1 {
+    color: #000;
+    font-size: 7rem;
+    margin: 0;
+    margin-bottom: 20px;
+
+    &.plus {
+      color: #2a9d8f;
+    }
+    &.minus {
+      color: #e63946;
+    }
+  }
+
+  h2 {
+    font-size: 2rem;
+    margin: 0;
+    color: #556581;
+  }
+
+  button {
+    background: transparent;
+    border: 2px solid transparent;
+    text-align: center;
+    font-size: 22px;
+    border-radius: 15px;
+    padding: 10px 25px;
+    cursor: pointer;
+    margin: 0 10px;
+    transition: all 0.05s ease-in-out;
+
+    &.minus {
+      background-color: #e63946;
+      color: #fff;
+      box-shadow: 0 4px 0 darken(#e63946, 10%);
+      border: 1px solid darken(#e63946, 15%);
+    }
+
+    &.plus {
+      background-color: #2a9d8f;
+      color: #fff;
+      box-shadow: 0 4px 0 darken(#2a9d8f, 10%);
+      border: 1px solid darken(#2a9d8f, 15%);
+    }
+
+    &:hover {
+      transform: translateY(-2px);
+    }
+
+    &:active {
+      transform: translateY(2px);
+      box-shadow: none;
+    }
+  }
+}