added components to app

src/components/App.jsx

@@ -11,31 +11,60 @@ export class App extends Component {
     bad: 0,
   };
 
+  handleFeedback = e => {
+    if (e === 'Good') {
+      this.setState({ good: this.state.good + 1 });
+    } else if (e === 'Neutral') {
+      this.setState({ neutral: this.state.neutral + 1 });
+    } else if (e === 'Bad') {
+      this.setState({ bad: this.state.bad + 1 });
+    }
+  };
+
   countTotalFeedback = () => {
     let total = this.state.good + this.state.neutral + this.state.bad;
     return total;
   };
 
-  countPositiveFeedbackPercentage = () => {};
+  countPositiveFeedbackPercentage = () => {
+    if (this.countTotalFeedback() === 0) {
+      return 0;
+    }
+    return Math.round((this.state.good / this.countTotalFeedback()) * 100);
+  };
 
   render() {
     return (
       <div
         style={{
           height: '100vh',
           display: 'flex',
+          flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
           fontSize: 40,
           color: '#010101',
         }}
       >
         <SectionTitle title="Please leave feedback">
-          <FeedbackOptions />
+          <FeedbackOptions
+            options={['Good', 'Neutral', 'Bad']}
+            onLeaveFeedback={this.handleFeedback}
+          />{' '}
         </SectionTitle>
+
         <SectionTitle title="Statistics">
-          <Statistics />
-          <Notification />
+          {this.countTotalFeedback() !== 0 ? (
+            <Statistics
+              good={this.state.good}
+              neutral={this.state.neutral}
+              bad={this.state.bad}
+              total={this.countTotalFeedback()}
+              positivePercentage={this.countPositiveFeedbackPercentage()}
+            />
+          ) : (
+            <Notification message="There is no feedback" />
+          )}
         </SectionTitle>
       </div>
     );

src/components/FeedbackOptions/FeedbackOptions.jsx

@@ -3,7 +3,7 @@ import css from './FeedbackOptions.module.css';
 import { nanoid } from 'nanoid';
 
 export const FeedbackOptions = ({ options, onLeaveFeedback }) => (
-  <div>
+  <div className={css.feedContainer}>
     {options.map(option => (
       <button
         key={nanoid()}

src/components/FeedbackOptions/FeedbackOptions.module.css

@@ -1,3 +1,9 @@
+.feedContainer {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+}
+
 .feedbackBtn {
   .search-btn {
     color: #fff;

src/components/SectionTitle/SectionTitle.jsx

@@ -2,7 +2,7 @@ import propTypes from 'prop-types';
 
 export const SectionTitle = ({ title, children }) => (
   <div>
-    <h2>{title}</h2>
+    <h2 className={CSS.title}>{title}</h2>
     {children}
   </div>
 );

src/components/Statistics/Statistics.jsx

@@ -12,7 +12,7 @@ export const Statistics = ({
     <li>Neutral: {neutral}</li>
     <li>Bad: {bad}</li>
     <li>Total: {total}</li>
-    <li>Positive feedback: {positivePercentage}</li>
+    <li>Positive feedback: {positivePercentage} %</li>
   </ul>
 );