added text and styling

src/components/AnswerButton.js

@@ -0,0 +1,39 @@
+/* eslint-disable max-len */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable no-shadow */
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { quiz } from '../reducers/quiz';
+
+export const AnswerButton = ({ index, option, setGoToNextButton }) => {
+  const dispatch = useDispatch();
+  const [activeBtn, setActiveBtn] = useState(false);
+  const question = useSelector((state) => state.quiz.questions[state.quiz.currentQuestionIndex]);
+  const usersAnswer = useSelector((state) => state.quiz.answers[state.quiz.currentQuestionIndex]);
+
+  const onAnswerSubmit = (questionId, answerIndex) => {
+    dispatch(quiz.actions.submitAnswer({
+      questionId, answerIndex
+    }));
+    if (question.correctAnswerIndex === answerIndex) {
+      window.alert('High five!')
+      dispatch(quiz.actions.goToNextQuestion())
+    } else {
+      window.alert('Sorry :( !')
+    }
+    setActiveBtn(true);
+    setGoToNextButton(true);
+  }
+
+  const correctAnswer = usersAnswer && index === question.correctAnswerIndex;
+
+  return (
+    <button
+      className={activeBtn ? (correctAnswer ? 'correct' : 'wrong') : 'default'}
+      onClick={() => onAnswerSubmit(question.id, index)}
+      disabled={usersAnswer}
+      type="button">
+      {option}
+    </button>
+  );
+};

src/components/CurrentQuestion.css

@@ -0,0 +1,32 @@
+.eslint-hater h1 {
+    font-family: futura-pt, 'sans-serif';
+    font-weight: 900;
+    letter-spacing: -0.01em;
+    color: #df82e2;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .answerButton {
+    place-self: center;
+  }
+
+  .answer-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .eslint-hater-bottom {
+    display: flex;
+    flex-direction: column;
+    gap: 11px;
+  }
+
+  .eslint-hater {
+    display: flex;
+      flex-direction: column;
+      align-items: center;
+  }

src/components/CurrentQuestion.js

@@ -1,16 +1,58 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { NextButton } from './NextButton';
+import { ProgressBar } from './ProgressBar';
+import { AnswerButton } from './AnswerButton';
+import { SummaryPage } from '../pages/Summary';
+import { quiz } from '../reducers/quiz';
+import './CurrentQuestion.css';
 
 export const CurrentQuestion = () => {
-  const question = useSelector((state) => state.quiz.questions[state.quiz.currentQuestionIndex])
+  // const question = useSelector((state) => state.quiz.questions[state.quiz.currentQuestionIndex])
+  console.log(quiz);
+  const dispatch = useDispatch();
+  const [goToNextButton, setGoToNextButton] = useState(false);
+  const question = useSelector(
+    (state) => state.quiz.questions[state.quiz.currentQuestionIndex]
+  );
+  const quizOver = useSelector((state) => state.quiz.quizOver);
 
   if (!question) {
-    return <h1>Oh no! I could not find the current question!</h1>
+    return <h1>Oups, no question here!</h1>
+    // return <h1>Oh no! I could not find the current question!</h1>;
   }
+  const moveToNext = () => {
+    dispatch(quiz.actions.goToNextQuestion());
+    setGoToNextButton(false);
+  };
 
   return (
-    <div>
-      <h1>Question: {question.questionText}</h1>
-    </div>
-  )
-}
+//     <div>
+//       <h1>Question: {question.questionText}</h1>
+//     </div>
+//   )
+// }
+    <>
+      {quizOver && <SummaryPage />}
+      {!quizOver && (
+        <div className="eslint-hater">
+          <h1>How well do you know your garden: {question.questionText}</h1>
+          <div className="answer-buttons">
+            {question.options.map((option, index) => (
+              <AnswerButton
+                className="answerButton"
+                key={option}
+                index={index}
+                option={option}
+                setGoToNextButton={setGoToNextButton} />
+            ))}
+          </div>
+          <div className="eslint-hater-bottom">
+            {goToNextButton && <NextButton className="nextButton" clickAction={moveToNext} />}
+            <ProgressBar />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};

src/components/NextButton.css

@@ -0,0 +1,22 @@
+.nextButton {
+    cursor: pointer;
+    text-underline-offset: 6px;
+    font-family: futura-pt, "sans-serif";
+    font-weight: 600;
+    transition: all 0.2s ease 0s;
+
+    padding: 10px 15px;
+    border-radius: 5px;
+    text-decoration: none;
+    font-size: 18px;
+    border: 5px solid #e33fec;
+
+    color: #f37af1;
+    background: transparent;
+    align-self: center;
+    margin-top:40px;
+    margin-bottom:40px;
+
+  }
+
+

src/components/NextButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { quiz } from '../reducers/quiz';
+import './NextButton.css';
+
+export const NextButton = () => {
+  const dispatch = useDispatch();
+  const goToNextQuestion = () => {
+    dispatch(quiz.actions.goToNextQuestion());
+  };
+  return (
+    <button className="nextButton" onClick={goToNextQuestion} type="button">
+      Next
+    </button>
+  );
+};

src/components/ProgressBar.css

@@ -0,0 +1,25 @@
+.progress-bar {
+    font-family: futura-pt, 'sans-serif';
+    letter-spacing: -0.01em;
+    font-size: 32px;
+    line-height: min(max(50px, 6vw), 53px);
+    color: #8c499e;
+  }
+  .progress {
+    width: 100%;
+    height: 10px;
+    appearance: none;
+    background-color: #f4f4f4;
+    border-radius: 20px;
+    overflow: hidden;
+  }
+
+  .progress::-webkit-progress-bar {
+    background-color: #f4f4f4;
+    border-radius: 20px;
+  }
+
+  .progress::-webkit-progress-value {
+    background-color: #8c499e;
+    border-radius: 20px;
+  }

src/components/ProgressBar.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import './ProgressBar.css';
+
+export const ProgressBar = () => {
+  const questions = useSelector((state) => state.quiz.questions);
+  const currentQuestionIndex = useSelector((state) => {
+    return state.quiz.questions[state.quiz.currentQuestionIndex];
+  });
+
+  const progress = (currentQuestionIndex.id / questions.length) * 100;
+
+  return (
+    <div className="container">
+      <h3 className="progress-bar">
+        Question: {currentQuestionIndex.id} / {questions.length}
+      </h3>
+      <progress className="progress" value={progress} max="100">
+        {progress}%
+      </progress>
+    </div>
+  );
+};

src/components/ResetButton.css

@@ -0,0 +1,33 @@
+.resetButton {
+    cursor: pointer;
+    text-underline-offset: 6px;
+    /*font-family: futura-pt, 'sans-serif'; */
+    font-weight: 600;
+    transition: all 0.2s ease 0s;
+    display: inline-block;
+    padding: 18px 30px;
+    border-radius: 50px;
+    text-decoration: none;
+    font-size: 18px;
+    border: 2px solid #e878f3;
+    place-self: flex-start;
+    color: rgb(211, 214, 247);
+    background: #f18bda;
+    /* animation: bounce 1s infinite alternate; */
+  }
+
+  /* @keyframes bounce {
+    0% {
+      transform: translateY(0);
+    } */
+    /* 100% {
+      transform: translateY(50px);
+    }
+  } */
+  .resetButtonContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }

