Video here 27 minutes long. First video on the channel 12/25/2018.
Leverages two APIs: Exchange rate and Countries.
Exchange rate: data.fixer.io/api/latest?access_key=APIKEYHERE
Countries: https://restcoutries.eu/rest/v2/currency/${currencyCode}
Three functions: getExchangeRate, getCountries, convertCurrency
npm init and install axios.
Test what we get from the API.
4:37 we start writing the first function.
/* The non-promises way */
axios.get("urlToAPI").then(response) => {
const rate = response.data.rates
const euro = 1 / rate[fromCurrency]
const echangeRate = euro * rate[toCurrency]
}converted to async/await version
const getExchangeRate = async (fromCurrency, toCurrency) => {
const response = await axios.get("urlToAPI")
const rate = response.data.rates
const euro = 1 / rate[fromCurrency]
const echangeRate = euro * rate[toCurrency]
return exchangeRate
}At 11 minutes we write the second function “getCountries”
At 14 minutes we write the third function “convertCurrency” that makes use of the two pervious function.
21m a little error handling. I like the “isNan if check.”
video here and exercism.io, (Level up your programming skills with 3,450 exercises across 52 languages).
cd into folder, run npm i to install dependencies for that exercise. Export the function so exercism can test your solution.
“exercism submit nameOfFile.js” to test your solution.
JS Mastery’s third video here.
const and let, arrow functions, template literal strings, default parameters, array destructuting, object destructuring, rest operator, spread operator.
defaults parameters just put the equal sign next to the parameter. imaging add function, with a and b as parameters, you should set default’s to zero to avoid getting NaN.
const add = (a = 0, b = 0) => return a + b
add() // get zero instead of NaNThe rest operator allows us to not implicitly specify how many arguments a function will have.
const add = (a, b, c) => console.log([a, b, c]).reduce((a, b) => a + b, 0)
// becomes
const add = (...) => console.log([a, b, c]).reduce((a, b) => a + b, 0)
// now we can call with any number of arguments
add(1, 2, 3, 4, 5, 6, 7, 8)The spread operator uses the same three dots syntax but “spreads” values into an array.
Fourth JSMastery video here.
padStart/padEnd: Never seen this besides this video?
Object.values
“Object.entries” gives the key/value pairs of an object.
Exponentiation simpler syntax: “Math.pow(2, 3)” was the old way to handle exponents and now we get a new syntax “(2 ** 3)”.
Trailing commas is not a new feature but we don’t get a syntax error on the last value in an object or array when it has an unnecessary trailing comma.
Fifth ever JSMastery video here.
Random quote generator using create-react-app and “andruxnet-random-famous-quotes.p.mashape.com” API that seems to no longer be valid. Here is the link to the new API URL, (note that this API requires a key):
“https://rapidapi.com/andruxnet/api/random-famous-quotes/”
Creates a quote object has quote, author, category properties. Major difference with JSON is the key needs to be wrapped in double quotes.
import axios
Use async function “getQuotes”
uses material-ui/core
import {Button, Card, CardContent, Typography} from "material-ui/core"<Card className="card">
<CardContent>
<Typography variant="h2"></Typography>
<Typography className="marginTop" color="textSecondary"></Typography>
<hr />
<Button className="marginTop" color="primary" variant="outlined"></Button>
</CardContent>
</Card>
// CSS styles available in sourceNeed to parse JSON after getting the data.
JSON.stringify() converts an object to JSON
JSON.parse() converts JSON to a object
Axios parses JSON into an object by default
Significantly more views on this early video on the channel.
In a client project install axios and file-saver packages. Create a proxy in the client?
Also create a server in a new directory/project.
Check this video out with more time.
Video here.
Code time – https://marketplace.visualstudio.com/… One Dark Prop – https://marketplace.visualstudio.com/… Bracket Pair Colorizer – https://marketplace.visualstudio.com/… Color Highlight – https://marketplace.visualstudio.com/… Path Intellisense – https://marketplace.visualstudio.com/… ES7 React/Redux/GraphQL/React-Native snippets – https://marketplace.visualstudio.com/… GitLens — Git supercharged – https://marketplace.visualstudio.com/…
Watch with more time.
Check out the “Array Methods” post as well.
const myArray = [1, 2, 3, 4, 5, 5, 5, 1, 2]
const mySet = new Set(myArray)The “Set” object lets you store unique values of any type, primitives or object references. Used to remove duplicate values for an array.
Can easily use a set to turn back into an array.
const uniqueArray = [ ...mySet ]Explore different methods: add(), delete(), .clear(), has(), size()
Differences between arrays and Sets: Array is ordered where Set is unorder so can’t use index.
Set is meant to not replace array but to provide additional support to an array.
The Map object holds key-value pairs and remembers the original insertion order of the keys. Any values, both objects and primitives, can be stored as either a key or value. Map is a data structure that exists in other programming languages. introduced in ES6. map values to other values and Most importantly can use objects as keys.
const myMap = newMap([ ['name', 'John'], ['surname' 'Doe'] ])The problem that Map solves is that JS objects only support one one key object.
const myObj = {}
const a = {}
const b = {}
myObject[a] = 'a'
// myObject[b] = 'b'
console.log(myObject) // gets back {'[object Object]': 'a'}When we add a second object b, the a object gets overridden.
const a = {}
const b = {}
const mymap = {[ [a: 'a'], [b: 'b'] ]}
map
console.log(my) // gets back { {} => 'a', {} => 'b'}The Map keeps track of both key objects.
Different methods Map has to offer: set(), delete(), clear(), has(), size()
git –version
git add single files versus all files
Create a snapshot like a giant copy/paste using git commit -m
git messages should NOT be in past tense (add navbar versus added navbar)
push to remote repository
add new remote by using “git remote add origin”
For the first time “git push -u origin master”
branches are pointers to specific commits or clusters of commits
git branch to see all branches
git checkout -b newBranchName
First time you are setting the branch you need to –set-upstream?
Merge with “git checkout master” and the “git merge branch”
Change branches quickly in visual studio code by clicking on the bottom left branch icon in VSCode.
After merging use “git pull” on the to master branch to make sure you are “up to date.”