code reading Flashcards
1
Q
-!doctype html-
A
there is a doctype element declaration with the value html?
2
Q
title - (html skeleton) -/title
A
There is the opening tag for the title element with the text content of html skeleton, followed by the closing tag for the title element.
3
Q
-p- © Pokemon. ® Nintendo. -/p-
A
there’s an opening tag for a paragraph element with a text content of an escape entity ampersand copy; pokemon. Ampersand reg; Nintendo. Then a closing tag for the paragraph element.
4
Q
-a href=”%E2%80%9Dindex.html%E2%80%9D”>homepage-/a-
A
opening tag for anchor element with an href attribute of index.html with a text content of homepage and then a closing tag for the anchor element.
5
Q
input (opening input tag)
A
there is an input element… (not opening tag for input element, since there’s no closing tag).
6
Q
h2#JS { color: blue;}
A
There is a selector for THE h2 element with the ID of JS. Inside of the declaration, there is a property of color with the value of blue.
7
Q
Body { color: #090302; font-family: sans-serif;}
A
“on line 1 there is a css selector for all elements of type body/(for all article elements) and the opening curly brace for the declaration block. On line 2 there is a color property with the value of hex code seen here. On line 3 there is a font family property with the value sans serif, and on line 4 there is a closing curly brace for the declaration block.”
8
Q
border: 1px solid;
A
“there is a border shorthand property with the value of 1px and solid”
9
Q
.title
A
There is a css selector for all elements with the class ‘title’.
10
Q
body{ background-color: rgb (200, 233, 255);}
A
there is a background-color property with the value of the rgb css function with the values 200, 233, 255
11
Q
font-family: ‘cabin’, sans-serif.
A
there is a font family prop with a value cabin, and a fall back value sans-serif
12
Q
.custom-button:hover
A
there’s a css selector all elements with the class custom button and the pseudo class hover
13
Q
table.striped thead > tr
A
there’s a css selector for all tr elements which are direct children of a thead element that is a descendant of the table element with the class striped.
14
Q
Table.striped tbody > tr:nth-child(odd)
A
there’s a css selector for all tr elements with the pesudo class nth child with the argument odd, which is a direct child of a tbody element which is a descendant of a table element with class striped
15
Q
html (opening html tag)
A
there is an opening tag for the html element.
16
Q
/head (closing head tag)
A
there is a closing tag for the head element
17
Q
-img- src=”url” width=” 700px alt=”text” -
A
There is an image tag with a source attribute set to “url”, a width attribute set to 700pixels, and an alt attribute set to “text”.
18
Q
Body { color: #090302; font-family: sans-serif;}
A
“on line 1 there is a css selector for all elements of type body/(for all article elements) and the opening curly brace for the declaration block. On line 2 there is a color property with the value of hex code seen here. On line 3 there is a font family property with the value sans serif, and on line 4 there is a closing curly brace for the declaration block.”
19
Q
border: 1px solid;
A
“there is a border shorthand property with the value of 1px and solid”
20
Q
.title
A
There is a css selector for all elements with the class ‘title’.
21
Q
body{ background-color: rgb (200, 233, 255);}
A
there is a background-color property with the value of the rgb css function with the values 200, 233, 255
22
Q
font-family: ‘cabin’, sans-serif.
A
there is a font family prop with a value cabin, and a fall back value sans-serif
23
Q
.custom-button:hover
A
there’s a css selector all elements with the class custom button and the pseudo class hover
24
Q
table.striped thead > tr
A
there’s a css selector for all tr elements which are direct child of athead element that is a descendent of the table element with the class striped.
25
Table.striped tbody > tr:nth-child(odd)
there’s a css selector for all tr elements with the pseudo class nth child with the argument odd, which is a direct child of a tbody element which is a descendant of a table element with class striped
26
-p-blahblah- em-beautiful-/em- blah blah -/p-
There is an opening tag for the p element...then an opening tag for em tag with text content beautiful, with a close tag for the em element, and text content
27
var firstName = ‘Keenan’
on line one the string ‘keenan’ is being assigned as the value of the variable named firstName.
28
Var age = 25
the numeric literal, 25, is assigned to the variable named ‘age’.
29
var address = number + street
the value of the variable number is being concatenated/added with the value of the variable street, and the result of that expression (any work that needs to be done by js) is assigned to the variable address.
-NOTE, with concatenation, and maybe all js, just reading it in normal order. Don’t start from the absolute farthest right thing and working your way left. So don’t say street is being added
30
var bio = 'My name is ' + firstName + ' ' + lastName + ' and I am ' + age + ' years old.'
the string my name is is being concatenated with the value of the variable first name which is then concatenated with the string space which is then concatenated with the value of the variable last name which is then concatenated with string I am and then concatenated with value of variable age then concatenated with the string years old. And the result of that concatenation is being assigned to the variable named 'bio'.
31
Console.log( typeof bio);
the log method of the console object is being called with 1 argument: the result of the expression of the typeof operator being used against the value of the variable bio
32
var cheap = price < 100
the value of the variable price is being checked to see if it is less than the number 100, and the result of that expression is being assigned to the variable named cheap
33
var nullVariable = null;
the value null is being assigned to the variable named nullVariable.
34
function addTwoNumbers(a, b) { return a + b)
line 1 there is a function definition named addTwoNumbers with two parameters, a and b, and the opening curly brace for the function code block
on line 2 the value of the variable ‘a’ is being added with the value of the variable ‘b’, and the result of that expression is being returned by the function.
35
Function typeofdata(data) { return typeof data }
there is a function definition named typeofdata that takes a single parameter of data, opening curly brace for the function code block, on next line, the typeof operator is being used against the value of the variable ‘data’, and the result of the expression is being returned by the function. Then a closing curly brace for the function code block.
36
if (value1 < value2) {
console.log('value1 is smaller');
} else console.log('value2 is smaller');
on line 18 there is an if statement with a condition checking if the value of the variable value1 is less than the value of the variable value2, then the opening curly brace for conditional code block
on line 19 the log method of the console object is being called with one argument; string “value1 is smaller”);
on line 20 is an else statement. and then the log method on the console object is called with one argument, a string with the value ‘value 2 is smaller’)
37
if (value2 >= value1 && value2 <= value4)
if (value2 >= value1 && value2 <= value4)
on line 32 there is an if statement with a condition checking if the value stored in variable 2 is greater than or equal to the value stored in variable 1. AND checking if the value stored in variable value2 is less than or equal to the value stored in variable value4
38
(value2 >= value1 && value2 <= value4)
there is an if statement with a conditional checking if the value of the variable value 2 is greater than or equal to the value of the variable2 AND if the value of variable value2 is less than or equal to the value of the variable value4.
39
switch(operator) {
case “+”:
result = num1 + num2;
break;}
on line 16 there is a switch statement with an expression checking the value of the variable 'operator'.
There is a case statement checking for the string “+”, on the next line, the value of the variable num1 is being added to the value of the variable num2, and the result of that expression is being assigned to the variable named result.
on the next line there is a break statement.
40
```
var student = {
firstName: 'Keenan',
lastName: 'Ng',
age: 29
}
```
line one there is a object literal being defined. on line 2 there is a property of firstName assigned a value of string Keenan…. Last name: skywalker… age 25.
And that object literal is being assigned to the variable ‘student’.
41
var studentsName = student.firstName + ' ' + student.lastName;
The value stored at the firstName property of the student object is being concatenated with the string ‘space’ which is being concatenated with the value stored at the lastName property of the student object.
42
console.log('My car', myCar);
the log method on the console object is being called with the value contained in the variable ‘myCar’
43
var colors = ['red',
'white',
'blue'];
on line 1 there is an array literal with values string red, string white, and string blue, as its contents, and that array literal is being assigned to the variable named colors
44
console.log('First Array Index:', colors[0]);
the log method of the console object is being called with 2 arguments: the string first array index”, and the value at the 0 index of the colors array.
45
Colors[2] = ‘green’
the string value of green is being assigned to the 2 index of the colors array.
46
Var amountOfStudents = students.length
the value of the length property of the students object/array is being assigned to the variable named amountOfStudents.
47
```
(don't read: var amtOfStudents = students.length)
var lastStudentInArray = students[amtOfStudents - 1];
```
The value of the variable amtofstudents is being subtracted by 1 and the result of that expression is being used as the index of the students array, and the value at that index, is being assigned to the variable named lastStudentInArray.
48
var library = [ ];
There is an empty array literal being assigned to the variable named library
49
console.log(library[0].title);
the log method on the console object is being called with one argument:
the value of the title property of the object at the 0 index of the library array
50
Library.push(book)
the push method of the library array is being called with a single argument of the value stored in the variable book.
51
console.log('==1', "5"==5);
the log method of the console object is being called with 2 arguments. The first argument is the string 'double equals 1' the second argument is an expression checking to see if the string '5' is loosely equal to the numeric literal 5'.
52
if (value2 < value3 || value2 > value4)
there is an if statement with a condition checking if the value of the variable value2 is less than the value of the variable value3 OR the value of the variable value2 is greater than the value of the variable value4
53
```
read the title line only.
var library = [
{
title: 'the road ahead',
author: 'Bill Gates',
libraryID: 1254
),
```
on line 3 the string with the value 'the road ahead' is being assigned to the property 'title'.
54
console.log(library[0].title)
the log method of the console object is being called with a single argument, the value of the 'title' property of the object at the 0 index of the 'library' array.
55
var box1 = document.getElementById(‘box1’)
the getElementById method of the document object is being called with the single argument of the string ‘box1’. And the return from that method is being assigned to the variable named box1.
56
box1.classList.remove(‘blue’)
the remove method of the object within the classList property of the box1 object is being called with the single argument, string blue.
57
box1.classList.add(‘red’)
The add method of the object within the classList property of the box1 object is being called with the argument of the string red.
58
Box2.style.height=”150px”;
The string 150 pixels is being assigned as the value for the height property of the object within the style property of the box2 object.
59
var textElement = document.getElementById(‘h1tag’)
the getElementById method on the document object is being called with the single argument of the string h1tag. And the return of that method is being assigned to the variable named textElement.
60
Var elementText = textElement.textContent;
The value of the textContent property of the textElement object is being assigned to the variable named elementText.
61
ElementText += “, you have properly manipulated text!”
the string “, you have properly manipulated text!” is being added to the current value, AND SAVED within the variable ‘elementText’.
62
textElement.textContent = elementText
The value of the variable elementText is being assigned as the value to the textContent property of the textElement object.
63
Var inputElement = document.getElementById(‘textInput”);
The getElementById method of the document object is being called with one argument, string ‘textInput’. And The return of that method is being assigned to the inputElement variable.
64
Var inputValue = inputElement.value
the value of the ‘value’ property of the inputElement object is being assigned to the variable named inputValue.
65
InputElement.value = 867.
The number 867 is being assigned to the value property of the inputElement object.
66
InputElement.value = valueUpdate
The value of the variable valueUpdate is being assigned as the ‘value’ of the value property of the inputElement object.
67
Var valueUpdate = inputValue += 5309
The number 5309 is being added to the current value of the variable inputValue and assigned as the value for the value of inputValue as well as the value of the variable valueUpdate
Alternate that follows the other flashcard:
The number 5309 is being add to the current value of and saved within, the variable 'inputValue', which is then assigned to the variable named valueUpdate
68
var clickButton = document.querySelector(‘#clickbutton’);
the querySelector method of the document object is being called with a single argument, string #clickbutton, and the result of that method is being assigned to the variable clickButton
69
clickButton.addEventListener(‘click’, handleClick);
the addEventListener method of the clickButton object is being called with two arguments. The string ‘click’ and the variable handleClick. (value stored within the variable handleclick?)
70
```
function handleClick(event) {
console.log(event);
alert(‘it works’); }
```
There is a function declaration named handleClick that takes 1 parameter, the variable named event (or is it just ‘event’?).
The log method of the console object is being called with one argument (or parameter?) , the variable named event.
The alert function is being called with one argument, the string ‘it works’.
71
while (current <= max) {
console.log('current value:', current);
current++;
}
There is a while loop with a condition checking if the value of the variable ‘current’ is less than or equal to the value of the variable ‘max’.
the log method of the console object is being called with 2 arguments, the string 'current value' and the value stored in the variable 'current'.
There is a variable named 'current' followed by the increment operator.
72
current++
there is the variable ‘current’ followed by the increment operator.
73
for( I = 1; I <=10; i++)
on line 3 there is a for loop with an initialization setting 1 as the value for the variable ‘i’, and a condition checking if the value of the variable i’ is less than or equal to 10 followed by a final expression with the variable ‘i’ followed by the operator ++ (increment operator).
74
for (j = 2; j <= 20; j += 2)
there is a for loop with an initialization, setting 2 as the value for the variable ‘j’, and a condition checking if the value of j is less than or equal to 20, followed by a final expression with the variable ‘j’ followed by an addition assignment of 2, to the variable ‘j. (followed by a final expression of j+= 2).
75
for (k = 10; k >= 0; k--)
there is a for loop with an initialization, setting 10 as the value for the variable k, and a condition checking if the value of the variable ‘k’ is less than or equal to 0, followed by a final expression of the variable ‘k’ followed by a decrement operator.
76
```
var filmCredits = {
writer: "John Wick",
director: "John Cena",
producer: "John Wall",
intern: "Johnn Cage"
}
```
On line 1 there is an object literal being declared. On line 2+ there is a property of ___ with a value of ____. And that object literal is being assigned to the variable named filmCredits.
77
For (var x in filmCredits) {
console.log(filmCredits[role],'as', role);
}
There is a for in loop. With variable ‘x’ as the key in object ‘filmCredits’. On the next line,
the log method of the console object is being called with an argument of an expression, which is the value of the variable role, as the index (or property) in the filmCredits object, concatenated with the string 'as', which is the concatenated with the value of the variable ‘role’.
78
var section 1 = document.getelemenetbyid(‘section1’)
there is a getelementbyid method of the document object being called with one argument, the string ‘section1’, and the return of that method is being assigned to the variable named section1.
79
var section1LastElementChild = section1.lastElementChild;
Value of the lastElementChild property of the section1 object is being assigned to the variable named section1LastElementChild.
80
var h4Sibling = siblingP.nextElementSibling;
The (‘value of the?’ Not sure if this is right) nextElementSibling property of the siblingP object is being assigned to the variable h4sibling
81
heading.textContent = ‘shopping list’
the string shopping list is being assigned to the textContent property of the heading object.
82
Body.appendChild(heading);
the appendChild method of the body object is being called with one argument, the value stored within variable named heading.
83
```
Uzair ending vs cody ending:
var listItem2 = document.createElement(‘li’);
```
uzair:
‘And the return value of that method is being assigned to the variable ____’
cody:
‘and the return of that method is being assigned to the variable ____’
84
body appendChild(heading);
the appendChild method of the body object is being called with one argument, the value stored within the variable ‘heading’
85
var todoItemsarray = [ ];
the array literal is being assigned to the variable named todoItemsArray
86
for(var i = 0; i < todoItemsArray.length; i++)
there is a for loop with the initialization of the number 0 being assigned to the variable I; the condition, checking if the value stored in the variable ‘i’ is less than the value of the length property of the todoItemsArray; and a final expression of the value of the variable I, followed by the increment operator.
87
todoSubmitButton.addEventListener('click', function() {});
The addEventListener method of the todoSubmitButton object being called with two arguments: the string 'click', and a function definition.
88
var box1 = $('#box1')
the dollar sign (or jQuery) function is being called with a single argument, string 'id box1', and the return of that function call is being assigned to the variable box 1
89
$('box1').removeClass('blue').addClass('red');
the jquery function is being called with the argument string box1 followed by the removeClass method of that object being called, with an argument string 'blue', followed by the addClass method of the object returned from removeClass being called, with the string 'red'.
90
function handleContainerClick(event) { }
there is a function declaration named handleContainerClick that is prepared to take one parameter, 'event'.
91
multiply: function(num1, num2)
there is an anonymous function definition with 2 parameters, num1 and num2, and that function definition is being assigned as the value for the property multiply.
92
divide(num1, num2) //shorthand style
divide(num1, num2) //shorthand style
93
return num1 * num2
the variable num1 is being multipled by the variable num2 and the result of that expression is being returned from the function
94
the variable num1 is being multipled by the variable num2 and the result of that expression is being returned from the function
the add method of the 'this' object is being called with 2 arguments, num1 and num2, and the return of that method call is being assigned to the variable sum
95
console.log(this.property + ' is a ' + this.species + ' the breed + this.breed)
the log method of console obj is being called with one argument, the value of the property title on 'this' obj concated with string is a concat with value of prop species on this object, concatted with string of the bred, concated with the value of the property breed on 'this object. and the result is being passed into the log method on the console object.
96
var describe = ada.describe;
the value of the describe property of the ada object is being assigned to the value of the variable named describe.
97
describe: eevee.describe.bind(ada)
the `bind` method of the object within the describe property of the eevee object is being called with the argument, variable 'ada'. And the return of that method call is being assigned as teh value of the property 'describe'.
98
startButton.addEventListener('click', function(){}
the add eventlistener method of the start button object is being called with two arguments, the string click, and the function definition
99
card.className = cards[i]
the value at the index i of the cards array is being assigned to the value of the className property of the card object.
100
var randomPosition = Math.floor(Math.random() * array.length)
the random method of the math object is being called and the return of that method call is being multiplied against the value of the length prop of the 'array' array, and the result of that expression is being passed as an argument to the floor method of the math object, which is being called. And the return of that method call is being assigned to the variable randomPosition.
101
@media only screen and (min-width: 576px)
there is a media query for only the media type, screen, and a media feature, min-width, set to a value, 768 pixels.
102
@media only screen and (min-width: 768px)
there is a media query for only the media type screen and a media feature, min-width set to 768 pixels.
103
multiply: function(num1, num2)
there is an anonymous function definition with 2 parameters, num1 and num2, and that function definition is being assigned as the value for the property multiply.
104
divide(num1, num2) //shorthand style
line 16 there is a divide method with the parms num1 and num2
105
return num1 * num2
the variable num1 is being multipled by the variable num2 and the result of that expression is being returned from the function
106
var sum = this.add(num1 , num2)
the add method of the 'this' object is being called with 2 arguments, num1 and num2, and the return of that method call is being assigned to the variable sum
107
```
function Car(make, model, weight, horsePower, color, doors) {
this.make = make;
this.model = model;
this.weight = weight;
this.horsePower = horsePower;
this.color = color;
this.doors = doors;
}
```
there is a function definition named Car with 6 parameters.
108
this.make = make;
the value of the variable make is being assigned to the property make of the this property
109
Car.prototype.overview = function () {
There is an anon function definition being assigned as the value of the overview property of the object within the prototype property of the Car Object.
110
Car.prototype.specs = function () {
there is a anonymous function definition, being assigned to the specs property of the object within the prototype property of the Car Object.
111
var prius = new car(
the car function is being called with 'x' arguments using the new keyword, and the return of that function is being assigned to the variable prius.
112
class Car {
there is a class named Car being defined and opening curly brace
113
constructor(make, model, weight, horsePower, color, doors) {
there is a constructor being defined with 6 parameters (make ,model weight etc)
114
method() {
there is the method 'overview' being defined and opening curly brace for the code block.
115
addHorsePower(power) {
the method 'addhorsepower' is being defined and takes one parameter, power. and opening curly brace for the code block.
116
var fiat = new Car('fiat', '500', '500kg', 200, 'white', 4);
the car function is being called with the 'new' keyword, passing in 6 arguments, and the return value is being assigned as the value of the variable 'fiat'
117
class Parent {
there is a class definition named Parent
118
constructor(blah blah blah blah blah)
there is a constructor being defined with 6 parameters. There is a constructor method definition with 6 parameters.
119
this.child = new Child(this.firstname, this.childName)
The child function is being called (or 'the Child class is being instantiated'.) using the 'new' keyword, with two arguments, the value of the firstName property on 'this' object, and value of the childName property on 'this' object, and the return of the function call is being assigned to the child property of 'this' object.
120
askForFood() {
There is a askForFood method being defined.
121
var parent = new Parent("han", "solo", 42, blah, blah);
the Parent class is being instantiated using the new keyword with 5 arguments blah blah blah. And the return value is being assigned to the variable named parent.
122
this.feedChild = this.feedChild.bind(this)
the bind method of the feedchild property within this object is being called with the value of this and the value of that return is being assigned to the feedChild property of this object
123
this.child = new Child(this.firstname, this.childName, this.feedChild)
the Child class is being instantiated with the new keyword and takes 3 arguments ( blah blah blah) and the return of that function call is being assigned to the child property of this object.
124
class Child {
there is a class named Child being defined.
125
constructor(parentName, name, feedMeCallback)
there is a constructor method being defined with 3 parameters
126
var parent = new parent('han', 'solo', 42, 'smuggler', 'ben')
the parent function is being called using the new keyword, and takes 5 arguments. And the return value of that function call is being assigned to the value of the parent variable.
127
var maker = new Maker('Firelord', 'Ozai', 45, 'changing everything', 'Zuko');
there is a function named Maker being called with the new keyword, with 5 arguments.
128
constructor( blah blah blah blah blah)
the constructor method is being defined with 5 parameters.
129
this.replenishFood = this.replenishFood.bind(this);
the bind method of the obect within the replenishFood property of this object is being called with single argument variable this, and the return of the method call is being assigned to the replenishFood property of this object.
130
var bookArrayJSON = JSON.stringify(bookarray);
the stringify method of the JSON object is being called with 1 argument, the value of the variable bookarray, and the return of that method call is being assigned to the variable named bookArrayJSON
131
var personObjParsed = JSON.parse(personObj);
the parse method of the jSON object is being called with 1 argument, the value of the variable personObj, and the return of that method call is being assigned to the variable named personObjParsed.
132
$.ajax({})
there is an ajax method of the jquery object being called with 1 argument, an object literal.
133
success: function(data){
there is an anonymous function being defined with one parameter, 'data' and the function definition is being assigned to the property, 'success'.
134
for(var i = 0 ; i < data.length; i++)
there is a for loop, in the initialization, the value '0' is being assigned to the variable 'i', in the condition, it is checking if the value of the variable 'i' is less than the value of the length property of the data object. in the final expression, the value of 'i' is being incremented.
135
row.append(userId, name, email);
the append method of the row object is being called with 3 arguments(the value stored within userid, name, and email);
136
const greetings = []
on line 11 there is a array literal being assigned to the constant variable, greetings
137
let i = 0
the number 0 is being assigned as the value of the let variable, 'i'
138
let greeting = greetings[randomNumber]
the value at the value of the random number variable of the greetings array, is being assigned to the let variable, greeting.
139
const variable = 'meow'
the string 'meow' is being assigned to the constant variable, 'variable'.
140
const address = `${number} ${street}`
there is a template literal with javascript expressions for the number variable and the street variable, being assigned to the constant variable, address.
141
const applePen = `${fruit} ${item}`
there is a template literal with javascript expressions for the value of the variable fruit and the value of the variable item, which is being assigned to the constant variable, applePen.
142
const {title, author, libraryID} = book1;
the title author and library id properties are being destructured from the book1 object, and assigned as constant variables
143
const{ title: title2, author: author2, libraryID: libID2} = book2
the title author and library id properties of the book 2 object, are being destructured and assigned as the constant variables: title2, author2, and libID2.
144
const [book3, book4, book5] = library
the first second and third index of the library array, are being destructured, and assigned as the constant variables: book3. book4, book5.
145
const [,,,book6] = library
the fourth index of the library array is being destructured and being assigned as teh constant variable book6
146
const someFunction = () ⇒ {}
there is an arrow function definition being assigned to the constant variable someFunction
147
```
const express = require('express');
const app = express();
```
app.use((req, res) => {
res.send('hello world!');
});
app.listen(3000, () => {
console.log('Listening on port 3000!');
});
require function is being called with the argument, string 'express'
express function is being called and the return is being assigned to the const variable app.
use method of the app object is being called with one argument, an anonymous arrow function that takes two parameters, request and response
send method of the res object is being called with the argument 'hello world!'.
listen method of the app object is being called with 2 arguments, number 3000 and an anonymous arrow function.
log method of the console object being called with 'listening on port 3000!')
148
```
function updateHeading($h1) {
if ($h1.is('[webpack]')) {
$h1.removeAttr('webpack');
$h1.text('Hello, World!');
} else {
$h1.attr('webpack', true);
$h1.text('Hello, Webpack!');
}}
```
setInterval(updateHeading, 1000, $('#hello-world'));
defining a function named updateHeading that takes one parameter, $h1
there is an if statement. in the condition, the 'is' method of the $h1 object, with one argument, the string [webpack]
removeattr method of the $h1 object is being called with one argument, string'webpack'
text method of $h1 object is being called with string 'hello world!'
attr method of $h1 object being called with 2 arguments, string webpack and boolean true.
text method of $h1 object is being called with 1 argument, string 'hello, webpack!'
setInterval function being called with 3 arguments: value of the variable updateHeading, number 1000, and the return of the $ function being called with the argument, string '#hello-world'.
- ... and the return value of calling the dollar function with the string #hello-world
149
import todoApp from './todoApp'
The todoApp variable is being imported from the todoApp module.
150
export default TodoApp;
the TodoApp variable is being assigned to the default export of the module.
151
export default toArray
the toArray function/variable is being assigned as the default export of the module.
152
function createElement(tagName, attributes, children = []
The function createElement is being defined with 3 paramters:
tagname, attributes and children, that defaults to an empty array.?
153
toArray(children).forEach(child => {}
the toArray function is being called with the single argument, the variable children, and the foreach method of the return of the toArray function call is being called with an anonymous arrow function that takes the argument, the variable child.
154
for (const name in attributes) {}
for each name in attributes...
155
parent.setAttribute(name, attributes[name])
setattribute method of parent object being called with two arguments( value of the variable name, and the value of attributes at name.
156
import React from 'react'
we are importing React from the react package.
157
import React from 'react'
| Which directory is react looking inside and why?
when there is no relative file path, then it is looking inside node_modules.
158
defining a function named updateHeading that takes one parameter, $h1
there is an if statement. in the condition, the 'is' method of the $h1 object, with one argument, the string [webpack]
removeattr method of the $h1 object is being called with one argument, string'webpack'
text method of $h1 object is being called with string 'hello world!'
attr method of $h1 object being called with 2 arguments, string webpack and boolean true.
text method of $h1 object is being called with 1 argument, string 'hello, webpack!'
setInterval function being called with 3 arguments: value of the variable updateHeading, number 1000, and the return of the $ function being called with the argument, string '#hello-world'.
- ... and the return value of calling the dollar function with the string #hello-world
159
The todoApp module is being imported from a path
we are calling the TodoApp function with the new keyword...
160
export default TodoApp;
the TodoApp variable is being assigned to the default export of the module.
161
export default toArray
the toArray function/variable is being assigned as the default export of the module.
162
3: the function createElement is being defined with 3 parameters (tagname, attributes, and children that defaults to an empty array.
5: for each name in attributes
6: setattribute method of parent object being called with two arguments( value of the variable name, and the value of attributes at name.
8. the toArrayfunction is being called with the argument, the value of the variable children, and the forEach method is being called on the return of the toArray function call.
The forEach method of the return of the toArray function call with the argument children, is being called
163
import React from 'react'
we are importing React from the react package.
when there is no relative file path, then it is looking inside node_modules.
164
JSX file:
| click me!
we are creating a react element of type button and it has the child 'click me!
165
JSX File:
we are creating a react element of type CustomButton
166
```
import React from 'react';
import ReactDOM from 'react-dom';
function CustomButton(props) {
return (
{props.text}
);
}
```
```
const element = (
```
);
ReactDOM.render(
element,
document.querySelector('#root')
);
- React is being imported from the react package
- ReactDOM is being imported from the react-dom package
- the function named CustomButton is being defined and takes one parameter, props
- there is a return statement that returns an expression.
- There is a react element type of button is being created with a child of a JAVASCRIPT expression, the value of the text property of the props object.
- There is a JSX expression as a child element, the value of the text property of the props object.
- The result of that (JSX expression)? is being returned by the CustomButton function.
- there is a JSX expression being assigned to the const variable named element.
- There are react elements being assigned to the const variable named element.
- line 10 there a a react element type of div
-
- There is an expression being assigned to the const variable element
- There is a react element type of div
- there is a react element type of CustomButton with the attribute text with the value of string "i"
- there is a react element type of CustomButton with the attribute text with the value of string "know"
- there is a react element type of CustomButton with the attribute text with the value of string "React!"
- There is a react element of type closing div tag.
- There is a closing parenthesis for the expression
- the render method of the ReactDOM object is being called with 2 arguments, value of the variable element, and the return of the querySelector method of the document object being called with the string '#root'.
- There is a closign parenthesis for the argument list.
167
```
class CustomButton extends React.Component {
render() {
return { this.props.text };
}
}
```
- There is a class definition named CustomButton that extends from the Component property of the React Object
- the render (class) method is being defined with no parameters.
- We are returning something (tim actually says this)
- there is a react element type button.
- There is a child of a javascript expression: the value of the text property of the props object of this object.
- there is a closing react element button tag
168
```
const element = (
```
```
);
ReactDom.render(
element,
document.querySelector('#root')
);
```
- We are assigning 'something' to the constant variable element
- There is an opening react element of type div
- There is a react element of type CustomButton with a string of 'I' being assigned to the prop, 'text'
- There is a react element of type CustomButton with a string 'know' being assigned to the prop, 'text',
- There is a react element of type CustomButton with a string 'React!' being assigned to the prop, 'text',
- There is a closing div tag for the react element.
- 18: There is a closing parenthesis for assignment.
- The render method of the ReactDOM object is being called with two arguments,
- the value of the variable element, and the return of the querySelector method of the document object being called with the argument, string '#root.'
- Then a closing parenthesis for the argument list.
169
import React from 'react';
import ReactDOM from 'react-dom';
```
class CustomButton extends React.Component {
constructor(props) {
super(props);
this.state = { isClicked: false };
this.handleClick = this.handleClick.bind(this);
}
```
```
handleClick() {
this.setState(state => ({
isClicked: !state.isClicked
}));
}
```
render() {
return (
{this.state.isClicked ? 'Got ya!' : 'Click Me!'}
);
}
}
ReactDOM.render(
,
document.getElementById('root')
);
React is being imported from the react package
reactDOM is being imported from the react-dom package
there is a class definition named CustomButton that extends from the component property of the react object
the method named constructor is being defined and takes one parameter 'props'
the super function/method is being called with one argument, the value of the variable props
an object containing the property isClicked with a value of false, is being assigned to the state property of this object
the bind method of the handleClick object of this object is being called with the single argument this.
ending curly brace for the method code block.
the method handleClick is being defined and takes no parameters
the setState method of this object is being called with one argument, an anonymous arrow function that takes the parameter state
the value of the isClicked property of the state object modified with the bang operator, is being assigned to the isClicked property.
the render method is being defined
something is being returned
There is a react element type button with a prop with the value of a javascript expression, the value of the handleClick property of this object.
The button has a child element of a javascript expression checking whether the value of the isClicked property of the state object of this object is truthy.
If it is, it returns the string 'Thanks!' and if false, it returns the string 'Click Me!'
Then there is a closing react element button tag.
closing parenthesis for the return statement
closing curly brace for the render method code block
closing curly brace for the class definition
the render method of the ReactDom object is being called with two arguments,
the react element type of CustomButton
and the return of the getElementById method of the document object being called with the string 'root'.
170
- line 6: the then method of the promise object is being called with an argument, an anonymous arrow function definition.
- The anonymous arrow function takes 1 parameter, message.
- log method of the console object is being called with the argument, the value of the variable message.
- there is a closing curly brace for the anonymous arrow function code block, and a closing parenthesis for the argument list.
- the catch method of the promise object is being called with 1 argument, an anonymous arrow function definition.
- The anonymous arrow function takes 1 parameter, error.
- the log method of the console object is being called with one argument, the value of the message property of the error object.
171
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => console.log(data));
.catch(error => console.error(error.message));
- the fetch function is being called with 1 argument.
- the 'then' method of the result of the previous fetch call is being called with 1 argument, an anonymous arrow function.
- The anonymous arrow function definition takes one parameter, 'response' and returns the result of the json method of the response object being called with no arguments.
- the 'then method of the result of the previous 'then' call is being called with an anonymous arrow function definition.
- The anonymous arrow function definition takes one parameter, 'data' and returns the result of the log method of the console object being called with one argument, the value of the variable 'data'
172
line 7: ... and a closing p tag for the react element.
- creation of a react element of type a
- the string "_blank" assigned to the target prop
- there is a href prop set to a javascript expression
- the template literal with the string mailto: and then a a javascript expression for the value of the email property of the user object of the props object.
- then a backtick to end the template literal, and a ending curly brace for the javascript expression
- The a tag has a child of a javascript expression, the value of the email property of the user property of the props object.
- then a closing a tag for the react element
- then a closing p tag for the react element
- then a close li tag for the react element
line 19: there is a creatin of a react element of type ul.
it has a child of a javascript expression
- the map method of the users property of the props object is being called with 1 argument, an anonymous arrow function.
- The anon arrow function takes 1 parameter, user.
- There is a react element of type User being created.
- It has a key prop with the value of a javascript expressions, the value of the id prop of the user object....
- and the result of that react element creation is being returned.
- line 29 we are assigning the variable UserList as the default export of the module
173
- we are importing Rofl from the user-list module
- there is a class definition named App that extends from the component property of the react object.
- the constructor method is being defined with one property, props. Opening curly brace for the constructor code block
- the super function is being called with 1 argument, the value of the variable props
- There is an object literal being assigned to the state property of this object.
- An empty array literal is being assigned to the users property.
- The boolean true is being assigned to the isLoading property.
- the method componentDidMount is being defined and takes no parameters
- the fetch function is being called with one argument, a string url path.
- the then method of the result of the previous fetch call is being called with 1 argument, an anonymous arrow function.
- The anonymous arrow function definition takes 1 property, res,
- the json method of the res object is being called and the return of that method call is being returned.
- the then method is being called on the return value of the previous method call, with one argument.
- define the render method that takes no parameters
- There is a ternary expression:
- if this.state.isLoading is true, it will return a react element of type p, with a child of Loading... then a closing p tag for the react element.
- else, a react element of type UserList is created with a users prop with the value of a js expressions, teh value of the users property of the state property of the this object.
- The result of that ternary expression is being returned.
