From 9878fc5dae00b8dd25147a8abf8feec06e935677 Mon Sep 17 00:00:00 2001 From: Roger David Cruz Date: Wed, 18 Nov 2020 15:45:12 -0500 Subject: [PATCH 1/2] part 1 full stack open exercises --- anecdotes/index.js | 133 +++++++++++++++ courseinfo/index.js | 276 +++++++++++++++++++++++++++++++ unicafe/index.js | 393 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 802 insertions(+) create mode 100644 anecdotes/index.js create mode 100644 courseinfo/index.js create mode 100644 unicafe/index.js diff --git a/anecdotes/index.js b/anecdotes/index.js new file mode 100644 index 0000000..0993561 --- /dev/null +++ b/anecdotes/index.js @@ -0,0 +1,133 @@ +// Exercise 1.14 Anecdotes - Step 3 + +import React, { useState } from 'react' +import ReactDOM from 'react-dom' + +const App = () => { + const [selected, setSelected] = useState(0) + const selectRandomAnecdote = () => setSelected(Math.floor(Math.random() * anecdotes.length)); + + // Stores votes of each anecdote in an initial zero-filled array of + // length equal to the quantity of indexes in the anecdotes array + const [votes, setVotes] = useState(new Array(anecdotes.length).fill(0)); + + // Function to store votes and increment votes of each index position + // by one in each array index that started as a zero, each index is an anecdote + const incrementVote = () => { + const newVotes = [...votes]; + newVotes[selected] += 1; + setVotes(newVotes) + } + + // Function that finds the index of the anecdote within the array that contains the most number of votes + const findMaxVotedAnecdote = () => votes.indexOf(Math.max(...votes)); + + return ( +
+

Anecdote of the day

+

{anecdotes[selected]}

+

has {votes[selected]} votes

+ + + +

Anecdote with most votes

+

{anecdotes[findMaxVotedAnecdote()]}

+

has {votes[findMaxVotedAnecdote()]} votes

+ +
+ ) +} + +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 90 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.' +] + +ReactDOM.render( + , + document.getElementById('root') +) + +//--------------------------------------------------------------------------------------------------------- + +// Exercise 1.13 Anecdotes - Step 2 + +import React, { useState } from 'react' +import ReactDOM from 'react-dom' + +const App = () => { + const [selected, setSelected] = useState(0) + const selectRandomAnecdote = () => setSelected(Math.floor(Math.random() * anecdotes.length)); + + // Stores votes of each anecdote in an initial zero-filled array of + // length equal to the quantity of indexes in the anecdotes array + const [votes, setVotes] = useState(new Array(anecdotes.length).fill(0)); + + // Function to store votes and increment votes of each index position + // by one in each array index that started as a zero, each index is an anecdote + const incrementVote = () => { + const newVotes = [...votes]; + newVotes[selected] += 1; + setVotes(newVotes) + } + + return ( +
+

{anecdotes[selected]}

+

has {votes[selected]} votes

+ + +
+ ) +} + +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 90 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.' +] + +ReactDOM.render( + , + document.getElementById('root') +) + +//--------------------------------------------------------------------------------------------------------- + +// Exercise 1.12 Anecdotes - Step 1 + +import React, { useState } from 'react' +import ReactDOM from 'react-dom' + +const App = (props) => { + const [selected, setSelected] = useState(0) + const selectRandomAnecdote = () => setSelected(Math.floor(Math.random() * anecdotes.length)); + + return ( +
+

{props.anecdotes[selected]}

+ +
+ ) +} + +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 90 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.' +] + +ReactDOM.render( + , + document.getElementById('root') +) diff --git a/courseinfo/index.js b/courseinfo/index.js new file mode 100644 index 0000000..fa60e4d --- /dev/null +++ b/courseinfo/index.js @@ -0,0 +1,276 @@ +// Exercise 1.5 Course Information, Step 5 + +import React from 'react' +import ReactDOM from 'react-dom' + + +const Header = ({courseName}) => { + return ( +

{courseName}

+ ) +} + +const Content = ({parts}) => { + return ( +
+

{parts[0].name} {parts[0].exercises}

+

{parts[1].name} {parts[1].exercises}

+

{parts[2].name} {parts[2].exercises}

+
+ ) +} + +const Total = ({parts}) => { + return ( +

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

+ ) +} + +const App = () => { + const course = 'Half Stack application development' + const parts = [ + { + name: 'Fundamentals of React', + exercises: 10 + }, + { + name: 'Using props to pass data', + exercises: 7 + }, + { + name: 'State of a component', + exercises: 14 + } + ] + + return ( +
+
+ + +
+ ) +} + +ReactDOM.render(, document.getElementById('root')) + +//--------------------------------------------------------------------------------------------------------- + +// Exercise 1.4 Course Information, Step 4 + +import React from 'react' +import ReactDOM from 'react-dom' + + +const Header = ({courseName}) => { + return ( +

