Free Code Camp Flashcards

Question

All radio button inputs must share the same type="radio" and what other attribute?

Answer 1

They must share the same name attribute, this way the page knows that only one of the buttons can be selected at a time. If buttons dont have the same name multiple ones can be selected at the same time, thus defeating the purpose of radio buttons in the first place input type ="radio" name="gender" input type ="radio" name="gender"

Answer 2

With radio boxes you check one of a group. With checkboxes you can select one or more. Or you can select none

Answer 3

type name id {always} value {for react and changing state in react}

Answer 4

It sets particular buttons to be already checked by default. The user would have to click it to uncheck it or check another option to change it if it were incorrect. It goes on radio inputs and checkbox inputs

Answer 5

Cascading Style Sheets

Answer 6

Document Object Model

Answer 7

It is styling an HTML element directly in the HTML line of code.

Answer 8

style= " name : value " style="color: red"

Answer 9

It sets the color of the text of an element

Answer 10

It is styling an HTML element inside the HMTL file but not inside of the line. You do it the same way as you would style it externally except that you wrap the styling in a style tag. ``` style > h1 { color: blue } /style> ```

Answer 11

font-family:

Answer 12

link href />

Answer 13

The Head tag is where we place all our meta data about our page, like the stylesheets and fonts and tltles etc. Not the actual content that will be rendered.

Answer 14

The Title tag is the name of page. It is the name or the content that shows up on the tab when the page opens. Usually goes along with a logo

Answer 15

You add a comma between the names of the fonts font-family: helvitica, sans-serif You would do this to basically say....if the first font is there - use that. If not, use the other. If neither is there then your browser will assign a default font.

Answer 16

border-radius : 50%

Answer 17

It increases the space between the content of an element and its borders on all sides. p { padding : 20px } this will push the borders on the top, left, right, and bottom away from the paragraph text.

Answer 18

You wont see a difference in appearance. The padding will get bigger still, but you wont see it because it wont actually affect the border at all because the border is already farther out

Answer 19

It increases the space between the border of the element and other elements on the page

Answer 20

top, right, bottom, left (like a clock)

Answer 21

Clockwise Notation.

Answer 22

When an element has no specific styling in regards to a particular aspect of its appearance and adopts or inherits styling from a parent element or grandparent that it is nested in.

Answer 23

The more specified element

Answer 24

The style rule that is lower on the style-sheet. It gets read in the code last so it gets applied to the DOM last so its the one that you see,

Answer 25

No the order of the classes and how they are listed and applied to the element have no bearing on which style gets rendered. In this case, the style that is lower in the style sheet is the one that will get rendered.

Answer 26

The Id style will get rendered because it is more specific than class

Answer 27

Inline Styling. Hard coding the element with a style attribute will override any CSS assigned through internal or external stylings.

Answer 28

!important p { color: red !important }

Answer 29

rgb( red, green, blue, transparency)

Answer 30

0 minimum 255 is the maximum. Theres 256 values all together with the counting beginning at 0.

Answer 31

color: rgb( 0,0,0)

Answer 32

color: rgb(255, 255, 255)

Answer 33

