chore: update lang tags on code blocks
This commit is contained in:
Oliver Eyton-Williams
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
120bb342e8
commit
d7dc1acb4a
@ -90,7 +90,7 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
|
||||
@ -85,7 +85,7 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
|
||||
@ -7,6 +7,7 @@ forumTopicId: 301084
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
When using your variable as a CSS property value, you can attach a fallback value that your browser will revert to if the given variable is invalid.
|
||||
<strong>Note:</strong> This fallback is not used to increase browser compatibility, and it will not work on IE browsers. Rather, it is used so that the browser has a color to display if it cannot find your variable.
|
||||
@ -18,14 +19,17 @@ background: var(--penguin-skin, black);
|
||||
|
||||
This will set background to black if your variable wasn't set.
|
||||
Note that this can be useful for debugging.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
It looks like there is a problem with the variables supplied to the <code>.penguin-top</code> and <code>.penguin-bottom</code> classes. Rather than fix the typo, add a fallback value of <code>black</code> to the <code>background</code> property of the <code>.penguin-top</code> and <code>.penguin-bottom</code> classes.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -34,12 +38,12 @@ tests:
|
||||
testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
|
||||
- text: The fallback value of <code>black</code> should be used in <code>background</code> property of the <code>penguin-bottom</code> class.
|
||||
testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
@ -219,7 +223,7 @@ tests:
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
background: #c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
@ -253,16 +257,21 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".penguin-top {background: var(--pengiun-skin, black);} .penguin-bottom {background: var(--pengiun-skin, black);}"
|
||||
```html
|
||||
<style>
|
||||
.penguin-top {
|
||||
background: var(--pengiun-skin, black);
|
||||
}
|
||||
.penguin-bottom {
|
||||
background: var(--pengiun-skin, black);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -249,8 +249,10 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".penguin {--penguin-belly: white;}"
|
||||
```html
|
||||
<style>
|
||||
.penguin {--penguin-belly: white;}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -249,8 +249,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".penguin {--penguin-skin: gray;}"
|
||||
```html
|
||||
<style>.penguin {--penguin-skin: gray;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -249,8 +249,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ":root {--penguin-belly: pink;}"
|
||||
```html
|
||||
<style>:root {--penguin-belly: pink;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -60,7 +60,7 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
|
||||
@ -104,7 +104,7 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
|
||||
@ -269,8 +269,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".penguin-top {background: var(--penguin-skin);} .penguin-bottom {background: var(--penguin-skin);} .right-hand {background: var(--penguin-skin);} .left-hand {background: var(--penguin-skin);}"
|
||||
```html
|
||||
<style>.penguin-top {background: var(--penguin-skin);} .penguin-bottom {background: var(--penguin-skin);} .right-hand {background: var(--penguin-skin);} .left-hand {background: var(--penguin-skin);}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -277,8 +277,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "@media (max-width: 350px) {:root {--penguin-size: 200px; --penguin-skin: black;}}"
|
||||
```html
|
||||
<style>@media (max-width: 350px) {:root {--penguin-size: 200px; --penguin-skin: black;}}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -251,8 +251,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".penguin {--penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange;}"
|
||||
```html
|
||||
<style>.penguin {--penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -82,7 +82,7 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: rgb(255, 0, 0);
|
||||
|
||||
@ -56,8 +56,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "<h2>CatPhotoApp</h2><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
|
||||
```html
|
||||
<h2>CatPhotoApp</h2><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -60,7 +60,7 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
@ -82,8 +82,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-template-columns: 100px 100px 100px;}"
|
||||
```html
|
||||
<style>.container {grid-template-columns: 100px 100px 100px;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -74,8 +74,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-gap: 10px 20px;}"
|
||||
```html
|
||||
<style>.container {grid-gap: 10px 20px;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -73,8 +73,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-template-rows: 50px 50px;}"
|
||||
```html
|
||||
<style>.container {grid-template-rows: 50px 50px;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -76,8 +76,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {justify-items: center;}"
|
||||
```html
|
||||
<style>.container {justify-items: center;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -76,8 +76,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {align-items: end;}"
|
||||
```html
|
||||
<style>.container {align-items: end;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -83,8 +83,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".item2 {justify-self: center;}"
|
||||
```html
|
||||
<style>.item2 {justify-self: center;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -80,8 +80,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".item3 {align-self: end;}"
|
||||
```html
|
||||
<style>.item3 {align-self: end;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -81,8 +81,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-column-gap: 20px;}"
|
||||
```html
|
||||
<style>.container {grid-column-gap: 20px;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -75,8 +75,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-row-gap: 5px;}"
|
||||
```html
|
||||
<style>.container {grid-row-gap: 5px;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -95,8 +95,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}"
|
||||
```html
|
||||
<style>.container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -107,8 +107,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".item3 {grid-template-columns: auto 1fr; display: grid;}"
|
||||
```html
|
||||
<style>.item3 {grid-template-columns: auto 1fr; display: grid;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -72,8 +72,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {display: grid;}"
|
||||
```html
|
||||
<style>.container {display: grid;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -82,8 +82,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-template-columns: repeat(3, minmax(90px, 1fr));}"
|
||||
```html
|
||||
<style>.container {grid-template-columns: repeat(3, minmax(90px, 1fr));}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -91,8 +91,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".item5 {grid-area: footer;}"
|
||||
```html
|
||||
<style>.item5 {grid-area: footer;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -96,8 +96,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-template-columns: repeat(3, 1fr);}"
|
||||
```html
|
||||
<style>.container {grid-template-columns: repeat(3, 1fr);}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -84,8 +84,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-template-columns: 1fr 100px 2fr;}"
|
||||
```html
|
||||
<style>.container {grid-template-columns: 1fr 100px 2fr;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -91,8 +91,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".item5 {grid-area: 3/1/4/4;}"
|
||||
```html
|
||||
<style>.item5 {grid-area: 3/1/4/4;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -49,7 +49,7 @@ tests: []
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
|
||||
@ -53,7 +53,7 @@ tests: []
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
|
||||
@ -54,7 +54,7 @@ tests: []
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
|
||||
@ -53,7 +53,7 @@ tests: []
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@ tests: []
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user