src/components/ResetButton.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { quiz } from '../reducers/quiz';
+import './ResetButton.css';
+
+export const ResetButton = () => {
+  const dispatch = useDispatch();
+  const restart = () => {
+    dispatch(quiz.actions.restart());
+  };
+  return (
+    <div className="resetButtonContainer">
+      <button className="resetButton" onClick={restart} type="button">
+        Play again
+      </button>
+    </div>
+  );
+};

src/components/answerbutton.css

@@ -0,0 +1,24 @@
+button {
+  background-color: #3498db;
+  color: #fff;
+  font-size: 16px;
+  padding: 12px 24px;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+}
+/* button.default:hover {
+  background-color: #2980b9;
+}
+button.default:active {
+  background-color: #21618c;
+}
+button.correct {
+  background-color: #2ecc71;
+}
+button.wrong {
+  background-color: #e74c3c;
+}
+button.default {
+  background-color: #bdc3c7;
+} */

src/pages/Question.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CurrentQuestion } from 'components/CurrentQuestion';
+import './question.css';
+
+export const Question = () => {
+  return (
+    <div className="questions-background">
+      <CurrentQuestion />
+    </div>
+  );
+}

src/pages/Summary.js

@@ -0,0 +1,38 @@
+/* eslint-disable implicit-arrow-linebreak */
+/* eslint-disable react/jsx-no-useless-fragment */
+import React from 'react';
+import { ResetButton } from 'components/ResetButton';
+import { useSelector } from 'react-redux';
+import './summary.css';
+
+export const SummaryPage = () => {
+  // Variable to calculate how many correct answer the user has given
+  const correctAnswer = useSelector(
+    (state) =>
+      state.quiz.answers.filter((answer) => answer.isCorrect === true).length
+  );
+  const answers = useSelector((state) => state.quiz.answers);
+
+  const userSummary = () => {
+    if (correctAnswer === 5) {
+      return 'That is correct!';
+    } else if (correctAnswer === 4) {
+      return 'You nailed it!';
+    } else if (correctAnswer === 3) {
+      return 'Good job!';
+    } else {
+      return 'No, that is not correct';
+    }
+  };
+
+  return (
+    <div className="summary">
+      <h1>You did great!</h1>
+      <h3>
+        You got: {correctAnswer} of {answers.length}
+      </h3>
+      <ResetButton />
+      <p>{userSummary()}</p>
+    </div>
+  );
+};

src/pages/question.css

@@ -0,0 +1,6 @@
+.questions-background {
+    height: 100vh;
+    border-color: #ad67b5;
+    border-width: 16px 16px 0px 16px;
+    border-style: solid;
+}