text-align: example: h1 { text-align: center;

Answer 34

Stretches the lines so that each line has equal width (like in newspapers and magazines) except the last line.

Answer 35

By adding a strong text around the text or adding font-weight: bold to it in CSS

Answer 36

use the u tag or text--decoration: underline in CSS

Answer 37

use the em tag or font-style: italic in CSS

Answer 38

use the del tag or text-decoration: line-through

Answer 39

Its a self closing tag that creates a horizontal line that goes across the length of its containing element. This is good for sectioning off different topics or sections

Answer 40

Alpha rgba( 0,0,0,0.1)

Answer 41

0 - 1 example 0.2

Answer 42

0, is the most - completely see through 1, is the least - not see through at all

Answer 43

It attaches one or more shadows to an element

Answer 44

box-shadow: horizontal offset vertical offset color box-shadow: 5px 5px blue

Answer 45

By adding multiple shadow values to an element separated by a comma box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green; this will give us an element with three different and distinct shadows

Answer 46

The Blue value applies a blurred effect to the shadow of your element. If you want to apply this you would add it after the value for the Vertical Offset. The higher the number the more blurred the shadow. box-shadow: 5px 10px 18px red this would be very blurred; if 18px was changed to 3px the blur effect would decrease significantly

Answer 47

The Spread value determines how big the shadow of the element is, a positive number increases the shadow. A negative number decreases the shadow. The value will be fourth on the box-shadow property box-shadow: 5px 10px 18px {10px} red

Answer 48

Opacity - And you can set anything from 0.1 to 1.0 .....the higher the number the less see through it will be. The lower the number, the more see through it will be. You can use double digit decimals as well Opacity: 0.25 would set it to 75% opacity.

Answer 49

It adjusts the capitalization of text. lowercase : makes the text lower case uppercase : makes every letter uppercase capitalize : makes the first letter of every word capital.

Answer 50

You need to add quotations. {built in fonts} font-family: monospace; {imported fonts] font-family: "Open sans" ;

Answer 51

It sets how think or thin you want the characters of text to be. Numeric Values are set from 100 - 900 900 being more bold, 100 being the the least ____________________________________ Non Numeric Values are : lighter Normal (400) bold (700) bolder

Answer 52

The Line-Height property determines how much space there is in between lines. This is the most effective way to adjust how much room a group of text will take up on the page. The default setting for line-height in most browsers is 110% - 120%

Answer 53

text-decoration: none;

Answer 54

It allows a visual effect to take place when the mouse/cursor goes over an element but doesn't click or do anything to activate the element. element : hover { property: value }

Answer 55

CSS treats each individual element as its own box

Answer 56

It is an element that automatically begin on a new line. Think : paragraphs, divs and headers tags

Answer 57

They are element that sit on the same line as other elements, and are surrounded by other elements. Think: span, bold, underline, image tags

Answer 58

Displays elements as they are listed on the document, starting from the top left of the page and go straight down to the bottom.

Answer 59

We can use the CSS property Position

Answer 60

It allows you to take an element out of normal flow and move it in relation to its regular position in Normal Flow

Answer 61

left, right, top and bottom values can be pixels or percentages.

Answer 62

No it doesn't. The rest of the page stays in normal flow. The Position property overrides Normal Flow on that specific element but doesn't change the flow of the page all together.

Answer 63

Practicing good Semantic HTML is important even if it doesn't visually represent how the page will look. Mainly because the structure of the page represents the importance of information for screen readers and search engines and allows visually impaired users to successfully navigate and access the desired information on your page.

Answer 64

It locks the element in place relative to the closest positioned ancestor. Usually a parent an usually this is done by declaring position: relative on the parent.

Answer 65

It will keep looking up the chain looking for a positioned element. If it doesn't find one it will default to the body tag.

Answer 66

No, the element is taken out of normal flow and all of the other elements ignore it like it isnt even there.

Answer 67

It is a type of absolute positioning where the element is positioned in relation to the browser window.

Answer 68

Yes, they are taken out of Normal Flow and other elements don't realize that the element is there at all

Answer 69

The Fixed element doesn't move when the user scrolls. It stays in that one spot no matter what the user does.

Answer 70

Floated elements take a value of either Left or Right. This property will take the element and place it either to left or the right of its parent container

Answer 71

It is used with Width.

Answer 72

No, they ignore them.

Answer 73

You can put a div around the first letter, apply Float: left to it to have it stand out from the rest of the paragraph. Apply a class name to the div, then go into CSS and add styling to the class name to enlarge it or make it a different font or color.

Answer 74

No they do not, they are taken out of normal flow..so other elements will go along side the left or the right of them if there is space

Answer 75

When an element is given the Float property, it is taken out of Normal Flow meaning that other elements will go along the left or the right of it. This might not be a desired effect. Adding a Clear property will tell the browser to not place any elements along side the element in that direction. note: this only applies to other floated items. so if you want to clear the space both the element and the element you are trying to clear must be floated

Answer 76

Left, Right and Both

Answer 77

When elements are positioned to overlap, the element coming later in the HTML markup will by default appear on top of the earlier written elements. Z-Index allows you to specify the order in which these elements overlap

Answer 78

Every element that is in the overlap stack takes the property Z-Index: with a full number as a value. The element with the highest number will be on top and the element with the lowest number will be on bottom.

Answer 79

by setting its Margin to Auto if there is no other element on the left or the right of it that is in its way, the block element will be centered

Answer 80

Inline Elements

Answer 81

Display: Block

Answer 82

It is a way to make one color change into another color. It is accessed with the CSS property Background.

Answer 83

No we cannot because Gradient is technically an Image data type, so it can only be used where images can be used. Basically, through the Background property

Answer 84

Background: Linear-Gradient( gradient direction, color 1, color 2, color 3....)

Answer 85

Repeating Linear Gradient is like Linear Gradient except that it requires color Start/Stop points other wise it works just like regular linear Gradient. Also, where you place the stop point for the final color will be where the first repetition of the colors will begin. For example (red 0%, blue, yellow50%) would have red start the transition and go to blue and then yellow and this transition would be completed at the halfway mark of the div. Then the transition would start again with Red at 51% and then blue and yellow at 100%, which would be a total of two repetitions of the pattern if you set it as (red0% blue yellow 10%) the entire transition would be complete at 10% and then repeat again and again until the div was taken up, meaning there would be a total of 10 repetitions of the patterns

Answer 86

Top to Bottom

Answer 87

``` To Bottom (default) To Right To Left To Top To Top Left To Top Right To Bottom Left To Bottom Right (+/- num)degs ```

Answer 88

It starts happening right away. The colors will not be pure except for the end and the very beginning

Answer 89

Yes, you can add a percentage or a px value after the name or assignment of the color to say basically : "start transitioning here" linear-gradient( red 25%, blue) this will keep red pure all the way until it reaches 25% of the container and then start transitioning to blue along the remaining 75% until it reaches pure blue at the end

Answer 90

It is the same as Linear-Gradient, but it goes in a circle instead of in one direction

Answer 91

There will be no transition, the colors will just have a clean break with a switch from one color to the next linear-gradient( red 50%, blue 50%) in the middle of the page, the colors will switch from red to blue with no transition

Answer 92

Two - a start and a stop (red 35% 50%) this would make the color red go from 35% of the element - half way through the element.

Answer 93

No, the first color will start at 0% by default so only the stop place is required. The last color will automatically stop at 100% so only the start place is required. (red 25%, blue 25% 50&, yellow 50% 75%, orange 75% ) red is already starting at zero orange is already stopping at 100 so additional start and stop values arent needed. Blue and yellow are in the middle, so where they start and stop need to be added if you want to specify where the transition starts and stops

Answer 94

background-image: url(' ')

Answer 95

It allows you to increase the size of your image or image like element. The number you put in the parenthasis is the amount of times larger the element compared to its normal, or currently set size. transform: scale(3) this will make a picture or image like element three times as big as it currently is

Answer 96

It skews the edges diagonally along the X or Y axis. transform: skewX(23deg)

Answer 97

They target or set what comes before or after an element. For example of a list element li : before { content: "this is a list item" } This would make the string this is a list item come before every list item on the page

Answer 98

They describe the name of the animation and how long it will take to complete or to run the entire animation. These are placed inside of the elements CSS rule set. h1 { animation-name: changeColors; animation-duration: 10s; }

Answer 99

``` We use @keyframes animation-name { length of time { what we actually want to happen } } ``` ``` @keyframes changeColor { 0% { background-color: red } 50% { background-color: black; } } ``` This will start the back ground color at red....this would last for 5 seconds ( if we set the animation duration for 10 seconds) and then it would turn black.

Answer 100

During Hover's or button onclicks

Answer 101

When we set an animation, at the end of the duration, it reverts back to its original state and will run again once the code is called again. Animation-Fill-Mode: Forwards sets it up so the element stays at the final stage as long as what triggered the animation is still true. for example, if a page load triggers the animation, then the final animation stage will remain visible because the page is still loaded and will not reset until the page is loaded again. if Hover triggers the animation, then animation will remain in the final stage as long as Hover is still being utilized. Once you move your mouse, the original animation stage will take back over and will refire once Hover is reapplied.

Answer 102

Yes you can, as long as an element has a specified position like relative or fixed. The CSS offset properties like left/right can be used to create animation movement. This is an example of @keyframes moving an element up and then down while changing the color. ``` @keyframes rainbow { 0% { background-color: blue; top: 0px; } 50% { background-color: green; top: 50px; } 100% { background-color: yellow; top: 0px; } } ```

Answer 103

This property sets how many consecutive times your animation will run. You can set it to a specific number or you can set it to infinite and the animation will keep running. animation-iteration-count: 3 animation-iteration-count: infinite

Answer 104

You can change their size movements, colors and durations and how many times they run independent of one another. They dont need to all share the same rules so that they have a uniform look....sometimes its good to give them their own independent life so it looks more interactive and lifelike and less robotic. think of the twinkling stars challenge

Answer 105

Animation Duration is the overall road trip. SF to NY. This is the total ground that needs to be covered. We can set this to 5 seconds. This is how long the trip is from A - B. Animation-Timing-Function is how that trip is travelled. The distance from SF to NY will still be the same and take the same amount of time, but do you speed first through the western states and slow down and take your time in teh eastern states? Or do you take your time and sight see in the western states and speed through the eastern states to get to your destination? Or do you just take a nice steady course, nice and easy all the way through? Animation-Timing-Function determines this mode of travel.

Answer 106

Ease. start slow, speed up in the middle, slows down again in the end.

Answer 107

Ease-Out: Quick start. Slow End. Ease-In: Slow start. Fast End

Answer 108

This applies a constant animation speed throughout the course of the animation duration.

Answer 109

means having web content and a user interface that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility or cognitive disabilities

Answer 110

Alt tags are used by search engines to index what is in a photo so it can return related images to a search.

Answer 111

The ALT tag is also read by screen readers so people who cant see can be told what is in an image audibly

Answer 112

Photos that are used for decoration only and dont add any meaning to the content or to the page itself. examples of this would be background images for decoration purposes.

Answer 113

It is possible to use an ALT without a string even the caption would be redundant because of the caption. But i would opt to use one because of the screen readers and because the alt tag is used to index photos in search engines.

Answer 114

No you shouldn't. Choose them by relevancy of their content. H2's should be a sub section of H1 H3's should be sub sections of H2's H4's should be sub sections of H3's and so on and so forth

Answer 115

Some screen readers can be set to read only the headings on a page so the user gets a summary of the page. Its important that your headings facilitate this for the users.

Answer 116

No, this confuses screen readers. You should order your content one header at a time. Its ok to not use certain headers, but if you do use them, you shouldnt skip them.

Answer 117

It wraps the main content of a page, shouldnt include repeating content like nav bars etc. There should be one per page. Assistive technologies allow a "Jump to Main Content" link that takes users to the main content of a page.

Answer 118

Used to group independant, self contained content. Content that can be understood outside of the context of other content. Think of an article as a book

Answer 119

Used to group thematically related content . These can be used inside of Article tags. If the Article tag is a book, then the Section tag would be the chapters.

Answer 120

It is used to group content when there is no relationship between groups of content

Answer 121

It is used to wrap introductory information or navigation links for its parent tag and works well around content thats repeated at the top of multiple pages. Header tag allows assistive technologies to quickly navigate to that content.

Answer 122

This tag is meant to wrap around the main navigation link in your page. This tag allows for easy screen reading navigation.

Answer 123

No, a second Nav tag isnt necessary. A Footer tag will do just fine.

Answer 124

It wraps information about copyright or links related to documents that usually sit at the bottom of the page. This has built in Landmark features that allow easy navigation to this section using assistive technologies

Answer 125

Its an attribute that doesnt need a value. Its presence turns the feature on. for example checked, required etc.

Answer 126

It is used to add audio to your webpage audio controls src="audio.mp3">/audio

Answer 127

It brings up media controls for audio/video that allows you to play/pause the media file amongst other things.

Answer 128

A text component along with a visual component to accessible to people who are deaf or hard of hearing

Answer 129

These tags are used together to wrap a visual representation like a chart or an image along with its caption. The figcaption tag can be used to give the conclusion or findings represented by a chart. ``` figure> img src alt > figcaption > This Chart says you broke /figcaption> /figure> ```

Answer 130

The value of 'For' attribute on the label tag should be the same as the value of the Name or ID attribute on the input tag thats wrapped in it. label for="email"> input type=text name=email> /label>

Answer 131

A fieldset tag groups a bunch of inputs - radio buttons for example. This sections off the whole are where the user is to put in inputs It has a default styling of a box around whatever is nested inside of its tags...this default styling can be changed in css

Answer 132

The legend tag is the name of a section of related inputs. ``` form> fieldset> legend> Whats your fav sport label> baseball input > type =radio label> football input> type ="radio label> football input>type=radio legend> whats you fav food etc.. ```

Answer 133

Legend is the name of a section of related inputs. Label is the name of the input themselves

Answer 134

input type=date>

Answer 135

The time tag is used with the datetime attribute to wrap a date in text. This is to standardize time that may be written informally and can be used by screen readers and others assistive devices. we went on

Answer 136

It means that the element cannot be seen but the information is read by a screen reader.

Answer 137

If we have a chart that requires sight to get the information from it. You might have to also make a table for a screen reader to read the table the make the information accessible. But you dont want to put a chart and a table, because it does no good to have both. So you would show the chart for those that can see and make the table screen read only so it is read to those who cant see the chart

Answer 138

``` .sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; top: auto; overflow: hidden; } ```

Answer 139

No, these will make it so the screen reader ignores it too and it wont get read.

Answer 140

It is added to links on a page to allow keyboard users to click a key like SHIFT or CTL plus whatever value you add to the accesskey attribute and it will go to that page. a href ="wwf.com" accesskey="g" >

Answer 141

It makes it so it can tab to access it the same way you can links and buttons for key board only users and it can make it so that you can style it using the pseudo class :focus on it.

Answer 142

It makes sets the focus order for tabbed elements. The element with the value of 1 will go first and then 2 and then so on and so forth

Answer 143

Most if not all keyboard users are used to the keyboard focus on the hitting tab to go from top to bottom. When you set the tabindex it takes it out of normal rotation that could be confusing for some users

Answer 144

You use a media query ``` @media (min/max-height/width: numpx) { element { property: value } } ```

Answer 145

it needs to be wrapped in a div or some sort of parent element ``` img { width: 100%; display: block; height: auto; } ``` The max-width of 100% makes sure the image is never wider than the container it is in. The height of auto will make the image keep its original aspect ratio

Answer 146

Make sure that you set the height and the width of an image to half of that of the original picture

Answer 147

Viewport units.

Answer 148

Viewport Width and Viewport Height The number that goes with it is the percentage of that header { height: 100vh } means the header is going to be 100 percent of the viewports height.

Answer 149

Vmin - of whichever screen is smaller | Vmax - of whichever screen is larger

Answer 150

We can use them wherever we use px or %'s

Answer 151

you can set up, a regular declaration with px's directly before a Viewport Unit declaration and if the browser supports Viewport Units - it will use that instead. If it doesnt it will use the regular px declaration

Answer 152

They become stacked horizontally left to right

Answer 153

It is a parent element that has display: flex applied to it

Answer 154

A child of a flex container that will move depending on how the flex is applied

Answer 155

This is the property that dictates the direction that the flex items are displayed in

Answer 156

Row, Row-Reverse | Column, Column-Reverse

Answer 157

horizontal line going right through it

Answer 158

vertical line going right through it

Answer 159

This property aligns flex items along the main axis of the flex direction.

Answer 160

It places the flex items along the main axis in the center of container.

Answer 161

It places the flex items on the main axis along the beginning of the container.

Answer 162

It places the flex items on the main axis along the end of the container.

Answer 163

Places outer most flex items along the border of the flex container and divides the spaces in between the remaining flex items

Answer 164

Splits between the items looks double what they are along the edges because each item gets its on space buffer - which between them looks like double space.

Answer 165

It makes the space between the flex items even on both sides regardless of the amount of space or items

Answer 166

The vertical line.

Answer 167

The horizontal line.

Answer 168

It alings flex items along the cross axis of a flex container

Answer 169

It aligns the flex items along the start of the cross axis

Answer 170

It aligns the flex items along the end of the cross axis

Answer 171

It aligns the flex items in the center of the cross axis

Answer 172

It stretches the flex items the full height/width of the flex container depending on the cross axis of the flex direction

Answer 173

It will make sure that the text inside of the flex elements are lined up even if the actual height/width are not exactly the same amongst the flex items. This helps your texts look consistent

Answer 174

It tells CSS to wrap flex items to the next row or column if there isnt enough space on one line.

Answer 175

The space of the container and the space of the flex items.

Answer 176

This setting does not wrap flex items and keeps all flex items on the same line.

Answer 177

It wraps flex items on to the next line depending on the flex direction of the container

Answer 178

Wraps items in the opposite order of Wrap

Answer 179

When the flex container's width/height is smaller than the combined width/height of the flex items, Flex shrink can be used on flex items to allocate which items will shrink faster or slower than other items. The higher the number, the higher the shrink rate. flex-shrink: 3 will shrink three times as fast as flex-shrink: 1

Answer 180

When flex items are in the same container as long as the container is big enough to have both items have their width/height measurements respected, both will fine. Once the flex container gets smaller and encroaches on the size of the flex items, the flex items will shrink at the desired rate you set on the Flex-Shrink property. #box1 { width/height: 200px; flex-shrink: 2 } #box2 { width/height: 200px; flex-shrink: 1 } if the flex container is at 600px, both of these boxes will be 200px each, because there is enough space to accommodate both widths/heights. But if that container were to go down to 300px. Then Flex-shrink would come into play and shrink box 1 and twice the rate as box #2 meaning the 300px would leave the boxes as box 1 100px box 2 200px

Answer 181

They will divide it up evenly and give each other equal parts.

Answer 182

If there is two and given different flex shrink values then they will automatically adjust to divide up the space. If two or more or given and are given different values, more often than not only two elements will be divided up and the other elements will be shrunk to the point where you dont see them

Answer 183

It works exactly the same as Flex-Shrink except when the container expands it grows the flex items at the rate that you decide

Answer 184

flex-basis : with some measurement value

Answer 185

Because you can do it in the short hand notation of Flex. And when it comes to min-width, when you get to that small size say for a photo, the image will stay the same size but just make you scroll to see it. where flex basis will actually shrink the photo or the element to fit into thay space rather than make you scroll.

Answer 186

flex : grow, shrink, basis

Answer 187

It puts the flex items in the order that they should appear. The number value is that order, it can take negative nums too order: 1 order: 2

Answer 188

Flex items will be ordered in the order that they appear in the source HTML

Answer 189

This property allows you to adjust each item's alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties float, clear, and vertical-align do not work on flex items.

Answer 190

align-self accepts the same values as align-items and will override any value set by the align-items property.

Answer 191

Yes any HTML element

Answer 192

You apply display: grid; to it This gives you the ability to use all the other properties associated with CSS Grid

Answer 193

We use the property grid-template-columns

Answer 194

The number of values applied to the property determines the amount of columns the container will have. grid-template-columns: 50px 50px 50px 50px This container would have 4 columns

Answer 195

The measurements of the values determine the width of the columns grid-template-columns: 50px 50px 50px 50px This will set 4 columns of 50px in width each.

Answer 196

grid-template-rows it works the same way as grid-template-colums

Answer 197

We can use the usual set units like px/vh/vw We can use percentages We can use auto (which size is only that of the content it has, like a inline element) We can use Fr (this works like a fraction, the number represents the parts it will take up of the remaining space) grid-template-rows: 1fr 2fr This will divide the container into three parts.... the first row will get 1/3 and the second row will get 2/3

Answer 198

grid-column-gap

Answer 199

The value will determine the size of the gap in between the columns

Answer 200

gird-row-gap it works the same way as grid-column-gap

Answer 201

Its a shorthand for column/row-gap properties. If it has one value, it will set the width for all columns and all gaps if it has two values, the first one is for rows and the second one is for columns

Answer 202

They are used on Grid-Items.

Answer 203

Think of a Grid....the lines that go horizontal are the row lines. the lines that go vertical are column lines. The number of column and rows determine the amount of lines there are. These lines are numbered from the top left corner of the page and run downwards for columns and to the right for rows 1 2 3 4 2 3 4 a four column/row grid would look like this

Answer 204

You give two numbers on the value of grid-column/row the first number is the line that you want the grid item to start then a forward slash the second number which is the line that you want the flex item to stop. so grid-column: 2/4 would start on line 2 go across line 3 and stop on line 4. Meaning this item would cover two columns

Answer 205

The repeat value will allow you to make as many columns or rows of a particular container that you want. It takes two parameters. The first one is how many rows/columns that you want. The second will be the width/height grid-template-columns: repeat(3, 1fr) This will make 3 columns that take up 1/3 of the container each.

Answer 206

It is the space in which the Flex Item sits. The space in between the row/column lines that make up the columns/ rows. Every Cell isn't a Flex-Item. They would occupy the same space but Cells can be empty. Think of Cell as Jail Cell, but Flex Items are the prisoners inside of the cell. They can move around the cell and be in different positions of the cell, the cell could be empty - but the prisoner and the cell are not the same even if they occupy the same space.

Answer 207

You can use the property justify-self

Answer 208

Stretch. This will make the content fit the entire width of the cell.

Answer 209

Start - justifies the item to the left of the cell. Center - justifies content to the center of the cell End - justifies content to the end of the cell Stretch - content covers entire width of the cell

Answer 210

By using the align-self property. It takes all the same values as justify-self

Answer 211

justify-items Takes the same values as justify/align-self:

Answer 212

align-items Takes the same values as justify/align-self

Answer 213

the Grid Container

Answer 214

The height and the width will be determined by what the content dictates.

Answer 215

An Area are rows of the container grouped together by a custom/variable/class name Each row is placed between quotations 1 2 3 4 1 "header header header header" 2 "ad content content ad" 3 "content content content content" 4 "footer footer footer footer" Each different name is a different Area

Answer 216

You place a period where there is an empty cell.

Answer 217

use grid-template-areas: and then use quotations and to section off rows and classify custom cell names grid-template-areas: "header header header" "ad content ad" "footer footer footer" this will create 4 areas header, ad , content and footer

Answer 218

No, creating the area is literally assigning a name to the space, Not to the Grid item itself. The Grid Item will still need to be linked to the area name.

Answer 219

By using grid-area on the grid item item1 { grid-area: header, } This lets the grid know that you want the item1 class to go in the area named header. In this case, the item will use the entire top row because that whole row is named as the header area.

Answer 220

you can use grid-area the values are separated with forward slices the values are horizontal start / vertical start / horizontal end/ vertical end grid-area: 1/1/2/4; So the item in the example will consume the rows between lines 1 and 2, and the columns between lines 1 and 4.

Answer 221

You can add another value after/ before the Repeat( ) function. grid-template-columns : repeat(3, 50px) 100px; this would make 3 columns that are 50px each and then put a column that is 100px after it.

Answer 222

This is used to set the min and the max width/height of the row/column after setting the starting width/height in the event that the container/browser grows/shrinks. minmax( min , max) grid-template-rows: repeat(3,50px) minmax( 25px, 100px) this will make three rows where the height is set to 50px, but when the container shrinks it will shrink the rows up until it reaches 25px if the container grows the grid items will grow until it reaches 100px

Answer 223

Yes you can. grid-template-columns: repeat(3, minmax(90px, 1fr)) ; This will make a three columns that will take up 1/3 of the container but will not get smaller than 90px

Answer 224

Auto fill allows the container to add rows/columns when the container grows or shrinks. If there is Grid Items they will slide up to fill the row/column if the container grows, if it shrinks the Grid items will wrap to the next column/row repeat( auto-fill , minmax(90px, 1fr) this will look at the container size and see how many 90px's can fit into the height/width and make the proper amount of rows/columns. The item will never go less than 90px. As the screen grows, each item will take a fraction of the total amount of rows/columns. So if they are 5 columns - the grid items will take 1/5th - if there 10 rows/columns the grid items will 1/10th of the container.

Answer 225

auto-fit works almost identically to auto-fill. The only difference is that when the container's size exceeds the size of all the items combined, auto-fill keeps inserting empty rows or columns and pushes your items to the side, while auto-fit collapses those empty rows or columns and stretches your items to fit the size of the container. Note: If your container can't fit all your items on one row, it will move them down to a new one. auto-fill: 1 2 3 4 5 6 empty empty empty empty auto-fit: 1 2 3 4 5 6

Answer 226

When can name our grid areas and then change them depending on the grid size set: ``` grid-template-areas : "header" "advert" "content" "footer"; ``` this is one column; 4 rows - at 300px we can change that when we get to 400px ``` @media query (min-width: 400px) { grid-template-areas: "advert header" "advert content" "advert footer"; ``` This will make 2 colums; 3 rows and take the advertisement section and place it along the left side of the page.

Answer 227

Yes, take one of the Grid Items, and in the CSS apply display: grid; and grid-template-row/column: and define the grid that you want.

Answer 228

When you get stuck, remember: Read-Search-Ask. Read the documentation or error Search Google Ask your friends for help

Answer 229

link rel="stylesheet" type="text/css" href="tribute.css" />

Answer 230

use the background image property on the grid item and then place : background-size: cover; background-position: center; background-repeat: no-repeat; on the grid container

Answer 231

It turns the text inside of into monospace. This code is where you add code to the page. This code tag is semantic.

Answer 232

Yes, this is a good practice for others that need to see your code and know what it is doing, But also to your future self to help explain what your code is doing as sometimes it gets confusing.

Answer 233

anything that is meaningful to the computer

Answer 234

undefined, null, boolean, string, symbol, bigint, number, and object

Answer 235

Declaring a variable.

Answer 236

They are nicknames for a particular piece of Data

Answer 237

No Variables are just a label that POINT TO the data, but are not the data itself.

Answer 238

Yes they can. They can be dynamically changed

Answer 239

the equal sign =

Answer 240

Assignment goes from right to left, meaning everything on the right of the equal sign is resolved before the value is assigned to the variable on the left

Answer 241

Initialization is giving a declared variable its first value

Answer 242

Declaration and Initialization var myName (declaration) = rashaan (initialization) var myName = rashaan declaration and initialization

Answer 243

undefined.

Answer 244

Not a Number.

Answer 245

string of Undefined

Answer 246

withe the ++/--operator variableName++ (+ 1) variableName-- ( - 1)

Answer 247

a decimal number

Answer 248

Not all real numbers can be represented in Floating Numbers, this can lead to rounding errors.

Answer 249

Yes you can.

Answer 250

Whole numbers

Answer 251

% and it gives the remainder of the division of two numbers.

Answer 252

We can use the operator by two... and if it has a remainder it is odd and if it doesnt it is even. myVar % 2 = 1 (odd) myVar % 2 = 0 (even)

Answer 253

The modulus operator. It is very similar but does not work properly with negative numbers.

Answer 254

When you want to update the current variable with a new value using a mathmatical operator. myVar =+ 5 this is the same as myVar = myVar + 5

Answer 255

The Math Operator comes first and then the Assignment Operator += -=

Answer 256

A series of zero or more characters that are enclosed in single or double qoutes.

Answer 257

Every string needs to start and end with single or double quotes. But when we need to use quotes inside of a string, we can use a BACKSLASH \

Answer 258

Before both sets of Inside Quotes. \" lets go \"

Answer 259

Every string needs to begin with matching sets of single or double qoutes. If you start with single you can safely use doubles inside of the string, and vice versa

Answer 260

it creates a new line in the string

Answer 261

it means Tab and creates a tab sized space inside a string

Answer 262

It is + It is used with strings and creates new strings by adding them together

Answer 263

No it doesnt, so you have to add the spaces yourself.

Answer 264

We can add a string to the end of another string var ourStr = "I come first. "; ourStr += "I come second."; ourStr is now "I come first. I come second."

Answer 265

Yes, you dont need to use quotations with variable names. ``` var ourName = "freeCodeCamp"; var ourStr = "Hello, our name is " + ourName + ", how are you?"; // ourStr is now "Hello, our name is freeCodeCamp, how are you?" ```

Answer 266

We can use Compound Concatenation ``` var anAdjective = "awesome!"; var ourStr = "freeCodeCamp is "; ourStr += anAdjective; // ourStr is now "freeCodeCamp is awesome!" ```

Answer 267

It is a variable name that has a string stored inside of it myStr = "this is a string" myStr (string variable) "this is a string" ( string literal)

Answer 268

by using .length on the end of it. It will tell you how many characters are in the string. Even the spaces.

Answer 269

It is a way to get a character at a specific index within a string? firstName = "Charles"; firstName[0]; firstLetter is "C"

Answer 270

That the count on indexing doesnt start at 1 like normal. It starts with 0.

Answer 271

That it cannot be changed once it is set.

Answer 272

Yes they are. You cannot change the individual character of a string literal using Bracket Notation.

Answer 273

We have to reassign the variable name to a different value all together. ``` var myStr = "Bob"; myStr = "Job"; ```

Answer 274

Its a generic number holder for an unknown number. its like the x variable in algebra

Answer 275

variableName[variableName.length - 1] ``` var firstName = "Charles"; var lastLetter = firstName[firstName.length - 1]; // lastLetter is "s" ```

Answer 276

You can add any number after the subraction operator to get that index character. firstName[firstName.length - 3]

Answer 277

No, zero based indexing only works in a linear fashion. the first character will be 0 no matter what and doesnt change depending on the way that you are counting.

Answer 278

With an Array

Answer 279

In arrays, the whole item is returned and not just the character

Answer 280

No they are not, meaning you can change them using bracket notation. ``` var ourArray = [50,40,30]; ourArray[0] = 15; // equals [15,40,30] ```

Answer 281

It is an Array inside of another Array.

Answer 282

It is an Array of Arrays

Answer 283

We start indexing from the outside first and then work our way down ``` var arr = [ [1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14] ]; arr[3]; // equals [[10,11,12], 13, 14] arr[3][0]; // equals [10,11,12] arr[3][0][1]; // equals 11 ```

Answer 284

It adds the item or array inside the parens to the end of the array. ``` var arr1 = [1,2,3]; arr1.push(4); // arr1 is now [1,2,3,4] ``` ``` var arr2 = ["Stimpson", "J", "cat"]; arr2.push(["happy", "joy"]); // arr2 now equals ["Stimpson", "J", "cat", ["happy", "joy"]] ```

Answer 285

This is used to take the value off the end of an array.

Answer 286

The length of the new array

Answer 287

It returns the item that was popped off the end

Answer 288

Store it in a variable storedVariable = array.pop( )

Answer 289

Removes the first item of an array and returns it

Answer 290

Adds an item to the beginning of an array and returns the length of the new array

Answer 291

It is a piece of reusable code.

Answer 292

Parameters are variables that act as placeholders for the values that are to be input to a function at the time that it is called.

Answer 293

Arguments are the actual values that go in the place of parameters when the function is called.

Answer 294

It means inputting the Argument values in the place of parameters

Answer 295

The visibility of variables.

Answer 296

They have Global Scope. Meaning they can be seen everywhere in your JS code.

Answer 297

They are in Global Scope.

Answer 298

No you should not. If you want to make it Global, then use a Keyword and Variable Name outside a function. If you want it local then declare it inside of a function

Answer 299

Because it will cause unintended consequences elsewhere in your code and it will be really hard to debug

Answer 300

They have local scope.

Answer 301

They have local scope

Answer 302

It means that the variable can only be seen within that specific function

Answer 303

The Local Variable takes precedence over the Global.

Answer 304

When we want to send a value outside of the function

Answer 305

It produces an Undefined result.

Answer 306

True or False

Answer 307

No they are not.

Answer 308

They are code that allows you to run one type of code if the boolean is true and another type of code if the boolean is false

Answer 309

These are operators that compare two values. like lesser than and greater than >

Answer 310

Booleans (true or false)

Answer 311

== This checks to see if the left value is equal to the right value. If so True is returned if not False is returned

Answer 312

It is when the Equality Operator is used on two different data types... this converts the data into the same type and then compares them. 1 == 1 // true 1 == 2 // false 1 == '1' // true "3" == 3 // true the strings and the number data types return true because their value is equal even though the data type is not

Answer 313

=== It works the same way as the Equality Operator except that it doesnt perform Data Type Coercion. Meaning the data type and the value have to be equal for it to return a true. 3 === 3 // true 3 === '3' // false

Answer 314

by using the typeof operator. typeof 3 // returns 'number' typeof '3' // returns 'string'

Answer 315

!= It works the same way the Equality operator does except it returns True when unequal and False when they are equal. This perfroms Data Coercion

Answer 316

!== It works the same way as === except it returns True when they are unequal and False when they are equal

Answer 317

Yes, these will compare different data types

Answer 318

It returns true if both sides of the operator are true. Otherwise it returns false.

Answer 319

It returns True if at least one side of the operator is true

Answer 320

The If statement will stop executing at its first true. So Its important to put it in the right order. ``` This is the wrong way: if (val < 10) { return "Less than 10"; } else if (val < 5) { return "Less than 5"; } else { return "Greater than or equal to 10"; } } ``` If the whats passed in for Val is a 2.. it will return a true and stop running the code. Its less than 10, but its more correct to say that its less than 5. Thats the code we want to run. ______________________ ``` This is the right way if (val < 5) { return "Less than 5"; } else if (val < 10) { return "Less than 10"; } else { return "Greater than or equal to 10"; } } ``` If 5 returns a false, then we look to see if its less than 10 and so on and so forth.

Answer 321

It does the same thing as If statement but can run code if there are more options than just True or False. We can use this when there are more options available than just the two

Answer 322

Yes, its just like an If statement, it can be used inside of a function.

Answer 323

Yes we do, we need to pass in an argument to a parameter

Answer 324

switch (param1){ }

Answer 325

A Case is a possible value for the Param. There can be as many as you want. case "value" :

Answer 326

switch (param){ | case "value" :

Answer 327

You place it after the colon after the case value. case "value" : console.log('this code')

Answer 328

switch (param){ case "value": console.log('run this code')

Answer 329

It Breaks the code from executing the rest of the switch function and allows the code to move down the document.

Answer 330

If theres no break, then the code will keep executing even if the param found its matching case

Answer 331

If you have multiple possibilities for the param but would like them all to run the same code as a result. ``` switch(animal) case 'cow': case 'pig': case 'duck': console.log('This is a farm animal') break case 'spider': console.log('this is not a farm animal) ``` There is no break for the first three options, meaning if the animal value is one of those three it will return the same code and then break. but if it takes spider, then it will return a different code.

Answer 332

This is like an Else in an If Statement. If the parameter doesn't get passed a value that matches one of the Cases...it will run whatever code is in the default section. default :

Answer 333

``` switch(team){ case "49ers": console.log('49ers') break; case "Giants": console.log('Giants') break; case "Warriors": console.log('Warriors') default: console.log('if it aint these, then it aint shit) } ```

Answer 334

Strict Equality.

Answer 335

The execution of the current function stops. ``` function myFun() { console.log("Hello"); return "World"; console.log("byebye") } ``` The above outputs "Hello" to the console, returns "World", but "byebye" is never output, because the function exits at the return statement.

Answer 336

Arrays items are indexed/accessed by Numbers representing their location within the array Objects are indexed/accessed by their properties

Answer 337

Dot Notation and Bracket Notation.

Answer 338

If the property of the object you are trying to access has a space in its name, you will need to use bracket notation. ``` myObj = { "Space Name": "Kirk", "More Space": "Spock", "NoSpace": "USS Enterprise" }; myObj["Space Name"]; // Kirk myObj['More Space']; // Spock myObj["NoSpace"]; // USS Enterprise ```

Answer 339

property names with spaces in them must be in quotes (single or double).

Answer 340

You can store a key name of an objects key/value pair inside a variable and use Bracket Notation on that variable name to access the information in the object eventhough that variable name isnt in the object itself. example ``` obj = { 8: Farve, 16: Montana, 12: Marino } ``` We can save the number 16 to a variable name. playerNumber = 16 then we can use the new variable name in object bracket notation even though the variable name isnt in the object itself obj[playerNumber] This would return Montana, just as it would if you ran obj[16}

Answer 341

With Bracket or Dot Notation. we update this object's name property: ourDog.name = "Happy Camper"; or ourDog["name"] = "Happy Camper"

Answer 342

We can use Dot or Bracket Notation. The same way we would modify an existing key/value pair we can add other and new key value pairs

Answer 343

By using the delete keyword. delete objectName.propertyName

Answer 344

We can use the .hasOwnProperty(propname) method of objects to determine if that object has the given property name. .hasOwnProperty() returns true or false if the property is found or not. Example myObj.hasOwnProperty("top"); // true myObj.hasOwnProperty("middle"); // false

Answer 345

Its a loop that runs WHILE a specific condition is true. ``` var ourArray = []; var i = 0; while(i < 5) { ourArray.push(i); i++; } ``` this will produce an array with the numbers going from 1 - 5

Answer 346

We have to use Compound Assignemnt i += 10 this will iterate it by 10 every iteration instead of i++ and you cant just say i = 10

Answer 347

Yes you can. The outer loop will begin the inner loop and when the inner loop stops the outer loop will loop the inner loop again until both loops are completed.

Answer 348

We have to remember that we have to add the outer loops variable to the second loop. For example, first loop will take something like array.length; i++ to dictate when it stops and how it increments the inner loop will have something like, array[i].length; i++; because we need i to access the inner arrays inside of the outer array

Answer 349

It is the same as a While Loop except that it runs a piece of code once before it starts the looping. Do...this then Loop that. Normal While Loop ``` var ourArray = []; var i = 5; while (i < 5) { ourArray.push(i); i++; } ``` This fails because i = 5 so it wont loop when its time to loop so ourArray will be empty. Do..While Loop ``` var ourArray = []; var i = 5; do { ourArray.push(i); i++; } while (i < 5); ``` This also has i = 5 but the code following Do will run first and then the loop will start. but i = 6 after the Do code so the while loop wont execute so we will have ourArray = [5]

Answer 350

do { (code you want ran once regardless of condition. This code will keep running as long as the condition is true) i++ (or however you want it to loop) } while ( will run as long as this is true){ (this code if written will run once when the loop comes to an end) }

Answer 351

Recursion refers to a function calling itself inside of it. Basically the name of the function where its declared and created is also in the return function of that function ``` function MULTIPLY( ) { if ( some condition) { do some code } else { return MULTIPLY( ) } ```

Answer 352

It's the part of the code that that stops the calling of the function when a certain criteria is true or met. Basically the STOP CODE.

Answer 353

Its the part of the code that dictates how the function will call itself. It will have some sort of modification so the output will be different each time it is called until it reaches the base case

Answer 354

The goal is to add elements of an array together using their indexes. var times = [1,2,3,4,5] ---- example Array sum(arr , n) --- name of function and params representing array, and stopping place for the function to stop calling itself. if (n <= 0 ){ --- This is where we set our BaseCase, and tell the code when to stop. It doesnt have to be zero. If you want specific of an array.....say starting with the third item in an array, you can adjust the number 0 to handle that. Zero here is an arbitrary number. This might work well for a countdown app, where you want the function to call itself until it reaches the first item in an array or the number 0 itself. But it doesnt have to be a zero return 0 --- This is what we want to happen instead the function being called again. Again, can be anything. But in the case of a countdown, you might want it to return zero as the final number in the countdown. Or can say something like "Happy New Year" ``` else { return sum(arr, n - 1) + arr[n - 1] } ``` This is the the recursive case where we call the function again. What this is doing in the first N is controlling how many more times the function will run the second N gets the value from the array by its index. so everytime it runs it logs the value of the array index so if N = 5 it would add the array index 5 plus 4 plus 3 plus 2 and keep going this way until N reached whatever value was set in the IF statement Example of full code: ``` function sum(arr, n) { if ( n <= 0){ return 0 } else { return sum(arr, n - 1) + arr[n - 1] } } ```

Answer 355

Yes you must use bracket notation otherwise it will come up as undefined and youll want keep doing it over and over and want to shoot everyone in the face

Answer 356

It creates a random decimal number. It can make any decimal number including 0 - 1... it can return 0 but it will never return 1

Answer 357

Math.floor(Math.random() * whole number) this will create a random whole number below the whole number. It rounds down to the nearest whole number, so if you put Math.floor(Math.random() * 20) it will choose a random number between 1 -19 but it will never choose 20, so you have to account for that in your code

Answer 358

Math.floor(Math.random() * (max - min + 1)) + min console.log(Math.floor(Math.random() * (20 - 10 + 1 )) + 10) will only produce numbers between 10 - 20

Answer 359

It turns a string into an integer... so a = parseInt("007") would make a = 7 if you try to use parseInt and the first character of the string cant be made into a number it will return NaN

Answer 360

Some times in your JSON and API calls you get strings that are numbers and this is a good way to turn them into numbers.

Answer 361

It is a one line if/else statement. condition ? statement if true : statement if false

Answer 362

Yes you can and the best practice is to start each additional ternary operator on another line. That way it is easy to read Each new lines begins with the colon

Answer 363

It will continue and eventually overflow

Answer 364

The functions that are called in an recursive function, do not return anything at first, they are merely put inside of a queue and are waiting until the Base Case is reached. Once the base case is reached then, that return sets off a chain reaction that will start with the base case function (1 or 0 usually) then that will fire the next one and the next one and the next one.

Answer 365

Create an empty array or an array with starting values in the Base Case - and then assign the recalled function to variable name and then push or unshift from there in the recursive case ``` function recursiveFunctionName(arrayParam, numParam){ if ( numParam <= 0){ return; } else { arrayParam.push(numParam) console.log(arrayParam) return recursiveFunctionName(arrayParam, numParam - 1) } } ```

Answer 366

Because the original value declaration can be overwritten without throwing an error. So you can ruin your code bigtime and not even know

Answer 367

Let is tied and bound to not just the function but whatever expression it is tied to. So its possible to have a variable have a value in a loop statement and then a different value in an if statement in the same function. But this is not encouraged to do.

Answer 368

Const is 'read only' meaning that it only can be read and its value cannot be changed once it is set.

Answer 369

Typing them in ALL CAPS and separating words with underscores.

Answer 370

Yes, the can be updated and mutated. for example a object or an array can be updated with dot or bracket notation just like it would be if declared with LET ``` const s = [5, 6, 7]; s = [1, 2, 3]; // throws error, trying to assign a const s[2] = 45; // works just as it would with an array declared with var or let ```

Answer 371

This makes an object unchangeable. Any attempt to update or delete the properties on a frozen object will be ignored and an error will not be thrown - it just will be ignored.

Answer 372

It is a function that doesn't have a name, and it doesn't have a name because it wont be reused. ``` function() { const myVar = "value"; return myVar; } ```

Answer 373

(Anon) ``` function() { const myVar = "value"; return myVar; } ``` ``` (Arrow) () => { const myVar = "value"; return myVar; } ```

Answer 374

Arrow functions can omit 1. Return Keyword 2. Curly Brackets This helps it be on one line and easier to read () => "value";

Answer 375

The parenthesis that go around the parameter. item => item * 2;

Answer 376

We place them inside the parens like normal functions. (item, multi) => item * multi

Answer 377

str/array.concat(str/array) This adds a string to another string.

Answer 378

A Default Parameter is a parameter that you give a default value to in the event that one isn't specified. This can be used to set a parameter that you want something to be the majority of the time and change under specific circumstances. To do this you add = value to the parameter. ``` function (greeting = Hi , name = Rashaan) { ``` return greeting + name } Hi Rashaan this function can be called with other parameters for name or greeting and it will change. But if no other one is specified it will say Hi Rashaan as the default instead of throwing an undefined error

Answer 379

A parameter is a parameter that is an array basically, it holds more than one value in its value name and can be accessed with various array methods like .reduce( ) .map( ) etc

Answer 380

A parameter that accepts multiple unrelated values and puts them inside an array to be used and accessed within a function. for example calling restTest(2, apples, oranges, bananas) function restTest(param1, ...arr2) will treat Param 1 as the value 2 and put apples, oranges and bananas in an array that you can then use array methods on like reduce or map or filter etc

Answer 381

It looks the same as the Rest Parameter ...variableName. it takes an already made array and makes it able to used to 1. add new elements to arrays 2. pass elements of an array as parameters of a function 3. copy arrays 4. concatenate arrays

Answer 382

just add the spread operator into the existing array or use an array method to add it an existing array and this will make one new array. No spread array fruit = [grapes, bananas] {apple, orange] + fruit returns [apple, orange, [grapes, bananas ]] Spread Array fruit = [grapes, bananas] [apples, orange, ...fruit] returns [apples, oranges, grapes, bananas]

Answer 383

fruit = [grapes, bananas, oranges] ``` function (...fruit) { } ``` this allows you to use the array in the function

Answer 384

You just store it in another variable name ``` arr1 = [1,2,4] arr2 = [...arr1] ``` arr2 = [1,2,4]

Answer 385

Save two arrays to another variable name by making an array containing two spread operators. This will add both arrays into one big array accessible throught the new variable name. arrAll = [...arr1, ...arr2]

Answer 386

You might choose to use the Spread Operator if you want to add other elements along with the array. fruit = [oranges, bananas, apples] fruitALL = [grapes, kiwis, ...fruit, "pineapples"] This allows you to add not only the array under fruit but also add pineapples. Where using array.concate.(array) wouldnt allow you to do that. Also, you can decide where you want the array to take place using the Spread Operator fruit = [oranges, bananas, apples] fruitALL = [grapes, kiwis] you can add fruit to fruit all like [grapes, ...fruit, kiwis] and it will be [grapes, oranges, bananas, apples, kiwis] the array will go wherever you put it array.concate.(array) only allows you to put one whole array before another whole array

Answer 387

No, this operator has to be used in place, meaning that it has to have some sort of Brackets or Parens around it such as array brackets or a parameter parens in a function ``` [...arr] function(...arr){ } ```

Answer 388

It takes numeric values separated by a comma and returns the largest value. Math.max (5,6,6,7, 734) returns 734

Answer 389

No you cant, it returns NaN you have to use the Spread Operator num = [32, 22, 112] Math.max(...num) returns 112

Answer 390

Destructuring Assignment is used to extract values from objects and apply them to variable names outside of the object. The names of the keys and the variable names will be the same { object key , object key } = object name ``` cat = { name: "whiskers" age : 14 color; "white" } ``` {name , color } = cat this will assign the value of cat.name to name and cat.color to color outside of the function

Answer 391

add colons and the new variable name after the object key name ``` cat = { name: "whiskers" age : 14 color; "white" } ``` {name : catName , color: catColor } = cat this will assign the value of cat.name to catName and cat.color to catColor outside of the object

Answer 392

Yes, you have to use a keyword otherwise it will throw an error

Answer 393

You use it the same way as normal Destructing Assignment except you add more curly brackets around the objects. Everything else is the same. MAKE SURE YOU HAVE COLONS BEHIND THE NESTED OBJECT KEY NAME ``` const user = { johnDoe: { age: 34, email: 'johnDoe@freeCodeCamp.com' } }; ``` const { johnDoe: { age: userAge, email: userEmail }} = user; this will create a variable of userAge with the value of 34 and a variable of userEmail with the value of 'johnDoe@freeCodeCamp.com'

Answer 394

const [newName1, newName2, newName3 = [1, 2, 3] whatever is in the place of the 0 position will be assigned that and so on and so forth

Answer 395

We add as many commas as needed and for every comma one item gets skipped. const [index1,,,,,,,,, index10] = [10,20,30,40,50,60,70,80,90,100] index1 = 10 index 10 = 100

Answer 396

We can use the Rest Parameter in conjunction to assign the remainder of an array to a variable name. const [index 1, index 2, ....restArrayName] = [5, 10, 15, 20, 45] ``` this will make index 1 = 5 index 2 = 10 and this will make restArrayName equal the rest of the array so [15,20,45] ```

Answer 397

In this case we want to just add the name of the keys that we want/ or the keys + new variable names we want to add to the values in the parameter place and then in the function block say what we want to do with it. ``` const stats = { max: 56.78, standard_deviation: 4.34, median: 34.54, mode: 23.87, min: -0.75, average: 35.85 }; ``` const half = ({max, min}) => (max + min) / 2.0; the values for max and min in the object is placed where the parameters go inside of curly brackets --t the curly brackets signifies the destructuring... then the arrow function to let us know were about to do stuff with it. and then in the function block we add both numbers and then divide the sum in half and save all of that to the half variable name.

Answer 398

its when you use backticks to add variable names or accessed data inside of a string it also can be used to make a string multi line let dataType = "string" ` this is a template ${dataType}` produces "this is a template string"

Answer 399

We can use Object Shorthands when we know that we are going to create multiple objects using the same keys For example, we are going to make and need objects of wrestlers that all are going to have the keys of name finisher title slogan instead of making each and every object, one by one every time -- we can make a function that will do it for us for example ``` const wrestler = (name, finisher, title, slogan) => { return { name, finisher, title, slogan } } ``` then we can just call the function with the values of the parameters and store it in a variable name and we wil have new objects const bretHart = wrestler("the hitman", "sharpshooter", "WWF", "Excellence of Execution") this will produce the object ``` bretHart = { name: the hitman, finisher: sharpshooter, title : wwf, slogan : excellence of execution } ``` and any time you need to make a function you just call it with the proper parameter values and it will create the object and then you can access it the way you would anything else bretHart.name returns "the hitman"

Answer 400

So usually when we call a function in an object it will usually look like this : ``` const person = { name: "Taylor", sayHello: function() { return `Hello! My name is ${this.name}.`; } }; ``` We can take off the function keyword and we can remove the colon: ``` const person = { name: "Taylor", sayHello() { return `Hello! My name is ${this.name}.`; } }; ```

Answer 401

It is a function who's job is to construct/create an object

Answer 402

No the first letter of every word should be capitalized

Answer 403

``` function ConstructorName(param1, param2, param3){ this.param1 = param1; this.param2= param2; this.param3= param3; } ``` const variableStore = new ConstructorName("value1", "value2", "value3") this will produce an object like this: ``` variableStore = { param1 = value1; param2= value2; param3= value3; } ```

Answer 404

``` class Wrestler { constructor(name,finisher,slogan){ this.name = name; this.finisher = finisher; this.slogan = slogan; } } ``` const bookerT = new Wrestler("Booker T", "Spinarooni", "Can you dig it?")

Answer 405

1. You have to call them with the "new" keyword 2. You don't need a return statement 3. If you use Class you have to use the Constructor method/ if you use Function you dont 4. you have to use the "this" keyword

Answer 406

They are methods/functions inside of an object that return values or set values that look like properties. object = { year: 1979 (this is an actual property/key value pair) get/set year( ) { some code that returns/sets 1979 (this is a function that runs and returns the value of 1979 as if it were the property) } } get obviously would return the value and set would obviously set the value

Answer 407

An account log in list. When someone logs in, names are saved into an array value. This whole array can be shown at once, also the last person that logged in can be displayed. ``` class Account { constructor(allAccounts, username){ this.allAccounts = allAccounts; this.username = username; } set getAccount(updatedUserName){ this.username = updatedUserName; this.allAccounts.push(updatedUserName) ``` ``` } get getAccount(){ this.allAccounts = allAccounts; this.username = username; } } ``` let currentList = new Account([],"no username logged in yet"); ``` currentList.getAccount = "rmungo49@gmail.com"; currentList.getAccount = "JenanAbderrahman@gmail.com"; currentList.getAccount = "mungoRashaan@gmail.com"; currentList.getAccount = "baysauce35@yahoo.com" ``` console: ``` [ 'rmungo49@gmail.com', 'JenanAbderrahman@gmail.com', 'mungoRashaan@gmail.com', 'baysauce35@yahoo.com' ] baysauce35@yahoo.com ```

Answer 408

We need to call them not like a function, but in the same way that we add a key/value pair to an object with dot/bracket notation. set function: currentList.getAccount = "rmungo49@gmail.com"; the value after the equal sign of this becomes the parameter of the set function (updatedUserName). ``` set getAccount(updatedUserName){ this.username = updatedUserName; this.allAccounts.push(updatedUserName) } ``` get currentList.username this returns the value of username on the object without actually accessing the original objects properties. ``` get getAccount(){ this.allAccounts = allAccounts; this.username = username; } ```

Answer 409

We need to add a script tag with the type module with src of the main javascript file.

Answer 410

export { function name}

Answer 411

Yes you can. All you have to do is separate the function name with a comma. export { function1, function2, function3}

Answer 412

Import {function name} from ./filename.js You can add multiple functions to a an import statement by adding it inside of the curly braces Import {function name, function name 2} from ./filename.js

Answer 413

Quotations around the file name "./filename.js"

Answer 414

The main difference is the ---* as objectName --- instead of {function name} The name can be anything you want. This saves all the functions and code in one big Object. import * as myMathModule from "./math_functions.js";

Answer 415

The same way you would access any other object. Dot/Bracket Notation. objectName.functionName(parameters) myMathModule.add(2,3); myMathModule.subtract(5,3);

Answer 416

When we are only exporting one value/function let iceCream = vanilla export default iceCream

Answer 417

No you do not, it is not necessary

Answer 418

Just Import it using the curly braces and 'default as variable name' import {default as newName} from "somefile.js" There will only be one default export from the file location so it will know which one to rename

Answer 419

It is a constructor function

Answer 420

We need to use the 'new' keyword because its a constructor function. const myPromise = new Promise((resolve, reject) => { });

Answer 421

It takes a function with two parameters const myPromise = new Promise((resolve, reject) => { });

Answer 422

Pending, Fulfilled and Rejected.

Answer 423

Resolve => the Then method following it. Which tells us what to do with successful data or value we achieved in the resolve function. Reject => the Catch method following it. This tells us that our promise was unsuccessful and will either retry the call, do something else, or tell the user there was an error

Answer 424

Promises are promises. They are things that need to happen, there is weight to whether they do their job or not. If you have a webpage that prominent functionality that depends on the data of an outside APi or something, your app needs to get that information. It is a promise, like 'Ill promise to be to work on time' and if that promise isnt fulfilled - you need a way to handle it. An If/Else statement is basically just a lower level example of this... where the functionality of the app isnt dependent on this working. If you have an If/Else statement that says if this number is even...do this.. but if its odd, do this...isnt going to break the code. It isnt weighted... it isnt a promise ...life will go on

Answer 425

When you have something thats going to take a minute to happen, like download a picture from a different server or perform an API call and you dont want all the code to stop running waiting for that to finish. This way you can keep running the rest of the code and whenever the promise gets what its looking for, it will bring it back and perform a function on it. This is why its called a promise, because the rest of the code is going on without it - with the expectation that it will come back with what its looking for.

Answer 426

``` const myPromise = new Promise((resolve, reject) => { if(condition here) { resolve("Promise was fulfilled"); } else { reject("Promise was rejected"); } }); ```

Answer 427

We can pass anything we want, a function - a string - a number. Anything.

Answer 428

We chain them then( ).then( ).catch( )

Answer 429

Regular expressions are special strings that represent a search pattern

Answer 430

Regular expressions are special strings that represent a search pattern. They are used in programming languages to match parts of strings. You create patterns to help you do that matching.

Answer 431

It is added to the end of a Regular Expression or Regular Expression Variable and takes a String or Variable String and checks to see if that string has that text pattern. regEx.test(string) let testStr = "freeCodeCamp"; let testRegex = /Code/; testRegex.test(testStr); // Returns true

Answer 432

It returns a Boolean

Answer 433

Whatever is in between the slashes is checked for in the larger string when used with the .test( ) method. "the dog is running fast" /dog/ would return true

Answer 434

Yes it is. A search for /Kevin/ would not return a true boolean for KEVIN or kevin

Answer 435

you can use the OR Operator | in between different strings patterns you want to search for. /yes|no|maybe/ this would search for the strings of yes no or maybe.

Answer 436

You can add the " i " flag to tell the method to ignore the case. /ignoreCase/i this would return true for any combination of ignoreCase IGNORECASE ignorecase etc

Answer 437

The match method is the opposite of the test( ) method. It extracts the actual matched value of the string and returns it. The match method is applied to the string and the Regex is added withing the parens of the match( ) method.

Answer 438

The match method is the opposite of the test( ) method. It extracts the actual matched value of the string and returns it. The match method is applied to the string and the Regex is added within the parens of the match( ) method.

Answer 439

The method can be applied to the string itself as well as a variable name. "Hello, World!".match(/Hello/);

Answer 440

We can use the "g" flag along with the match( ) method. let testStr = "Repeat, Repeat, Repeat"; let repeatRegex = /Repeat/g; testStr.match(repeatRegex); // Returns ["Repeat", "Repeat", "Repeat"]

Answer 441

It returns an array consisting of the amount of times a pattern was found inside of a string. let testStr = "Repeat, Repeat, Repeat"; let repeatRegex = /Repeat/g; testStr.match(repeatRegex); // Returns ["Repeat", "Repeat", "Repeat"]

Answer 442

Yes you can /twinkle/gi this would search for every instance of the word 'twinkle' in a string regardless of the case -- and add it in an array and return it

Answer 443

The Wildcard period is just a normal period but you use it in Regular Expressions to replace a character that you might not actually know or want to specifiy. ``` let humStr = "I'll hum a song"; let hugStr = "Bear hug"; let huRegex = /hu./; huRegex.test(humStr); // Returns true huRegex.test(hugStr); // Returns true ```

Answer 444

You can place each character that you want to search for inside of brackets [ ]. This is called a Character Class. /b[aui]g/ this would search and return true for bag, bug, and big but wouldnt return true for bog, beg, bkg etc

Answer 445

When you want to search for a range of characters using match( ) or test( ) methods in Regular Expressions you can use a hyphen between two characters and all of them in between will be searched for. This keeps you from having to individually type every letter you want to search for. Character sets are inclusive the the values you place on the book ends. let catStr = "cat"; let batStr = "bat"; let matStr = "mat"; let bgRegex = /[a-e]at/; catStr.match(bgRegex); // Returns ["cat"] batStr.match(bgRegex); // Returns ["bat"] matStr.match(bgRegex); // Returns null This works with numbers too. /[0-9]/

Answer 446

Yes you can. /[a-z0-9]/ig; This would search for all letters and all numbers.

Answer 447

They are the same thing as normal character sets expect they specify characters that you dont want to match. You apply these with a ^ instead of a - The caret goes before the list of characters you want to exclude. Anything other than these characters will get matched including symbols and whitespace. /[^aeiou]/gi This will match everything except for vowels.

Answer 448

you can use the addition operator after the character. -If the character is there just once it will return just the character /a+/ = "a" -if the character is there more than once it will return the original and the repeated characters. /a+/ = "aa"

Answer 449

The start symbol *

Answer 450

It means that by default Regular Expressions search for the longest possible match in the string that properly validates. For Example /t[a-z]*i/ in the string titanic would return titani as opposed to "ti" which would also fit the criteria of the expression.

Answer 451

It returns the shortest possible valid string pattern you add a question mark /[a-z]?

Answer 452

You can you use the ^ outside of a character set and it will do this? /^Ricky/

Answer 453

You add a dollar sign at the end of a string /Ricky$/

Answer 454

It basically returns true for all numbers and all letters of the alphabet and also the underscore. /\w+/

Answer 455

It returns everything BESIDES numbers and letters and underscore.. Its the opposite of \w

Answer 456

By default, these do not return all or more than one matching characters. You have to specify if you want it to find all the instances or multiple instances. In general they return the first one they find

Answer 457

It the way you find the white space in a string.

Answer 458

It returns everything besides whitespace (spaces, tabs, new lines etc)

Answer 459

{minimum amount, maximum amount } /a{3, 8}/ this will look at the expression and see if there are a number of a's between the quantities of 3 and 8. So two a's return a false, 6 a's return a true.

Answer 460

Just set the minimum value /Haz{4,}ah/ this would return a true for Hazzzzah Hazzzzzah Hazzzzzzah or any combination of hazah that has more than 4 z's

Answer 461

You simply place a number inside of curly brackets /Tim{4}ber/ returns true for Timmmmber

Answer 462

You can apply a ? before a character and it makes it optional /favou?rite/ /colou?r/ This will turn true for favourite or favorite and color and colour

Answer 463

Lookaheads are patterns that tell JavaScript to look-ahead in your string to check for patterns further along. This can be useful when you want to search for multiple patterns over the same string

Answer 464

A positive lookahead will look to make sure the element in the search pattern is there, but won't actually match it. A positive lookahead is used as (?=...) where the ... is the required part that is not matched. let quit = "qu"; let quRegex= /q(?=u)/; quit.match(quRegex); // Returns ["q"] This returns true, because it looks ahead to the U and sees that there is one, so its true --But it doesnt return the U, it just makes sure that its there.

Answer 465

On the other hand, a negative lookahead will look to make sure the element in the search pattern is not there. A negative lookahead is used as (?!...) where the ... is the pattern that you do not want to be there. The rest of the pattern is returned if the negative lookahead part is not present. let noquit = "qt"; let qRegex = /q(?!u)/; noquit.match(qRegex); // Returns ["q"] This returns true, because it looks ahead to see if there is a U and sees that there isnt one, so its true --But it doesnt return the U or the T , it just makes sure that it isnt there.

Answer 466

A regular Dot. A literal Dot. Outside of character sets it represents any character, but inside the brackets it just represents itself

Answer 467

The same way we would use them in quotations for strings with a \

Answer 468

If it is the first thing in a character set it represents itself, a dash literal [ - . ] if its not the first character in a character set then it represents a range. [A - Z]

Answer 469

When writing longer Regex, you can add parens around the terms using the pipe operator [a-zA-Z][0-9](gmail | yahoo | hotmail) the parens separate it from the rest of the expression so it can work. this isnt needed when its the only expression being hard coded straight into the test( ) method. Test already has parens that the pipe operators and values already go inside of test( yes | no | maybe)

Answer 470

It saves the whole string to the computers memory. It groups it all together.

Answer 471

Additional groupings occur, meaning that the computer stores memory of that part of the string separately in addition to the original string. so [a-z]([a-z})([0-9]) creates three groups..... group 0 - the whole string group 1 - the first paren group to the right group 2 - the next paren group to the right

Answer 472

You can use backslash and a number \1 will be the first group with parens left to right \2 will be the second etc ``` let repeatStr = "regex regex"; let repeatRegex = /(\w+)\s\1/; repeatRegex.test(repeatStr); // Returns true ```

Answer 473

You can search and replace text in a string using .replace() on a string. The inputs for .replace() is first the regex pattern you want to search for. The second parameter is the string to replace the match or a function to do something. let wrongText = "The sky is silver."; let silverRegex = /silver/; wrongText.replace(silverRegex, "blue"); // Returns "The sky is blue."

Answer 474

let hello = " Hello, World! "; let wsRegex = /^\s+|\s+$/g; // Change this line let result = hello.replace(wsRegex, ""); // Change this line trim( ) does this without regex using regex /\s+/g will remove spaces everywhere in the string

Answer 475

syntax errors that prevent a program from running runtime errors when code fails to execute or has unexpected behavior semantic (or logical) errors when code doesn't do what it's meant to.

Answer 476

Every function should have a console.log, this will help with keeping track with what's happening in your code

Answer 477

Constantly using console.log( ) will make your console cluttered and hard to read whats going on. You can strategically place console.clear to clear the console without getting rid of the console logs so you can them there in case a problem arises later

Answer 478

They are objects technically

Answer 479

Transposed, missing, or mis-capitalized characters in a variable or function name will have the browser looking for an object that doesn't exist - JavaScript variable and function names are case-sensitive.

Answer 480

As a multi-dimensional array. ----adding array literal with push: ---- array = [1,2,3] array.push([4,5,6]) produces [1,2,3[4,5,6]] ----adding array stored in an array with push: ---- array = [1,2,3] storedArray = [4,5,6] array.push(storedArray) produces {1,2,3[4,5,6]]

Answer 481

as a one-dimensional array ---adding individual literal values with push: ---- array = [1,2,3] array.push("four",5,"six") produces [1,2,3,"four",5"six")

Answer 482

by adding items not as an array inside of the unshift( ) or push( ) - you can add as many items as you want inside of the parens array = [1,2,3] array.push("four",5,"six") produces [1,2,3,"four",5"six")

Answer 483

splice( ) this allows us to remove any number of consecutive elements from anywhere in the array

Answer 484

It can take up to three.

Answer 485

it represents the starting position. Remember this uses zero based indexing so the first one starts at zero.

Answer 486

It represents how many total items we want removed from the array. let array = ['today', 'was', 'not', 'so', 'great']; ``` array.splice(2, 2); // remove 2 elements beginning with the 3rd element // array now equals ['today', 'was', 'great'] ```

Answer 487

A new array of the removed items. It represents how many total items we want removed from the array. let array = ['today', 'was', 'not', 'so', 'great']; ``` array.splice(2, 2); // remove 2 elements beginning with the 3rd element // array now equals ['today', 'was', 'great'] ``` slice returns ['not', 'so']

Answer 488

The third parameter is used to add items to an array after you have removed elements from an array.

Answer 489

It can take as many arguments as you want as long as they are separated by a comma. ``` const numbers = [10, 11, 12, 12, 15]; const startIndex = 3; const amountToDelete = 1; ``` numbers.splice(startIndex, amountToDelete, 13, 14); // the second entry of 12 is removed, and we add 13 and 14 at the same index console.log(numbers); // returns [ 10, 11, 12, 13, 14, 15 ]

Answer 490

It copies particular elements of an array and copies them to a new array without modifying the original array.

Answer 491

It takes two.

Answer 492

The first one is the starting point of where the copying of the array will begin (zero indexing). The second one is the point that you want the copying to stop. This is non inclusive, so whatever point you put as the stopping place will not be included. So add one more to the last element you want in the array. let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear']; ``` let todaysWeather = weatherConditions.slice(1, 3); // todaysWeather equals ['snow', 'sleet']; // weatherConditions still equals ['rain', 'snow', 'sleet', 'hail', 'clear'] ``` notice that the stopping point was 3 which in the array = hail but the last item copied is sleet which is the element before 3.

Answer 493

YOU DONT NEED SPLICE!!! just use the spread operator. ``` let thisArray = [true, true, undefined, false, null]; let thatArray = [...thisArray]; <= <= <= <= EXAMPLE // thatArray equals [true, true, undefined, false, null] // thisArray remains unchanged, and is identical to thatArray ```

Answer 494

array.indexOf( "element" ) let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears']; fruits.indexOf('oranges'); // returns 2

Answer 495

The every( ) method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value. const isBelowThreshold = (currentValue) => currentValue < 40; const array1 = [1, 30, 39, 29, 10, 13]; ``` console.log(array1.every(isBelowThreshold)); // expected output: true ```

Answer 496

with a 'For ..... In' loop. for ( let newVariable name In nameOfObject) { what do you want to happen in loop } users = ['Alan', 'Jeff', 'Sarah', Ryan'] for (let user in users) { console.log(user); } ``` // logs: Alan Jeff Sarah Ryan ```

Answer 497

Create a variable that equals 0 and when the code executes whatever you want, or finds a true value or whatever it is your looking for and increase the variable name by 1 ++ ``` function countOnline(obj) { // change code below this line let result = 0; for (let user in obj) { if (obj[user].online === true) { result++; } } return result; ```

Answer 498

it returns an array consisting of the keys of an object. return Object.keys(obj) [ 'Alan', 'Jeff', 'Sarah', 'Ryan' ]

Answer 499

.join(' ')

Answer 500

1. ``` function reverseString(str) { let reversedStr = " "; for( let i = str.length - 1; i >= 0; i--){ reversedStr += str[i] } console.log(reversedStr) return str; } ``` 2. ``` function reverseString(str) { return str .split("") .reverse() .join(""); } ```

Answer 501

Split( ) takes a string and turns it into an array of substrings ('') will separate every character by a comma. (" ") will separate every word with a comma, or where ever there is a space.

Answer 502

reverse will reverse the order of the items inside of an array.

Answer 503

``` function findLongestWordLength(str) { return Math.max(...str.split(" ").map(word => word.length)); } ```

Answer 504

It sorts the items of an array. By default it sorts strings alphabetically

Answer 505

Sort sorts numbers not by the value they represent but by individual digits... so 25 would come before 100 because the digit of 2 is higher than 1 in the first place of the hundreds place

Answer 506

The reduce( ) method reduces the array to a single value.

Answer 507

The find( ) method returns the value of the first element in an array that pass a test (provided as a function).

Answer 508

The filter( ) method creates an array filled with all array elements that pass a test (provided as a function).

Answer 509

The replace() method searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced. Return a string where "Microsoft" is replaced with "W3Schools": ``` var str = "Visit Microsoft!"; var res = str.replace("Microsoft", "W3Schools"); ```

Answer 510

That it only replaces the first instance of the matched expression if using a string as a replacement.

Answer 511

``` function titleCase(str) { var convertToArray = str.toLowerCase().split(" "); var result = convertToArray.map(function(val) { return val.replace(val.charAt(0), val.charAt(0).toUpperCase()); }); return result.join(" "); } ``` titleCase("I'm a little tea pot");

Answer 512

it returns the character at that specified place in the index, which is placed in the parens. Return the first character of a string: ``` var str = "HELLO WORLD"; var res = str.charAt(0); ```

Answer 513

Boolean(variableName) this will return a true of the data type is truthy will return a false when the data type is falsy null, undefined, false, an empty string, 0 or NaN

Answer 514

indexOf( ) can be used by just adding the value or name inside the parens. It will search the array or the string for it and return the index. findIndex( ) is used to pass a function inside of the parens, this can be used to find an item in which you dont already know the variable name or whats in the array, or want the first of many possible items of an array.

Answer 515

The includes() method determines whether an array contains a specified element. This method returns true if the array contains the element, and false if not. Note: The includes() method is case sensitive.

Answer 516

We use it when we want to access another property of the object. ``` let dog = { name: "Spot", numLegs: 4, sayLegs: function() {return "This dog has " + this.numLegs + " legs.";} }; ``` This allows us to

Answer 517

Because sometimes we need to change the name of objects and if the object of the name changes we dont want the code to break when we call the object method

Answer 518

They are called methods

Answer 519

Constructors are functions that create new objects. They define properties and behaviors that will belong to the new object. Think of them as a blueprint for the creation of new objects.

Answer 520

They start with a capital letter and they set properties using this keyword

Answer 521

Its called an Instance

Answer 522

the instanceof operator. instanceof allows you to compare an object to a constructor, returning true or false based on whether or not that object was created with the constructor crow instanceof Bird; // => true

Answer 523

Own Properties are properties that are defined in the object themselves, either through hardcoding the properties yourself or through the use of a constructor function. Both are considered Own Properties

Answer 524

By using prototype Properties in the prototype are shared among ALL instances of the objects that a Constructor creates. Bird.prototype.numLegs = 2; Now all instances of Bird have the numLegs property. console. log(duck.numLegs); // prints 2 console. log(canary.numLegs); // prints 2

Answer 525

It doesnt matter, it will take affect anywhere you declare it

Answer 526

No. You will not see the Prototype Properties when you print out or console.log the the Object Name. It is applied to the object behind the scenes and is technically apart of the constructor that constructs the object and not the object itself.

Answer 527

using dot/bracket notation pitBull.prototype.name = "Spot"

Answer 528

with an if/else statement if own props are found => push to new array else if prototype props are found => push to same array return array

Answer 529

A constructor property can be used to check to see if a object was made by a particular constructor function. Will return a boolean. spot. constructor == Dog => true this is similar to the instanceof keyword

Answer 530

Its better to use instanceof because constructor can be overwritten

Answer 531

You can add all the prototype value/keys to a prototype object. ``` Bird.prototype = { numLegs: 2, wings: 2, beak: 1, eat: function() { console.log("nom nom nom"); }, describe: function() { console.log("My name is " + this.name); } }; ```

Answer 532

It erases the constructor property

Answer 533

we set the constructor property and the value in the Prototype Object. ``` Bird.prototype = { constructor: Bird, // define the constructor property numLegs: 2, eat: function() { console.log("nom nom nom"); }, ```

Answer 534

``` function Bird(name) { this.name = name; } ``` ``` let duck = new Bird("Donald"); duck inherits its prototype from the Bird constructor function. You can show this relationship with the isPrototypeOf method: ``` Bird.prototype.isPrototypeOf(duck);

Answer 535

Not all but Most

Answer 536

It is an object

Answer 537

Yes they can Because a prototype is an object, a prototype can have its own prototype! In this case, the prototype of Bird.prototype is Object.prototype: Object.prototype.isPrototypeOf(Bird.prototype); // returns true

Answer 538

It is the child, its lower than it on the chain. the object of 'alex' and the object of 'dave' are both children and inherit properties from Person.prototype if Person.prototype.species = human all objects coming out of person would take the property species : human

Answer 539

We use bracket and dot notation to apply new key/value pairs to our objects. for example Initial set => taking value from prototype ``` Person {name: "Sarah", age: 16} age: 16 name: "Sarah" __proto__: fingers: 10 <= passed in from set prototype ``` Overriding with Dot Notation sarah.fingers = 8; Person {name: "Sarah", age: 16, fingers: 8} age: 16 fingers: 8 <== this will show up when you run it name: "Sarah" __proto__: fingers: 10

Answer 540

At the very top Object.prototype is at the top...everything runs up and comes from this.

Answer 541

Don't Repeat Yourself. If you change something you have to change it in all the places. Also, more times you have to write the same code the more likelihood for bugs and more work for yourself and for others.

Answer 542

Create a superType and place the shared key/value there. These both have the same 'eat function' ``` Bird.prototype = { constructor: Bird, describe: function() { console.log("My name is " + this.name); } }; ``` ``` Dog.prototype = { constructor: Dog, describe: function() { console.log("My name is " + this.name); } }; ``` We should make a supertype called animal and add the eat function to it and remove it from the other prototype objects function Animal() { }; ``` Animal.prototype = { constructor: Animal, describe: function() { console.log("My name is " + this.name); } }; ```

Answer 543

Its receiving properties and data from objects and constructors without having to hard code it yourself. It then can be modified or changed without changing the original properties or values

Answer 544

When an object inherits its prototype from another object, it also inherits the supertype's constructor property.

Answer 545

Bird.prototype.constructor = Bird;

Answer 546

Answer 547

Yes you can, the same way you update or do anything in Objects. Dot Notation. Just use the same path and name and give it a new value. Animal.prototype.eat = function() { return "nom nom nom"; changed to Bird.prototype.eat = function() { return "peck peck peck"; };

Answer 548

If you do not, any time you try to add additional properties - it will make you choose one or the other (parent or child) to update. One overriding the other. If you set the parent, then change the constructor back to itself (child object) then you can add new methods and properties to the child element

Answer 549

When the objects are unrelated. An object representing Birds And an object representing Airplanes both fly but shouldnt use inheritance to share that behavior. Mixins should be used instead.

Answer 550

A mixin allows other objects to use a collection of functions. ``` let flyMixin = function(obj) { obj.fly = function() { console.log("Flying, wooosh!"); } }; The flyMixin takes any object and gives it the fly method. ``` flyMixin(bird); flyMixin(plane); result bird. fly(); // prints "Flying, wooosh!" plane. fly(); // prints "Flying, wooosh!"

Answer 551

It can be accessed and changed outside of the objects function.

Answer 552

a property that can only be accessed and changed by methods also within the constructor function.

Answer 553

Account numbers, bank statements, social security numbers, passwords etc.

Answer 554

Create the variable inside of the constructor function. This takes the scope outside of global

Answer 555

Its a method that has access to a private property inside of the same constructor function. let hatchedEgg = 10; // private variable ``` /* publicly available method that a bird object can use */ this.getHatchedEggCount = function() { return hatchedEgg; ``` here getHactchedEggCount is the Priveledged Method of the private property hatched egg

Answer 556

Closure is the act of setting a variable inside of a constructor method to make it private, and then creating a privileged method in the same constructor that is equal to the same value as the private property. This allows the value to be changed and manipulated from the outside without changing the actual data inside the function. let hatchedEgg = 10; // private variable ``` /* publicly available method that a bird object can use */ this.getHatchedEggCount = function() { return hatchedEgg; }; } let ducky = new Bird(); ducky.getHatchedEggCount(); // returns 10 ```

Answer 557

It calls the function as soon as its declared. (function () { console.log("Chirp, chirp!"); })(); its basically a normal function with 4 main differences 1. No name 2. No variable 3. wrapped in extra parens 4. extra parens at the end

Answer 558

To group functionality inside of one object/module. For example two different mixins are placed under one variable name and is called immediately. This makes it so that all the information is not in an array and can be used ``` let motionModule = (function () { return { glideMixin: function(obj) { obj.glide = function() { console.log("Gliding on the water"); }; }, flyMixin: function(obj) { obj.fly = function() { console.log("Flying, wooosh!"); }; } } })(); ``` Now we can call motionModule.glideMixin(duck) or motionModule.flyMixin(dog) and assign these prototypes to these unrealted functions.

Answer 559

Functional programming is a style of programming where solutions are simple, isolated functions, without any side effects outside of the function scope. 1) Isolated functions - there is no dependence on the state of the program, which includes global variables that are subject to change 2) Pure functions - the same input always gives the same output 3) Functions with limited side effects - any changes, or mutations, to the state of the program outside the function are carefully controlled

Answer 560

Callbacks are the functions that are slipped or passed into another function to decide the invocation of that function. You may have seen them passed to other methods, for example in filter, the callback function tells JavaScript the criteria for how to filter an array.

Answer 561

Functions that can be assigned to a variable, passed into another function, or returned from another function just like any other normal value, are called first class functions. In JavaScript, all functions are first class functions

Answer 562

The functions that take a function as an argument, or return a function as a return value are called higher order functions.

Answer 563

When the functions are passed in to another function or returned from another function, then those functions which gets passed in or returned can be called a lambda.

Answer 564

Telling the computer what to do and exactly how to do it

Answer 565

Telling the computer what you want done and less how you want it done

Answer 566

Side Effects

Answer 567

``` // The global variable var fixedValue = 4; ``` function incrementer () { return fixedValue ++ ; } This causes mutation.... the side effect is that the global value is changed to 5 the better way is to go fixedvalue + 1 this keeps the global value the same and still has the function produces the desired result of 5

Answer 568

if a function depends on a variable or object being present, then pass that variable or object directly into the function as an argument. ``` var fixedValue = 4; function incrementer (x) { return x + 1; } ```

Answer 569

Yes, they will be. So its important to copy the array even after you pass it in as an argument and then alter it ``` function add (list, bookName) { let newArr = list.slice(); newArr.push(bookName) ``` return newArr;

Answer 570

An Array containing all the array elements that pass the test. If no elements pass the test it returns an empty array.

Answer 571

``` function add(list, bookName) { return [...list, bookName]; } ``` ``` function remove(list, bookName) { return list.filter(book => book !== bookName); } ```

Answer 572

A new array

Answer 573

1. element itself 2. index it takes in array 3. the whole array that map is being ran on

Answer 574

Yes you can. It is not neccesary to try and get the key to be the same or find a way to bring it with the value.... just write the key, or make a new one similar and then just use dot notation to bring over the important information to where you want it to be. [{"title":"Inception","rating":"8.8"},{"title":"Interstellar","rating":"8.6"},{"title":"The Dark Knight","rating":"9.0"},{"title":"Batman Begins","rating":"8.3"},{"title":"Avatar","rating":"7.9"}] if we wanted to loop through this and take all the movie titles to a new array.. you wouldnt need worry about the keys just create new keys like "MovieName" instead of Title push.({MovieName : object.title}) and this will do what you need it to do

Answer 575

parseFloat will keep a decimal number a decimal it will just turn it from a string to a number parseInt does the same thing but will make it an integer, decimal number get rounded down to the nearest whole number

Answer 576

It returns an extracted part of the array as a new array

Answer 577

No it doesn't, it copies and returns a new array that you can save in a variable

Answer 578

yes it does, it returns what is removed and that can be save in a variable but the original array is also altered

Answer 579

No the original variables stay unaltered. It just creates a new array that you can store in a new variable

Answer 580

They both add things to arrays, but concat does not alter the original array which mean its the preferred way as far as functional programming is concerned

Answer 581

Number.isInterger( ) place the number in the parens and it will return a boolean with true or false

Answer 582

Math.sqrt( ) place the number in between the parens

Answer 583

No, by default it will put it in alphabetical order. just put .sort( ) on the array

Answer 584

It is the function that you have to use with numbers to make sure that it sorts the numbers correctly.

Answer 585

Yes it does.

Answer 586

Yes it can ``` var otherString = "How9are7you2today"; var byDigits = otherString.split(/\d/); // Sets byDigits to ["How", "are", "you", "today"] ```

Answer 587

Any non word characters [numbers and symbols]

Answer 588

Add them in the parens. If you want a space add a space .join(" ") if you want dashes add dashes .join(".") etc

Answer 589

its the opposite of every, it runs a function and checks to see if ANY of the items meet the criteria. it returns a boolean

Answer 590

Returns the highest and the lowest numbers in an array console. log(Math.min(...arr)) console. log(Math.max(...arr)) sumAll([1, 4]); 1 4

Answer 591

Index0f( ) = this will return the index of the item if found or an - 1 if not found includes( ) = will return a Boolean true/false depending on if the array has it or not.

Answer 592

No, we should look to write the function in a way that we can call it once, and switch the parameters around to produce various results. INSTEAD OF --- this calls two functions preforming the same function on one array and then switches the order of the arrays starting with arr1 and then arr2 ``` function modify(arr1, arr2){ arr1.map(item => { return arr2.includes(item) ? null : newArr.push(item) }); arr2.map(item => { return arr1.includes(item) ? null : newArr.push(item) }) } ``` WE SHOULD DO --- this makes one function and switches the arguments ``` function modify(arr1, arr2){ arr1.map(item => { return arr2.includes(item) ? null : newArr.push(item) }); ``` Modify(first, second); Modify(second, first);

Answer 593

1. use replace 2. create two groups with each group representing what you want to come before the space/symbol ([group1 ]) 3. the third group represents what you want to come after the space or the symbol ([group 2]) 4. add $1 and $2 to represent each group 5. place whatever you want to go in the space between to be in between $1/$2 group str.replace(/([a-z])([A-Z]/g, "$1 ! $2") this will place a ! in any place where a lowercase number is followed by a capital case letter

Answer 594

It checks that every item in an array validates to true...if every item validates to true it returns a true.... if even one returns false then the whole thing is false.

Answer 595

You can take the first items of an array and give them specific parameter names and then place all the other array items in an array by it self using the rest parameter operator/spread operator [1,2,3,4,5] function seperate(one, two, ...threeToFive) this will make three arguments 1 2 [3.4.5] This can come in handy when you need to do something with the first couple of elements but also be able to access unknown number of parameters

Answer 596

you can create an empty array array = [ ] and then use concat( ) on that and attach the array you want to use array.concat(otherarray)

Answer 597

yes you can. ``` let gotit = str.replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """) .replace(/'/g, "'") .replace(/<>/g, "<>"); ```

Answer 598

``` function isPrime(num) { if(num < 2) return false; for (var i = 2; i < num; i++) { if(num%i==0) return false; } return true; } ```

Answer 599

Yes we do. Otherwise it will throw a Reference Error/ Error ``` function recursiveFunctionName(arrayParam, numParam) THIS IS REGULAR CALL if ( numParam <= 0){ return; } else { arrayParam.push(numParam) console.log(arrayParam) return recursiveFunctionName(arrayParam, numParam - 1) THIS IS RECURSIVE CALL } } ```

Answer 600

Create an empty array outside of the function and pass it through the Recursive Function by passing it in as an argument. ``` function recursiveFunctionName(arrayParam, numParam){ ARRAY PARAM IS THE ARG. if ( numParam <= 0){ return; } else { arrayParam.push(numParam) ARRAY PARAM IS THE ARG. console.log(arrayParam) return recursiveFunctionName(arrayParam, numParam - 1) ARRAY PARAM IS THE ARG. } } ```

Answer 601

You can just place the Return Keyword. ``` function recursiveFunctionName(arrayParam, numParam){ ARRAY PARAM IS THE ARG. if ( numParam <= 0){ return; } ```

Answer 602

No, it doesnt. The call just needs to be there to keep the loop going. But other types of code can be added to and performed inside of the Else Statement. The Recursive Call should go last. ``` else { arrayParam.push(numParam) console.log(arrayParam) return recursiveFunctionName(arrayParam, numParam - 1) } ``` I dont need to try and console and push and call the Recursive Function all in the same line of code.

Answer 603

We have to adjust the Argument that is being passed through the function and being compared against the BaseCase so that every time the Recursive Function is called it gets closer to being terminated ``` else { arrayParam.push(numParam) console.log(arrayParam) return recursiveFunctionName(arrayParam, numParam - 1) <=== } ``` NUMPARAM IS BEING SUBTRACTED BY 1 EVERY TIME IT IS CALLED.

Answer 604

Some methods like map( ) already come with set meanings of what a second and third parameter represent. For example, map( ) second parameter is assigned to the index of what the first parameter is. So if you try to assign it to a function or give it some other use - it wont work, or will work in a way that you dont want. array.map(element, index) so if you did something like array.map((a, b) => a + b) it would produce something like apples0, banana1, fork2 because you will just be adding the element to its index number. so if you want to use some sort of other parameter function you should probably declare it somewhere else and use it inside of the map. array.map(element => [element, functionName(element)]) this would run a particular function on each element of an array and return the original element and the new value inside of a nested array example original array [A, B, C, D] [[ A, ABC] , [B, BBC], [C, CBC], [D, DBC]]

Answer 605

``` function sumPrimes(num) { let primes = [2]; // set up a new array, starting with 2 because we know that we are going to need that there and that 2 is the smallest prime number and the only even prime number, so we just set it because its the only one of its kind. ``` for(num; num >= 3; num--){ ``` // set up a loop that counts down the value of the parameter num // also sets it up so the loop stops before it reaches 2, which was hardcoded ``` ``` let i = 2; let numArr = []; while( i < num){ numArr.push(i) i++ } // this sets up an array, that counts from 2 up until the number before the value of num ``` ``` let check = numArr.some(item => { return num % item == 0 }) // This goes through numArr that consists of all the numbers from 2 until the value of num and takes each number and uses % to see if it returns a value of 0. If it returns a value of 0 anywhere along the way, it isnt a prime number. If not it is a prime number. This takes the boolean and stores it in the variable 'check' ``` check ? null : primes.push(num); ``` // this says if 'check' equals true than do nothing. If it is false then take // the value of num, and add it to the 'primes' array. } // <=== end of loop ``` ``` let total = primes.reduce((sum, num)=> { return sum + num }) ``` // this takes all the values inside of the prime array and adds them together using reduce and stores that in the variable 'total' return total //returns total outside of the function }

Answer 606

Bootstrap is a front-end framework used to design responsive web pages and web applications. It takes a mobile-first approach to web development. Bootstrap includes pre-built CSS styles and classes, plus some JavaScript functionality. Bootstrap uses a responsive 12 column grid layout and has design templates

Answer 607

Create a DIV with the CLASS of Container-Fluid that will nest other html elements

Answer 608

'img-responsive'

Answer 609

By adding the 'text-center' class to an html element

Answer 610

By adding the classes 'btn btn-default' to the button element

Answer 611

They have the width of the content inside the button... | ie 'Like' or 'Submit'

Answer 612

We need to turn in into a block element and we do this by adding the class btn-block so our button would look like this Like

Answer 613

it makes it facebook blue

Answer 614

it makes it twitter blue

Answer 615

it turns the button red and lets the user know that the buttons performs a destructive function

Answer 616

1. nest all elements you want horizontal in a row inside a div with a class of 'row' 2. specify how wide you want the elements to be by nesting the elements individually in a div while using the class 'col-screensize- width'

Answer 617

col-screen size- width col-md-4 this would tell the element when the screen is medium sized to take up 4 of the 12 available columns. (so basically be one third of the available space) col-xs-2 this would tell the element when the screen is extra small to take up two of the 12 available columns - so basically take up 1/6th of the available space

Answer 618

They work off a 12 column grid and so the number on the end of col-screensize-width represents how many of those 12 columns will be taken up by the element. ``` 12 equals all 8 is 75% 6 equals half 4 equals a third 2 equals a sixth ``` etc

Answer 619

use text instead of the word btn in the class text-primary text-danger text-info

Answer 620

We can next particular inline elements with span and then apply classes to them in bootstrap that will change the color of aspect of the element while keeping it an inline element

Answer 621

Font Awesome is a convenient library of icons. These icons can be webfonts or vector graphics. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.

Answer 622

You add font icon classes to either an i element or a span element

Answer 623

fas fa-info-circle fas fa-thumbs-up attach these to either an i element or a span element.

Answer 624

'fa fa-paper-plane'

Answer 625

It makes all of your content on the page responsive

Answer 626

Bootstrap has a class called well that can create a visual sense of depth for your columns.

Answer 627

it changes the Css of the selected element. It works just like css, but they both take quotes and there is a comma instead of a colon $('p').css('transform', 'capitalize') -- this will make all the text capitalized.

Answer 628

add .prop('disabled', true) to the selector and it will be disabled

Answer 629

it replaces the html and content of the selected element

Answer 630

it replaces the text of the selected element and not the html. If html tags are used here, the tags would be rendered like normal text

Answer 631

it removes an Html element completely

Answer 632

it puts an element inside of a div. it can be used to move one element from one div to another or it can be used to place an element into a div for the first time

Answer 633

it creates a copy of an element

Answer 634

it allows you to access the parent or child of an element

Answer 635

``` It allows you to specify a particular child of an element if you have 5 children that all have the same class of 'item' ``` you would access the fourth one like this $('.item:nth-child(4)').css('color','blue') this will turn the fourth element of the 5 the color blue

Answer 636

this allows us to choose the even or odd numbers of a child by selecting the class name and then adding :even or :odd after it in the jquery selector then you can do something with it $('.item:odd').color('blue') this will take all the elements with the class of item and find the ones that have odd number as a position and then turn them blue. we have to remember that eventhough we are choosing Odd - zero base indexing means that odds will be the second item (index 1) the fourth item (index 3) and so on. and evens will be the first item ( index 0) and the third item ( index 2)

Answer 637

Syntactically Awesome StyleSheets.... it is a language extension of CSS.

Answer 638

It is s syntax of SASS, known as Sassy CSS. It is an extension of CSS. files using this syntax have the .scss extension.

Answer 639

you initialize it with a dollar sign followed by the variable name followed by colon and the css values. examples $main-fonts: Arial, sans-serif; $headings-color: green;

Answer 640

You would use it the same way as normal CSS except instead of manually typing the value, you just use the variable name instead h1 { font-family: $main-fonts; color: $headings-color; }

Answer 641

Because if you have 10 elements that all needs the color red you can set the color red as a variable and then apply it. That way if later you choose you want to change it to blue. You dont need to change 10 elements, you just change the variable and it will change everything.

Answer 642

Normal CSS: nav { background-color: red; } nav ul { list-style: none; } nav ul li { display: inline-block; } Nesting with SASS: nav { background-color: red; ul { list-style: none; ``` li { display: inline-block; } } } ```

Answer 643

A SASS Mixin is a way to set up CSS properties that might not work on particular browsers. We basically create a funciton(the mixin) that applies the css function to specific types of browsers, then we place the mixin on the css rule set whereever we want it instead of having to rewrite the whole mixin anytime. example of setting up a mixin ``` @mixin border-radius($radius){ -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } ``` example of applying a mixin ``` #awesome { width: 150px; height: 150px; background-color: green; @include border-radius(15px) ``` }

Answer 644

Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. For Example -- ``` @mixin border-radius($radius){ -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } ```

Answer 645

They work the same way as If and Else statements in Javascript, but they are used with mixins and variables for example ``` @mixin text-effect($val) { @if $val == danger { color: red; } @else if $val == alert { color: yellow; } @else if $val == success { color: green; } @else { color: black; } } ``` ``` #box { width: 150px; height: 150px; background-color: red; @include box-color(success); <==== this is how it is called } ```

Answer 646

It creates a version of a For loop but it has two types of loops : a start to end loop and a start through end loop

Answer 647

A 'start to end' loop is a loop that loops up until the end and does not include the last item. A 'start through end' loop loops from start and includes the end/last item

Answer 648

@for -- this starts the loop syntax $j -- this makes a variable J that we are going to use from 1 through 6 -- this tells us the start and stop place of the loop .text- -- this is the start of the class of the element the styling will be applied to #{$j} -- this places the variable value on the end of the element class so it will in total be .text-1 .text-2 .text-3 and so on until it reaches 6. {font-size: 15px * $j } -- this is the actual styling. each element with the .text-# class will have the font-size increased by 15 * 1 and then 15 * 2 and then 15 * 3 etc.

Answer 649

@each -- is the beginning of the iterating syntax $color -- is the created variable that we will use in blue, black, red -- is the created list we will iterate through .#{$color} -- is the first part of the string that will match the element's class, the its basically the same as back ticks variable in a string with an added # in SASS -bg -- this is the second part of the element's class that will be matched. {background: $color} -- this takes the iterated value and places it on the value of background this would iterate through the colors and apply them to the divs below and apply the background

Answer 650

is works like a javascript while loop but it applies a styling while a condition is true $x: 1; -- this creates a variable and initiating it to the value of 1 @while $x <= 5 -- this sets the stop point of loop .text- -- this is the beginning part of elements class #{$x} -- this is the second part of the elements class that will also be the value of x.... so together it will be .text-1 .text-2 .text-3 etc {font-size: 15px * $x} -- this is the styling being applied to the element. It increases 15px by each multiple of x ...so 15px * 1 is 15 15px *2 = 30px ...etc $x: $x + 1 -- this increments the value of x at end of the code and before it loops, this allows it to reach the place to stop the loop so it doesn't become an infinite loop

Answer 651

Intro: React is an Open Source view library created and maintained by Facebook. It's a great tool to render the User Interface (UI) of modern web applications.

Answer 652

Its a syntax that allows you to write HTML directly into Javascript

Answer 653

within the curly brackets { 'this is treated as JavaScript code' }

Answer 654

JSX can only return one main element..usually meaning we need to wrap everything in a single div Valid JSX: ```

Paragraph One

Paragraph Two

Paragraph Three

``` Invalid JSX:

Paragraph One

Paragraph Two

Paragraph Three

Answer 655

The same way as normal but you have to also put it in curly brackets. so {/* */}

Answer 656

ReactDOM offers a simple method to render React elements to the DOM which looks like this: ReactDOM.render(componentToRender, targetNode), where the first argument is the React element or component that you want to render, and the second argument is the DOM node that you want to render the component to. ReactDOM.render(JSX, document.getElementById('challenge-node')) JSX here is variable name that holds html elements for example ``` const JSX = (

Hello World

Lets render this to the DOM

); ``` and challenge-node is the id of some element

Answer 657

No you have to use the word className Also note that CamelCase is the spelling convention that we use in JSX as opposed to all lower case in HTML

Answer 658

Any JSX tag can be self closing, even if it the HTML version of the tag cannot be. And any self closing tag must have a closing slash as well. Valid JSX div /div or div />

Answer 659

think of a stateless function as one that can receive data and render it, but does not manage or track changes to that data You create it with a normal Javascript function that returns JSX or null Valid Stateless Function: ``` const MyComponent = function() { return

This is a string

} ``` or ``` function MyComponent( ){ return

This is a string

} ```

Answer 660

A capital letter

Answer 661

A React Component extends the React.Component so the component itself has access to many useful React Features. A React Component has: 1. class keyword 2. extends React.Component after Name 3. constructor(props) 4. super(props) 5. render( ) 6. return

Answer 662

To render a component as a child in a React component, you include the component name written as a custom HTML tag in the JSX. For example, in the render method you could write: return ( ) this would be if you created three different components named NavBar, Dashboard and Footer and placed them in the return section of a Component named App

Answer 663

By passing the a created prop name and value when you nest it within the Parent Component and then applying props.createdpropname within the child component itself ``` Parent-- class CurrentDate extends React.Component render( ) { return (

<======

``` CurrentDate - name of child component date - created propname Date( ) - value of created propname Child -- ``` const CurrentDate = (props) => { return (

The current date is: {props.date}

); ``` props -- is the default name for passing props in child components .date == references the value that was applied in the Parent Component result: The current date is: Thu Aug 20 2020 09:05:17 GMT-0700 (Pacific Daylight Time)

Answer 664

you do it the same way as normal props passing except you wrap the array in curly brackets Then inside of the Child Component you can apply array methods to it ``` const List = (props) => { return

{props.tasks.join()}

}; ```

Answer 665

Default props are props that will show up in the event that a prop is not specified. This is a prop that will be shown if one isnt provided. you apply it with the syntax of ComponentName.defaultProps = {createdPropName : 'prop value' } ShoppingCart.defaultProps = {items: 'items: 0'}

Answer 666

you set it the normal way that you would if there wasnt a Default Prop set. Setting it in the normal will override the default props. This is the CHILD COMPONENT --------- ``` const Items = (props) => { return

Current Quantity of Items in Cart: {props.quantity}

} ``` This is setting the DEFAULT PROPS ----------- Items.defaultProps = { quantity: 0 } This is the PARENT COMPONENT OVERRIDING -------------- ``` class ShoppingCart extends React.Component { constructor(props) { super(props); } render() { return <== override } }; ```

Answer 667

No we dont need the quotes but we do need to put it in curly brackets {100}

Answer 668

PropTypes allows you to verify that your Component receives the correct type of of prop (number, string, boolean, etc). You set it the same way that you set Default Props: ComponentName.propTypes = { createdPropName: PropTypes.type MyComponent.propTypes = { handleClick: PropTypes.string } if wrong type it will cause an error

Answer 669

``` Function = func Boolean = bool ```

Answer 670

.isRequired makes it so that the prop is neccesary for the component to run Items.propTypes = {quantity: PropTypes.number.isRequired}

Answer 671

import PropTypes from 'prop-types';

Answer 672

We do it the same we would if we were passing a prop to a stateless function, the only difference is when we access it from within the function we have to use the keyword this. so for a component class it would be accessed like this.props.createdname as opposed to a stateless function that would access its prop like props.createdname

Answer 673

On the left side we write it in camel case MyComponent.defaultProps = MyComponent.propTypes = On the right side we write it Component style with each word being Capitalized = {name: PropTypes.func.isRequired}

Answer 674

you need to have a class component that extends React.Component and apply state inside of the components constructor method as an object: ``` class StatefulComponent extends React.Component { constructor(props) { super(props); this.state = { name: 'dat boi good' } ```

Answer 675

Once you define a component's initial state, you can display any part of it in the UI that is rendered. If a component is stateful, it will always have access to the data in state in its render() method. You can access the data with this.state. If you want to access a state value within the return of the render method, you have to enclose the value in curly braces. ``` class MyComponent extends React.Component { constructor(props) { super(props); this.state = { name: 'freeCodeCamp' } } render() { return (

{this.state.name}

); ```

Answer 676

store state in a variable name in the render section and then produce it after the return statement ``` class MyComponent extends React.Component { constructor(props) { super(props); this.state = { name: 'freeCodeCamp' } } render() { const name = this.state.name return (

{name}

); } ```

Answer 677

we call setState( ) inside of a function before the render( ) method. ``` class MyComponent extends React.Component { constructor(props) { super(props); this.state = { name: 'Initial State' }; this.handleClick = this.handleClick.bind(this); } handleClick() { <== this is the function changing state this.setState({ name: 'React Rocks!' }) } render() { ```

Answer 678

place this.FunctionName = this.FunctionName.bind(this) inside of the constructor method ``` class MyComponent extends React.Component { constructor(props) { super(props); this.state = { text: "Hello" }; ``` this.handleClick = this.handleClick.bind(this) ``` } handleClick() { this.setState({ text: "You clicked!" }); ```

Answer 679

You place the event listener as an attribute and make the value of that attribute as follows {this.functionName} ``` handleClick() { this.setState({ text: "You clicked!" }); } render() { return (

Click <== EXAMPLE Me

{this.state.text}

); ```

Answer 680

You create a function and use this.setState( ) in it. inside of the set state method you pass a function

Answer 681

You can use any parameters that you want but one for state and props are especially useful

Answer 682

No you do not. ``` toggleVisibility(){ return this.setState(state => { return state.visibility = !state.visibility }) } ```

Answer 683

you access the state object with dot notation ``` class MyComponent extends React.Component { constructor(props) { super(props); this.state = { visibility: false }; // change code below this line this.toggleVisibility = this.toggleVisibility.bind(this) // change code above this line } // change code below this line toggleVisibility(){ return this.setState(state => { return state.visibility = !state.visibility }) } ```

Answer 684

it returns the value of the element that was targeted that triggered the event in the function and makes it accessible ``` handleChange(event){ this.setState({ input: event.target.value }) } ```

Answer 685

Take the state and make it the value of the value attribute and put it on the input element in addition to the function that changes state {} value = {this.state.input} <==== example this would come from this state which begins as an empty string ``` class ControlledInput extends React.Component { constructor(props) { super(props); this.state = { input: '' }; ```

Answer 686

Yes you can. ``` class MyApp extends React.Component { constructor(props) { super(props); this.state = { name: 'CamperBot' <=== this is state } } render() { return (

```

); } }; ``` class Navbar extends React.Component { constructor(props) { super(props); } render() { return (

Hello, my name is: {this.props.name}

<== accessing state data passed as prop from parent

); } }; ```

Answer 687

State flows in one direction down the tree of your application's components, from the stateful parent component to child components. The child components only receive the state data they need

Answer 688

This states that complex stateful apps can be broken down into just a few, or maybe a single, stateful component. The rest of your components simply receive state from the parent as props, and render a UI from that state. It begins to create a separation where state management is handled in one part of code and UI rendering in another. This principle of separating state logic from UI logic is one of React's key principles. When it's used correctly, it makes the design of complex, stateful applications much easier to manage.

Answer 689

yes you can. ``` class MyApp extends React.Component { constructor(props) { super(props); this.state = { inputValue: '' <=== state } this.handleChange = this.handleChange.bind(this); } handleChange(event) { <=== function that changes state this.setState({ inputValue: event.target.value }); } render() { return (

{ /* change code below this line */ } <== passing function as prop ``` ``` { /* change code above this line */ }

); } }; ``` ``` class GetInput extends React.Component { constructor(props) { super(props); } render() { return (

Get Input:

<== applying function of parent in the child after being passed as a prop

); } }; ```

Answer 690

They are methods that allow you to perform particular functions at particular times in a components life, for example when it first runs, before they are rendered, before they update, before they receive props, before they unmount, and so on.

Answer 691

the code inside of it will run before the render method in a react component does

Answer 692

you place it inside of the componentDidMount( )

Answer 693

This method is called after a component is mounted to the DOM. Any calls to setState() here will trigger a re-rendering of your component. When you call an API in this method, and set your state with the data that the API returns, it will automatically trigger an update once you receive the data.

Answer 694

sets a timer which executes a function or specified piece of code once the timer expires. ``` componentDidMount() { setTimeout( () => { this.setState({ activeUsers: 1273 }); }, 2500) this sets up a change of state that will take place after 2500 milliseconds which is 2.5 seconds. ```

Answer 695

Inside of componentDidMount( ) eventTarget.addEventListener(triggering event, function of what you want to happen); button.addEventListener('click', this.handleClick) this would make it so a button gets clicked the function handleclick will run

Answer 696

You would use this when you wanted to add event listeners to the document object or the window object.

Answer 697

componentWillUnmount( ) eventTarget.removeEventListener( ) they work exactly like their counterparts but remove instead of add

Answer 698

it returns a boolean and see if a prop has a new value, if it has a new value you can set it up so it returns true. If it returns true the code will keep running and will re-render. But if it turns false, it wont re-render. this keeps from unnecessary renderings when props or the state hasnt changed. This improves app performance. ``` shouldComponentUpdate(nextProps, nextState) { console.log('Should I update?'); if (nextProps.value % 2 == 0){ return true; } else { false; } } ``` {these functions will only run if shouldUpdate returns a true} ``` componentDidUpdate() { console.log('Component re-rendered.'); } render() { return

{this.props.value}

} }; ```

Answer 699

you need to make it an object and make it JSX so it will look like it is in double objects and any key or property names that usually comes with a - in html will be written in camelCase in JSX ``` class Colorful extends React.Component { render() { return (

Big Red

<=== example ); } ```

Answer 700

store it in a keyword and apply it inline instead of writing. ``` const styles = { color: 'purple', fontSize: 40, border: '2px solid purple' } ```

Style Me!

<== applied stylings

Answer 701

You can also write JavaScript directly in your render methods, before the return statement, without inserting it inside of curly braces. This is because it is not yet within the JSX code. When you want to use a variable later in the JSX code inside the return statement, you place the variable name inside curly braces.

Answer 702

``` class MyComponent extends React.Component { constructor(props) { super(props); this.state = { display: true } this.toggleDisplay = this.toggleDisplay.bind(this); } toggleDisplay() { this.setState((state) => ({ display: !state.display })); } render() { // change code below this line if(this.state.display == true){ return (

Toggle Display

Displayed!

``` ``` );} else{ return (

Toggle Display

``` ) } } };

Answer 703

Usually && means AND. but really what it means is if the first condition is true, return the second part of the code. so you can use it to say, if this is true...return this... and if its not true then the whole thing returns false. {this.state.display == true &&

Displayed!

} we can also chain these together to add multiple conditions if this...and that... and that....and that....and that...and that...and that is true return this.....example psuedocode

Answer 704

We should use a ternary operator or && logic we can chain these together. ``` this.state.userAge === '' ? buttonOne : this.state.userAge >= 18 ? buttonTwo : buttonThree } ```

Answer 705

yes you can you can do something like ``` return (

{ this.props.fiftyFifty ? 'You Win!': 'You lose!' }

``` this would say if props = true return you win if it is false return you lose to the DOM you can set up code that will either make the prop 50/50 either true or false before it passes it to the child component and then the component will render a particular type of code depending.

Answer 706

Math.random( ) >= .5 ? true : false you can store this in a variable name and half the time it will randomly choose true or false. And then from here you can apply the variable name to anything you want along with the true/false variable.

Answer 707

set up two style objects with different variable names then set up some logic that will choose which one to apply based off state. This particular state will apply one style if the length is less than 15 regStyle = { border: 3px solid black } dangerStyle = { border: 3px solid red } style= {this.state.input.length > 16 ? dangerStyle : regStyle} ;

Answer 708

You can initialize a value as being an empty array in the state object - as we update our state we can add these updates to the array.... then in our render( ) we can map through the array and send them to the DOM (or do anything else we want to do with them) let items = this.state.arraylist.map(item=>

{item}

) then in the return statement we can return it to the DOM return

{items}

Answer 709

We need to make sure that we have a key attribute. its a best practice to use a unique name key attribute, but an index can also be used as well. the keys need to be unique in comparison to the other items in the array or other siblings - it doesnt need to be unique globally through the program. ``` const renderFrameworks = frontEndFrameworks.map(item => { return

{item}

``` this goes through an array and adds a li tag to each item and then it adds a key item with the same name as the text inside the list item. BUt every item will have different text that will also match its own key but will not match any other items on the list

Answer 710

Make sure that the items are not an object. Sometimes when mapping through an array of objects we forget to go to the deeper level of dot notation to access the information that we want. ``` const usersOnline = this.state.users.filter(item => iitem.online == true); // const renderOnline = usersOnline.map((item) =>

{item.username}

); ``` here the items are objects so simply trying to use

{item}

wont work. You need to use username to go deeper into the object and access the proper data to the DOM

Answer 711

This is a way to render your react app on a server as opposed to on the client side. ReactDOMServer.renderToString()

Answer 712

There are two key reasons why rendering on the server may be used in a real world app. First, without doing this, your React apps would consist of a relatively empty HTML file and a large bundle of JavaScript when it's initially loaded to the browser. This may not be ideal for search engines that are trying to index the content of your pages so people can find you. If you render the initial HTML markup on the server and send this to the client, the initial page load contains all of the page's markup which can be crawled by search engines. Second, this creates a faster initial page load experience because the rendered HTML is smaller than the JavaScript code of the entire app. React will still be able to recognize your app and manage it after the initial load.

Answer 713

They are laid out as block elements, and those elements split the space of the container evenly in a row form. so 5 divs will look like this 1 2 3 4 5 if There was only 3 in the same container it would look like this 1

Answer 714

the name of the function needs to be the key and the value when passing it with the child component name and then we need to use props in the child component button onClick={this.props.handleClick}

Answer 715

the image will be responsive shrinking but will not grow past the size of the conatainer div original size. When you set it to regular width it will gorw and expand with the size of the div no matter how big or small

Answer 716

positive lookbehind ? < = negative lookbehind ? < ! **no spaces between**

Answer 717

these look to make sure that not only the pattern in your regex is there but also that the look ahead and look behind pattern is there too. the regex code = abc might be there.... but you want to search for abc thats followed by @gmail.com so you will use a lookahead to only find the abc followed by gmail and return just the abc not the gmail. this can be used if you wanted to find all the usernames of a gmail email list ``` abc@gmail.com 222@gmail.com 333@yahoo.com 676@hotmai.com abc@yahoo.com ``` if you search and match abc in normal regex youll get abc@gmail.com abc@yahoo.com but we only want the ones from gmail so if we use a look ahead for @gmail.com and abc as our regex it will match abc@gmail but only return the 'abc' part...which is the username

Answer 718

Redux is a state management framework that can be used with a number of different web technologies, including React.

Answer 719

In Redux, there is a single state object that's responsible for the entire state of your application. the Redux store is the single source of truth when it comes to application state.

Answer 720

This also means that any time any piece of your app wants to update state, it must do so through the Redux store. The unidirectional data flow makes it easier to track state management in your app.

Answer 721

The Redux store is an object which holds and manages application state.

Answer 722

with the createStore( ) on the Redux Object.

Answer 723

a Reducer Function let store = Redux.createStore(reducer) now we can use store to access different methods

Answer 724

store.getState( )

Answer 725

An action is simply a JavaScript object that contains information about an action event that has occurred. Sometimes a Redux action also carries some data. For example, the action carries a username after a user logs in. While the data is optional, actions must carry a type property that specifies the 'type' of action that occurred. ``` let action = { type : 'LOGIN' } ```

Answer 726

In Redux, all state updates are triggered by dispatching actions. Think of Redux actions as messengers that deliver information about events happening in your app to the Redux store. The store then conducts the business of updating state based on the action that occurred.

Answer 727

by using an Action Creator. An action creator is simply a JavaScript function that returns an action. In other words, action creators create objects that represent action events. (action) ``` const action = { type: 'LOGIN' } ``` (action creator) ``` function actionCreater(){ return action } ```

Answer 728

It's what we use to dispatch actions to the Redux Store. Calling store.dispatch() and passing the value returned from an action creator sends an action back to the store. ``` const store = Redux.createStore( (state = {login: false}) => state ); ``` ``` const loginAction = () => { return { type: 'LOGIN' } }; ``` store.dispatch(loginAction()) store dispatch takes the function loginAction and dispatches back to the Redux Store

Answer 729

It needs to know how to respond to that Action and we tell it what to do with the Action by using a Reducer function Reducers in Redux are responsible for the state modifications that take place in response to actions

Answer 730

it takes State and Action as arguments. it always returns a new State

Answer 731

No, it does nothing other than this.

Answer 732

A Reducer Function should never change State directly. It should return copy of State.

Answer 733

With a switch statement. Every Action is an object that has to take a Type property. in the switch statement you pass action.type -- this will be checked against every switch entry. In the Case you match the value of the possible types in the block of that case you put an object with the desired value for example one actionCreator will pass the action object with type: login another action creator will pass an action object with type: logout another action creator will pass an action object with type: delete another action creator will pass an action object with type: post etc then in the switch you would have (action.type) ``` case logout: {authentication : false } case login: {authentication : true } case delete: {post : false } case post: {post : true } ``` this will all be in one switch statement hooked up to many different actionCreators so when one is fired, it will find the correct type... and then change and update the State. Actions that have different types but actually affect the same State. So both LogIn and LogOUT will update the State of Authentication And action.type delete and post will update the State of post

Answer 734

A default case that returns the current state. Because once your app has multiple reducers they are all run anytime an action dispatch is made even when the action isn't related to that reducer. In such a case you want to make sure that you return the current State.

Answer 735

As const variables. Usually the way to do this is const variable names and then save a string with the same name to it. for example ``` const LOGIN = 'LOGIN' const LOGOUT = 'LOGOUT' ``` then when you use them in your switch statements and actionCreators and other places you should use the const variable name instead of the string themselves.

Answer 736

A Store Listener is a function that runs whenever an action is dispatched against the store. One simple use of this is to log a message every time an action is received and the store is updated. You do this by using store.subscribe( ) for example say you want to count how many times an action was sent to the store and updated State. then you can write a Store Listener to do this. let count = 0; ``` const update = () => { return count++ } ``` then you can pass the function in store.subscribe() like this store.subscribe(update)

Answer 737

all app state is held in a single state object in the store.

Answer 738

You define multiple reducers to handle different pieces of your application's state, then compose these reducers together into one root reducer. The root reducer is then passed into the Redux createStore() method. We combine multiple reducers using combineReducers( )

Answer 739

This method accepts an object as an argument in which you define properties which associate keys to specific reducer functions. The name you give to the keys will be used by Redux as the name for the associated piece of state. const rootReducer = Redux.combineReducers({ auth: authenticationReducer, notes: notesReducer }); each of these values would be a reducer functions with switch statements in them handeling the possibilies of state. saved intoan object and then passed into createStore( ) const store = Redux.createStore(rootReducer); now this store will have access to all the different possibilities of State.

Answer 740

From user interaction and carry some data with them Redux often needs to know about this data.

Answer 741

Add a parameter for an argument to be passed in the action creator. place a key/value pair with the parameter as the value ``` const addNoteText = (note) => { return { type: ADD_NOTE, text: note } }; ``` in the reducer's switch statement, when the case action type is matched return the value of the key value pair with dot notation ``` const notesReducer = (state = 'Initial State', action) => { switch(action.type) { case ADD_NOTE : return action.text default: return state; } }; ``` then dispatch the reducer to the store with the parameter filled store.dispatch(addNoteText('Hello!'));

Answer 742

this basically means when your code stops running because its waiting to retrieve data before it can continue. like an API call, this is asynchronous ---- dealing with how to handle this so it isn't inconvenience to the user is asynchronous programming.

Answer 743

Redux Thunk MiddleWare

Answer 744

You pass it as an Argument to Redux.applyMiddleware( ) Redux.applyMiddleware(ReduxThunk.default)

Answer 745

As the second parameter to createStore( ) const store = Redux.createStore( asyncDataReducer, Redux.applyMiddleware(ReduxThunk.default) );

Answer 746

to create an asynchronous action, you return a function in the action creator that takes dispatch as an argument. Within this function, you can dispatch actions and perform asynchronous requests. ``` const handleAsync = () => { return function(dispatch) { dispatch(requestingData()); setTimeout(function() { let data = { users: ['Jeff', 'William', 'Alice'] } dispatch(receivedData(data)); }, 2500); } }; ```

Answer 747

It's common to dispatch an action before initiating any asynchronous behavior so that your application state knows that some data is being requested (this state could display a loading icon, for instance) ``` const handleAsync = () => { return function(dispatch) { dispatch(requestingData()); setTimeout(function() { let data = { users: ['Jeff', 'William', 'Alice'] } ``` set time out is a mock API call the dispatch function is the action telling that its requesting data

Answer 748

We Dispatch another Action which carries the data as a Payload along with information that the action is completed. ``` const handleAsync = () => { return function(dispatch) { dispatch(requestingData()); setTimeout(function() { let data = { users: ['Jeff', 'William', 'Alice'] } dispatch(receivedData(data)); }, 2500); } }; ``` set time out is a mock API call dipatch(rec) is an action with data being passed as the received information.

Answer 749

you call it like a function dispatch(requestingData()); dispatch(receivedData(data));

Answer 750

``` const INCREMENT = 'INCREMENT'; const DECREMENT = 'DECREMENT'; ``` ``` const counterReducer = (state = 0, action) => { switch (action.type){ case INCREMENT : return state + 1 case DECREMENT : return state - 1 default: return state } }; ``` ``` const incAction = () => { return { type: INCREMENT, } }; ``` ``` const decAction = () => { return { type: DECREMENT } }; ``` const store = Redux.createStore(counterReducer);

Answer 751

We can do this with regular javascript inside of a reducer function by copying the state before the Switch Statement. ``` const todos = [ 'Go to the store', 'Clean the house', 'Cook dinner', 'Learn to code', ]; ``` const immutableReducer = (state = todos, action) => { let newlist = [...todos]; notice that newlist is copied to the global variable of state and not to the state parameter. this is done before the switch statement. After the Switch Statement we modify the copy switch(action.type) { case ADD_TO_DO: newlist.push(action.todo) return newlist todo represents the data updating the todo array which is being returned as the new state

Answer 752

No the variable name can represent any form of data ``` // an example todo argument would be 'Learn React', const addToDo = (todo) => { return { type: ADD_TO_DO, todo } } ``` Here todo represents a string 'learn react'. It isnt in the usual data structure of an object. But it can be later accessed in the Reducer function as if it were ``` switch(action.type) { case ADD_TO_DO: newlist.push(action.todo) return newlist default: return state; } }; ``` notice the action.todo being pushed to the newlist variable this will push the string being represented in the action object into the array

Answer 753

``` const immutableReducer = (state = [0,1,2,3,4,5], action) => { switch(action.type) { case 'REMOVE_ITEM': let a = state.slice(0, action.index); let b = state.slice(action.index + 1); return a.concat(b) default: return state; } }; ``` ``` const removeItem = (index) => { // console.log(index) return { type: 'REMOVE_ITEM', index } } ``` ``` removeItem(5) const store = Redux.createStore(immutableReducer); ```

Answer 754

It copies and merges objects

Answer 755

let newObject = Object.assign( { }, obj 1) This will copy all the properties and values in obj1 into the empty array

Answer 756

Just add more objects as arguments let newObject = Object.assign( { }, obj1, obj2, obj3) this will add all of the properties of the three objects into the empty object.

Answer 757

Matching properties are overwritten by the latest object that is added. This is a way that you can update Objects in Redux when the object represents state.

Answer 758

In a single location with Redux

Answer 759

Redux isn't designed to work with React outside of the box so you need to use this package that allows you pass State and Dispatch to React Components as Props

Answer 760

1. place in state to be updated 2. an element for a user to text in 3. element set with value={this.state.input} 4. set state in function set to {input = {event.target.value} with an event parameter passed in

Answer 761

You can bind it directly on the element that you are using to change state input ={this.handleChange.bind(this)}

Answer 762

apply an empty string to the element as its value. this is a better way when dealing with State instead of using $('input').val(' '). this.setState({ input: '' }) using better

Answer 763

we should use the spread operator to concatenate them into a new array. messages : [...this.state.messages, this.state.input]

Answer 764

The Provider is a wrapper component from React Redux that wraps your React app. This wrapper then allows you to access the Redux store and dispatch functions throughout your component tree. ``` class AppWrapper extends React.Component { render() { return ( ``` ); }

Answer 765

You need to add Store as a prop and you need to place the React Component you want to connect with Redux inside the wrapper Provider tags.

Answer 766

const Provider = ReactRedux.Provider; then you can use it as a tag

Answer 767

You use this to create a function that specifies to you React Component which State it has access to. ``` let mapStateToProps = (state) => { return { messages: state} } ```

Answer 768

The mapDispatchToProps() function is used to provide specific action creators to your React components so they can dispatch actions against the Redux store.

Answer 769

1. mapDispatchToProps( ) takes dipatch as param 2. returns an object with one property 3. property value is a function with param 4. function calls dispatch 5. in param of dispatch it takes action creator and its param 6. param of action creator matches property function param ``` const mapDispatchToProps = (dispatch) => { return { submitNewMessage: (message)=>{ dispatch(addMessage(message)) } } } ```

Answer 770

You can use them to map State and dispatch to the props of one of your React Components

Answer 771

const connect = ReactRedux.connect connects React to Redux

Answer 772

This method takes two optional arguments, mapStateToProps() and mapDispatchToProps(). They are optional because you may have a component that only needs access to state but doesn't need to dispatch any actions, or vice versa.

Answer 773

To use this method, pass in the functions as arguments, and immediately call the result with your component. This syntax is a little unusual and looks like: connect(mapStateToProps, mapDispatchToProps)(MyComponent)

Answer 774

You replace the omitted function with 'null'

Answer 775

. This term generally refers to React components that are not directly connected to Redux. They are simply responsible for the presentation of UI and do this as a function of the props they receive

Answer 776

By contrast, container components are connected to Redux. These are typically responsible for dispatching actions to the store and often pass store state to child components as props. const Container = connect(mapStateToProps , mapDispatchToProps)(Presentational)

Answer 777

Extract the state management out of the Presentational component and into Redux.

Answer 778

1. remove local state to be placed in Redux 2. replace function that changes state locally and apply Redux Function that changes state through props ex. this.props.submitNewMessage(this.state.input) 3. Produce state in the render method through Props instead of local State {this.props.messages.map( (message, idx) => { return (

{message}

Answer 779

Yes we still need it, not all things that we put into state will need to be handled by Redux. For example a React Component might have an local state that tracks the input in a text box. Then that text is to be sent somewhere and done something with, like added to a list or something. The input of the text might stay local and be handled local... but the adding of the text to a list will be done with Redux.

Answer 780

set audio file up so it works set button up add id on audio element save audio into variable by using getElementById create onClick function for button in the function declare variablename.play( )

Answer 781

html, body, app(component id), addDiv (id of the manditory div used in react){ height: 100% }

Answer 782

We use add EventListener like this : componentWillMount(){ document.addEventListener("keydown", this.handlekeypress.bind(this)); } then create a function like : handlekeypress(){ console.log('working') } then pass it down to the element/child component return

} then...if you pass it to a child compoenent, us props to apply it to the element. onKeyDown={this.props.handlekeypress}

Answer 783

key is just an arbitrary parameter name that is passed in a function, but adding .code on it during a keyboard event like 'keypress' or 'keydown' gives the code for the key that is pressed on the keyboard by the user.

Answer 784

document.addEventListener(firing event, function to happen)

Answer 785

No, you just need the render and return statements. | along with extends React.Component

Answer 786

let check = event.target.id

Answer 787

let check = event.target.className

Answer 788

by using jquery let check = $(event.target).text();

Answer 789

by using Jquery and the disable method. to disable $(element/.class/#id).prop('disabled', true/false) this will disable or enable it. ** MAKE SURE YOU WRITE 'DISABLED' with a D and not 'Disable'. It wont work otherwise

Answer 790

save number into variable and place it inside Number() then save that inside a variable check = "32" Number(check) let result = Number(check) result = 32

Answer 791

The super( ) method.

Answer 792

this.state = { }

Answer 793

The keyword this. state = { }

Answer 794

let regex = /^(1\s?)?($\d{3}$|\d{3})[\s\-]?\d{3}[\s\-]?\d{4}$/

Answer 795

You have to use Bracket Notation to access value because youre creating a new variable name and variable names have to be accessed with Bracket Notation.

Answer 796

save floats to variable, then save Math.floor(variable) to another variable, it will be saved as integers. ``` example let divide = leftover / currency[coinAmount] let results = Math.floor(divide) console.log(results) ```

Answer 797

$(document).ready(function(){ add code you want ran when you first load page here or name of function (more than likely this one) })

Answer 798

just call the name of the function like normal function OtherJqueryFunction(){ createdfunctionName() }

Answer 799

.css('color', 'red')

Answer 800

.on('click', function(){ type code here }

Answer 801

every function should handle a specific function of the app. Seperation of concerns

Answer 802

fetch("url").then(response => response.json()).then(data => console.log(data)) this logs it to the console and then you should add a function afterwards to do something with it, using data as a parameter.

Answer 803

sets how long before an animation runs so it doesnt run right away

Answer 804

it runs a function over an over again after a certain amount of time which is set by user

Answer 805

with a clearInterval method

Answer 806

text-align: center; | line-height: (set value equal to height of div)

Answer 807

positioned elements

Answer 808

we apply it to the very end of the class or id name, with no spaces. .class-name:hover { }

Answer 809

we list them all and seperate them with commas .class-name:hover, .other-class-name:hover { }

Answer 810

``` No it doesnt, but the ones that dont have the pseudo class will always show that styling rule. ``` .class-name:hover, #id-name { border: blue; } id-name will have a blue border always class-name will only have a blue border when its hovered over

Answer 811

Data Driven Documents

Answer 812

D3 is a JavaScript library to create dynamic and interactive data visualizations in the browser. It's built to work with common web standards, namely HTML, CSS, and Scalable Vector Graphics (SVG).

Answer 813

Scalable Vector Graphics

Answer 814

The select() method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example: const anchor = d3.select("a"); The above example finds the first anchor tag on the page and saves an HTML node for it in the variable anchor. You can use the selection with other methods. The "d3" part of the example is a reference to the D3 object, which is how you access D3 methods.

Answer 815

The append() method takes an argument for the element you want to add to the document. It appends an HTML node to a selected item, and returns a handle to that node. d3.select("ul") .append("li") this appends a list item to a selected ul element

Answer 816

The text() method either sets the text of the selected node, or gets the current text. To set the value, you pass a string as an argument inside the parentheses of the method. d3.select("ul") .append("li") .text("Very important item"); this is an example of a text method setting a string inside of a list item thats appended to a selected ul element

Answer 817

yes you can d3.select("ul") .append("li") .text("Very important item");

Answer 818

D3 also has the selectAll() method to select a group of elements. It returns an array of HTML nodes for all the items in the document that match the input string. Here's an example to select all the anchor tags in a document: const anchors = d3.selectAll("a");

Answer 819

yes it does

Answer 820

Display it on the page

Answer 821

Making D3 aware of the Data

Answer 822

you first select an element or elements and then use the data method and passing the data which is saved in a variable as an argument. ``` const dataset = ["a", "b", "c"]; d3.select("ul").selectAll("li") .data(dataset) ```

Answer 823

When enter() is combined with the data() method, it looks at the selected elements from the page and compares them to the number of data items in the set. If there are fewer elements than data items, it creates the missing elements. ``` const dataset = ["a", "b", "c"]; d3.select("ul").selectAll("li") .data(dataset) .enter() .append("li") .text("New item"); ``` It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the ul on the page. Next, select all list items, which returns an empty selection. Then the data() method reviews the dataset and runs the following code three times, once for each item in the array. The enter() method sees there are no li elements on the page, but it needs 3 (one for each piece of data in dataset). New li elements are appended to the ul and have the text "New item".

Answer 824

it can take a string or an function as an argument .text((item) => { return item + ' USD' });

Answer 825

the items inside the array. it works the same way as a parameter in maps( ). const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9]; ``` d3.select("body").selectAll("h2") .data(dataset) .enter() .append("h2") // Add your code below this line ``` .text((item) => { return item + ' USD' }); item equals the array items ``` 12 USD 31 USD 22 USD 17 USD 25 USD 18 USD 29 USD 14 USD 9 USD ```

Answer 826

It allows you to add inline styles to an element

Answer 827

with comma separated key value pairs. selection.style("color","blue");

Answer 828

We use a call back function with conditional logic as the second argument of the style( ) method ``` .style("color", (d) => { if (d < 20){ return 'red' } else { return 'green' } }) ```

Answer 829

with the attr( ) method the first paramter will be class and the second param the name of that class selection.attr("class", "container");

Answer 830

``` const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9]; d3.select("body").selectAll("div") .data(dataset) .enter() .append("div") .attr("class", "bar") .style('height', d => `${d}px`) ```

Answer 831

Here "scalable" means that, if you zoom in or out on an object, it would not appear pixelated. It scales with the display system, whether it's on a small mobile screen or a large TV monitor.

Answer 832

SVG is used to make common geometric shapes.

Answer 833

In the HTML svg tag d3.select("body") .append('svg')

Answer 834

More flexible

Answer 835

When using attr( ) width and height attributes do not have units. This is the building block of scaling - the element will always have a 5:1 width to height ratio, no matter what the zoom level is. ``` const w = 500; const h = 100; ``` const svg = d3.select("body") .append('svg') .attr('width', w ) .attr('height', h)

Answer 836

create an SVG space for the shape define its height and width create an SVG shape that goes inside the space define its height and width define where it goes on the x axis of space define where it goes on the y axis of space ``` d3.select("body") .append("svg") .attr("width", w) .attr("height", h) .append("rect") .attr('width', 25) .attr('height', 100) .attr('x', 0) .attr('y', 0) ```

Answer 837

first create a svg space inside an element save that div in a variable name then attach the data set and and enter and append to that vairable name along with the same const svg = d3.select('body) .append('svg') .attr("width", w) .attr("height", h); svg.selectAll("rect") .data(dataset) .enter() .append("rect")

Answer 838

With a call back function that dynamically sets the 'x' and 'y' property with attr( ) method. ``` svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", (d, i) => { return i * 30 }) ``` this will make each data item produce a rectangle that starts 30px to the right every iteration we need two, d represents the item of the array. i equals the value that will set the x or y axis NOTE --- Each bar has a width of 25, so increasing each x value by 30 adds some space between the bars. Any value greater than 25 would work in this example.

Answer 839

the data() method parses the data set, and any method that's chained after data() is run once for each item in the data set.

Answer 840

it can appear upside down because the default is 0 , 0 which places it in the left hand upper corner

Answer 841

y = heightOfSVG - heightOfBar would place the bars right-side-up. so... h = 100 (height of svg area) 3 * d = (height of bar) so turning the bars upside down by setting the y property by attr("y", (d, i) => h - 3 * d)

Answer 842

the fill property attr('fill','red')

Answer 843

You can make a rule set in CSS, and apply the class with a single attr( )

Answer 844

A tooltip shows more information about an item on a page when the user hovers over that item.

Answer 845

You can use the title element and add it to each element you want to add it to like a 'rect' element, and then call a text method with a call back function .append('rect') .text((d) => d) this d will go with the dataset and iterate through it and represent each item and take that value and return it as text

Answer 846

cx, cy and radius. cx and cy set the location of the circle. here the center of the circle will be r will tell us the radius, the size of the actual circle

Answer 847

yes they all can take the a callback functions

Answer 848

all methods chained after data(dataset) run once per item in dataset

Answer 849

The d parameter in the callback function refers to the current item in dataset, which is an array for each point. You use bracket notation, like d[0], to access the values in that array.

Answer 850

const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9]; ``` const w = 500; const h = 100; ``` const svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); ``` svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", (d, i) => i * 30) .attr("y", (d, i) => h - 3 * d) .attr("width", 25) .attr("height", (d, i) => d * 3) .attr("fill", "navy") .attr("class", "bar") .append('title') .text((d) => d) ``` ``` svg.selectAll("text") .data(dataset) .enter() .append("text") .text((d) => d) .attr("x", (d, i) => i * 30) .attr("y", (d, i) => h - (d * 3 + 3)) ```

Answer 851

``` const dataset = [ [ 34, 78 ], [ 109, 280 ], [ 310, 120 ], [ 79, 411 ], [ 420, 220 ], [ 233, 145 ], [ 333, 96 ], [ 222, 333 ], [ 78, 320 ], [ 21, 123 ] ]; ``` ``` const w = 500; const h = 500; ``` const svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); ``` svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", (d, i) => d[0]) .attr("cy", (d, i) => h - d[1]) .attr("r", 5); ``` ``` svg.selectAll("text") .data(dataset) .enter() .append("text") // Add your code below this line ``` .attr("x", (d) => d[0] + 5) .attr("y", (d) => h - d[1]) .text((d) => (d[0] + ", " + d[1]))

Answer 852

scaleLinear( ) const scale = d3.scaleLinear()

Answer 853

When using charts or plot points in SVG areas, sometimes youll have data that is outside of the designated space for that SVG space, so you use a scale or different types of scales to specify how you want the data plotted visually. You rarely plot data as it - most of the time you want to specify how to scale it inside the height and width inside your space

Answer 854

It is called the 'Domain' and say if a dataset had a range of numbers from 50 - 480, This would be the domain domain( )

Answer 855

It is called the 'Range' and it is the points along the x axis of your SVG space that you want to stay in between. Like 10 - 500 range( )

Answer 856

It takes an array of at at least two elements scale. domain([50, 480]) scale. range([10, 500])

Answer 857

You can use .min or .max const exampleData = [34, 234, 73, 90, 6, 52]; d3. min(exampleData) // Returns 6 d3. max(exampleData) // Returns 234

Answer 858

both the min() and max() methods take a callback function. In this example, the callback function's argument d is for the current inner array. The callback needs to return the element from the inner array (the x or y value) over which you want to compute the maximum or minimum. Here's an example for how to find the min and max values with an array of arrays: ``` const locationData = [[1, 7],[6, 3],[8, 3]]; // Returns the smallest number out of the first elements const minX = d3.min(locationData, (d) => d[0]); // minX compared 1, 6, and 8 and is set to 1 ```

Answer 859

Add a padding varable saved to a number value and use those in teh equations for range( ) and domain( ) ``` const dataset = [ [ 34, 78 ], [ 109, 280 ], [ 310, 120 ], [ 79, 411 ], [ 420, 220 ], [ 233, 145 ], [ 333, 96 ], [ 222, 333 ], [ 78, 320 ], [ 21, 123 ] ]; const w = 500; const h = 500; ``` ``` // Padding between the SVG canvas boundary and the plot const padding = 30; const xScale = d3.scaleLinear() .domain([0, d3.max(dataset, (d) => d[0])]) .range([padding, w - padding]); ```

Answer 860

make them the second argument of the x and y parameters of the attr( ) method -- or the cy cx parmeters for circles. This sets up the functions xscale and yscale ``` const xScale = d3.scaleLinear() .domain([0, d3.max(dataset, (d) => d[0])]) .range([padding, w - padding]); ``` ``` const yScale = d3.scaleLinear() .domain([0, d3.max(dataset, (d) => d[1])]) .range([h - padding, padding]); ``` Then you pass it through like so .attr("cx", (d) => xScale(d[0])) .attr("cy", (d) => yScale(d[1]))

Answer 861

we first create a variable for it xAxis =d3.axisBottom(xScale) or yAxis = d3.axisLeft(yScale) const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); svg.append("g") .attr("transform", "translate(0," + (h - padding) + ")") .call(xAxis); svg.append("g") .attr("transform", "translate(" + padding + ",0)") .call(yAxis)