From f554ab09e8d6407dd4f03e7207a49de438fb4fb2 Mon Sep 17 00:00:00 2001 From: Tim Date: Sat, 8 Apr 2023 17:11:49 -0700 Subject: [PATCH 1/3] finish part b --- courseinfo/.prettierrc | 1 + courseinfo/src/App.js | 63 ++++++++++++++++++++++++++++++++++++++--- courseinfo/src/index.js | 14 ++++----- 3 files changed, 65 insertions(+), 13 deletions(-) create mode 100644 courseinfo/.prettierrc diff --git a/courseinfo/.prettierrc b/courseinfo/.prettierrc new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/courseinfo/.prettierrc @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/courseinfo/src/App.js b/courseinfo/src/App.js index 5c72bc7..0ce88e0 100644 --- a/courseinfo/src/App.js +++ b/courseinfo/src/App.js @@ -1,9 +1,64 @@ +const Header = (props) => { + return

{props.course}

; +}; + +const Total = (props) => { + return ( +

+ Number of exercises{" "} + {props.parts[0].exercises + + props.parts[1].exercises + + props.parts[2].exercises} +

+ ); +}; + +const Content = (props) => { + return ( +
+ + + +
+ ); +}; + +const Part = (props) => { + return ( + <> +

+ {props.part.name} {props.part.exercises} +

+ + ); +}; + 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 (
- Hello World -
- ) -} +
+ + + + ); +}; export default App; diff --git a/courseinfo/src/index.js b/courseinfo/src/index.js index 593edf1..0a2a6d7 100644 --- a/courseinfo/src/index.js +++ b/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( - - - -); +import App from './App' + +ReactDOM.createRoot(document.getElementById('root')).render() \ No newline at end of file From 35ad60307b6dbb4f30c3d98337a22cd3ba1f3c45 Mon Sep 17 00:00:00 2001 From: Tim Date: Sun, 9 Apr 2023 12:41:08 -0700 Subject: [PATCH 2/3] finish unicafe --- unicafe/.prettierrc | 1 + unicafe/src/App.js | 102 +++++++++++++++++++++++++++++++++++++++++-- unicafe/src/index.js | 14 +++--- 3 files changed, 104 insertions(+), 13 deletions(-) create mode 100644 unicafe/.prettierrc diff --git a/unicafe/.prettierrc b/unicafe/.prettierrc new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/unicafe/.prettierrc @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/unicafe/src/App.js b/unicafe/src/App.js index 5c72bc7..26d5b35 100644 --- a/unicafe/src/App.js +++ b/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 (
- Hello World -
- ) -} +

give feedback

+ + + +

statistics

+ + + ); +}; + +const Button = ({ handleClick, text }) => { + return ; +}; + +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
No feedback given
; + } else { + return ( + + + + + + + + + +
+ ); + } +}; + +const StatisticLine = ({ text, value }) => { + return ( + + + {text} + {value} + + + ); +}; export default App; diff --git a/unicafe/src/index.js b/unicafe/src/index.js index 593edf1..0a2a6d7 100644 --- a/unicafe/src/index.js +++ b/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( - - - -); +import App from './App' + +ReactDOM.createRoot(document.getElementById('root')).render() \ No newline at end of file From 7e87f6b9d8ac7c732cec51d7098ddcbd9ac2417f Mon Sep 17 00:00:00 2001 From: Tim Date: Sun, 9 Apr 2023 13:18:39 -0700 Subject: [PATCH 3/3] finish anecdotes --- anecdotes/.prettierrc | 1 + anecdotes/src/App.js | 46 ++++++++++++++++++++++++++++++++++++++---- anecdotes/src/index.js | 14 +++++-------- 3 files changed, 48 insertions(+), 13 deletions(-) create mode 100644 anecdotes/.prettierrc diff --git a/anecdotes/.prettierrc b/anecdotes/.prettierrc new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/anecdotes/.prettierrc @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/anecdotes/src/App.js b/anecdotes/src/App.js index 5c72bc7..74e2296 100644 --- a/anecdotes/src/App.js +++ b/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 (
- Hello World -
- ) -} +

Anecdote of the Day

+ {anecdotes[selected]} +
has {points[selected]} votes
+
+ + +
+

Anecdote with most votes

+
{anecdotes[mostVotes]}
+ + ); +}; export default App; diff --git a/anecdotes/src/index.js b/anecdotes/src/index.js index 593edf1..0a2a6d7 100644 --- a/anecdotes/src/index.js +++ b/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( - - - -); +import App from './App' + +ReactDOM.createRoot(document.getElementById('root')).render() \ No newline at end of file