{courseName}

+ ) +} + +const Content = ({parts}) => { + return ( +
+

{parts[0].name} {parts[0].exercises}

+

{parts[1].name} {parts[1].exercises}

+

{parts[2].name} {parts[2].exercises}

+
+ ) +} + +const Total = ({exercisesTotalSum}) => { + return ( +

Number of exercises {exercisesTotalSum}

+ ) +} + +const App = () => { + const course = 'Half Stack application development' + const parts = [ + { + name: 'Fundamentals of React', + exercises: 10 + }, + { + name: 'Using props to pass data', + exercises: 7 + }, + { + name: 'State of a component', + exercises: 14 + } + ] + + return ( +
+
+ + +
+ ) +} + +ReactDOM.render(, document.getElementById('root')) + +//--------------------------------------------------------------------------------------------------------- + +// Exercise 1.3 Course Information, Step 3 + +import React from 'react' +import ReactDOM from 'react-dom' + + +const Header = ({courseName}) => { + return ( +

{courseName}

+ ) +} + +const Content = ({part1, part2, part3}) => { + return ( +
+

{part1.name} {part1.exercises}

+

{part2.name} {part2.exercises}

+

{part3.name} {part3.exercises}

+
+ ) +} + +const Total = ({exercisesTotalSum}) => { + return ( +

Number of exercises {exercisesTotalSum}

+ ) +} + +const App = () => { + const course = 'Half Stack application development' + const part1 = { + name: 'Fundamentals of React', + exercises: 10 + } + const part2 = { + name: 'Using props to pass data', + exercises: 7 + } + const part3 = { + name: 'State of a component', + exercises: 14 + } + + return ( +
+
+ + +
+ ) +} + +ReactDOM.render(, document.getElementById('root')) + + +//--------------------------------------------------------------------------------------------------------- + +// Exercise 1.2 Course Information, Step 2 + +import React from 'react' +import ReactDOM from 'react-dom' + + +const Header = ({courseName}) => { + return ( +

{courseName}

+ ) +} + +const Part = ({part}) => { + return ( +

{part.name} {part.exercises}

+ ) +} + +const Total = ({exercisesTotalSum}) => { + return ( +

Number of exercises {exercisesTotalSum}

+ ) +} + +const App = () => { + const course = 'Half Stack application development' + const part = [ + { + name: 'Fundamentals of React', + exercises: 10 + }, + { + name: 'Using props to pass data', + exercises: 7 + }, + { + name: 'State of a component', + exercises: 14 + }, + ] + + return ( +
+
+ + + + +
+ ) +} + +ReactDOM.render(, document.getElementById('root')) + +//--------------------------------------------------------------------------------------------------------- + +// Exercise 1.2 Course Information, Step 1 + +import React from 'react' +import ReactDOM from 'react-dom' + + +const Header = ({courseName}) => { + return ( +

{courseName}

+ ) +} + +const Content = ({part1Prop, exercises1Prop, part2Prop, exercises2Prop, part3Prop, exercises3Prop}) => { + return ( +
+

{part1Prop} {exercises1Prop}

+

{part2Prop} {exercises2Prop}

+

{part3Prop} {exercises3Prop}

+
+ ) +} + +const Total = ({exercisesTotalSum}) => { + return ( +

Number of exercises {exercisesTotalSum}

+ ) +} + +const App = () => { + const course = 'Half Stack application development' + const part1 = 'Fundamentals of React' + const exercises1 = 10 + const part2 = 'Using props to pass data' + const exercises2 = 7 + const part3 = 'State of a component' + const exercises3 = 14 + + return ( +
+
+ + +
+ ) +} + +ReactDOM.render(, document.getElementById('root')) diff --git a/unicafe/index.js b/unicafe/index.js new file mode 100644 index 0000000..f593ba1 --- /dev/null +++ b/unicafe/index.js @@ -0,0 +1,393 @@ +// Exercise 1.11 Unicafe - Step 6 + +import React, { useState } from 'react' +import ReactDOM from 'react-dom' + +const Button = ({text, handleClick}) => { + return ( + + ) +} + +const Statistic = ({text, value}) => { + return ( + + {text} {value} + + ) +} + +const Statistics = ({good, neutral, bad}) => { + const total = good + neutral + bad; + return ( +
+ { + total ? + + + + + + + + + +
+ : +

No feedback given

+ } +
+ ) +} + +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) + + return ( +
+

give feedback

+ + + + +

statistics

+ +
+ ) +} + +ReactDOM.render(, + document.getElementById('root') +) + +//--------------------------------------------------------------------------------------------------------- + +// Exercise 1.10 Unicafe - Step 5 + +import React, { useState } from 'react' +import ReactDOM from 'react-dom' + +const Button = ({text, handleClick}) => { + return ( + + ) +} + +const Statistic = ({text, value}) => { + return ( +

