- App contents go here
+
+
+
)
}
diff --git a/src/components/Nav.js b/src/components/Nav.js
new file mode 100644
index 0000000..a035ef3
--- /dev/null
+++ b/src/components/Nav.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+class Nav extends React.Component {
+
+ constructor() {
+ super();
+ }
+
+ render() {
+ return (
+
+
+ )
+}
+}
+
+
+
+
+export default Nav;
diff --git a/src/components/Questions.js b/src/components/Questions.js
new file mode 100644
index 0000000..cbd7f11
--- /dev/null
+++ b/src/components/Questions.js
@@ -0,0 +1,55 @@
+import React from "react";
+import { decode } from 'he';
+
+class Questions extends React.Component {
+
+ constructor() {
+ super();
+ }
+
+
+ componentDidMount(){
+ this.props.fetchQuestion()
+ }
+
+
+ render() {
+ console.log(this.props.questions)
+ let answerList = (this.props.questions.incorrect_answers === undefined)
+ ?
+ null :
+
+
+ [...this.props.questions.incorrect_answers, this.props.questions.correct_answer]
+ .sort(function() { return 0.5 - Math.random() })
+ .map((answer) =>
+
+ );
+
+ let questionDecoded = (this.props.questions.question === undefined) ? null : decode(this.props.questions.question)
+ // decoding HTML entities in questions using 'he' - ternary to cover initial undefined state.
+
+ return (
+ THIS IS A QUIZ
+
+
+ );
+}
+}
+
+// {this.props.questions.length > 0 ?
+//
+
+ {questionDecoded}
+- {answerList}
+//
:
+// +// {this.props.questions.question}
+// {this.props.questions.incorrect_answers} + +//I haven't fetched yet
} + + + +export default Questions; diff --git a/src/components/Score.js b/src/components/Score.js new file mode 100644 index 0000000..80ed2e6 --- /dev/null +++ b/src/components/Score.js @@ -0,0 +1,49 @@ +import React from "react"; + +class Score extends React.Component { + + constructor() { + super(); + // this.mixQuestions = this.mixQuestions.bind(this); + } + + + + + render() { + + // let emotion = === true ? "/static/img/basket_full.png": "/static/img/basket.png"; + + // if (this.props.score 0) { + // emotion = "/static/img/basket_full.png"; + // } else if ( ) { + // greeting = "/static/img/basket.png"; + // } + + // return ( + //
+ // 
+ // ![]()
this.props.openBasket()} src={basketFull}/>
+ //
+
+
+
+
+ return (
+
+ //
+
+ );
+}
+}
+
+
+
+export default Score;
diff --git a/src/containers/QuestionsContainer.js b/src/containers/QuestionsContainer.js
new file mode 100644
index 0000000..84b3dd2
--- /dev/null
+++ b/src/containers/QuestionsContainer.js
@@ -0,0 +1,34 @@
+import { connect } from "react-redux";
+import Questions from "../components/Questions";
+// import { setQuery, submitQuery } from "../actions"
+import { fetchQuestionAPI, score, image } from '../actions';
+
+
+
+// fetchQuestion={this.props.fetchQuestion}
+
+const mapStateToProps = state => {
+ return {
+ questions: state.questionsResults.questions,
+ image: state.image
+
+ //name of prop being passed down(object) : state:(importedreducercomponent).(key of object)
+ };
+}
+
+
+
+const mapDispatchToProps = dispatch => {
+ return {
+ fetchQuestion: () => dispatch(fetchQuestionAPI()),
+ clickHandler: (isCorrect) => {
+ dispatch(score(isCorrect)),
+ dispatch(fetchQuestionAPI())
+ }
+ };
+}
+
+
+export default connect(
+ mapStateToProps, mapDispatchToProps
+ )(Questions);
\ No newline at end of file
diff --git a/src/containers/ScoreContainer.js b/src/containers/ScoreContainer.js
new file mode 100644
index 0000000..553b0bf
--- /dev/null
+++ b/src/containers/ScoreContainer.js
@@ -0,0 +1,18 @@
+import { connect } from "react-redux";
+import Score from "../components/Score";
+import { score } from '../actions';
+
+const mapStateToProps = state => {
+ return {
+ score: state.score
+
+ //name of prop being passed down(object) : state:(importedreducercomponent).(key of object)
+ };
+}
+
+
+
+
+export default connect(
+ mapStateToProps
+ )(Score);
\ No newline at end of file
diff --git a/src/img/0.jpg b/src/img/0.jpg
new file mode 100644
index 0000000..1d02930
Binary files /dev/null and b/src/img/0.jpg differ
diff --git a/src/index.js b/src/index.js
index 846662e..c295cfd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
-
import thunkMiddleware from 'redux-thunk';
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from "redux";
import { Provider } from 'react-redux';
import rootReducer from './reducers';
-const store = createStore(rootReducer, applyMiddleware(
- thunkMiddleware
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const store = createStore(rootReducer, {}, composeEnhancers(
+ applyMiddleware(thunkMiddleware)
));
ReactDOM.render(
diff --git a/src/reducers/correct_answer.js b/src/reducers/correct_answer.js
new file mode 100644
index 0000000..f4642bb
--- /dev/null
+++ b/src/reducers/correct_answer.js
@@ -0,0 +1,21 @@
+
+function correct_answer(state = {
+ correct_answer: ``
+ }, action){
+ switch (action.type) {
+ case 'CORRECT_ANSWER':
+ // console.log(action.questions);
+
+
+
+ const newAnswer = Object.assign({}, state, { correct_answer: action.correct_answer});
+ return newAnswer
+
+ //return = action of returning the value of 'questions' in the action object.
+
+ default:
+ return state
+ }
+ }
+
+ export default correct_answer;
\ No newline at end of file
diff --git a/src/reducers/gifs.js b/src/reducers/gifs.js
new file mode 100644
index 0000000..24ac46a
--- /dev/null
+++ b/src/reducers/gifs.js
@@ -0,0 +1,13 @@
+function gifs(state = '', action){
+ switch (action.type) {
+
+ case 'GIF':
+ console.log(action)
+ return action.answerIsCorrect ? state + 1 : state -1
+
+ default:
+ return state
+ }
+ }
+
+ export default gifs;
\ No newline at end of file
diff --git a/src/reducers/image.js b/src/reducers/image.js
new file mode 100644
index 0000000..379145f
--- /dev/null
+++ b/src/reducers/image.js
@@ -0,0 +1,13 @@
+function image(state = '', action){
+ switch (action.type) {
+
+ case 'SAVE_PHOTO_URL':
+ console.log(action.image)
+ return action.image
+
+ default:
+ return state
+ }
+ }
+
+ export default image;
\ No newline at end of file
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 8e738e8..7de6995 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,6 +1,16 @@
import { combineReducers } from 'redux';
-import placeholder from './placeholder';
+import questionsResults from './QuestionsResults';
+import score from './score';
+import correct_answer from './correct_answer';
+import image from './image';
+
+
+
export default combineReducers({
- placeholder
+ questionsResults,
+ score,
+ correct_answer,
+ image
+
});
diff --git a/src/reducers/questionsResults.js b/src/reducers/questionsResults.js
new file mode 100644
index 0000000..3c948bb
--- /dev/null
+++ b/src/reducers/questionsResults.js
@@ -0,0 +1,21 @@
+
+function questionsResults(state = {
+ questions: {}
+}, action){
+ switch (action.type) {
+ case 'RECEIVE_QUESTIONS':
+ // console.log(action.questions);
+
+
+
+ const newQuestions = Object.assign({}, state, { questions: action.questions});
+ return newQuestions
+
+ //return = action of returning the value of 'questions' in the action object.
+
+ default:
+ return state
+ }
+ }
+
+ export default questionsResults;
\ No newline at end of file
diff --git a/src/reducers/score.js b/src/reducers/score.js
new file mode 100644
index 0000000..7ade2de
--- /dev/null
+++ b/src/reducers/score.js
@@ -0,0 +1,14 @@
+
+function score(state = 0, action){
+ switch (action.type) {
+
+ case 'SCORE_ADD':
+ console.log(action)
+ return action.answerIsCorrect ? state + 1 : state -1
+
+ default:
+ return state
+ }
+ }
+
+ export default score;
\ No newline at end of file
diff --git a/style.css b/style.css
index d9bbbe0..8537a72 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,17 @@
+
+
+html{
+ margin:0;
+
+
+}
+
+body{
+ font-family: 'Roboto', sans-serif;
+ background-color:#5DBCD2;
+margin: 0;
+}
+
.voting-button {
color: #550527;
font-size: 24px;
@@ -8,8 +22,45 @@
border: 2px solid #550527;
}
-.voting-button--selected {
+.voting-button :hover {
color: #FFF;
background-color: #550527;
border: 2px solid white;
}
+
+.quiz__display{
+
+
+/* opacity:0.2; */
+height: 75vh;
+margin:0;
+background-size: cover;
+background-color: rgba(255, 255, 255, 0.4);
+background-blend-mode: lighten;
+
+display:flex;
+align-items: center;
+justify-content: center;
+
+
+}
+
+.Nav h1{
+display:flex;
+align-items: center;
+justify-content: center;
+ font-size: 40px;
+margin: 4;
+
+
+}
+
+
+
+
+
+h2{
+ font-size: 20px;
+ display:flex;
+align-items: center;
+}
+ 
+ 
+
+ 
+ */}
+
+ SCORE: {this.props.score}
+ {/*
+
+
+
+ */}
+