mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-18 19:00:54 -04:00
chore(i18n,learn): processed translations (#50366)
This commit is contained in:
camperbot
@@ -10,7 +10,7 @@ dashedName: remove-an-element-using-jquery
|
||||
|
||||
الآن أزل عنصر HTML من صفحتك باستخدام jQuery.
|
||||
|
||||
jQuery لديه دالة تسمى `.remove()` التي ستزيل عنصر HTML بالكامل
|
||||
jQuery has a function called `.remove()` that will remove an HTML element entirely.
|
||||
|
||||
أزل عنصر `#target4` من الصفحة باستخدام وظيفة `.remove()`.
|
||||
|
||||
|
||||
@@ -7,36 +7,124 @@ dashedName: css-foundations-exercise-d
|
||||
|
||||
# --description--
|
||||
|
||||
description
|
||||
With this exercise, we've provided you a completed HTML file, so you will only have to edit the CSS file. For this exercise, it's more important to understand how chaining different selectors works than how to actually add the attributes.
|
||||
|
||||
1. You should see a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
1. You should give it a height so that it retains its original square proportions (don't hardcode in a pixel value for the height!).
|
||||
1. You should give the elements with both the `avatar` and `distorted` classes a `width` of `200px`.
|
||||
1. You should give it a `height` twice as big as it's width.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
You should have a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style?.width === '300px');
|
||||
```
|
||||
|
||||
Test 2
|
||||
You should have a height of `auto` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`)
|
||||
assert(style?.height === 'auto');
|
||||
```
|
||||
|
||||
Test 3
|
||||
You should use a chaining selector on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `width` of `200px` on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.width === '200px');
|
||||
```
|
||||
|
||||
You should use a chaining selector on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `height` two times the width on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.height === '400px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
`html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.avatar.proportioned {
|
||||
height: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.avatar.distorted {
|
||||
height: 400px;
|
||||
width: 200px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: remove-an-element-using-jquery
|
||||
|
||||
現在學習用 jQuery 從頁面移除 HTML 標籤。
|
||||
|
||||
jQuery 有一個 `.remove()` 方法，能完全移除 HTML 標籤。
|
||||
jQuery has a function called `.remove()` that will remove an HTML element entirely.
|
||||
|
||||
用 `.remove()` 方法從頁面移除 `#target4` 元素。
|
||||
|
||||
|
||||
@@ -7,36 +7,124 @@ dashedName: css-foundations-exercise-d
|
||||
|
||||
# --description--
|
||||
|
||||
description
|
||||
With this exercise, we've provided you a completed HTML file, so you will only have to edit the CSS file. For this exercise, it's more important to understand how chaining different selectors works than how to actually add the attributes.
|
||||
|
||||
1. You should see a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
1. You should give it a height so that it retains its original square proportions (don't hardcode in a pixel value for the height!).
|
||||
1. You should give the elements with both the `avatar` and `distorted` classes a `width` of `200px`.
|
||||
1. You should give it a `height` twice as big as it's width.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
You should have a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style?.width === '300px');
|
||||
```
|
||||
|
||||
Test 2
|
||||
You should have a height of `auto` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`)
|
||||
assert(style?.height === 'auto');
|
||||
```
|
||||
|
||||
Test 3
|
||||
You should use a chaining selector on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `width` of `200px` on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.width === '200px');
|
||||
```
|
||||
|
||||
You should use a chaining selector on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `height` two times the width on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.height === '400px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
`html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.avatar.proportioned {
|
||||
height: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.avatar.distorted {
|
||||
height: 400px;
|
||||
width: 200px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: remove-an-element-using-jquery
|
||||
|
||||
现在学习用 jQuery 从页面移除 HTML 标签。
|
||||
|
||||
jQuery 有一个 `.remove()` 方法，能完全移除 HTML 标签。
|
||||
jQuery has a function called `.remove()` that will remove an HTML element entirely.
|
||||
|
||||
用 `.remove()` 方法从页面移除 `#target4` 元素。
|
||||
|
||||
|
||||
@@ -7,36 +7,124 @@ dashedName: css-foundations-exercise-d
|
||||
|
||||
# --description--
|
||||
|
||||
description
|
||||
With this exercise, we've provided you a completed HTML file, so you will only have to edit the CSS file. For this exercise, it's more important to understand how chaining different selectors works than how to actually add the attributes.
|
||||
|
||||
1. You should see a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
1. You should give it a height so that it retains its original square proportions (don't hardcode in a pixel value for the height!).
|
||||
1. You should give the elements with both the `avatar` and `distorted` classes a `width` of `200px`.
|
||||
1. You should give it a `height` twice as big as it's width.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
You should have a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style?.width === '300px');
|
||||
```
|
||||
|
||||
Test 2
|
||||
You should have a height of `auto` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`)
|
||||
assert(style?.height === 'auto');
|
||||
```
|
||||
|
||||
Test 3
|
||||
You should use a chaining selector on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `width` of `200px` on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.width === '200px');
|
||||
```
|
||||
|
||||
You should use a chaining selector on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `height` two times the width on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.height === '400px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
`html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.avatar.proportioned {
|
||||
height: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.avatar.distorted {
|
||||
height: 400px;
|
||||
width: 200px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: remove-an-element-using-jquery
|
||||
|
||||
Ahora vamos a eliminar un elemento HTML de su página utilizando jQuery.
|
||||
|
||||
jQuery tiene una función llamada `.remove()` que eliminará completamente un elemento HTML
|
||||
jQuery has a function called `.remove()` that will remove an HTML element entirely.
|
||||
|
||||
Remueve el elemento `#target4` de la página utilizando la función `.remove()`.
|
||||
|
||||
|
||||
@@ -7,36 +7,124 @@ dashedName: css-foundations-exercise-d
|
||||
|
||||
# --description--
|
||||
|
||||
description
|
||||
With this exercise, we've provided you a completed HTML file, so you will only have to edit the CSS file. For this exercise, it's more important to understand how chaining different selectors works than how to actually add the attributes.
|
||||
|
||||
1. You should see a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
1. You should give it a height so that it retains its original square proportions (don't hardcode in a pixel value for the height!).
|
||||
1. You should give the elements with both the `avatar` and `distorted` classes a `width` of `200px`.
|
||||
1. You should give it a `height` twice as big as it's width.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
You should have a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style?.width === '300px');
|
||||
```
|
||||
|
||||
Test 2
|
||||
You should have a height of `auto` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`)
|
||||
assert(style?.height === 'auto');
|
||||
```
|
||||
|
||||
Test 3
|
||||
You should use a chaining selector on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `width` of `200px` on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.width === '200px');
|
||||
```
|
||||
|
||||
You should use a chaining selector on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `height` two times the width on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.height === '400px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
`html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.avatar.proportioned {
|
||||
height: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.avatar.distorted {
|
||||
height: 400px;
|
||||
width: 200px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: remove-an-element-using-jquery
|
||||
|
||||
Jetzt wollen wir mit jQuery ein HTML-Element aus deiner Seite entfernen.
|
||||
|
||||
jQuery hat eine Funktion namens `.remove()`, die ein HTML-Element vollständig entfernt
|
||||
jQuery has a function called `.remove()` that will remove an HTML element entirely.
|
||||
|
||||
Entferne das Element `#target4` aus der Seite, indem du die Funktion `.remove()` verwendest.
|
||||
|
||||
|
||||
@@ -7,36 +7,124 @@ dashedName: css-foundations-exercise-d
|
||||
|
||||
# --description--
|
||||
|
||||
description
|
||||
With this exercise, we've provided you a completed HTML file, so you will only have to edit the CSS file. For this exercise, it's more important to understand how chaining different selectors works than how to actually add the attributes.
|
||||
|
||||
1. You should see a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
1. You should give it a height so that it retains its original square proportions (don't hardcode in a pixel value for the height!).
|
||||
1. You should give the elements with both the `avatar` and `distorted` classes a `width` of `200px`.
|
||||
1. You should give it a `height` twice as big as it's width.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
You should have a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style?.width === '300px');
|
||||
```
|
||||
|
||||
Test 2
|
||||
You should have a height of `auto` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`)
|
||||
assert(style?.height === 'auto');
|
||||
```
|
||||
|
||||
Test 3
|
||||
You should use a chaining selector on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `width` of `200px` on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.width === '200px');
|
||||
```
|
||||
|
||||
You should use a chaining selector on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `height` two times the width on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.height === '400px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
`html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.avatar.proportioned {
|
||||
height: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.avatar.distorted {
|
||||
height: 400px;
|
||||
width: 200px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: remove-an-element-using-jquery
|
||||
|
||||
Ora rimuoviamo un elemento HTML dalla pagina usando jQuery.
|
||||
|
||||
jQuery ha una funzione chiamata `.remove()` per farlo
|
||||
jQuery has a function called `.remove()` that will remove an HTML element entirely.
|
||||
|
||||
Rimuovi l'elemento `#target4` dalla pagina utilizzando la funzione `.remove()`.
|
||||
|
||||
|
||||
@@ -7,36 +7,124 @@ dashedName: css-foundations-exercise-d
|
||||
|
||||
# --description--
|
||||
|
||||
description
|
||||
With this exercise, we've provided you a completed HTML file, so you will only have to edit the CSS file. For this exercise, it's more important to understand how chaining different selectors works than how to actually add the attributes.
|
||||
|
||||
1. You should see a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
1. You should give it a height so that it retains its original square proportions (don't hardcode in a pixel value for the height!).
|
||||
1. You should give the elements with both the `avatar` and `distorted` classes a `width` of `200px`.
|
||||
1. You should give it a `height` twice as big as it's width.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
You should have a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style?.width === '300px');
|
||||
```
|
||||
|
||||
Test 2
|
||||
You should have a height of `auto` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`)
|
||||
assert(style?.height === 'auto');
|
||||
```
|
||||
|
||||
Test 3
|
||||
You should use a chaining selector on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `width` of `200px` on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.width === '200px');
|
||||
```
|
||||
|
||||
You should use a chaining selector on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `height` two times the width on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.height === '400px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
`html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.avatar.proportioned {
|
||||
height: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.avatar.distorted {
|
||||
height: 400px;
|
||||
width: 200px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: remove-an-element-using-jquery
|
||||
|
||||
jQueryを使用して、ページから HTML 要素を削除しましょう。
|
||||
|
||||
jQuery には `.remove()` という関数があり、HTML 要素全体を削除します。
|
||||
jQuery has a function called `.remove()` that will remove an HTML element entirely.
|
||||
|
||||
`.remove()` 関数を使用して、`#target4` 要素をページから削除してください。
|
||||
|
||||
|
||||
@@ -7,36 +7,124 @@ dashedName: css-foundations-exercise-d
|
||||
|
||||
# --description--
|
||||
|
||||
description
|
||||
With this exercise, we've provided you a completed HTML file, so you will only have to edit the CSS file. For this exercise, it's more important to understand how chaining different selectors works than how to actually add the attributes.
|
||||
|
||||
1. You should see a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
1. You should give it a height so that it retains its original square proportions (don't hardcode in a pixel value for the height!).
|
||||
1. You should give the elements with both the `avatar` and `distorted` classes a `width` of `200px`.
|
||||
1. You should give it a `height` twice as big as it's width.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
You should have a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style?.width === '300px');
|
||||
```
|
||||
|
||||
Test 2
|
||||
You should have a height of `auto` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`)
|
||||
assert(style?.height === 'auto');
|
||||
```
|
||||
|
||||
Test 3
|
||||
You should use a chaining selector on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `width` of `200px` on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.width === '200px');
|
||||
```
|
||||
|
||||
You should use a chaining selector on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `height` two times the width on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.height === '400px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
`html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.avatar.proportioned {
|
||||
height: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.avatar.distorted {
|
||||
height: 400px;
|
||||
width: 200px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: remove-an-element-using-jquery
|
||||
|
||||
Agora vamos remover um elemento HTML da sua página usando jQuery.
|
||||
|
||||
O jQuery possui uma função chamada `.remove()` que removerá completamente um elemento HTML
|
||||
jQuery has a function called `.remove()` that will remove an HTML element entirely.
|
||||
|
||||
Remova o elemento `#target4` da sua página usando a função `.remove()`.
|
||||
|
||||
|
||||
@@ -7,25 +7,25 @@ dashedName: step-1
|
||||
|
||||
# --description--
|
||||
|
||||
In this project, you will be building a number sorter. O HTML e o CSS foram fornecidos para você. Feel free to explore them.
|
||||
Neste projeto, você criará um ordenador de números. O HTML e o CSS foram fornecidos para você. Sinta-se à vontade para explorá-los.
|
||||
|
||||
When you are ready, declare a `sortButton` variable and assign it the value of `.getElementById()` with the argument `sort`.
|
||||
Quando estiver pronto, declare uma variável `sortButton` e atribua a ela o valor de `.getElementById()` com o argumento `sort`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a `sortButton` variable with `const`.
|
||||
Você deve declarar uma variável `sortButton` com `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortButton\s*=/);
|
||||
```
|
||||
|
||||
You should call `document.getElementById()` with the argument `sort`.
|
||||
Você deve chamar `document.getElementById()` com o argumento `sort`.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|"|`)sort\1\s*\)/);
|
||||
```
|
||||
|
||||
You should assign the value of `document.getElementById()` to `sortButton`.
|
||||
Você deve atribuir o valor de `document.getElementById()` a `sortButton`.
|
||||
|
||||
```js
|
||||
assert.match(code, /sortButton\s*=\s*document\.getElementById\(\s*('|"|`)sort\1\s*\)/);
|
||||
|
||||
@@ -7,31 +7,31 @@ dashedName: step-9
|
||||
|
||||
# --description--
|
||||
|
||||
To perform an action on each element in the array, use the method that is meant for iterating over arrays.
|
||||
Para executar uma ação em cada elemento do array, use o método que é feito para percorrer arrays.
|
||||
|
||||
Use the `forEach()` method, and pass it an empty callback which takes `num` and `i` as the parameters.
|
||||
Use o método `forEach()` e passe para ele uma função de callback vazia que recebe `num` e `i` como parâmetros.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.forEach()` method to iterate over the `array` parameter.
|
||||
Você deve usar o método `.forEach()` para percorrer o parâmetro `array`.
|
||||
|
||||
```js
|
||||
assert.match(code, /array\.forEach\(/);
|
||||
```
|
||||
|
||||
Your `.forEach()` method should take a callback function using arrow syntax.
|
||||
O método `.forEach()` deve receber uma função de callback usando a sintaxe das arrow functions.
|
||||
|
||||
```js
|
||||
assert.match(code, /array\.forEach\s*\(\s*\(.*\)\s*=>/);
|
||||
```
|
||||
|
||||
Your callback function should take two parameters, `num` and `i`.
|
||||
A função de callback deve receber dois parâmetros, `num` e `i`.
|
||||
|
||||
```js
|
||||
assert.match(code, /array\.forEach\s*\(\s*\(\s*num\s*,\s*i\s*\)\s*=>/);
|
||||
```
|
||||
|
||||
Your callback function should be empty.
|
||||
A função de callback deve estar vazia.
|
||||
|
||||
```js
|
||||
assert.match(code, /array\.forEach\s*\(\s*\(\s*num\s*,\s*i\s*\)\s*=>\s*{\s*}\s*\)/);
|
||||
|
||||
@@ -7,19 +7,19 @@ dashedName: step-12
|
||||
|
||||
# --description--
|
||||
|
||||
In your `sortInputArray()` function, call your `updateUI()` function and pass `inputValues` as the argument.
|
||||
Na função `sortInputArray()`, chame a função `updateUI()` e passe `inputValues` como argumento.
|
||||
|
||||
You should now be able to click the `Sort` button and see the inputted array in the `Output` section.
|
||||
Agora, você deve poder clicar no botão `Sort` e ver o array inserido na seção `Output`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call `updateUI()` in your `sortInputArray()` function.
|
||||
Você deve chamar `updateUI()` na função `sortInputArray()`.
|
||||
|
||||
```js
|
||||
assert.match(sortInputArray.toString(), /updateUI\(/);
|
||||
```
|
||||
|
||||
You should pass `inputValues` as an argument to `updateUI()`.
|
||||
Você deve passar `inputValues` como um argumento para `updateUI()`.
|
||||
|
||||
```js
|
||||
assert.match(sortInputArray.toString(), /updateUI\(\s*inputValues\s*\)/);
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-13
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to actually sort the array. The first sorting algorithm you will implement is the bubble sort, which starts at the beginning of the array and 'bubbles up' unsorted values towards the end, iterating through the array until it is completely sorted.
|
||||
Agora, você precisa realmente ordenar o array. O primeiro algoritmo de ordenação que você implementará é o "bubble sort", que começa no início do array e vai "subindo" entre os valores não ordenados até chegar ao final, iterando através do array até que ele esteja completamente ordenado.
|
||||
|
||||
Begin by declaring a `bubbleSort` variable and assigning it an arrow function that takes an `array` parameter.
|
||||
Comece declarando uma variável `bubbleSort` e atribuindo a ela uma arrow function que recebe um parâmetro `array`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `bubbleSort` variable.
|
||||
Você deve usar `const` para declarar a variável `bubbleSort`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=/);
|
||||
@@ -25,19 +25,19 @@ assert.match(code, /const\s+bubbleSort\s*=/);
|
||||
assert.isFunction(bubbleSort);
|
||||
```
|
||||
|
||||
`bubbleSort` should use arrow syntax.
|
||||
`bubbleSort` deve usar a sintaxe das arrow functions.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(.*\)\s*=>/);
|
||||
```
|
||||
|
||||
`bubbleSort` should take a single `array` parameter.
|
||||
`bubbleSort` deve receber um único parâmetro `array`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(?\s*array\s*\)?\s*=>/);
|
||||
```
|
||||
|
||||
`bubbleSort` should be empty.
|
||||
`bubbleSort` deve estar vazio.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+bubbleSort\s*=\s*\(?\s*array\s*\)?\s*=>\s*{\s*}/);
|
||||
|
||||
@@ -7,31 +7,31 @@ dashedName: step-17
|
||||
|
||||
# --description--
|
||||
|
||||
In your `sortInputArray()` function, declare a `sortedValues` variable. Assign it the value of calling `bubbleSort` with your `inputValues` array.
|
||||
Na função `sortInputArray()`, declare uma variável `sortedValues`. Atribua a ela o valor da chamada de `bubbleSort` com o array `inputValues`.
|
||||
|
||||
Then, update your `updateUI` call to take `sortedValues` as the parameter.
|
||||
Então, atualize a sua chamada de `updateUI` para que receba `sortedValues` como parâmetro.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `sortedValues` variable.
|
||||
Você deve usar `const` para declarar uma variável `sortedValues`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=/);
|
||||
```
|
||||
|
||||
`sortedValues` should be assigned the value of calling `bubbleSort` with your `inputValues` array.
|
||||
`sortedValues` deve receber por atribuição o valor da chamada de `bubbleSort` com o array `inputValues`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=\s*bubbleSort\s*\(\s*inputValues\s*\)/);
|
||||
```
|
||||
|
||||
`updateUI` should be called with `sortedValues` as the parameter.
|
||||
`updateUI` deve ser chamada com `sortedValues` como parâmetro.
|
||||
|
||||
```js
|
||||
assert.match(code, /updateUI\s*\(\s*sortedValues\s*\)/);
|
||||
```
|
||||
|
||||
`updateUI` should not be called with `inputValues` as the parameter.
|
||||
`updateUI` não deve ser chamada com `inputValues` como parâmetro.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /updateUI\s*\(\s*inputValues\s*\)/);
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-22
|
||||
|
||||
# --description--
|
||||
|
||||
Time to implement another sorting algorithm. This time, you'll be implementing a <dfn>selection sort</dfn>. Selection sort works by finding the smallest value in the array, then swapping it with the first value in the array. Then, it finds the next smallest value in the array, and swaps it with the second value in the array. It continues iterating through the array until it is completely sorted.
|
||||
É a hora de implementar outro algoritmo de ordenação. This time, you'll be implementing a <dfn>selection sort</dfn>. Selection sort works by finding the smallest value in the array, then swapping it with the first value in the array. Then, it finds the next smallest value in the array, and swaps it with the second value in the array. It continues iterating through the array until it is completely sorted.
|
||||
|
||||
Start by declaring a `selectionSort` variable and assigning it an arrow function that takes an `array` parameter.
|
||||
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-28
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, after your outer loop has finished, you need to return the array. Once you've done so, you should be able to see the `Output` change when you click the `Sort` button again.
|
||||
Por fim, após o término do laço externo, você precisa retornar o array. Depois de fazer isso, você deve poder ver a mudança de `Output` ao clicar no botão `Sort` novamente.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should `return` the `array` after your outer loop completes.
|
||||
Você deve utilizar o `return` do `array` depois que o laço externo for concluído.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+selectionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*let\s*minIndex\s*=\s*i\s*;?\s*for\s*\(\s*let\s+j\s*=\s*i\s*\+\s*1\s*;\s*j\s*<\s*array\.length\s*;\s*j\s*\+\+\s*\)\s*{\s*console\.log\(\s*array\s*,\s*array\s*\[\s*j\s*\]\s*,\s*array\s*\[\s*minIndex\s*\]\s*\);\s*if\s*\(\s*array\s*\[\s*j\s*\]\s*<\s*array\s*\[\s*minIndex\s*\]\s*\)\s*{\s*minIndex\s*=\s*j\s*;?\s*}\s*}\s*const\s*temp\s*=\s*array\[i\]\s*;?\s*array\[i\]\s*=\s*array\[minIndex\]\s*;?\s*array\[minIndex\]\s*=\s*temp\s*;?\s*}\s*return\s*array;?\s*/)
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-35
|
||||
|
||||
# --description--
|
||||
|
||||
On each iteration of your `while` loop, it is finding an element that is larger than your current value. You need to move that element to the right to make room for your current value.
|
||||
Em cada iteração do seu laço `while`, ele encontra um elemento que é maior que o seu valor atual. Você precisa mover esse elemento para a direita para abrir espaço para o seu valor atual.
|
||||
|
||||
Do so by assigning the value at the `j` index to the next index.
|
||||
Faça isso atribuindo o valor do índice `j` para o próximo índice.
|
||||
|
||||
# --hints--
|
||||
|
||||
Before decrementing `j`, assign the value at `j` to the index `j + 1`.
|
||||
Antes de decrementar `j`, atribua o valor de `j` ao índice `j + 1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*const\s*currValue\s*=\s*array\s*\[\s*i\s*\]\s*;?\s*let\s*j\s*=\s*i\s*-\s*1\s*;?\s*while\s*\(\s*j\s*>=\s*0\s*&&\s*array\s*\[\s*j\s*\]\s*>\s*currValue\s*\)\s*{\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*=\s*array\s*\[\s*j\s*\];?\s*j--;?\s*\}/);
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-36
|
||||
|
||||
# --description--
|
||||
|
||||
After your while loop, you need to insert your current value. Remember that your loop ends when `j` is either out of the array bounds, or when the value at `j` is less than your current value.
|
||||
Depois do laço while, você precisa inserir o valor atual. Lembre-se de que seu laço de repetição termina quando `j` estiver fora dos limites do array ou quando o valor em `j` for menor que o valor atual.
|
||||
|
||||
Use the assignment operator to insert your current value into the correct index.
|
||||
Use o operador de atribuição para inserir o valor atual no índice correto.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign `currValue` to the index `j + 1`.
|
||||
Você deve atribuir `currValue` ao índice `j + 1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+insertionSort\s*=\s*\(\s*array\s*\)\s*=>\s*{\s*for\s*\(\s*let\s+i\s*=\s*1\s*;\s*i\s*<\s*array\.length\s*;\s*i\s*\+\+\s*\)\s*{\s*const\s*currValue\s*=\s*array\s*\[\s*i\s*\]\s*;?\s*let\s*j\s*=\s*i\s*-\s*1\s*;?\s*while\s*\(\s*j\s*>=\s*0\s*&&\s*array\s*\[\s*j\s*\]\s*>\s*currValue\s*\)\s*{\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*=\s*array\s*\[\s*j\s*\];?\s*j--;?\s*\}\s*array\s*\[\s*j\s*\+\s*1\s*\]\s*=\s*currValue;?/);
|
||||
|
||||
@@ -7,23 +7,23 @@ dashedName: step-41
|
||||
|
||||
# --description--
|
||||
|
||||
The callback to `.sort()` should return a number. That number determines how to sort the elements `a` and `b`:
|
||||
A função de callback de `.sort()` deve retornar um número. Esse número determina como ordenar os elementos `a` e `b`:
|
||||
|
||||
- If the number is negative, sort `a` before `b`.
|
||||
- If the number is positive, sort `b` before `a`.
|
||||
- If the number is zero, do not change the order of `a` and `b`.
|
||||
- Se o número for negativo, ordene `a` antes de `b`.
|
||||
- Se o número for positivo, ordene `b` antes de `a`.
|
||||
- Se o número for zero, não altere a ordem de `a` e `b`.
|
||||
|
||||
Keeping in mind that you want the numbers to be sorted in ascending order (smallest to largest), return a single subtraction calculation using `a` and `b` that will correctly sort the numbers with the above logic.
|
||||
Tendo em mente que você quer que os números sejam classificados em ordem ascendente (do menor para o maior), retorne um único cálculo de subtração, usando `a` e `b`, que ordenará corretamente os números com a lógica acima.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your callback function should use an explicit `return`.
|
||||
A função de callback deve usar um `return` explícito.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=\s*inputValues\s*\.\s*sort\s*\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*{\s*return/);
|
||||
```
|
||||
|
||||
Your callback function should return `a - b`.
|
||||
A função de callback deve retornar `a - b`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+sortedValues\s*=\s*inputValues\s*\.\s*sort\s*\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*{\s*return\s*a\s*-\s*b;?\s*}\s*\)/);
|
||||
|
||||
@@ -7,36 +7,124 @@ dashedName: css-foundations-exercise-d
|
||||
|
||||
# --description--
|
||||
|
||||
description
|
||||
With this exercise, we've provided you a completed HTML file, so you will only have to edit the CSS file. For this exercise, it's more important to understand how chaining different selectors works than how to actually add the attributes.
|
||||
|
||||
1. You should see a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
1. You should give it a height so that it retains its original square proportions (don't hardcode in a pixel value for the height!).
|
||||
1. You should give the elements with both the `avatar` and `distorted` classes a `width` of `200px`.
|
||||
1. You should give it a `height` twice as big as it's width.
|
||||
|
||||
# --hints--
|
||||
|
||||
Teste 1
|
||||
You should have a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style?.width === '300px');
|
||||
```
|
||||
|
||||
Teste 2
|
||||
You should have a height of `auto` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`)
|
||||
assert(style?.height === 'auto');
|
||||
```
|
||||
|
||||
Teste 3
|
||||
You should use a chaining selector on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `width` of `200px` on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.width === '200px');
|
||||
```
|
||||
|
||||
You should use a chaining selector on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `height` two times the width on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.height === '400px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
`html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.avatar.proportioned {
|
||||
height: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.avatar.distorted {
|
||||
height: 400px;
|
||||
width: 200px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -7,18 +7,18 @@ dashedName: css-foundations-exercise-e
|
||||
|
||||
# --description--
|
||||
|
||||
Understanding how combinators work can become a lot easier when you start playing around with them and see what exactly is affected by them versus what isn't.
|
||||
Compreender como os combinadores funcionam pode se tornar muito mais fácil quando você começa a brincar com eles e ver o que exatamente é afetado por eles em comparação com o que não é.
|
||||
|
||||
The goal of this exercise is to apply styles to elements that are descendants of another element, while leaving elements that aren't descendants of that element unstyled.
|
||||
O objetivo deste exercício é aplicar estilos aos elementos que são descendentes de outro elemento, deixando elementos que não são descendentes desse elemento sem estilização.
|
||||
|
||||
1. You should see a `yellow` background for `p` elements that are descendants of the `div` element.
|
||||
1. You should see a text color of `red` for elements that are descendants of the `div` element.
|
||||
1. You should see a font size of `20px` for elements that are descendants of the `div` element.
|
||||
1. You should center align text for elements that are descendants of the `div` element.
|
||||
1. Você deve ver um segundo plano na cor `yellow` para elementos `p` que são descendentes do elemento `div`.
|
||||
1. Você deve ver uma cor de texto `red` para elementos que são descendentes do elemento `div`.
|
||||
1. Você deve ver um tamanho de fonte de `20px` para os elementos que são descendentes do elemento `div`.
|
||||
1. Você deve ver o texto alinhado ao centro para elementos que são descendentes do elemento `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a background color of `yellow` on your descendants.
|
||||
Você deve ter um segundo plano na cor `yellow` em seus descendentes.
|
||||
|
||||
```js
|
||||
const styleOne = new __helpers.CSSHelp(document).getStyle('.container .text');
|
||||
@@ -40,7 +40,7 @@ assert(getCorrectStyle()?.backgroundColor === 'yellow');
|
||||
|
||||
```
|
||||
|
||||
You should have a text color of `red` on your descendants.
|
||||
Você deve ter a cor do texto `red` em seus descendentes.
|
||||
|
||||
```js
|
||||
const styleOne = new __helpers.CSSHelp(document).getStyle('.container .text');
|
||||
@@ -62,7 +62,7 @@ assert(getCorrectStyle()?.color === 'red');
|
||||
|
||||
```
|
||||
|
||||
You should have a font size of `20px` on your descendants.
|
||||
Você deve ter um tamanho de fonte de `20px` em seus descendentes.
|
||||
|
||||
```js
|
||||
const styleOne = new __helpers.CSSHelp(document).getStyle('.container .text');
|
||||
@@ -84,7 +84,7 @@ assert(getCorrectStyle()?.fontSize === '20px');
|
||||
|
||||
```
|
||||
|
||||
You should center align the text on your descendants.
|
||||
Você deve ter o texto alinhado ao centro em seus descendentes.
|
||||
|
||||
```js
|
||||
const styleOne = new __helpers.CSSHelp(document).getStyle('.container .text');
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: remove-an-element-using-jquery
|
||||
|
||||
Видалимо елемент у форматі HTML із вашої сторінки за допомогою jQuery.
|
||||
|
||||
jQuery має функцію під назвою `.remove()`, яка повністю видалить HTML-елемент
|
||||
jQuery has a function called `.remove()` that will remove an HTML element entirely.
|
||||
|
||||
Видаліть зі сторінки елемент `#target4` за допомогою функції `.remove()`.
|
||||
|
||||
|
||||
@@ -7,36 +7,124 @@ dashedName: css-foundations-exercise-d
|
||||
|
||||
# --description--
|
||||
|
||||
опис
|
||||
With this exercise, we've provided you a completed HTML file, so you will only have to edit the CSS file. For this exercise, it's more important to understand how chaining different selectors works than how to actually add the attributes.
|
||||
|
||||
1. You should see a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
1. You should give it a height so that it retains its original square proportions (don't hardcode in a pixel value for the height!).
|
||||
1. You should give the elements with both the `avatar` and `distorted` classes a `width` of `200px`.
|
||||
1. You should give it a `height` twice as big as it's width.
|
||||
|
||||
# --hints--
|
||||
|
||||
Тест 1
|
||||
You should have a `width` of `300px` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style?.width === '300px');
|
||||
```
|
||||
|
||||
Тест 2
|
||||
You should have a height of `auto` on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`)
|
||||
assert(style?.height === 'auto');
|
||||
```
|
||||
|
||||
Тест 3
|
||||
You should use a chaining selector on the `avatar` and `proportioned` class.
|
||||
|
||||
```js
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `width` of `200px` on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.width === '200px');
|
||||
```
|
||||
|
||||
You should use a chaining selector on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style);
|
||||
```
|
||||
|
||||
You should have a `height` two times the width on the `avatar` and `distorted` class.
|
||||
|
||||
```js
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
|
||||
assert(style?.height === '400px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
`html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
|
||||
<img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.avatar.proportioned {
|
||||
height: auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.avatar.distorted {
|
||||
height: 400px;
|
||||
width: 200px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user