{text} {value}

+ ) +} + +const Statistics = ({good, neutral, bad}) => { + const total = good + neutral + bad; + return ( +
+ { + total ? +
+ + + + + + +
+ : +

No feedback given

+ } +
+ ) +} + +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) + + return ( +
+

give feedback

+ + + + +

statistics

+ +
+ ) +} + +ReactDOM.render(, + document.getElementById('root') +) + +//--------------------------------------------------------------------------------------------------------- + +// Exercise 1.9 Unicafe - Step 4 + +import React, { useState } from 'react' +import ReactDOM from 'react-dom' + +const Header = ({title}) => { + return ( +

{title}

+ ) +} + +const Option = ({text, handleClick}) => { + return ( + + ) +} + +const SubHeader = ({subTitle}) => { + return ( +

{subTitle}

+ ) +} + +const Statistic = ({text, value}) => { + return ( +

{text} {value}

+ ) +} + +const Statistics = ({good, neutral, bad}) => { + const total = good + neutral + bad; + return ( +
+ { + total ? +
+ + + + + + +
+ : +

No feedback given

+ } +
+ ) +} + +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 title = "give feedback" + const subTitle = "statistics" + + return ( +
+
+ + + + + +
+ ) +} + +ReactDOM.render(, + document.getElementById('root') +) + +//--------------------------------------------------------------------------------------------------------- + +// Exercise 1.8 Unicafe - Step 3 + +import React, { useState } from 'react' +import ReactDOM from 'react-dom' + +const Header = ({title}) => { + return ( +

{title}

+ ) +} + +const Option = ({text, handleClick}) => { + return ( + + ) +} + +const SubHeader = ({subTitle}) => { + return ( +

{subTitle}

+ ) +} + +const Statistic = ({text, value}) => { + return ( +

{text} {value}

+ ) +} + +const Statistics = ({good, neutral, bad}) => { + const total = good + neutral + bad; + return ( +
+ + + + + + +
+ ) +} + + +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 title = "give feedback" + const subTitle = "statistics" + + return ( +
+
+ + + + + +
+ ) +} + +ReactDOM.render(, + document.getElementById('root') +) + +//--------------------------------------------------------------------------------------------------------- + +// Exercise 1.7 Unicafe - Step 2 + +import React, { useState } from 'react' +import ReactDOM from 'react-dom' + +const Header = ({title}) => { + return ( +

{title}

+ ) +} + +const Option = ({text, handleClick}) => { + return ( + + ) +} + +const SubHeader = ({subTitle}) => { + return ( +

{subTitle}

+ ) +} + +const Statistic = ({text, value}) => { + return ( +

{text} {value}

+ ) +} + +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 title = "give feedback" + const subTitle = "statistics" + const total = good + bad + neutral + + return ( +
+
+ + + + + + + + + + +
+ ) +} + +ReactDOM.render(, + document.getElementById('root') +) + +//--------------------------------------------------------------------------------------------------------- + +// Exercise 1.6 Unicafe - Step 1 + +import React, { useState } from 'react' +import ReactDOM from 'react-dom' + +const Header = ({title}) => { + return ( +

{title}

+ ) +} + +const Option = ({text, handleClick}) => { + return ( + + ) +} + +const SubHeader = ({subTitle}) => { + return ( +

{subTitle}

+ ) +} + +const Statistic = ({text, value}) => { + return ( +
+

{text} {value}

+
+ ) +} + +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 title = "give feedback" + const subTitle = "statistics" + + return ( +
+
+ + + + + + + +
+ ) +} + +ReactDOM.render(, + document.getElementById('root') +) From e11f954ff69127e7775f5064866850dfa0b18499 Mon Sep 17 00:00:00 2001 From: Roger David Cruz Date: Wed, 18 Nov 2020 15:48:15 -0500 Subject: [PATCH 2/2] updated readMe --- README.md | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/README.md b/README.md index 4e54165..99ba53f 100644 --- a/README.md +++ b/README.md @@ -2,21 +2,8 @@ ### Goal: Complete the exercises from Fullstack Open Week 1: [https://fullstackopen.com/en/part1](https://fullstackopen.com/en/part1) -### How to submit your code for review: - -- Fork and clone this repo -- Create a new branch called solutions -- Checkout solutions branch -- Push to your fork -- Issue a pull request -- Your pull request description should contain the following: - - (1 to 5 no 3) I completed the challenges - - (1 to 5 no 3) I feel good about my code - - Anything specific on which you want feedback! - -#Example: ``` I completed the challenge: 5 I feel good about my code: 4 -I'm not sure if my constructors are setup cleanly... +Destructuring the array and initializing a zero filled array using the length of an array and .fill(0) method is something I wish to understand better. ```