New branch

anecdotes/.prettierrc

@@ -0,0 +1 @@
+{}

anecdotes/src/App.js

@@ -1,9 +1,47 @@
+import { useState } from "react";
+
 const App = () => {
+  const anecdotes = [
+    "If it hurts, do it more often.",
+    "Adding manpower to a late software project makes it later!",
+    "The first 90 percent of the code accounts for the first 10 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.",
+    "Any fool can write code that a computer can understand. Good programmers write code that humans can understand.",
+    "Premature optimization is the root of all evil.",
+    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.",
+    "Programming without an extremely heavy use of console.log is same as if a doctor would refuse to use x-rays or blood tests when diagnosing patients.",
+    "The only way to go fast, is to go well.",
+  ];
+
+  const [selected, setSelected] = useState(0);
+  const [points, setPoints] = useState(Array(anecdotes.length).fill(0));
+  const [mostVotes, setMostVotes] = useState(0);
+
+  const getAnecdote = () => {
+    setSelected(Math.floor(Math.random() * anecdotes.length));
+  };
+
+  const setVote = (voteNum) => {
+    const copy = [...points];
+    copy[voteNum]++;
+    if (copy[voteNum] > copy[mostVotes]) {
+      setMostVotes(voteNum);
+    }
+    setPoints(copy);
+  };
+
   return (
     <div>
-	  Hello World
-	</div>
-  )
-}
+      <h2>Anecdote of the Day</h2>
+      {anecdotes[selected]}
+      <div>has {points[selected]} votes</div>
+      <div>
+        <button onClick={() => setVote(selected)}>vote</button>
+        <button onClick={getAnecdote}>next anecdote</button>
+      </div>
+      <h2>Anecdote with most votes</h2>
+      <div>{anecdotes[mostVotes]}</div>
+    </div>
+  );
+};
 
 export default App;

anecdotes/src/index.js

@@ -1,10 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
+import React from 'react'
+import ReactDOM from 'react-dom/client'
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />)

courseinfo/.prettierrc

@@ -0,0 +1 @@
+{}

courseinfo/src/App.js

@@ -1,9 +1,64 @@
+const Header = (props) => {
+  return <h1>{props.course}</h1>;
+};
+
+const Total = (props) => {
+  return (
+    <p>
+      Number of exercises{" "}
+      {props.parts[0].exercises +
+        props.parts[1].exercises +
+        props.parts[2].exercises}
+    </p>
+  );
+};
+
+const Content = (props) => {
+  return (
+    <div>
+      <Part part={props.parts[0]} />
+      <Part part={props.parts[1]} />
+      <Part part={props.parts[2]} />
+    </div>
+  );
+};
+
+const Part = (props) => {
+  return (
+    <>
+      <p>
+        {props.part.name} {props.part.exercises}
+      </p>
+    </>
+  );
+};
+
 const App = () => {
+  const course = {
+    name: "Half Stack application development",
+    parts: [
+      {
+        name: "Fundamentals of React",
+        exercises: 10,
+      },
+      {
+        name: "Using props to pass data",
+        exercises: 7,
+      },
+      {
+        name: "State of a component",
+        exercises: 14,
+      },
+    ],
+  };
+
   return (
     <div>
-	  Hello World
-	</div>
-  )
-}
+      <Header course={course.name} />
+      <Content parts={course.parts} />
+      <Total parts={course.parts} />
+    </div>
+  );
+};
 
 export default App;

courseinfo/src/index.js

@@ -1,10 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
+import React from 'react'
+import ReactDOM from 'react-dom/client'
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />)

unicafe/.prettierrc

@@ -0,0 +1 @@
+{}

unicafe/src/App.js

@@ -1,9 +1,103 @@
+import { useState } from "react";
+
 const App = () => {
+  // save clicks of each button to its own state
+  const [good, setGood] = useState(0);
+  const [neutral, setNeutral] = useState(0);
+  const [bad, setBad] = useState(0);
+  const [all, setAll] = useState(0);
+  const [average, setAverage] = useState(0);
+
+  const goodReview = () => {
+    setGood(good + 1);
+    setAll(all + 1);
+    setAverage(average + 1);
+  };
+
+  const neutralReview = () => {
+    setNeutral(good + 1);
+    setAll(all + 1);
+  };
+
+  const badReview = () => {
+    setBad(good + 1);
+    setAll(all + 1);
+    setAverage(average - 1);
+  };
+
   return (
     <div>
-	  Hello World
-	</div>
-  )
-}
+      <h2>give feedback</h2>
+      <Button handleClick={goodReview} text="good"></Button>
+      <Button handleClick={neutralReview} text="neutral"></Button>
+      <Button handleClick={badReview} text="bad"></Button>
+      <h2>statistics</h2>
+      <Statistics
+        good={good}
+        neutral={neutral}
+        bad={bad}
+        all={all}
+        average={average}
+      ></Statistics>
+    </div>
+  );
+};
+
+const Button = ({ handleClick, text }) => {
+  return <button onClick={handleClick}>{text}</button>;
+};
+
+const Statistics = ({ good, neutral, bad, all, average }) => {
+  const calculateAverage = () => {
+    if (all === 0) {
+      return 0;
+    } else {
+      return average / all;
+    }
+  };
+
+  const calculatePositive = () => {
+    if (all === 0) {
+      return 0 + " %";
+    } else {
+      let posPercent = (good / all) * 100;
+      return posPercent + " %";
+    }
+  };
+
+  if (all === 0) {
+    return <div>No feedback given</div>;
+  } else {
+    return (
+      <table>
+        <tbody>
+          <StatisticLine text="good" value={good}></StatisticLine>
+          <StatisticLine text="neutral" value={neutral}></StatisticLine>
+          <StatisticLine text="bad" value={bad}></StatisticLine>
+          <StatisticLine text="all" value={all}></StatisticLine>
+          <StatisticLine
+            text="average"
+            value={calculateAverage()}
+          ></StatisticLine>
+          <StatisticLine
+            text="positive"
+            value={calculatePositive()}
+          ></StatisticLine>
+        </tbody>
+      </table>
+    );
+  }
+};
+
+const StatisticLine = ({ text, value }) => {
+  return (
+    <tr>
+      <td>
+        {text}
+        {value}
+      </td>
+    </tr>
+  );
+};
 
 export default App;

unicafe/src/index.js

@@ -1,10 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
+import React from 'react'
+import ReactDOM from 'react-dom/client'
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />)