chore: resolve flagged Crowdin issues (#45442)
* chore: resolve bengali issues * chore: resolve french issues * chore: resolve hebrew issues * chore: resolve persian issues * chore: resolve portuguese brazilian issues * chore: resolve russian issues * chore: resolve spanish issues * chore: resolve japanese issues
This commit is contained in:
@ -11,14 +11,14 @@ dashedName: add-a-box-shadow-to-a-card-like-element
|
|||||||
|
|
||||||
The `box-shadow` property applies one or more shadows to an element.
|
The `box-shadow` property applies one or more shadows to an element.
|
||||||
|
|
||||||
The `box-shadow` property takes values for
|
The `box-shadow` property takes the following values, in order:
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><code>offset-x</code> (how far to push the shadow horizontally from the element),</li>
|
<li><code>offset-x</code> (how far to push the shadow horizontally from the element)</li>
|
||||||
<li><code>offset-y</code> (how far to push the shadow vertically from the element),</li>
|
<li><code>offset-y</code> (how far to push the shadow vertically from the element)</li>
|
||||||
<li><code>blur-radius</code>,</li>
|
<li><code>blur-radius</code></li>
|
||||||
<li><code>spread-radius</code> and</li>
|
<li><code>spread-radius</code></li>
|
||||||
<li><code>color</code>, in that order.</li>
|
<li><code>color</code></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
The `blur-radius` and `spread-radius` values are optional.
|
The `blur-radius` and `spread-radius` values are optional.
|
||||||
|
@ -9,7 +9,7 @@ dashedName: adjust-the-hue-of-a-color
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the `hsl()` property as an alternative way to pick a color by directly stating these characteristics.
|
Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the `hsl()` function as an alternative way to pick a color by directly stating these characteristics.
|
||||||
|
|
||||||
**Hue** is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In `hsl()`, hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.
|
**Hue** is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In `hsl()`, hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.
|
||||||
|
|
||||||
@ -27,19 +27,19 @@ Change the `background-color` of each `div` element based on the class names (`g
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Your code should use the `hsl()` property to declare the color `green`.
|
Your code should use the `hsl()` function to declare the color `green`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||||
```
|
```
|
||||||
|
|
||||||
Your code should use the `hsl()` property to declare the color `cyan`.
|
Your code should use the `hsl()` function to declare the color `cyan`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||||
```
|
```
|
||||||
|
|
||||||
Your code should use the `hsl()` property to declare the color `blue`.
|
Your code should use the `hsl()` function to declare the color `blue`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||||
|
@ -15,11 +15,11 @@ You will create a round, transparent object with a crisp shadow that is slightly
|
|||||||
|
|
||||||
In order to create a round object, the `border-radius` property should be set to a value of 50%.
|
In order to create a round object, the `border-radius` property should be set to a value of 50%.
|
||||||
|
|
||||||
You may recall from an earlier challenge that the `box-shadow` property takes values for `offset-x`, `offset-y`, `blur-radius`, `spread-radius` and a color value in that order. The `blur-radius` and `spread-radius` values are optional.
|
You may recall from an earlier challenge that the `box-shadow` property takes values for `offset-x`, `offset-y`, `blur-radius`, `spread-radius` and a `color` value in that order. The `blur-radius` and `spread-radius` values are optional.
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
Manipulate the square element in the editor to create the moon shape. First, change the `background-color` to `transparent`, then set the `border-radius` property to 50% to make the circular shape. Finally, change the `box-shadow` property to set the `offset-x` to 25px, the `offset-y` to 10px, `blur-radius` to 0, `spread-radius` to 0, and color to `blue`.
|
Manipulate the square element in the editor to create the moon shape. First, change the `background-color` to `transparent`, then set the `border-radius` property to 50% to make the circular shape. Finally, change the `box-shadow` property to set the `offset-x` to 25px, the `offset-y` to 10px, `blur-radius` to 0, `spread-radius` to 0, and `color` to `blue`.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
@ -35,7 +35,7 @@ The value of the `border-radius` property should be set to `50%`.
|
|||||||
assert(code.match(/border-radius:\s*?50%;/gi));
|
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||||
```
|
```
|
||||||
|
|
||||||
The value of the `box-shadow` property should be set to 25px for `offset-x`, 10px for `offset-y`, 0 for `blur-radius`, 0 for `spread-radius`, and finally `blue` for the color.
|
The value of the `box-shadow` property should be set to 25px for `offset-x`, 10px for `offset-y`, 0 for `blur-radius`, 0 for `spread-radius`, and finally `blue` for the `color`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -28,15 +28,15 @@ For the `::before` and `::after` pseudo-elements to function properly, they must
|
|||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
Transform the element on the screen to a heart. In the `heart::after` selector, change the `background-color` to `pink` and the `border-radius` to 50%.
|
Transform the element on the screen to a heart. In the `.heart::after` selector, change the `background-color` to `pink` and the `border-radius` to 50%.
|
||||||
|
|
||||||
Next, target the element with the class `heart` (just `heart`) and fill in the `transform` property. Use the `rotate()` function with -45 degrees.
|
Next, target the element with the class `heart` (just `heart`) and fill in the `transform` property. Use the `rotate()` function with -45 degrees.
|
||||||
|
|
||||||
Finally, in the `heart::before` selector, set its `content` property to an empty string.
|
Finally, in the `.heart::before` selector, set its `content` property to an empty string.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
The `background-color` property of the `heart::after` selector should be `pink`.
|
The `background-color` property of the `.heart::after` selector should be `pink`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
||||||
@ -45,7 +45,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The `border-radius` of the `heart::after` selector should be 50%.
|
The `border-radius` of the `.heart::after` selector should be 50%.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||||
@ -57,7 +57,7 @@ The `transform` property for the `heart` class should use a `rotate()` function
|
|||||||
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||||
```
|
```
|
||||||
|
|
||||||
The `content` of the `heart::before` selector should be an empty string.
|
The `content` of the `.heart::before` selector should be an empty string.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||||
|
@ -11,7 +11,7 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
|
|||||||
|
|
||||||
A previous challenge discussed the `ease-out` keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the `ease-out` keyword (for the blue element) and `linear` keyword (for the red element) is demonstrated. Similar animation progressions to the `ease-out` keyword can be achieved by using a custom cubic Bezier curve function.
|
A previous challenge discussed the `ease-out` keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the `ease-out` keyword (for the blue element) and `linear` keyword (for the red element) is demonstrated. Similar animation progressions to the `ease-out` keyword can be achieved by using a custom cubic Bezier curve function.
|
||||||
|
|
||||||
In general, changing the `p1` and `p2` anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the ease-out style:
|
In general, changing the `p1` and `p2` anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the `ease-out` style:
|
||||||
|
|
||||||
```css
|
```css
|
||||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||||
|
@ -47,7 +47,7 @@ The color stop at 0 pixels should be `yellow`.
|
|||||||
assert(code.match(/yellow\s+?0(px)?/gi));
|
assert(code.match(/yellow\s+?0(px)?/gi));
|
||||||
```
|
```
|
||||||
|
|
||||||
One color stop at 40 pixels should be `yellow`.
|
The first color stop at 40 pixels should be `yellow`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/yellow\s+?40px/gi));
|
assert(code.match(/yellow\s+?40px/gi));
|
||||||
|
@ -11,7 +11,7 @@ dashedName: change-a-variable-for-a-specific-area
|
|||||||
|
|
||||||
When you create your variables in `:root` they will set the value of that variable for the whole page.
|
When you create your variables in `:root` they will set the value of that variable for the whole page.
|
||||||
|
|
||||||
You can then over-write these variables by setting them again within a specific element.
|
You can then over-write these variables by setting them again within a specific selector.
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
@ -27,7 +27,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The `penguin` class should not contain the `background-color` property
|
The `penguin` class should not contain the `background-color` property.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -15,7 +15,7 @@ To create a CSS variable, you just need to give it a name with two hyphens in fr
|
|||||||
--penguin-skin: gray;
|
--penguin-skin: gray;
|
||||||
```
|
```
|
||||||
|
|
||||||
This will create a variable named `--penguin-skin` and assign it the value of `gray`. Now you can use that variable elsewhere in your CSS to change the value of other elements to gray.
|
This will create a variable named `--penguin-skin` and assign it the value of `gray`. Now you can use that variable elsewhere in your CSS to change the value of other properties to gray.
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
|
@ -77,7 +77,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
Your `h1` element should inherit the color green from your `body` element.
|
Your `h1` element should inherit the color `green` from your `body` element.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||||
|
@ -27,7 +27,7 @@ class="class1 class2"
|
|||||||
|
|
||||||
**Note:** It doesn't matter which order the classes are listed in the HTML element.
|
**Note:** It doesn't matter which order the classes are listed in the HTML element.
|
||||||
|
|
||||||
However, the order of the `class` declarations in the `<style>` section is what is important. The second declaration will always take precedence over the first. Because `.blue-text` is declared second, it overrides the attributes of `.pink-text`
|
However, the order of the `class` declarations in the `<style>` section is what is important. The second declaration will always take precedence over the first. Because `.blue-text` is declared second, it overrides the attributes of `.pink-text`.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -15,7 +15,7 @@ For instance, when your screen is smaller or larger than your media query break
|
|||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
In the `:root` selector of the `media query`, change it so `--penguin-size` is redefined and given a value of `200px`. Also, redefine `--penguin-skin` and give it a value of `black`. Then resize the preview to see this change in action.
|
In the `:root` selector of the media query, change it so `--penguin-size` is redefined and given a value of `200px`. Also, redefine `--penguin-skin` and give it a value of `black`. Then resize the preview to see this change in action.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -29,7 +29,7 @@ Your `h1` element with the text `I am red!` should be given the `color` red.
|
|||||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||||
```
|
```
|
||||||
|
|
||||||
The abbreviated `hex code` for the color red should be used instead of the hex code `#FF0000`.
|
The abbreviated hex code for the color red should be used instead of the hex code `#FF0000`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
||||||
@ -41,7 +41,7 @@ Your `h1` element with the text `I am green!` should be given the `color` green.
|
|||||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||||
```
|
```
|
||||||
|
|
||||||
The abbreviated `hex code` for the color green should be used instead of the hex code `#00FF00`.
|
The abbreviated hex code for the color green should be used instead of the hex code `#00FF00`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
||||||
@ -53,7 +53,7 @@ Your `h1` element with the text `I am cyan!` should be given the `color` cyan.
|
|||||||
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||||
```
|
```
|
||||||
|
|
||||||
The abbreviated `hex code` for the color cyan should be used instead of the hex code `#00FFFF`.
|
The abbreviated hex code for the color cyan should be used instead of the hex code `#00FFFF`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
||||||
@ -65,7 +65,7 @@ Your `h1` element with the text `I am fuchsia!` should be given the `color` fuch
|
|||||||
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||||
```
|
```
|
||||||
|
|
||||||
The abbreviated `hex code` for the color fuchsia should be used instead of the hex code `#FF00FF`.
|
The abbreviated hex code for the color fuchsia should be used instead of the hex code `#FF00FF`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
||||||
|
@ -27,13 +27,13 @@ Replace the word `black` in our `body` element's background-color with its hex c
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Your `body` element should have the background-color of black.
|
Your `body` element should have the `background-color` of black.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||||
```
|
```
|
||||||
|
|
||||||
The `hex code` for the color black should be used instead of the word `black`.
|
The hex code for the color black should be used instead of the word `black`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -11,7 +11,7 @@ dashedName: check-radio-buttons-and-checkboxes-by-default
|
|||||||
|
|
||||||
You can set a checkbox or radio button to be checked by default using the `checked` attribute.
|
You can set a checkbox or radio button to be checked by default using the `checked` attribute.
|
||||||
|
|
||||||
To do this, just add the word `checked` to the inside of an input element. For example:
|
To do this, just add the word `checked` to the inside of an `input` element. For example:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<input type="radio" name="test-name" checked>
|
<input type="radio" name="test-name" checked>
|
||||||
|
@ -43,7 +43,7 @@ Each of your comments should be closed with `-->`.
|
|||||||
assert(code.match(/[^fc]-->/g).length > 1);
|
assert(code.match(/[^fc]-->/g).length > 1);
|
||||||
```
|
```
|
||||||
|
|
||||||
You should not change the order of the `h1` `h2` or `p` in the code.
|
You should not change the order of the `h1`, `h2`, or `p` elements in the code.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -9,7 +9,7 @@ dashedName: inform-with-the-paragraph-element
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
`p` elements are the preferred element for paragraph text on websites. `p` is short for "paragraph".
|
The `p` element is the preferred element for paragraph text on websites. `p` is short for "paragraph".
|
||||||
|
|
||||||
You can create a paragraph element like this:
|
You can create a paragraph element like this:
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@ Recall that setting a flex container as a row places the flex items side-by-side
|
|||||||
|
|
||||||
There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is `justify-content: center;`, which aligns all the flex items to the center inside the flex container. Other options include:
|
There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is `justify-content: center;`, which aligns all the flex items to the center inside the flex container. Other options include:
|
||||||
|
|
||||||
<ul><li><code>flex-start</code>: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container. This is the default alignment if no <code>justify-content</code> is specified.</li><li><code>flex-end</code>: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.</li><li><code>space-between</code>: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the remaining space is distributed evenly among the other items.</li><li><code>space-around</code>: similar to <code>space-between</code> but the first and last items are not locked to the edges of the container, the space is distributed around all the items with a half space on either end of the flex container.</li><li><code>space-evenly</code>: Distributes space evenly between the flex items with a full space at either end of the flex container</li></ul>
|
<ul><li><code>flex-start</code>: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container. This is the default alignment if no <code>justify-content</code> is specified.</li><li><code>flex-end</code>: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.</li><li><code>space-between</code>: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the remaining space is distributed evenly among the other items.</li><li><code>space-around</code>: similar to <code>space-between</code> but the first and last items are not locked to the edges of the container, the space is distributed around all the items with a half space on either end of the flex container.</li><li><code>space-evenly</code>: Distributes space evenly between the flex items with a full space at either end of the flex container.</li></ul>
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
|
@ -9,7 +9,7 @@ dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
CSS flexbox has a feature to split a flex item into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.
|
CSS flexbox has a feature to split a flex container into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.
|
||||||
|
|
||||||
However, using the `flex-wrap` property tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.
|
However, using the `flex-wrap` property tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@ After creating an area template for your grid container, as shown in the previou
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
|
@ -31,7 +31,7 @@ Make a grid with three columns whose widths are as follows: 1fr, 100px, and 2fr.
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
`container` class should have a `grid-template-columns` property that has three columns with the following widths: `1fr, 100px, and 2fr`.
|
Your `container` class should have a `grid-template-columns` property that has three columns with the following widths: `1fr`, `100px`, and `2fr`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -8,9 +8,9 @@ dashedName: convert-celsius-to-fahrenheit
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
The algorithm to convert from Celsius to Fahrenheit is the temperature in Celsius times `9/5`, plus `32`.
|
The formula to convert from Celsius to Fahrenheit is the temperature in Celsius times `9/5`, plus `32`.
|
||||||
|
|
||||||
You are given a variable `celsius` representing a temperature in Celsius. Use the variable `fahrenheit` already defined and assign it the Fahrenheit temperature equivalent to the given Celsius temperature. Use the algorithm mentioned above to help convert the Celsius temperature to Fahrenheit.
|
You are given a variable `celsius` representing a temperature in Celsius. Use the variable `fahrenheit` already defined and assign it the Fahrenheit temperature equivalent to the given Celsius temperature. Use the formula mentioned above to help convert the Celsius temperature to Fahrenheit.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -19,7 +19,7 @@ Both of these would return `true`.
|
|||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
Finish writing the function so that it returns true if the object passed to it contains all four names, `Alan`, `Jeff`, `Sarah` and `Ryan` and returns false otherwise.
|
Finish writing the function so that it returns `true` if the object passed to it contains all four names, `Alan`, `Jeff`, `Sarah` and `Ryan` and returns `false` otherwise.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -10,7 +10,7 @@ dashedName: remove-items-using-splice
|
|||||||
|
|
||||||
Ok, so we've learned how to remove elements from the beginning and end of arrays using `shift()` and `pop()`, but what if we want to remove an element from somewhere in the middle? Or remove more than one element at once? Well, that's where `splice()` comes in. `splice()` allows us to do just that: **remove any number of consecutive elements** from anywhere in an array.
|
Ok, so we've learned how to remove elements from the beginning and end of arrays using `shift()` and `pop()`, but what if we want to remove an element from somewhere in the middle? Or remove more than one element at once? Well, that's where `splice()` comes in. `splice()` allows us to do just that: **remove any number of consecutive elements** from anywhere in an array.
|
||||||
|
|
||||||
`splice()` can take up to 3 parameters, but for now, we'll focus on just the first 2. The first two parameters of `splice()` are integers which represent indexes, or positions, of the array that `splice()` is being called upon. And remember, arrays are *zero-indexed*, so to indicate the first element of an array, we would use `0`. `splice()`'s first parameter represents the index on the array from which to begin removing elements, while the second parameter indicates the number of elements to delete. For example:
|
`splice()` can take up to 3 parameters, but for now, we'll focus on just the first 2. The first two parameters of `splice()` are integers which represent indexes, or positions, of items in the array that `splice()` is being called upon. And remember, arrays are *zero-indexed*, so to indicate the first element of an array, we would use `0`. `splice()`'s first parameter represents the index on the array from which to begin removing elements, while the second parameter indicates the number of elements to delete. For example:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
let array = ['today', 'was', 'not', 'so', 'great'];
|
let array = ['today', 'was', 'not', 'so', 'great'];
|
||||||
|
@ -9,7 +9,7 @@ dashedName: understanding-uninitialized-variables
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
When JavaScript variables are declared, they have an initial value of `undefined`. If you do a mathematical operation on an `undefined` variable your result will be `NaN` which means <dfn>"Not a Number"</dfn>. If you concatenate a string with an `undefined` variable, you will get a literal <dfn>string</dfn> of `undefined`.
|
When JavaScript variables are declared, they have an initial value of `undefined`. If you do a mathematical operation on an `undefined` variable your result will be `NaN` which means <dfn>"Not a Number"</dfn>. If you concatenate a string with an `undefined` variable, you will get a <dfn>string</dfn> of `undefined`.
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
|
@ -22,7 +22,7 @@ Binary search trees are very common and useful data structures because they prov
|
|||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
We'll start simple. We've defined the skeleton of a binary search tree structure here in addition to a function to create nodes for our tree. Observe that each node may have a left and right value. These will be assigned child subtrees if they exist. In our binary search tree, you will create a method to add new values to our binary search tree. The method should be called `add` and it should accept an integer value to add to the tree. Take care to maintain the invariant of a binary search tree: the value in each left child should be less than or equal to the parent value, and the value in each right child should be greater than or equal to the parent value. Here, let's make it so our tree cannot hold duplicate values. If we try to add a value that already exists, the method should return `null`. Otherwise, if the addition is successful, `undefined` should be returned.
|
We'll start simple. We've defined the skeleton of a binary search tree structure here in addition to a function to create nodes for our tree. Observe that each node may have a left and right value. These will be assigned child subtrees if they exist. In our binary search tree, you will create a method to add new values to the tree. The method should be called `add` and it should accept an integer value to add to the tree. Take care to maintain the invariant of a binary search tree: the value in each left child should be less than or equal to the parent value, and the value in each right child should be greater than or equal to the parent value. Here, let's make it so our tree cannot hold duplicate values. If we try to add a value that already exists, the method should return `null`. Otherwise, if the addition is successful, `undefined` should be returned.
|
||||||
|
|
||||||
**Hint:** trees are naturally recursive data structures!
|
**Hint:** trees are naturally recursive data structures!
|
||||||
|
|
||||||
|
@ -20,7 +20,7 @@ Be careful to handle any possible edge cases when writing these methods, such as
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
The DoublyLinkedList data structure should exist.
|
The `DoublyLinkedList` data structure should exist.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -34,7 +34,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The DoublyLinkedList should have a method called add.
|
The `DoublyLinkedList` should have a method called `add`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -51,7 +51,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The DoublyLinkedList should have a method called remove.
|
The `DoublyLinkedList` should have a method called `remove`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -68,7 +68,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
Removing an item from an empty list should return null.
|
Removing an item from an empty list should return `null`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -82,7 +82,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The add method should add items to the list.
|
The `add` method should add items to the list.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -24,7 +24,7 @@ Be sure to write your code to account for collisions!
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
The HashTable data structure should exist.
|
The `HashTable` data structure should exist.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -38,7 +38,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The HashTable should have an add method.
|
The `HashTable` should have an `add` method.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -52,7 +52,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The HashTable should have a lookup method.
|
The `HashTable` should have a `lookup` method.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -66,7 +66,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The HashTable should have a remove method.
|
The `HashTable` should have a `remove` method.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -80,7 +80,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The add method should add key value pairs and the lookup method should return the values associated with a given key.
|
The `add` method should add key value pairs and the `lookup` method should return the values associated with a given key.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -95,7 +95,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The remove method should accept a key as input and should remove the associated key value pair.
|
The `remove` method should accept a key as input and should remove the associated key value pair.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -113,7 +113,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The remove method should only remove the correct key value pair.
|
The `remove` method should only remove the correct key value pair.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -26,7 +26,7 @@ Let's get some practice creating our own map. Because JavaScript objects provide
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
The Map data structure should exist.
|
The `Map` data structure should exist.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -40,7 +40,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The Map object should have the following methods: add, remove, get, has, values, clear, and size.
|
The `Map` object should have the following methods: `add`, `remove`, `get`, `has`, `values`, `clear`, and `size`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -62,7 +62,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The add method should add items to the map.
|
The `add` method should add items to the map.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -79,7 +79,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The has method should return true for added items and false for absent items.
|
The `has` method should return `true` for added items and `false` for absent items.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -94,7 +94,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The get method should accept keys as input and should return the associated values.
|
The `get` method should accept keys as input and should return the associated values.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -109,7 +109,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The values method should return all the values stored in the map as strings in an array.
|
The `values` method should return all the values stored in the map as strings in an array.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -131,7 +131,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The clear method should empty the map and the size method should return the number of items present in the map.
|
The `clear` method should empty the map and the `size` method should return the number of items present in the map.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -12,11 +12,11 @@ Here we will move on from binary search trees and take a look at another type of
|
|||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
Let's create a trie to store words. It will accept words through an `add` method and store these in a trie data structure. It will also allow us to query if a given string is a word with an `isWord` method, and retrieve all the words entered into the trie with a `print` method. `isWord` should return a boolean value and print should return an array of all these words as string values. In order for us to verify that this data structure is implemented correctly, we've provided a `Node` structure for each node in the tree. Each node will be an object with a `keys` property which is a JavaScript Map object. This will hold the individual letters that are valid keys of each node. We've also created an `end` property on the nodes that can be set to `true` if the node represents the termination of a word.
|
Let's create a trie to store words. It will accept words through an `add` method and store these in a trie data structure. It will also allow us to query if a given string is a word with an `isWord` method, and retrieve all the words entered into the trie with a `print` method. `isWord` should return a boolean value and `print` should return an array of all these words as string values. In order for us to verify that this data structure is implemented correctly, we've provided a `Node` structure for each node in the tree. Each node will be an object with a `keys` property which is a JavaScript Map object. This will hold the individual letters that are valid keys of each node. We've also created an `end` property on the nodes that can be set to `true` if the node represents the termination of a word.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
The Trie should have an add method.
|
The `Trie` should have an `add` method.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -32,7 +32,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The Trie should have a print method.
|
The `Trie` should have a `print` method.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -48,7 +48,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The Trie should have an isWord method.
|
The `Trie` should have an `isWord` method.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -64,7 +64,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The print method should return all items added to the trie as strings in an array.
|
The `print` method should return all items added to the trie as strings in an array.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -93,7 +93,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The isWord method should return true only for words added to the trie and false for all other words.
|
The `isWord` method should return `true` only for words added to the trie and `false` for all other words.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -16,13 +16,13 @@ Define a JavaScript Map object and assign to it a variable called myMap. Add the
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
The myMap object should exist.
|
The `myMap` object should exist.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(typeof myMap === 'object');
|
assert(typeof myMap === 'object');
|
||||||
```
|
```
|
||||||
|
|
||||||
myMap should contain the key value pair `freeCodeCamp`, `Awesome!`.
|
`myMap` should contain the key value pair `freeCodeCamp`, `Awesome!`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(myMap.get('freeCodeCamp') === 'Awesome!');
|
assert(myMap.get('freeCodeCamp') === 'Awesome!');
|
||||||
|
@ -18,7 +18,7 @@ Let's implement heap sort with a min heap. Feel free to adapt your max heap code
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
The MinHeap data structure should exist.
|
The `MinHeap` data structure should exist.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -32,7 +32,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
MinHeap should have a method called insert.
|
`MinHeap` should have a method called `insert`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -48,7 +48,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
MinHeap should have a method called remove.
|
`MinHeap` should have a method called `remove`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -64,7 +64,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
MinHeap should have a method called sort.
|
`MinHeap` should have a method called `sort`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -80,7 +80,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The sort method should return an array containing all items added to the min heap in sorted order.
|
The `sort` method should return an array containing all items added to the min heap in sorted order.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -18,7 +18,7 @@ Each column will represent a unique edge. Also, each edge connects two nodes. To
|
|||||||
|
|
||||||
<blockquote> 1<br> ---<br>1 | 1<br>2 | 0<br>3 | 1</blockquote>
|
<blockquote> 1<br> ---<br>1 | 1<br>2 | 0<br>3 | 1</blockquote>
|
||||||
|
|
||||||
Here is an example of an `incidence matrix` with 4 edges and 4 nodes. Remember, the columns are the edges and rows are the nodes themselves.
|
Here is an example of an incidence matrix with 4 edges and 4 nodes. Remember, the columns are the edges and rows are the nodes themselves.
|
||||||
|
|
||||||
<blockquote> 1 2 3 4<br> --------<br>1 | 0 1 1 1<br>2 | 1 1 0 0<br>3 | 1 0 0 1<br>4 | 0 0 1 0</blockquote>
|
<blockquote> 1 2 3 4<br> --------<br>1 | 0 1 1 1<br>2 | 1 1 0 0<br>3 | 1 0 0 1<br>4 | 0 0 1 0</blockquote>
|
||||||
|
|
||||||
|
@ -48,7 +48,7 @@ Finally, add a `print` method which returns an array of all the items that have
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
The MaxHeap data structure should exist.
|
The `MaxHeap` data structure should exist.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -62,7 +62,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
MaxHeap should have a method called insert.
|
`MaxHeap` should have a method called `insert`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -78,7 +78,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
MaxHeap should have a method called print.
|
`MaxHeap` should have a method called `print`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -94,7 +94,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The insert method should add elements according to the max heap property.
|
The `insert` method should add elements according to the max heap property.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -25,7 +25,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The first Set() should be contained in the second Set
|
The first `Set` should be contained in the second `Set`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -25,7 +25,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The union of a Set containing values ["a", "b", "c"] and a Set containing values ["c", "d"] should return a new Set containing values ["a", "b", "c", "d"].
|
The union of a `Set` containing values `["a", "b", "c"]` and a `Set` containing values `["c", "d"]` should return a new `Set` containing values `["a", "b", "c", "d"]`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -22,7 +22,7 @@ Instructions: Add a method to our max heap called `remove`. This method should r
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
The MaxHeap data structure should exist.
|
The `MaxHeap` data structure should exist.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -36,7 +36,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
MaxHeap should have a method called print.
|
`MaxHeap` should have a method called `print`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -52,7 +52,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
MaxHeap should have a method called insert.
|
`MaxHeap` should have a method called `insert`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -68,7 +68,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
MaxHeap should have a method called remove.
|
`MaxHeap` should have a method called `remove`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -84,7 +84,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The remove method should remove the greatest element from the max heap while maintaining the max heap property.
|
The `remove` method should remove the greatest element from the max heap while maintaining the max heap property.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -12,7 +12,7 @@ Let's create one more method for our doubly linked list called reverse which rev
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
The DoublyLinkedList data structure should exist.
|
The `DoublyLinkedList` data structure should exist.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -26,7 +26,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The DoublyLinkedList should have a method called reverse.
|
The `DoublyLinkedList` should have a method called `reverse`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -43,7 +43,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
Reversing an empty list should return null.
|
Reversing an empty list should return `null`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -57,7 +57,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The reverse method should reverse the list.
|
The `reverse` method should reverse the list.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -77,7 +77,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
The next and previous references should be correctly maintained when a list is reversed.
|
The `next` and `previous` references should be correctly maintained when a list is reversed.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -27,7 +27,7 @@ The same network can be represented by the matrix below.
|
|||||||
|
|
||||||
However, it is possible to optimise the network by removing some edges and still ensure that all points on the network remain connected. The network which achieves the maximum saving is shown below. It has a weight of 93, representing a saving of 243 − 93 = 150 from the original network.
|
However, it is possible to optimise the network by removing some edges and still ensure that all points on the network remain connected. The network which achieves the maximum saving is shown below. It has a weight of 93, representing a saving of 243 − 93 = 150 from the original network.
|
||||||
|
|
||||||
<img class="img-responsive center-block" alt="Network wtih seven vertices and left six edges: AB, BD, CA, DE, DF, EG" src="https://cdn.freecodecamp.org/curriculum/project-euler/minimal-network-2.png" style="background-color: white; padding: 10px;">
|
<img class="img-responsive center-block" alt="Network with seven vertices and left six edges: AB, BD, CA, DE, DF, EG" src="https://cdn.freecodecamp.org/curriculum/project-euler/minimal-network-2.png" style="background-color: white; padding: 10px;">
|
||||||
|
|
||||||
Using `network`, an 2D array representing network in matrix form, find the maximum saving which can be achieved by removing redundant edges whilst ensuring that the network remains connected. Vertices not having connection will be represented with `-1`.
|
Using `network`, an 2D array representing network in matrix form, find the maximum saving which can be achieved by removing redundant edges whilst ensuring that the network remains connected. Vertices not having connection will be represented with `-1`.
|
||||||
|
|
||||||
|
@ -22,7 +22,7 @@ By considering the terms in the Fibonacci sequence whose values do not exceed `n
|
|||||||
assert(typeof fiboEvenSum(10) === 'number');
|
assert(typeof fiboEvenSum(10) === 'number');
|
||||||
```
|
```
|
||||||
|
|
||||||
Your function should return an `even` value.
|
Your function should return an even value.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert.equal(fiboEvenSum(10) % 2 === 0, true);
|
assert.equal(fiboEvenSum(10) % 2 === 0, true);
|
||||||
|
@ -8,7 +8,7 @@ dashedName: problem-257-angular-bisectors
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
Given is an integer sided triangle $ABC$ with sides $a ≤ b ≤ c$. ($AB = c$, $BC = a$ and $AC = b$).
|
Given is an integer sided triangle $ABC$ with sides $a ≤ b ≤ c$ ($AB = c$, $BC = a$ and $AC = b$).
|
||||||
|
|
||||||
The angular bisectors of the triangle intersect the sides at points $E$, $F$ and $G$ (see picture below).
|
The angular bisectors of the triangle intersect the sides at points $E$, $F$ and $G$ (see picture below).
|
||||||
|
|
||||||
|
@ -8,9 +8,7 @@ dashedName: problem-323-bitwise-or-operations-on-random-integers
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
Let $y_0, y_1, y_2, \ldots$ be a sequence of random unsigned 32 bit integers
|
Let $y_0, y_1, y_2, \ldots$ be a sequence of random unsigned 32 bit integers (i.e. $0 ≤ y_i < 2^{32}$, every value equally likely).
|
||||||
|
|
||||||
(i.e. $0 ≤ y_i < 2^{32}$, every value equally likely).
|
|
||||||
|
|
||||||
For the sequence $x_i$ the following recursion is given:
|
For the sequence $x_i$ the following recursion is given:
|
||||||
|
|
||||||
|
@ -14,7 +14,7 @@ While driving to work Seth plays the following game:
|
|||||||
|
|
||||||
Whenever the numbers of two licence plates seen on his trip add to 1000 that's a win.
|
Whenever the numbers of two licence plates seen on his trip add to 1000 that's a win.
|
||||||
|
|
||||||
E.g. `MIC-012` and `HAN-988` is a win and `RYU-500` and `SET-500` too. (as long as he sees them in the same trip).
|
E.g. `MIC-012` and `HAN-988` is a win and `RYU-500` and `SET-500` too (as long as he sees them in the same trip).
|
||||||
|
|
||||||
Find the expected number of plates he needs to see for a win. Give your answer rounded to 8 decimal places behind the decimal point.
|
Find the expected number of plates he needs to see for a win. Give your answer rounded to 8 decimal places behind the decimal point.
|
||||||
|
|
||||||
|
@ -19,7 +19,7 @@ In the case of $n = 4$, there are 12 $n$-tuples of integers which satisfy both c
|
|||||||
|
|
||||||
We define $S(t)$ as the sum of the absolute values of the integers in $t$.
|
We define $S(t)$ as the sum of the absolute values of the integers in $t$.
|
||||||
|
|
||||||
For $n = 4$ we can verify that $\sum S(t) = 2087$ for all $n$-tuples t which satisfy both conditions.
|
For $n = 4$ we can verify that $\sum S(t) = 2087$ for all $n$-tuples $t$ which satisfy both conditions.
|
||||||
|
|
||||||
Find $\sum S(t)$ for $n = 7$.
|
Find $\sum S(t)$ for $n = 7$.
|
||||||
|
|
||||||
|
@ -30,7 +30,7 @@ $$\begin{align}
|
|||||||
&(68, -504),(-1356, 1088), (-1356, -1088), (-1500, 1000), (-1500, -1000)\\}
|
&(68, -504),(-1356, 1088), (-1356, -1088), (-1500, 1000), (-1500, -1000)\\}
|
||||||
\end{align}$$
|
\end{align}$$
|
||||||
|
|
||||||
**Note:** (-625, 0) is not an element of $C(2500, 1000)$ because $\sin(t)$ is not a rational number for the corresponding values of t.
|
**Note:** (-625, 0) is not an element of $C(2500, 1000)$ because $\sin(t)$ is not a rational number for the corresponding values of $t$.
|
||||||
|
|
||||||
$S(3, 1) = (|3| + |0|) + (|-1| + |2|) + (|-1| + |0|) + (|-1| + |-2|) = 10$
|
$S(3, 1) = (|3| + |0|) + (|-1| + |2|) + (|-1| + |0|) + (|-1| + |-2|) = 10$
|
||||||
|
|
||||||
|
@ -22,7 +22,7 @@ $2 = \varphi + \varphi^{-2}$ and $3 = \varphi^{2} + \varphi^{-2}$
|
|||||||
|
|
||||||
To represent this sum of powers of $\varphi$ we use a string of 0's and 1's with a point to indicate where the negative exponents start. We call this the representation in the phigital numberbase.
|
To represent this sum of powers of $\varphi$ we use a string of 0's and 1's with a point to indicate where the negative exponents start. We call this the representation in the phigital numberbase.
|
||||||
|
|
||||||
So $1 = 1_{\varphi}$, $2 = 10.01_{\varphi}$, $3 = 100.01_{\varphi}$ and $14 = 100100.001001_{\varphi}$. The strings representing 1, 2 and 14 in the phigital number base are palindromic, while the string representing 3 is not. (the phigital point is not the middle character).
|
So $1 = 1_{\varphi}$, $2 = 10.01_{\varphi}$, $3 = 100.01_{\varphi}$ and $14 = 100100.001001_{\varphi}$. The strings representing 1, 2 and 14 in the phigital number base are palindromic, while the string representing 3 is not (the phigital point is not the middle character).
|
||||||
|
|
||||||
The sum of the positive integers not exceeding 1000 whose phigital representation is palindromic is 4345.
|
The sum of the positive integers not exceeding 1000 whose phigital representation is palindromic is 4345.
|
||||||
|
|
||||||
|
@ -12,7 +12,7 @@ All square roots are periodic when written as continued fractions and can be wri
|
|||||||
|
|
||||||
$\\displaystyle \\quad \\quad \\sqrt{N}=a_0+\\frac 1 {a_1+\\frac 1 {a_2+ \\frac 1 {a3+ \\dots}}}$
|
$\\displaystyle \\quad \\quad \\sqrt{N}=a_0+\\frac 1 {a_1+\\frac 1 {a_2+ \\frac 1 {a3+ \\dots}}}$
|
||||||
|
|
||||||
For example, let us consider $\\sqrt{23}:$:
|
For example, let us consider $\\sqrt{23}$:
|
||||||
|
|
||||||
$\\quad \\quad \\sqrt{23}=4+\\sqrt{23}-4=4+\\frac 1 {\\frac 1 {\\sqrt{23}-4}}=4+\\frac 1 {1+\\frac{\\sqrt{23}-3}7}$
|
$\\quad \\quad \\sqrt{23}=4+\\sqrt{23}-4=4+\\frac 1 {\\frac 1 {\\sqrt{23}-4}}=4+\\frac 1 {1+\\frac{\\sqrt{23}-3}7}$
|
||||||
|
|
||||||
|
@ -30,7 +30,7 @@ assert(typeof specialPythagoreanTriplet(24) === 'number');
|
|||||||
assert.strictEqual(specialPythagoreanTriplet(24), 480);
|
assert.strictEqual(specialPythagoreanTriplet(24), 480);
|
||||||
```
|
```
|
||||||
|
|
||||||
`specialPythagoreanTriplet(120)` should return 49920, 55080 or 60000
|
`specialPythagoreanTriplet(120)` should return 49920, 55080 or 60000.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert([49920, 55080, 60000].includes(specialPythagoreanTriplet(120)));
|
assert([49920, 55080, 60000].includes(specialPythagoreanTriplet(120)));
|
||||||
|
@ -13,7 +13,7 @@ To make HTML easier to read, indent the `h2` element, the comment, and `p` eleme
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Your should have an `h2` element with text `Cat Photos`. You may have accidentally deleted it, it is missing both opening and closing tags, or the text has changed.
|
Your code should have an `h2` element with text `Cat Photos`. You may have accidentally deleted it, it is missing both opening and closing tags, or the text has changed.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -23,7 +23,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
Your `h2` element should below the `main` element's opening tag and its opening tag should start 6 spaces over from the start of the line.
|
Your `h2` element should be below the `main` element's opening tag and its opening tag should start 6 spaces over from the start of the line.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.toLowerCase().match(/<main\>\n\s{6}<h2>/));
|
assert(code.toLowerCase().match(/<main\>\n\s{6}<h2>/));
|
||||||
|
@ -19,7 +19,7 @@ You have either deleted your `input` element or it has invalid syntax. All attri
|
|||||||
assert($('input').length);
|
assert($('input').length);
|
||||||
```
|
```
|
||||||
|
|
||||||
Your `form` should only contain the `input` element. Remove any HTML additional elements or text within the `form` element.
|
Your `form` should only contain the `input` element. Remove any additional HTML elements or text within the `form` element.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -17,7 +17,7 @@ You have either deleted your `input` element or it has invalid syntax. All attri
|
|||||||
assert($('input').length);
|
assert($('input').length);
|
||||||
```
|
```
|
||||||
|
|
||||||
Your `form` should only contain the `input` element. Remove any HTML additional elements or text within the `form` element.
|
Your `form` should only contain the `input` element. Remove any additional HTML elements or text within the `form` element.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
Reference in New Issue
Block a user