mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-01-08 12:04:29 -05:00
chore(i18n): sync challenges including deleted files (#53217)
This commit is contained in:
Mama Naomi
@@ -1,281 +0,0 @@
|
||||
---
|
||||
id: bd7158d8c242eddfaeb5bd13
|
||||
title: أنشئ معرضا لأعمالك الخاصة
|
||||
challengeType: 14
|
||||
forumTopicId: 301143
|
||||
dashedName: build-a-personal-portfolio-webpage
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build an app that is functionally similar to <a href="https://personal-portfolio.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://personal-portfolio.freecodecamp.rocks</a>
|
||||
|
||||
**User Stories:**
|
||||
|
||||
1. Your portfolio should have a welcome section with an `id` of `welcome-section`
|
||||
1. The welcome section should have an `h1` element that contains text
|
||||
1. Your portfolio should have a projects section with an `id` of `projects`
|
||||
1. The projects section should contain at least one element with a `class` of `project-tile` to hold a project
|
||||
1. The projects section should contain at least one link to a project
|
||||
1. Your portfolio should have a navbar with an id of `navbar`
|
||||
1. The navbar should contain at least one link that you can click on to navigate to different sections of the page
|
||||
1. Your portfolio should have a link with an id of `profile-link`, which opens your GitHub or freeCodeCamp profile in a new tab
|
||||
1. Your portfolio should have at least one media query
|
||||
1. The height of the welcome section should be equal to the height of the viewport
|
||||
1. The navbar should always be at the top of the viewport
|
||||
|
||||
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
|
||||
|
||||
**Note:** Be sure to add `<link rel="stylesheet" href="styles.css">` in your HTML to link your stylesheet and apply your CSS
|
||||
|
||||
# --hints--
|
||||
|
||||
Your portfolio should have a "Welcome" section with an `id` of `welcome-section`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('welcome-section')
|
||||
assert(!!el);
|
||||
```
|
||||
|
||||
Your `#welcome-section` element should contain an `h1` element.
|
||||
|
||||
```js
|
||||
assert.isAbove(
|
||||
document.querySelectorAll('#welcome-section h1').length,
|
||||
0,
|
||||
'Welcome section should contain an h1 element '
|
||||
);
|
||||
```
|
||||
|
||||
You should not have any empty `h1` elements within `#welcome-section` element.
|
||||
|
||||
```js
|
||||
assert.isAbove(
|
||||
document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length,
|
||||
0,
|
||||
'h1 element in welcome section should contain your name or camper ' +
|
||||
'name '
|
||||
);
|
||||
```
|
||||
|
||||
You should have a "Projects" section with an `id` of `projects`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('projects')
|
||||
assert(!!el);
|
||||
```
|
||||
|
||||
Your portfolio should contain at least one element with a class of `project-tile`.
|
||||
|
||||
```js
|
||||
assert.isAbove(
|
||||
document.querySelectorAll('#projects .project-tile').length,
|
||||
0
|
||||
);
|
||||
```
|
||||
|
||||
Your `#projects` element should contain at least one `a` element.
|
||||
|
||||
```js
|
||||
assert.isAbove(document.querySelectorAll('#projects a').length, 0);
|
||||
```
|
||||
|
||||
Your portfolio should have a navbar with an `id` of `navbar`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('navbar');
|
||||
assert(!!el);
|
||||
```
|
||||
|
||||
Your `#navbar` element should contain at least one `a` element whose `href` attribute starts with `#`.
|
||||
|
||||
```js
|
||||
const links = [...document.querySelectorAll('#navbar a')].filter(
|
||||
(nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
|
||||
);
|
||||
|
||||
assert.isAbove(
|
||||
links.length,
|
||||
0,
|
||||
'Navbar should contain an anchor link '
|
||||
);
|
||||
```
|
||||
|
||||
Your portfolio should have an `a` element with an `id` of `profile-link`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('profile-link');
|
||||
assert(!!el && el.tagName === 'A')
|
||||
```
|
||||
|
||||
Your `#profile-link` element should have a `target` attribute of `_blank`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('profile-link');
|
||||
assert(!!el && el.target === '_blank')
|
||||
```
|
||||
|
||||
Your portfolio should use at least one media query.
|
||||
|
||||
```js
|
||||
const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
|
||||
const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
|
||||
assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
|
||||
```
|
||||
|
||||
Your `#navbar` element should always be at the top of the viewport.
|
||||
|
||||
```js
|
||||
(async () => {
|
||||
const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
|
||||
|
||||
const navbar = document.getElementById('navbar');
|
||||
assert.approximately(
|
||||
navbar?.getBoundingClientRect().top,
|
||||
0,
|
||||
15,
|
||||
"Navbar's parent should be body and it should be at the top of " +
|
||||
'the viewport '
|
||||
);
|
||||
|
||||
window.scroll(0, 500);
|
||||
|
||||
await timeout(1);
|
||||
|
||||
assert.approximately(
|
||||
navbar?.getBoundingClientRect().top,
|
||||
0,
|
||||
15,
|
||||
'Navbar should be at the top of the viewport even after ' +
|
||||
'scrolling '
|
||||
);
|
||||
window.scroll(0, 0);
|
||||
})();
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>Personal Portfolio</title>
|
||||
</head>
|
||||
<body>
|
||||
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
|
||||
<!--Font Reference-->
|
||||
<nav id="navbar">
|
||||
<a href="#projects">Projects</a> |
|
||||
<a href="#contact">Contact me</a>
|
||||
</nav>
|
||||
<main>
|
||||
<section id="welcome-section">
|
||||
<br>
|
||||
<h1>It's me!</h1>
|
||||
<img src="https://s.cdpn.io/profiles/user/4369153/512.jpg?1587151780" height=100px>
|
||||
<h2>Naomi Carrigan</h2>
|
||||
<p>Welcome to my portfolio page!</p>
|
||||
</section><hr>
|
||||
<section id="projects">
|
||||
<h1>Projects</h1>
|
||||
<h2><a href="https://codepen.io/nhcarrigan">Here's what I've worked on!</a></h2>
|
||||
<p class="project-tile">
|
||||
<iframe height="265" style="width: 25;" scrolling="no" title="Algebraic Concepts" src="https://codepen.io/nhcarrigan/embed/preview/NWGrWBR?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/nhcarrigan/pen/NWGrWBR'>Algebraic Concepts</a> by Naomi Carrigan
|
||||
(<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
<iframe height="265" style="width: 25;" scrolling="no" title="Pokemon Daycare Service" src="https://codepen.io/nhcarrigan/embed/preview/mdeEbeq?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/nhcarrigan/pen/mdeEbeq'>Pokemon Daycare Service</a> by Naomi Carrigan
|
||||
(<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
<iframe height="265" style="width: 25;" scrolling="no" title="Togepi Fan Club" src="https://codepen.io/nhcarrigan/embed/preview/vYNGoBE?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/nhcarrigan/pen/vYNGoBE'>Togepi Fan Club</a> by Naomi Carrigan
|
||||
(<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
<iframe height="265" style="width: 25;" scrolling="no" title="Togepi" src="https://codepen.io/nhcarrigan/embed/preview/yLYOWEN?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/nhcarrigan/pen/yLYOWEN'>Togepi</a> by Naomi Carrigan
|
||||
(<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
</p></section><hr>
|
||||
<section id="contact">
|
||||
<h1>Contact me!</h1>
|
||||
<h2>Use the links below to get in touch.</h2>
|
||||
<p><a href="https://www.freecodecamp.org/nhcarrigan" id="profile-link" target="_blank" rel="noopener noreferrer">FreeCodeCamp.org</a> | <a href="https://github.com/nhcarrigan" id="github-link" target="_blank" rel="noopener noreferrer">GitHub</a> | <a href="https://www.facebook.com/nhcarrigan" id="facebook-link" target="_blank" rel="noopener noreferrer">Facebook</a> | <a href="https://www.linkedin.com/in/Naomi-l-carrigan/" id="linkedin-link" target="_blank" rel="noopener noreferrer">LinkedIn</a>
|
||||
</section>
|
||||
<footer><a href="../">Return to Project List</a> | <a href="https://www.nhcarrigan.com">Return to HomePage</a></footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
nav{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font-size: 24pt;
|
||||
top: 0%;
|
||||
right: 5px;
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
@media (max-width: 500px){
|
||||
nav{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
a{
|
||||
color: #ffffff;
|
||||
}
|
||||
main{
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
font-family:Pacifico
|
||||
}
|
||||
h1{
|
||||
font-size: 48pt;
|
||||
}
|
||||
h2{
|
||||
font-size: 24pt;
|
||||
}
|
||||
p{
|
||||
font-size: 12pt;
|
||||
}
|
||||
#welcome-section{
|
||||
background-color:#251a4a;
|
||||
color: #FFFFFF;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
#projects{
|
||||
background-color: #060a9c;
|
||||
color: #ffffff;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
#contact{
|
||||
background-color: #03300b;
|
||||
color: #ffffff;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
```
|
||||
@@ -1,470 +0,0 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b04
|
||||
title: أنشئ صفحة لعرض المنتج
|
||||
challengeType: 14
|
||||
forumTopicId: 301144
|
||||
dashedName: build-a-product-landing-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build an app that is functionally similar to <a href="https://product-landing-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://product-landing-page.freecodecamp.rocks</a>
|
||||
|
||||
**User Stories:**
|
||||
|
||||
1. Your product landing page should have a `header` element with a corresponding `id="header"`
|
||||
1. You can see an image within the `header` element with a corresponding `id="header-img"` (A logo would make a good image here)
|
||||
1. Within the `#header` element, you can see a `nav` element with a corresponding `id="nav-bar"`
|
||||
1. You can see at least three clickable elements inside the `nav` element, each with the class `nav-link`
|
||||
1. When you click a `.nav-link` button in the `nav` element, you are taken to the corresponding section of the landing page
|
||||
1. You can watch an embedded product video with `id="video"`
|
||||
1. Your landing page has a `form` element with a corresponding `id="form"`
|
||||
1. Within the form, there is an `input` field with `id="email"` where you can enter an email address
|
||||
1. The `#email` input field should have placeholder text to let users know what the field is for
|
||||
1. The `#email` input field uses HTML5 validation to confirm that the entered text is an email address
|
||||
1. Within the form, there is a submit `input` with a corresponding `id="submit"`
|
||||
1. When you click the `#submit` element, the email is submitted to a static page (use this mock URL: `https://www.freecodecamp.com/email-submit`)
|
||||
1. The navbar should always be at the top of the viewport
|
||||
1. Your product landing page should have at least one media query
|
||||
1. Your product landing page should utilize CSS flexbox at least once
|
||||
|
||||
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
|
||||
|
||||
**Note:** Be sure to add `<link rel="stylesheet" href="styles.css">` in your HTML to link your stylesheet and apply your CSS
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `header` element with an `id` of `header`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('header')
|
||||
assert(!!el && el.tagName === 'HEADER')
|
||||
```
|
||||
|
||||
You should have an `img` element with an `id` of `header-img`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('header-img')
|
||||
assert(!!el && el.tagName === 'IMG')
|
||||
```
|
||||
|
||||
Your `#header-img` should be a descendant of the `#header`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#header #header-img')
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Your `#header-img` should have a `src` attribute.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('header-img')
|
||||
assert(!!el && !!el.src)
|
||||
```
|
||||
|
||||
Your `#header-img`’s `src` value should be a valid URL (starts with `http`).
|
||||
|
||||
```js
|
||||
const el = document.getElementById('header-img')
|
||||
assert(!!el && /^http/.test(el.src))
|
||||
```
|
||||
|
||||
You should have a `nav` element with an `id` of `nav-bar`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('nav-bar')
|
||||
assert(!!el && el.tagName === 'NAV')
|
||||
```
|
||||
|
||||
Your `#nav-bar` should be a descendant of the `#header`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#header #nav-bar')
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
You should have at least 3 `.nav-link` elements within the `#nav-bar`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#nav-bar .nav-link')
|
||||
assert(els.length >= 3)
|
||||
```
|
||||
|
||||
Each `.nav-link` element should have an `href` attribute.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.nav-link')
|
||||
els.forEach(el => {
|
||||
if (!el.href) assert(false)
|
||||
})
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Each `.nav-link` element should link to a corresponding element on the landing page (has an `href` with a value of another element's id. e.g. `#footer`).
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.nav-link')
|
||||
els.forEach(el => {
|
||||
const linkDestination = el.getAttribute('href').slice(1)
|
||||
if (!document.getElementById(linkDestination)) assert(false)
|
||||
})
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
You should have a `video` or `iframe` element with an `id` of `video`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('video')
|
||||
assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME'))
|
||||
```
|
||||
|
||||
Your `#video` should have a `src` attribute.
|
||||
|
||||
```js
|
||||
let el = document.getElementById('video')
|
||||
const sourceNode = el.children;
|
||||
let sourceElement = null;
|
||||
if (sourceNode.length) {
|
||||
sourceElement = [...video.children].filter(el => el.localName === 'source')[0];
|
||||
}
|
||||
if (sourceElement) {
|
||||
el = sourceElement;
|
||||
}
|
||||
assert(el.hasAttribute('src'));
|
||||
```
|
||||
|
||||
You should have a `form` element with an `id` of `form`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('form')
|
||||
assert(!!el && el.tagName === 'FORM')
|
||||
```
|
||||
|
||||
You should have an `input` element with an `id` of `email`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
Your `#email` should be a descendant of the `#form`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#form #email')
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Your `#email` should have the `placeholder` attribute with placeholder text.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
Your `#email` should use HTML5 validation by setting its `type` to `email`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.type === 'email')
|
||||
```
|
||||
|
||||
You should have an `input` element with an `id` of `submit`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
Your `#submit` should be a descendant of the `#form`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#form #submit')
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Your `#submit` should have a `type` of `submit`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
assert(!!el && el.type === 'submit')
|
||||
```
|
||||
|
||||
Your `#form` should have an `action` attribute of `https://www.freecodecamp.com/email-submit`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('form')
|
||||
assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit')
|
||||
```
|
||||
|
||||
Your `#email` should have a `name` attribute of `email`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.name === 'email')
|
||||
```
|
||||
|
||||
Your `#nav-bar` should always be at the top of the viewport.
|
||||
|
||||
```js
|
||||
(async () => {
|
||||
const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
|
||||
|
||||
const header = document.getElementById('header');
|
||||
const headerChildren = header.children;
|
||||
const navbarCandidates = [header, ...headerChildren];
|
||||
|
||||
// Return smallest top position of all navbar candidates
|
||||
const getNavbarPosition = (candidates = []) => {
|
||||
return candidates.reduce(
|
||||
(min, candidate) =>
|
||||
Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)),
|
||||
Infinity
|
||||
);
|
||||
};
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the viewport '
|
||||
);
|
||||
|
||||
window.scroll(0, 500);
|
||||
await timeout(1);
|
||||
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the ' +
|
||||
'viewport even after scrolling '
|
||||
);
|
||||
|
||||
window.scroll(0, 0);
|
||||
})();
|
||||
```
|
||||
|
||||
Your Product Landing Page should use at least one media query.
|
||||
|
||||
```js
|
||||
const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
|
||||
const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
|
||||
assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
|
||||
```
|
||||
|
||||
Your Product Landing Page should use CSS Flexbox at least once.
|
||||
|
||||
```js
|
||||
const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
|
||||
const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
|
||||
const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
|
||||
const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
|
||||
const usesFlex = cssRules.find(rule => hasFlex(rule))
|
||||
const usesFlexMedia = mediaRules.find(mediaRule => {
|
||||
return [...mediaRule.cssRules].find(rule => hasFlex(rule))
|
||||
})
|
||||
assert(usesFlex || usesFlexMedia)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>Product Landing Page</title>
|
||||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
<nav id="nav-bar">
|
||||
<img
|
||||
id="header-img"
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/3/39/Pokeball.PNG"
|
||||
max-height="50px"
|
||||
/>
|
||||
<a href="#Features" class="nav-link">Features</a> |
|
||||
<a href="#Video" class="nav-link">See our facility!</a> |
|
||||
<a href="#Pricing" class="nav-link">Purchase</a>
|
||||
<hr />
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<h1>
|
||||
Pokemon Daycare Service
|
||||
</h1>
|
||||
<section id="Features">
|
||||
<h2>What we offer</h2>
|
||||
<div class="flex-here">
|
||||
<div class="flex-left">
|
||||
<img
|
||||
id="bullet"
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/3/39/Pokeball.PNG"
|
||||
max-height="25px"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-right">Guaranteed friendly and loving staff!</div>
|
||||
</div>
|
||||
<div class="flex-here">
|
||||
<div class="flex-left">
|
||||
<img
|
||||
id="bullet"
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/3/39/Pokeball.PNG"
|
||||
max-height="25px"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-right">
|
||||
Comfortable environment for Pokemon to explore and play!
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-here">
|
||||
<div class="flex-left">
|
||||
<img
|
||||
id="bullet"
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/3/39/Pokeball.PNG"
|
||||
max-height="25px"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-right">
|
||||
Multiple membership plans to fit your lifestyle!
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="Video">
|
||||
<h2>Check us out!</h2>
|
||||
A sneak peek into our facility:
|
||||
<br />
|
||||
<iframe
|
||||
id="video"
|
||||
width="520"
|
||||
height="347"
|
||||
src="https://www.youtube.com/embed/Nw-ksH2r6AQ"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
alt="A video tour of our facility"
|
||||
>
|
||||
</iframe>
|
||||
</section>
|
||||
<section id="Pricing">
|
||||
<h2>Membership Plans</h2>
|
||||
<div class="flex-mem">
|
||||
<div class="flex-mem-box">
|
||||
<font size="+2">Basic Membership</font><br />
|
||||
<ul>
|
||||
<li>One Pokemon</li>
|
||||
<li>Food and berries provided</li>
|
||||
</ul>
|
||||
<em>$9.99/month</em>
|
||||
</div>
|
||||
<div class="flex-mem-box">
|
||||
<font size="+2">Silver Membership</font><br />
|
||||
<ul>
|
||||
<li>Up to Three Pokemon</li>
|
||||
<li>Food and berries provided</li>
|
||||
<li>Grooming and accessories included</li>
|
||||
</ul>
|
||||
<em>$19.99/month</em>
|
||||
</div>
|
||||
<div class="flex-mem-box">
|
||||
<font size="+2">Gold Membership</font><br />
|
||||
<ul>
|
||||
<li>Up to six Pokemon!</li>
|
||||
<li>Food and berries provided</li>
|
||||
<li>Grooming and accessories included</li>
|
||||
<li>Personal training for each Pokemon</li>
|
||||
<li>Breeding and egg hatching</li>
|
||||
</ul>
|
||||
<em>$29.99/month</em>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<form id="form" action="https://www.freecodecamp.com/email-submit">
|
||||
<p>Sign up for our newsletter!</p>
|
||||
<label for="email"><p>Email:</p><input name="email" id="email" type="email" placeholder="johnsmith@email.com" required></label>
|
||||
<input type="submit" id="submit">
|
||||
</form>
|
||||
<footer>
|
||||
<a href="../">Return to Project List</a> |
|
||||
<a href="https://www.nhcarrigan.com">Return to HomePage</a>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: #3a3240;
|
||||
color: white;
|
||||
}
|
||||
main {
|
||||
max-width: 750px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
input {
|
||||
background-color: #92869c;
|
||||
}
|
||||
a:not(.nav-link) {
|
||||
color: white;
|
||||
}
|
||||
#header-img {
|
||||
max-height: 25px;
|
||||
}
|
||||
#nav-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
top: 0%;
|
||||
background-color: #92869c;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
}
|
||||
#bullet {
|
||||
max-height: 25px;
|
||||
}
|
||||
.flex-here {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.flex-left {
|
||||
height: 25px;
|
||||
}
|
||||
.flex-mem {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.flex-mem-box {
|
||||
background-color: #92869c;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
color: black;
|
||||
}
|
||||
@media (max-width: 350px) {
|
||||
#video {
|
||||
width: 300;
|
||||
height: 200;
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -1,518 +0,0 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b03
|
||||
title: Build a Survey Form
|
||||
challengeType: 14
|
||||
forumTopicId: 301145
|
||||
dashedName: build-a-survey-form
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build an app that is functionally similar to <a href="https://survey-form.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://survey-form.freecodecamp.rocks</a>
|
||||
|
||||
**User Stories:**
|
||||
|
||||
1. You should have a page title in an `h1` element with an `id` of `title`
|
||||
1. You should have a short explanation in a `p` element with an `id` of `description`
|
||||
1. You should have a `form` element with an `id` of `survey-form`
|
||||
1. Inside the form element, you are **required** to enter your name in an `input` field that has an `id` of `name` and a `type` of `text`
|
||||
1. Inside the form element, you are **required** to enter your email in an `input` field that has an `id` of `email`
|
||||
1. If you enter an email that is not formatted correctly, you will see an HTML5 validation error
|
||||
1. Inside the form, you can enter a number in an `input` field that has an `id` of `number`
|
||||
1. The number input should not accept non-numbers, either by preventing you from typing them or by showing an HTML5 validation error (depending on your browser).
|
||||
1. If you enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, you will see an HTML5 validation error
|
||||
1. For the name, email, and number input fields, you can see corresponding `label` elements in the form, that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"`
|
||||
1. For the name, email, and number input fields, you can see placeholder text that gives a description or instructions for each field
|
||||
1. Inside the form element, you should have a `select` dropdown element with an `id` of `dropdown` and at least two options to choose from
|
||||
1. Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the `name` attribute
|
||||
1. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a `value` attribute
|
||||
1. Inside the form element, you are presented with a `textarea` for additional comments
|
||||
1. Inside the form element, you are presented with a button with `id` of `submit` to submit all the inputs
|
||||
|
||||
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
|
||||
|
||||
**Note:** Be sure to add `<link rel="stylesheet" href="styles.css">` in your HTML to link your stylesheet and apply your CSS
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `h1` element with an `id` of `title`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el && el.tagName === 'H1')
|
||||
```
|
||||
|
||||
Your `#title` should not be empty.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
You should have a `p` element with an `id` of `description`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('description')
|
||||
assert(!!el && el.tagName === 'P')
|
||||
```
|
||||
|
||||
Your `#description` should not be empty.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('description')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
You should have a `form` element with an `id` of `survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('survey-form')
|
||||
assert(!!el && el.tagName === 'FORM')
|
||||
```
|
||||
|
||||
You should have an `input` element with an `id` of `name`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
Your `#name` should have a `type` of `text`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.type === 'text')
|
||||
```
|
||||
|
||||
Your `#name` should require input.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.required)
|
||||
```
|
||||
|
||||
Your `#name` should be a descendant of `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #name')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have an `input` element with an `id` of `email`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
Your `#email` should have a `type` of `email`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.type === 'email')
|
||||
```
|
||||
|
||||
Your `#email` should require input.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.required)
|
||||
```
|
||||
|
||||
Your `#email` should be a descendant of `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #email')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have an `input` element with an `id` of `number`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
Your `#number` should be a descendant of `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #number')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#number` should have a `type` of `number`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.type === 'number')
|
||||
```
|
||||
|
||||
Your `#number` should have a `min` attribute with a numeric value.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.min && isFinite(el.min))
|
||||
```
|
||||
|
||||
Your `#number` should have a `max` attribute with a numeric value.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.max && isFinite(el.max))
|
||||
```
|
||||
|
||||
You should have a `label` element with an `id` of `name-label`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
You should have a `label` element with an `id` of `email-label`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
You should have a `label` element with an `id` of `number-label`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
Your `#name-label` should contain text that describes the input.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Your `#email-label` should contain text that describes the input.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Your `#number-label` should contain text that describes the input.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Your `#name-label` should be a descendant of `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #name-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#email-label` should be a descendant of `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #email-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#number-label` should be a descendant of `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #number-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#name` should have a `placeholder` attribute and value.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
Your `#email` should have a `placeholder` attribute and value.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
Your `#number` should have a `placeholder` attribute and value.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
You should have a `select` field with an `id` of `dropdown`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('dropdown')
|
||||
assert(!!el && el.tagName === 'SELECT')
|
||||
```
|
||||
|
||||
Your `#dropdown` should have at least two selectable (not disabled) `option` elements.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#dropdown option:not([disabled])')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
Your `#dropdown` should be a descendant of `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #dropdown')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have at least two `input` elements with a `type` of `radio` (radio buttons).
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('input[type="radio"]')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
You should have at least two radio buttons that are descendants of `#survey-form`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#survey-form input[type="radio"]')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
All your radio buttons should have a `value` attribute and value.
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('input[type="radio"]')
|
||||
const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])')
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
All your radio buttons should have a `name` attribute and value.
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('input[type="radio"]')
|
||||
const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])')
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
Every radio button group should have at least 2 radio buttons.
|
||||
|
||||
```js
|
||||
const radioButtons = document.querySelectorAll('input[type="radio"]');
|
||||
const groups = {}
|
||||
|
||||
if (radioButtons) {
|
||||
radioButtons.forEach(el => {
|
||||
if (!groups[el.name]) groups[el.name] = []
|
||||
groups[el.name].push(el)
|
||||
})
|
||||
}
|
||||
|
||||
const groupKeys = Object.keys(groups)
|
||||
|
||||
groupKeys.forEach(key => {
|
||||
if (groups[key].length < 2) assert(false)
|
||||
})
|
||||
|
||||
assert(groupKeys.length > 0)
|
||||
```
|
||||
|
||||
You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
All your checkboxes inside `#survey-form` should have a `value` attribute and value.
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
|
||||
const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])')
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
You should have at least one `textarea` element that is a descendant of `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form textarea')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have an `input` or `button` element with an `id` of `submit`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))
|
||||
```
|
||||
|
||||
Your `#submit` should have a `type` of `submit`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
assert(!!el && el.type === 'submit')
|
||||
```
|
||||
|
||||
Your `#submit` should be a descendant of `#survey-form`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #submit')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>Survey Form</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Survey Form</h1>
|
||||
<p>The card below was built as a sample survey form for freeCodeCamp.</p>
|
||||
<main id="main">
|
||||
<h1 id="title">Join the Togepi Fan Club!</h1>
|
||||
<p id="description">
|
||||
Enter your information here to receive updates about club activities,
|
||||
our monthly newsletter, and other email communications.
|
||||
</p>
|
||||
<form id="survey-form" action="#">
|
||||
<label for="name" id="name-label"
|
||||
><p>Name:</p>
|
||||
<input type="text" id="name" placeholder="e.g. John Smith" required />
|
||||
</label>
|
||||
<label for="email" id="email-label"
|
||||
><p>Email:</p>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
placeholder="e.g. john.smith@email.com"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label for="age" id="number-label"
|
||||
><p>Age<em>(optional)</em>:</p>
|
||||
<input
|
||||
type="number"
|
||||
id="number"
|
||||
placeholder="e.g. 19"
|
||||
min="18"
|
||||
max="99"
|
||||
/>
|
||||
</label>
|
||||
<label for="interest" id="interest-label"
|
||||
><p>What are you most interested in?</p>
|
||||
<select id="dropdown">
|
||||
<option selected disabled hidden></option>
|
||||
<option id="battles">Battling</option>
|
||||
<option id="breeding">Breeding</option>
|
||||
<option id="catching">Completing my Pokedex</option>
|
||||
<option id="exploring">Exploring new regions</option>
|
||||
</select>
|
||||
</label>
|
||||
<p>Who is your favourite Pokemon?</p>
|
||||
<label for="togepi">
|
||||
<input
|
||||
id="togepi"
|
||||
type="radio"
|
||||
name="favorite"
|
||||
value="togepi"
|
||||
/>Togepi!
|
||||
</label>
|
||||
<label for="pikachu">
|
||||
<input
|
||||
id="pikachu"
|
||||
type="radio"
|
||||
name="favorite"
|
||||
value="pikachu"
|
||||
/>Pikachu
|
||||
</label>
|
||||
<label for="other">
|
||||
<input id="other" type="radio" name="favorite" value="other" />Other
|
||||
</label>
|
||||
<p>Which communications do you want to receive?</p>
|
||||
<label for="newsletter">
|
||||
<input
|
||||
id="newsletter"
|
||||
type="checkbox"
|
||||
name="communications"
|
||||
value="newsletter"
|
||||
/>Newsletter
|
||||
</label>
|
||||
<label for="events">
|
||||
<input
|
||||
id="events"
|
||||
type="checkbox"
|
||||
name="communications"
|
||||
value="events"
|
||||
/>Event updates
|
||||
</label>
|
||||
<label for="updates">
|
||||
<input
|
||||
id="updates"
|
||||
type="checkbox"
|
||||
name="communications"
|
||||
value="updates"
|
||||
/>Club updates
|
||||
</label>
|
||||
<p>Any other information you would like to share?</p>
|
||||
<textarea id="additional-information" rows="4" cols="50">
|
||||
You can provide comments, suggestions, or feedback here.</textarea
|
||||
>
|
||||
<p>
|
||||
<em
|
||||
>Please note: This form is a proof of concept. Submitting the form
|
||||
will not actually transmit your data.</em
|
||||
>
|
||||
</p>
|
||||
<button type="Submit" id="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
<footer>
|
||||
<a href="../">Return to Project List</a> |
|
||||
<a href="https://www.nhcarrigan.com">Return to HomePage</a>
|
||||
</footer>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
main {
|
||||
text-align: center;
|
||||
background-color: #92869c;
|
||||
background-blend-mode: lighten;
|
||||
max-width: 500px;
|
||||
margin: 20px auto;
|
||||
border-radius: 50px;
|
||||
box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
|
||||
color: black;
|
||||
}
|
||||
body {
|
||||
text-align: center;
|
||||
background: #3a3240;
|
||||
color: white;
|
||||
}
|
||||
input, textarea, select, button {
|
||||
background: #3a3240;
|
||||
color: white;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
@@ -1,529 +0,0 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b05
|
||||
title: Build a Technical Documentation Page
|
||||
challengeType: 14
|
||||
forumTopicId: 301146
|
||||
dashedName: build-a-technical-documentation-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build an app that is functionally similar to <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://technical-documentation-page.freecodecamp.rocks</a>
|
||||
|
||||
**User Stories:**
|
||||
|
||||
1. You can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation)
|
||||
1. Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. There should be a minimum of five
|
||||
1. The first element within each `.main-section` should be a `header` element, which contains text that describes the topic of that section.
|
||||
1. Each `section` element with the class of `main-section` should also have an `id` that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`)
|
||||
1. The `.main-section` elements should contain at least ten `p` elements total (not each)
|
||||
1. The `.main-section` elements should contain at least five `code` elements total (not each)
|
||||
1. The `.main-section` elements should contain at least five `li` items total (not each)
|
||||
1. You can see a `nav` element with a corresponding `id="navbar"`
|
||||
1. The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation
|
||||
1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section`
|
||||
1. The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar
|
||||
1. Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world")
|
||||
1. When you click on a navbar element, the page should navigate to the corresponding section of the `#main-doc` element (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id, and contains the corresponding header)
|
||||
1. On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user
|
||||
1. Your technical documentation should use at least one media query
|
||||
|
||||
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
|
||||
|
||||
**Note:** Be sure to add `<link rel="stylesheet" href="styles.css">` in your HTML to link your stylesheet and apply your CSS
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `main` element with an `id` of `main-doc`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('main-doc')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have at least five `section` elements with a class of `main-section`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#main-doc section')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
All of your `.main-section` elements should be `section` elements.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
els.forEach(el => {
|
||||
if (el.tagName !== 'SECTION') assert(false)
|
||||
})
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
You should have at least five `.main-section` elements that are descendants of `#main-doc`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#main-doc .main-section')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
The first child of each `.main-section` should be a `header` element.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
els.forEach(el => {
|
||||
if(el.firstElementChild?.tagName !== 'HEADER') assert(false)
|
||||
})
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
None of your `header` elements should be empty.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('header')
|
||||
els.forEach(el => {
|
||||
if (el.innerText?.length <= 0) assert(false)
|
||||
})
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
All of your `.main-section` elements should have an `id`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
els.forEach(el => {
|
||||
if (!el.id || el.id === '') assert(false)
|
||||
})
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
Each `.main-section` should have an `id` that matches the text of its first child, having any spaces in the child's text replaced with underscores (`_`) for the id's.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section')
|
||||
els.forEach(el => {
|
||||
const text = el.firstElementChild?.innerText?.replaceAll(' ', '_')
|
||||
if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false)
|
||||
})
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
You should have at least 10 `p` elements (total) within your `.main-section` elements.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section p')
|
||||
assert(els.length >= 10)
|
||||
```
|
||||
|
||||
You should have at least five `code` elements that are descendants of `.main-section` elements.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section code')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
You should have at least five `li` elements that are descendants of `.main-section` elements.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.main-section li')
|
||||
assert(els.length >= 5)
|
||||
```
|
||||
|
||||
You should have a `nav` element with an `id` of `navbar`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('navbar')
|
||||
assert(!!el && el.tagName === 'NAV')
|
||||
```
|
||||
|
||||
Your `#navbar` should have exactly one `header` element within it.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#navbar header')
|
||||
assert(els.length === 1)
|
||||
```
|
||||
|
||||
You should have at least one `a` element with a class of `nav-link`.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('a.nav-link')
|
||||
assert(els.length >= 1)
|
||||
```
|
||||
|
||||
All of your `.nav-link` elements should be anchor (`a`) elements.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('.nav-link')
|
||||
els.forEach(el => {
|
||||
if (el.tagName !== 'A') assert(false)
|
||||
})
|
||||
assert(els.length > 0)
|
||||
```
|
||||
|
||||
All of your `.nav-link` elements should be in the `#navbar`.
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('.nav-link')
|
||||
const els2 = document.querySelectorAll('#navbar .nav-link')
|
||||
assert(els2.length > 0 && els1.length === els2.length)
|
||||
```
|
||||
|
||||
You should have the same number of `.nav-link` and `.main-section` elements.
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('.main-section')
|
||||
const els2 = document.querySelectorAll('.nav-link')
|
||||
assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
|
||||
```
|
||||
|
||||
The `header` element in the `#navbar` should come before any link (`a`) elements also in the `#navbar`.
|
||||
|
||||
```js
|
||||
const navLinks = document.querySelectorAll('#navbar a.nav-link');
|
||||
const header = document.querySelector('#navbar header');
|
||||
navLinks.forEach((navLink) => {
|
||||
if (
|
||||
(
|
||||
header.compareDocumentPosition(navLink) &
|
||||
Node.DOCUMENT_POSITION_PRECEDING
|
||||
)
|
||||
) assert(false)
|
||||
});
|
||||
assert(!!header)
|
||||
```
|
||||
|
||||
Each `.nav-link` should have text that corresponds to the `header` text of its related `section` (e.g. if you have a "Hello world" section/header, your `#navbar` should have a `.nav-link` which has the text "Hello world").
|
||||
|
||||
```js
|
||||
const headerText = Array.from(document.querySelectorAll('.main-section')).map(el =>
|
||||
el.firstElementChild?.innerText?.trim().toUpperCase()
|
||||
)
|
||||
const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el =>
|
||||
el.innerText?.trim().toUpperCase()
|
||||
)
|
||||
const remainder = headerText.filter(str => linkText.indexOf(str) === -1)
|
||||
assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0)
|
||||
```
|
||||
|
||||
Each `.nav-link` should have an `href` attribute that links to its corresponding `.main-section` (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id).
|
||||
|
||||
```js
|
||||
const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href'))
|
||||
const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id)
|
||||
const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1)
|
||||
assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0)
|
||||
```
|
||||
|
||||
Your `#navbar` should always be on the left edge of the window.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('navbar')
|
||||
const left1 = el?.offsetLeft
|
||||
const left2 = el?.offsetLeft
|
||||
assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15)
|
||||
```
|
||||
|
||||
Your Technical Documentation project should use at least one media query.
|
||||
|
||||
```js
|
||||
const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
|
||||
const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
|
||||
assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>Technical Documentation Page</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav id="navbar">
|
||||
<header><br />Algebraic Concepts</header>
|
||||
<hr />
|
||||
<a href="#introduction" class="nav-link">Introduction</a><br />
|
||||
<hr />
|
||||
<a href="#definitions" class="nav-link">Definitions</a><br />
|
||||
<hr />
|
||||
<a href="#examples" class="nav-link">Examples</a><br />
|
||||
<hr />
|
||||
<a href="#solving_equations" class="nav-link">Solving Equations</a><br />
|
||||
<hr />
|
||||
<a href="#solving_equations_ii" class="nav-link">Solving Equations II</a
|
||||
><br />
|
||||
<hr />
|
||||
<a href="#solving_equations_iii" class="nav-link">Solving Equations III</a
|
||||
><br />
|
||||
<hr />
|
||||
<a href="#system_of_equations" class="nav-link">System of Equations</a
|
||||
><br />
|
||||
<hr />
|
||||
<a href="#try_it_yourself!" class="nav-link">Try it Yourself!</a><br />
|
||||
<hr />
|
||||
<a href="#more_information" class="nav-link">More Information</a><br />
|
||||
</nav>
|
||||
<main id="main-doc">
|
||||
<section class="main-section" id="introduction">
|
||||
<header>Introduction</header>
|
||||
<p>
|
||||
Welcome to a basic introduction of algebra. In this tutorial, we will
|
||||
review some of the more common algebraic concepts.
|
||||
</p>
|
||||
</section>
|
||||
<section class="main-section" id="definitions">
|
||||
<header>Definitions</header>
|
||||
<p>
|
||||
To start with, let's define some of the more common terms used in
|
||||
algebra:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<b>Variable:</b> A variable is an unknown value, usually represented
|
||||
by a letter.
|
||||
</li>
|
||||
<li>
|
||||
<b>Expression:</b> Essentially a mathematical object. For the
|
||||
purpose of this tutorial, an expression is one part of an equation.
|
||||
</li>
|
||||
<li>
|
||||
<b>Equation:</b> An equation is a mathematical argument in which two
|
||||
expressions result in the same value.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="main-section" id="examples">
|
||||
<header>Examples</header>
|
||||
<p>
|
||||
Sometimes it is easier to understand the definitions when you have a
|
||||
physical example to look at. Here is an example of the above terms.<br /><br />
|
||||
<code>x + 5 = 12 </code><br /><br />
|
||||
In this above example, we have:
|
||||
</p>
|
||||
<ul>
|
||||
<li><b>Variable:</b> The variable in the example is "x".</li>
|
||||
<li>
|
||||
<b>Expression:</b> There are two expressions in this example. They
|
||||
are "x+5" and "12".
|
||||
</li>
|
||||
<li>
|
||||
<b>Equation:</b> The entire example, "x+5=12", is an equation.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="main-section" id="solving_equations">
|
||||
<header>Solving Equations</header>
|
||||
<p>
|
||||
The primary use for algebra is to determine an unknown value, the
|
||||
"variable", with the information provided. Continuing to use our
|
||||
example from above, we can find the value of the variable "x".<br /><br />
|
||||
<code>x + 5 = 12 </code><br /><br />
|
||||
In an equation, both sides result in the same value. So you can
|
||||
manipulate the two expressions however you need, as long as you
|
||||
perform the same operation (or change) to each side. You do this
|
||||
because the goal when solving an equation is to
|
||||
<b
|
||||
>get the variable into its own expression, or by itself on one side
|
||||
of the = sign.</b
|
||||
><br />For this example, we want to remove the "+5" so the "x" is
|
||||
alone. To do this, we can <em>subtract 5</em>, because subtraction is
|
||||
the opposite operation to addition. But remember, we have to perform
|
||||
the same operation to both sides of the equation. Now our equation
|
||||
looks like this.<br /><br />
|
||||
<code>x + 5 - 5 = 12 - 5</code><br /><br />
|
||||
The equation looks like a mess right now, because we haven't completed
|
||||
the operations. We can <b>simplify</b> this equation to make it easier
|
||||
to read by performing the operations "5-5" and "12-5". The result
|
||||
is:<br /><br />
|
||||
<code>x = 7</code><br /><br />
|
||||
We now have our solution to this equation!
|
||||
</p>
|
||||
</section>
|
||||
<section class="main-section" id="solving_equations_ii">
|
||||
<header>Solving Equations II</header>
|
||||
<p>
|
||||
Let us look at a slightly more challenging equation.<br /><br />
|
||||
<code>3x + 4 = 13</code><br /><br />
|
||||
Again we can start with subtraction. In this case, we want to subtract
|
||||
4 from each side of the equation. We will also go ahead and simplify
|
||||
with each step. So now we have:<br /><br />
|
||||
<code>3x = 9</code><br /><br />
|
||||
"3x" translates to "3*x", where the "*" symbol indicates
|
||||
multiplication. We use the "*" to avoid confusion, as the "x" is now a
|
||||
variable instead of a multiplication symbol. The opposite operation
|
||||
for multiplication is division, so we need to
|
||||
<b>divide each expression by 3</b>.<br /><br />
|
||||
<code>x = 3</code><br /><br />
|
||||
And now we have our solution!
|
||||
</p>
|
||||
</section>
|
||||
<section class="main-section" id="solving_equations_iii">
|
||||
<header>Solving Equations III</header>
|
||||
<p>
|
||||
Now we are getting in to more complex operations. Here is another
|
||||
equation for us to look at:<br /><br />
|
||||
<code>x^2 - 8 = 8</code><br /><br />
|
||||
Our very first step will be to <b>add</b> 8 to each side. This is
|
||||
different from our previous examples, where we had to subtract. But
|
||||
remember, our goal is to get the variable alone by performing opposite
|
||||
operations.<br /><br />
|
||||
<code>x^2 = 16</code><br /><br />
|
||||
But what does the "^2" mean? The "^" symbol is used to denote
|
||||
exponents in situations where superscript is not available. When
|
||||
superscript <b>is</b> available, you would see it as x<sup>2</sup>.
|
||||
For the sake of this project, however, we will use the "^" symbol.<br />
|
||||
An exponent tells you how many times the base (in our case, "x") is
|
||||
multiplied by itself. So, "x^2" would be the same as "x*x". Now the
|
||||
opposite function of multiplication is division, but we would have to
|
||||
<b>divide both sides by "x"</b>. We do not want to do this, as that
|
||||
would put an "x" on the other side of the equation. So instead, we
|
||||
need to use the root operation! For an exponent of "2", we call this
|
||||
the "square root" and denote it with "√". Our equation is now:
|
||||
<br /><br />
|
||||
<code>x = √9</code><br /><br />
|
||||
Performing a root operation by hand can be a tedious process, so we
|
||||
recommend using a calculator when necessary. However, we are lucky in
|
||||
that "9" is a
|
||||
<a href="https://en.wikipedia.org/wiki/Square_number"
|
||||
>perfect square</a
|
||||
>, so we do not need to calculate anything. Instead, we find our
|
||||
answer to be:<br /><br />
|
||||
<code>x = 3</code>
|
||||
</p>
|
||||
</section>
|
||||
<section class="main-section" id="system_of_equations">
|
||||
<header>System of Equations</header>
|
||||
<p>
|
||||
As you explore your algebra studies further, you may start to run
|
||||
across equations with more than one variable. The first such equations
|
||||
will likely look like:<br /><br />
|
||||
<code>y = 3x</code><br /><br />
|
||||
An equation like this does <b>not have one single solution</b>.
|
||||
Rather, there are a series of values for which the equation is true.
|
||||
For example, if "x=3" and "y=9", the equation is true. These equations
|
||||
are usually used to plot a graph. <br />
|
||||
Getting more complicated, though, you may be given a <b>pair</b> of
|
||||
equations. This is called a "system of equations", and CAN be solved.
|
||||
Let's look at how we do this! Consider the following system of
|
||||
equations:<br /><br />
|
||||
<code>y = 3x | y - 6 = x</code>
|
||||
A system of equations IS solvable, but it is a multi-step process. To
|
||||
get started, we need to chose a variable we are solving for. Let's
|
||||
solve for "x" first. From the second equation, we know that "x" equals
|
||||
"y - 6", but we cannot simplify that further because we do not have a
|
||||
value for "y". Except, thanks to the system of equations, we DO have a
|
||||
value for "y". We know that "y" equals "3x". So, looking at our second
|
||||
equation, we can replace "y" with "3x" because they have the same
|
||||
value. We then get:<br /><br />
|
||||
<code>3x - 6 = x</code><br /><br />
|
||||
Now we can solve for "x"! We start by adding 6 to each side.<br /><br />
|
||||
<code>3x = x + 6</code><br /><br />
|
||||
We still need to get "x" by itself, so we subtract "x" from both sides
|
||||
and get:<br /><br />
|
||||
<code>2x = 6</code><br /><br />
|
||||
If this confuses you, remember that "3x" is the same as "x+x+x".
|
||||
Subtract an "x" from that and you get "x+x", or "2x". Now we divide
|
||||
both sides by 2 and have our value for x!<br /><br />
|
||||
<code>x = 3</code><br /><br />
|
||||
However, our work is not done yet. We still need to find the value for
|
||||
"y". Let's go back to our first equation:<br /><br />
|
||||
<code>y = 3x</code><br /><br />
|
||||
We have a value for "x" now, so let's see what happens if we put that
|
||||
value in.<br /><br />
|
||||
<code>y = 3*3</code><br /><br />
|
||||
We perform the multiplication and discover that "y=9"! Our solution to
|
||||
this system of equations then is:<br /><br />
|
||||
<code>x = 3 and y = 9</code><br /><br />
|
||||
</p>
|
||||
</section>
|
||||
<section class="main-section" id="try_it_yourself!">
|
||||
<header>Try it Yourself!</header>
|
||||
<p>Coming Soon!</p>
|
||||
<p>Keep an eye out for new additions!</p>
|
||||
</section>
|
||||
<section class="main-section" id="more_information">
|
||||
<header>More Information</header>
|
||||
<p>Check out the following links for more information!</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.wolframalpha.com/examples/mathematics/algebra/"
|
||||
>Wolfram Alpha</a
|
||||
>
|
||||
is a great source for multiple mathematic fields.
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://en.wikipedia.org/wiki/Algebra"
|
||||
>Wikipedia's Algebra page</a
|
||||
>
|
||||
for more general information.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
<footer>
|
||||
<a href="../">Return to Project List</a> |
|
||||
<a href="https://www.nhcarrigan.com">Return to HomePage</a>
|
||||
</footer>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
background-color: #3a3240;
|
||||
}
|
||||
a {
|
||||
color: #92869c;
|
||||
}
|
||||
a:hover {
|
||||
background-color: #92869c;
|
||||
color: #3a3240;
|
||||
}
|
||||
#navbar {
|
||||
border-style: solid;
|
||||
border-width: 5px;
|
||||
border-color: #92869c;
|
||||
height: 100%;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
color: #92869c
|
||||
}
|
||||
@media (min-width: 480px) {
|
||||
#navbar {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
main {
|
||||
margin-left: 220px;
|
||||
color: #92869c
|
||||
}
|
||||
header {
|
||||
font-size: 20pt;
|
||||
}
|
||||
code {
|
||||
background-color: #92869c;
|
||||
border-style: dashed;
|
||||
border-width: 2px;
|
||||
border-color: #92869c;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
@@ -1,325 +0,0 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd18
|
||||
title: Build a Tribute Page
|
||||
challengeType: 14
|
||||
forumTopicId: 301147
|
||||
dashedName: build-a-tribute-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build an app that is functionally similar to <a href="https://tribute-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://tribute-page.freecodecamp.rocks</a>
|
||||
|
||||
**User Stories:**
|
||||
|
||||
1. Your tribute page should have a `main` element with a corresponding `id` of `main`, which contains all other elements
|
||||
1. You should see an element with an `id` of `title`, which contains a string (i.e. text), that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug")
|
||||
1. You should see either a `figure` or a `div` element with an `id` of `img-div`
|
||||
1. Within the `#img-div` element, you should see an `img` element with a corresponding `id="image"`
|
||||
1. Within the `#img-div` element, you should see an element with a corresponding `id="img-caption"` that contains textual content describing the image shown in `#img-div`
|
||||
1. You should see an element with a corresponding `id="tribute-info"`, which contains textual content describing the subject of the tribute page
|
||||
1. You should see an `a` element with a corresponding `id="tribute-link"`, which links to an outside site, that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of `target` and set it to `_blank` in order for your link to open in a new tab
|
||||
1. Your `#image` should use `max-width` and `height` properties to resize responsively, relative to the width of its parent element, without exceeding its original size
|
||||
1. Your `img` element should be centered within its parent element
|
||||
|
||||
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
|
||||
|
||||
**Note:** Be sure to add `<link rel="stylesheet" href="styles.css">` in your HTML to link your stylesheet and apply your CSS
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `main` element with an `id` of `main`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('main')
|
||||
assert(!!el && el.tagName === 'MAIN')
|
||||
```
|
||||
|
||||
Your `#img-div`, `#image`, `#img-caption`, `#tribute-info`, and `#tribute-link` should all be descendants of `#main`.
|
||||
|
||||
```js
|
||||
const el1 = document.querySelector('#main #img-div')
|
||||
const el2 = document.querySelector('#main #image')
|
||||
const el3 = document.querySelector('#main #img-caption')
|
||||
const el4 = document.querySelector('#main #tribute-info')
|
||||
const el5 = document.querySelector('#main #tribute-link')
|
||||
assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5)
|
||||
```
|
||||
|
||||
You should have an element with an `id` of `title`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#title` should not be empty.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
|
||||
```
|
||||
|
||||
You should have a `figure` or `div` element with an `id` of `img-div`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('img-div')
|
||||
assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE'))
|
||||
```
|
||||
|
||||
You should have an `img` element with an `id` of `image`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('image')
|
||||
assert(!!el && el.tagName === 'IMG')
|
||||
```
|
||||
|
||||
Your `#image` should be a descendant of `#img-div`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#img-div #image')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
You should have a `figcaption` or `div` element with an `id` of `img-caption`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('img-caption')
|
||||
assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION'))
|
||||
```
|
||||
|
||||
Your `#img-caption` should be a descendant of `#img-div`.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#img-div #img-caption')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#img-caption` should not be empty.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('img-caption')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
You should have an element with an `id` of `tribute-info`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-info')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Your `#tribute-info` should not be empty.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-info')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
You should have an `a` element with an `id` of `tribute-link`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-link')
|
||||
assert(!!el && el.tagName === 'A')
|
||||
```
|
||||
|
||||
Your `#tribute-link` should have an `href` attribute and value.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-link')
|
||||
assert(!!el && !!el.href && el.href.length > 0)
|
||||
```
|
||||
|
||||
Your `#tribute-link` should have a `target` attribute set to `_blank`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-link')
|
||||
assert(!!el && el.target === '_blank')
|
||||
```
|
||||
|
||||
Your `img` element should have a `display` of `block`.
|
||||
|
||||
```js
|
||||
const img = document.getElementById('image');
|
||||
const imgStyle = window.getComputedStyle(img);
|
||||
const style = imgStyle?.getPropertyValue('display')
|
||||
assert(style === 'block')
|
||||
```
|
||||
|
||||
Your `#image` should have a `max-width` of `100%`.
|
||||
|
||||
```js
|
||||
const img = document.getElementById('image');
|
||||
const imgStyle = window.getComputedStyle(img);
|
||||
const style = imgStyle?.getPropertyValue('max-width')
|
||||
assert(style === '100%')
|
||||
```
|
||||
|
||||
Your `#image` should have a `height` of `auto`.
|
||||
|
||||
```js
|
||||
// taken from the testable-projects repo
|
||||
const img = document.getElementById('image');
|
||||
const imgStyle = window.getComputedStyle(img);
|
||||
const oldDisplayValue = imgStyle.getPropertyValue('display');
|
||||
const oldDisplayPriority = imgStyle.getPropertyPriority('display');
|
||||
img?.style.setProperty('display', 'none', 'important');
|
||||
const heightValue = imgStyle?.getPropertyValue('height')
|
||||
img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
|
||||
assert(heightValue === 'auto')
|
||||
```
|
||||
|
||||
Your `#image` should be centered within its parent.
|
||||
|
||||
```js
|
||||
// taken from the testable-projects repo
|
||||
const img = document.getElementById('image'),
|
||||
imgParent = img?.parentElement,
|
||||
imgLeft = img?.getBoundingClientRect().left,
|
||||
imgRight = img?.getBoundingClientRect().right,
|
||||
parentLeft = imgParent?.getBoundingClientRect().left,
|
||||
parentRight = imgParent?.getBoundingClientRect().right,
|
||||
leftMargin = imgLeft - parentLeft,
|
||||
rightMargin = parentRight - imgRight;
|
||||
assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Pacifico"
|
||||
rel="stylesheet"
|
||||
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Lobster"
|
||||
rel="stylesheet"
|
||||
|
||||
/>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
<title>Tribute Page</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Tribute Page</h1>
|
||||
<p>The below card was designed as a tribute page for freeCodeCamp.</p>
|
||||
<main id="main">
|
||||
<div id="img-div">
|
||||
<img
|
||||
id="image"
|
||||
class="border"
|
||||
src="https://upload.wikimedia.org/wikipedia/en/5/53/Pok%C3%A9mon_Togepi_art.png"
|
||||
alt="An image of Togepi"
|
||||
/>
|
||||
<figcaption id="img-caption">Togepi, happy as always.</figcaption>
|
||||
</div>
|
||||
<h2 id="title">Togepi</h2>
|
||||
<hr />
|
||||
<div id="tribute-info">
|
||||
<p>
|
||||
Togepi was first discovered in the Johto region, when Ash Ketchum
|
||||
discovered a mysterious egg. However, when the egg hatched, Togepi saw
|
||||
Ash's friend Misty first and imprinted on her. Like many other
|
||||
creatures, this imprinting process created a bond and Togepi views
|
||||
Misty as his mother.
|
||||
</p>
|
||||
<p>
|
||||
Togepi is a very childlike Pokemon, and is very emotionally
|
||||
expressive. He demonstrates extreme levels of joy and sadness.
|
||||
</p>
|
||||
<hr />
|
||||
<p><u>Battle Information</u></p>
|
||||
<ul style="list-style-type: none">
|
||||
<li>Type: Fairy</li>
|
||||
<li>Evolutions: Togepi -> Togetic -> Togekiss</li>
|
||||
<li>Moves: Growl, Pound, Sweet Kiss, Charm</li>
|
||||
<li>Weaknesses: Poison, Steel</li>
|
||||
<li>Resistances: Dragon</li>
|
||||
</ul>
|
||||
<p>
|
||||
Check out this
|
||||
<a
|
||||
id="tribute-link"
|
||||
href="https://bulbapedia.bulbagarden.net/wiki/Togepi_(Pok%C3%A9mon)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>Bulbapedia article on Togepi</a
|
||||
>
|
||||
for more information on this great Pokemon.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<footer>
|
||||
<a href="../">Return to Project List</a> |
|
||||
<a href="https://www.nhcarrigan.com">Return to HomePage</a>
|
||||
</footer>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: #3a3240;
|
||||
color: white;
|
||||
}
|
||||
main {
|
||||
background-color: #92869c;
|
||||
font-family: Lobster;
|
||||
max-width: 500px;
|
||||
margin: 20px auto;
|
||||
color: black;
|
||||
border-radius: 50px;
|
||||
box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 20pt;
|
||||
font-family: Pacifico;
|
||||
}
|
||||
body {
|
||||
text-align: center;
|
||||
font-size: 12pt;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
font-size: 10pt;
|
||||
}
|
||||
.border {
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
#image {
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#img-caption {
|
||||
font-size: 10pt;
|
||||
}
|
||||
a:not(#tribute-link) {
|
||||
color: white;
|
||||
}
|
||||
hr {
|
||||
border-color: black;
|
||||
}
|
||||
```
|
||||
@@ -1,71 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f060b6c005b0e76f05b
|
||||
title: Build your own Functions
|
||||
challengeType: 11
|
||||
videoId: nLDychdBwUg
|
||||
bilibiliIds:
|
||||
aid: 249487483
|
||||
bvid: BV1Fv411J7bS
|
||||
cid: 376340281
|
||||
dashedName: build-your-own-functions
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
More resources:
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=ksvGhDsjtpw" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following Python program print out?:
|
||||
|
||||
```python
|
||||
def fred():
|
||||
print("Zap")
|
||||
def jane():
|
||||
print("ABC")
|
||||
|
||||
jane()
|
||||
fred()
|
||||
jane()
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
<pre>Zap
|
||||
ABC
|
||||
jane
|
||||
fred
|
||||
jane</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>Zap
|
||||
ABC
|
||||
Zap</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>ABC
|
||||
Zap
|
||||
jane</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>ABC
|
||||
Zap
|
||||
ABC</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>Zap
|
||||
Zap
|
||||
Zap</pre>
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0b0b6c005b0e76f06d
|
||||
title: Comparing and Sorting Tuples
|
||||
challengeType: 11
|
||||
videoId: dZXzBXUxxCs
|
||||
bilibiliIds:
|
||||
aid: 931886163
|
||||
bvid: BV1HM4y1T7TK
|
||||
cid: 376533673
|
||||
dashedName: comparing-and-sorting-tuples
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
More resources:
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=EhQxwzyT16E" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which does the same thing as the following code?:
|
||||
|
||||
```python
|
||||
lst = []
|
||||
for key, val in counts.items():
|
||||
newtup = (val, key)
|
||||
lst.append(newtup)
|
||||
lst = sorted(lst, reverse=True)
|
||||
print(lst)
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
```python
|
||||
print( sorted( [ (v,k) for k,v in counts.items() ], reverse=True ) )
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
print( [ (k,v) for k,v in counts.items().sorted() ] )
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
print( sorted( [ (v,k) for k,v in counts.keys() ] ) )
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
print( [ (k,v) for k,v in counts.values().sort() ] )
|
||||
```
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f050b6c005b0e76f058
|
||||
title: Conditional Execution
|
||||
challengeType: 11
|
||||
videoId: gz_IfIsZQtc
|
||||
bilibiliIds:
|
||||
aid: 206949935
|
||||
bvid: BV1Jh411z7bY
|
||||
cid: 376337035
|
||||
dashedName: conditional-execution
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which code is indented correctly to print "Yes" if x = 0 and y = 10?
|
||||
|
||||
## --answers--
|
||||
|
||||
```python
|
||||
if 0 == x:
|
||||
if y == 10:
|
||||
print("Yes")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
if 0 == x:
|
||||
if y == 10:
|
||||
print("Yes")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
if 0 == x:
|
||||
if y == 10:
|
||||
print("Yes")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
if 0 == x:
|
||||
if y == 10:
|
||||
print("Yes")
|
||||
```
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f6a0b6c005b0e76f097
|
||||
title: 'تصور البيانات: القوائم البريدية (Data Visualization: Mailing Lists)'
|
||||
challengeType: 11
|
||||
videoId: RYdW660KkaQ
|
||||
bilibiliIds:
|
||||
aid: 334465586
|
||||
bvid: BV18w411R7dD
|
||||
cid: 377545473
|
||||
dashedName: data-visualization-mailing-lists
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
مزيد من الموارد:
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=KfhslNzopxo" target="_blank" rel="noopener noreferrer nofollow">Exercise: Geodata</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=wSpl1-7afAk" target="_blank" rel="noopener noreferrer nofollow">Exercise: Gmane Model</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=H3w4lOFBUOI" target="_blank" rel="noopener noreferrer nofollow">Exercise: Gmane Spider</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=LRqVPMEXByw" target="_blank" rel="noopener noreferrer nofollow">Exercise: Gmane Viz</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=yFRAZBkBDBs" target="_blank" rel="noopener noreferrer nofollow">Exercise: Page Rank</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=sXedPQ_AnWA" target="_blank" rel="noopener noreferrer nofollow">Exercise: Page Spider</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=Fm0hpkxsZoo" target="_blank" rel="noopener noreferrer nofollow">Exercise: Page Viz</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which is a common JavaScript visualization library?
|
||||
|
||||
## --answers--
|
||||
|
||||
DataViz.js
|
||||
|
||||
---
|
||||
|
||||
D3
|
||||
|
||||
---
|
||||
|
||||
Lowcharts
|
||||
|
||||
---
|
||||
|
||||
DATA6
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f6a0b6c005b0e76f096
|
||||
title: 'Data Visualization: Page Rank'
|
||||
challengeType: 11
|
||||
videoId: 6-w_qIUwaxU
|
||||
bilibiliIds:
|
||||
aid: 376950472
|
||||
bvid: BV1ho4y1Q72u
|
||||
cid: 377544599
|
||||
dashedName: data-visualization-page-rank
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
How does the PageRank algorithm work?
|
||||
|
||||
## --answers--
|
||||
|
||||
It determines which pages are most highly connected.
|
||||
|
||||
---
|
||||
|
||||
It ranks pages based on view counts.
|
||||
|
||||
---
|
||||
|
||||
It figures out which pages contain the most important content.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0a0b6c005b0e76f069
|
||||
title: Dictionaries and Loops
|
||||
challengeType: 11
|
||||
videoId: EEmekKiKG70
|
||||
bilibiliIds:
|
||||
aid: 589401038
|
||||
bvid: BV1eq4y1X7xU
|
||||
cid: 376387132
|
||||
dashedName: dictionaries-and-loops
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
More resources:
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=PrhZ9qwBDD8" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following code print?:
|
||||
|
||||
```python
|
||||
counts = { 'chuck' : 1 , 'annie' : 42, 'jan': 100}
|
||||
for key in counts:
|
||||
if counts[key] > 10:
|
||||
print(key, counts[key])
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
<pre>annie 42
|
||||
jan 100</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>chuck 1
|
||||
annie 42
|
||||
jan 100</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>chuck 1</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>[Error]</pre>
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f090b6c005b0e76f068
|
||||
title: 'Dictionaries: Common Applications'
|
||||
challengeType: 11
|
||||
videoId: f17xPfIXct0
|
||||
bilibiliIds:
|
||||
aid: 805747023
|
||||
bvid: BV1v34y1D7ug
|
||||
cid: 414168867
|
||||
dashedName: dictionaries-common-applications
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following code print?
|
||||
|
||||
```python
|
||||
counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10}
|
||||
print(counts.get('kris', 0))
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
2
|
||||
|
||||
---
|
||||
|
||||
quincy
|
||||
|
||||
---
|
||||
|
||||
0
|
||||
|
||||
---
|
||||
|
||||
10
|
||||
|
||||
---
|
||||
|
||||
[will return error]
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f080b6c005b0e76f063
|
||||
title: Files as a Sequence
|
||||
challengeType: 11
|
||||
videoId: cIA0EokbaHE
|
||||
bilibiliIds:
|
||||
aid: 974380307
|
||||
bvid: BV1p44y1m7br
|
||||
cid: 376388846
|
||||
dashedName: files-as-a-sequence
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
More resources:
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=il1j4wkte2E" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What does the word 'continue' do in the middle of a loop?
|
||||
|
||||
## --answers--
|
||||
|
||||
Skips to the code directly after the loop.
|
||||
|
||||
---
|
||||
|
||||
Skips to the next line in the code.
|
||||
|
||||
---
|
||||
|
||||
Skips to the next iteration of the loop.
|
||||
|
||||
---
|
||||
|
||||
Skips the next block of code.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f050b6c005b0e76f057
|
||||
title: Intermediate Expressions
|
||||
challengeType: 11
|
||||
videoId: dKgUaIa5ATg
|
||||
bilibiliIds:
|
||||
aid: 334428894
|
||||
bvid: BV1uw411R7gH
|
||||
cid: 376318468
|
||||
dashedName: intermediate-expressions
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
More resources:
|
||||
|
||||
\- <a href="https://youtu.be/t_4DPwsaGDY" target="_blank" rel="noopener noreferrer nofollow">Exercise 1</a>
|
||||
|
||||
\- <a href="https://youtu.be/wgkC8SxraAQ" target="_blank" rel="noopener noreferrer nofollow">Exercise 2</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will print out after running this code:
|
||||
|
||||
```python
|
||||
width = 15
|
||||
height = 12.0
|
||||
print(height/3)
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
39
|
||||
|
||||
---
|
||||
|
||||
4
|
||||
|
||||
---
|
||||
|
||||
4.0
|
||||
|
||||
---
|
||||
|
||||
5.0
|
||||
|
||||
---
|
||||
|
||||
5
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f070b6c005b0e76f061
|
||||
title: Intermediate Strings
|
||||
challengeType: 11
|
||||
videoId: KgT_fYLXnyk
|
||||
bilibiliIds:
|
||||
aid: 291983121
|
||||
bvid: BV1Zf4y157yG
|
||||
cid: 376394116
|
||||
dashedName: intermediate-strings
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
More resources:
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=1bSqHot-KwE" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What is the value of i in the following code?
|
||||
|
||||
```python
|
||||
word = "bananana"
|
||||
i = word.find("na")
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
nanana
|
||||
|
||||
---
|
||||
|
||||
2
|
||||
|
||||
---
|
||||
|
||||
3
|
||||
|
||||
---
|
||||
|
||||
True
|
||||
|
||||
---
|
||||
|
||||
na
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
id: 5e6a54c358d3af90110a60a3
|
||||
title: 'Introduction: Elements of Python'
|
||||
challengeType: 11
|
||||
videoId: aRY_xjL35v0
|
||||
bilibiliIds:
|
||||
aid: 674420725
|
||||
bvid: BV1MU4y1H7Lj
|
||||
cid: 376315889
|
||||
dashedName: introduction-elements-of-python
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following program print out:
|
||||
|
||||
```python
|
||||
x = 43
|
||||
x = x + 1
|
||||
print(x)
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
x
|
||||
|
||||
---
|
||||
|
||||
x + 1
|
||||
|
||||
---
|
||||
|
||||
44
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
id: 5e6a54af58d3af90110a60a1
|
||||
title: 'Introduction: Hardware Architecture'
|
||||
challengeType: 11
|
||||
videoId: H6qtjRTfSog
|
||||
bilibiliIds:
|
||||
aid: 206977572
|
||||
bvid: BV1zh411z7Ak
|
||||
cid: 376199262
|
||||
dashedName: introduction-hardware-architecture
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Where are your programs stored when they are running?
|
||||
|
||||
## --answers--
|
||||
|
||||
Hard Drive.
|
||||
|
||||
---
|
||||
|
||||
Memory.
|
||||
|
||||
---
|
||||
|
||||
Central Processing Unit.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
id: 5e6a54ba58d3af90110a60a2
|
||||
title: 'Introduction: Python as a Language'
|
||||
challengeType: 11
|
||||
videoId: 0QeGbZNS_bY
|
||||
bilibiliIds:
|
||||
aid: 674404602
|
||||
bvid: BV1GU4y1H7vB
|
||||
cid: 376315625
|
||||
dashedName: introduction-python-as-a-language
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will print out after running these two lines of code:
|
||||
|
||||
```python
|
||||
x = 6
|
||||
print(x)
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
x
|
||||
|
||||
---
|
||||
|
||||
6
|
||||
|
||||
---
|
||||
|
||||
x = 6
|
||||
|
||||
---
|
||||
|
||||
(x)
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
---
|
||||
id: 5e6a54a558d3af90110a60a0
|
||||
title: 'Introduction: Why Program?'
|
||||
challengeType: 11
|
||||
videoId: 3muQV-Im3Z0
|
||||
bilibiliIds:
|
||||
aid: 206882253
|
||||
bvid: BV1Fh411z7tr
|
||||
cid: 376314257
|
||||
videoLocaleIds:
|
||||
espanol: 3muQV-Im3Z0
|
||||
italian: 3muQV-Im3Z0
|
||||
portuguese: 3muQV-Im3Z0
|
||||
dashedName: introduction-why-program
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
More resources:
|
||||
|
||||
\- <a href="https://youtu.be/F7mtLrYzZP8" target="_blank" rel="noopener noreferrer nofollow">Install Python on Windows</a>
|
||||
|
||||
\- <a href="https://youtu.be/wfLnZP-4sZw" target="_blank" rel="noopener noreferrer nofollow">Install Python on MacOS</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Who should learn to program?
|
||||
|
||||
## --answers--
|
||||
|
||||
College students.
|
||||
|
||||
### --feedback--
|
||||
|
||||
College students should learn to program, but there's a better answer.
|
||||
|
||||
---
|
||||
|
||||
People who want to become software developers.
|
||||
|
||||
### --feedback--
|
||||
|
||||
People who want to become software developers should learn to program, but there's a better answer.
|
||||
|
||||
---
|
||||
|
||||
Everyone.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f070b6c005b0e76f05d
|
||||
title: 'Iterations: Definite Loops'
|
||||
challengeType: 11
|
||||
videoId: hiRTRAqNlpE
|
||||
bilibiliIds:
|
||||
aid: 291987032
|
||||
bvid: BV1ff4y157Q3
|
||||
cid: 376385255
|
||||
dashedName: iterations-definite-loops
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
How many lines will the following code print?:
|
||||
|
||||
```python
|
||||
for i in [2,1,5]:
|
||||
print(i)
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
1
|
||||
|
||||
---
|
||||
|
||||
2
|
||||
|
||||
---
|
||||
|
||||
3
|
||||
|
||||
---
|
||||
|
||||
5
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f070b6c005b0e76f05e
|
||||
title: 'Iterations: Loop Idioms'
|
||||
challengeType: 11
|
||||
videoId: AelGAcoMXbI
|
||||
bilibiliIds:
|
||||
aid: 334491369
|
||||
bvid: BV1tw411R7Mm
|
||||
cid: 376530765
|
||||
dashedName: iterations-loop-idioms
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Below is code to find the smallest value from a list of values. One line has an error that will cause the code to not work as expected. Which line is it?:
|
||||
|
||||
```python
|
||||
smallest = None
|
||||
print("Before:", smallest)
|
||||
for itervar in [3, 41, 12, 9, 74, 15]:
|
||||
if smallest is None or itervar < smallest:
|
||||
smallest = itervar
|
||||
break
|
||||
print("Loop:", itervar, smallest)
|
||||
print("Smallest:", smallest)
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
3
|
||||
|
||||
---
|
||||
|
||||
4
|
||||
|
||||
---
|
||||
|
||||
6
|
||||
|
||||
---
|
||||
|
||||
7
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f070b6c005b0e76f05f
|
||||
title: 'Iterations: More Patterns'
|
||||
challengeType: 11
|
||||
videoId: 9Wtqo6vha1M
|
||||
bilibiliIds:
|
||||
aid: 674492981
|
||||
bvid: BV1hU4y1H7tF
|
||||
cid: 376531204
|
||||
dashedName: iterations-more-patterns
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
More resources:
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=kjxXZQw0uPg" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which of these evaluates to False?
|
||||
|
||||
## --answers--
|
||||
|
||||
```python
|
||||
0 == 0.0
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
0 is 0.0
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
0 is not 0.0
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
0 = 0.0
|
||||
```
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f060b6c005b0e76f05c
|
||||
title: Loops and Iterations
|
||||
challengeType: 11
|
||||
videoId: dLA-szNRnUY
|
||||
bilibiliIds:
|
||||
aid: 674492981
|
||||
bvid: BV1hU4y1H7tF
|
||||
cid: 376531204
|
||||
dashedName: loops-and-iterations
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following code print out?:
|
||||
|
||||
```python
|
||||
n = 0
|
||||
while True:
|
||||
if n == 3:
|
||||
break
|
||||
print(n)
|
||||
n = n + 1
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
<pre>0
|
||||
1
|
||||
2</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>0
|
||||
1
|
||||
2
|
||||
3</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>1
|
||||
2</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>1
|
||||
2
|
||||
3</pre>
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f170b6c005b0e76f08b
|
||||
title: Make a Relational Database
|
||||
challengeType: 11
|
||||
videoId: MQ5z4bdF92U
|
||||
bilibiliIds:
|
||||
aid: 249380678
|
||||
bvid: BV1vv411E76L
|
||||
cid: 377531786
|
||||
dashedName: make-a-relational-database
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What SQL command would you use to retrieve all users that have the email address `quincy@freecodecamp.org`?
|
||||
|
||||
## --answers--
|
||||
|
||||
```sql
|
||||
SELECT Users WHERE email="quincy@freecodecamp.org"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```sql
|
||||
SELECT Users WHERE email IS "quincy@freecodecamp.org"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```sql
|
||||
SELECT ALL Users WHERE email="quincy@freecodecamp.org"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```sql
|
||||
SELECT * FROM Users WHERE email IS "quincy@freecodecamp.org"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```sql
|
||||
SELECT * FROM Users WHERE email="quincy@freecodecamp.org"
|
||||
```
|
||||
|
||||
## --video-solution--
|
||||
|
||||
5
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f060b6c005b0e76f059
|
||||
title: More Conditional Structures
|
||||
challengeType: 11
|
||||
videoId: HdL82tAZR20
|
||||
bilibiliIds:
|
||||
aid: 631930118
|
||||
bvid: BV1Nb4y1r7z2
|
||||
cid: 376337449
|
||||
dashedName: more-conditional-structures
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
More resources:
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=crLerB4ZxMI" target="_blank" rel="noopener noreferrer nofollow">Exercise 1</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=KJN3-7HH6yk" target="_blank" rel="noopener noreferrer nofollow">Exercise 2</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Given the following code:
|
||||
|
||||
```python
|
||||
temp = "5 degrees"
|
||||
cel = 0
|
||||
fahr = float(temp)
|
||||
cel = (fahr - 32.0) * 5.0 / 9.0
|
||||
print(cel)
|
||||
```
|
||||
|
||||
Which line/lines should be surrounded by `try` block?
|
||||
|
||||
## --answers--
|
||||
|
||||
1
|
||||
|
||||
---
|
||||
|
||||
3
|
||||
|
||||
---
|
||||
|
||||
3,4
|
||||
|
||||
---
|
||||
|
||||
4
|
||||
|
||||
---
|
||||
|
||||
None
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0c0b6c005b0e76f072
|
||||
title: Networking Protocol
|
||||
challengeType: 11
|
||||
videoId: c6vZGescaSc
|
||||
bilibiliIds:
|
||||
aid: 931950996
|
||||
bvid: BV1cM4y1N7K6
|
||||
cid: 376388317
|
||||
dashedName: networking-protocol
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What type of HTTP request is usually used to access a website?
|
||||
|
||||
## --answers--
|
||||
|
||||
POST
|
||||
|
||||
---
|
||||
|
||||
GET
|
||||
|
||||
---
|
||||
|
||||
WEB
|
||||
|
||||
---
|
||||
|
||||
ACCESS
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0c0b6c005b0e76f074
|
||||
title: 'Networking: Text Processing'
|
||||
challengeType: 11
|
||||
videoId: Pv_pJgVu8WI
|
||||
bilibiliIds:
|
||||
aid: 804442498
|
||||
bvid: BV16y4y1j7WW
|
||||
cid: 377329124
|
||||
dashedName: networking-text-processing
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which type of encoding do most websites use?
|
||||
|
||||
## --answers--
|
||||
|
||||
UTF-8
|
||||
|
||||
---
|
||||
|
||||
UTF-16
|
||||
|
||||
---
|
||||
|
||||
UTF-32
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0d0b6c005b0e76f075
|
||||
title: 'Networking: Using urllib in Python'
|
||||
challengeType: 11
|
||||
videoId: 7lFM1T_CxBs
|
||||
bilibiliIds:
|
||||
aid: 546908270
|
||||
bvid: BV1Xq4y1H7e6
|
||||
cid: 377331524
|
||||
dashedName: networking-using-urllib-in-python
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the output of the following code be like?:
|
||||
|
||||
```python
|
||||
import urllib.request
|
||||
fhand = urllib.request.urlopen('http://data.pr4e.org/romeo.txt')
|
||||
for line in fhand:
|
||||
print(line.decode().strip())
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
Just contents of "romeo.txt".
|
||||
|
||||
---
|
||||
|
||||
A header and the contents of "romeo.txt".
|
||||
|
||||
---
|
||||
|
||||
A header, a footer, and the contents of "romeo.txt".
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0d0b6c005b0e76f076
|
||||
title: 'Networking: Web Scraping with Python'
|
||||
challengeType: 11
|
||||
videoId: Uyioq2q4cEg
|
||||
bilibiliIds:
|
||||
aid: 674382625
|
||||
bvid: BV1oU4y1n7zQ
|
||||
cid: 377331774
|
||||
dashedName: networking-web-scraping-with-python
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
More resources:
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=dWLdI143W-g" target="_blank" rel="noopener noreferrer nofollow">Exercise: socket1</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=8yis2DvbBkI" target="_blank" rel="noopener noreferrer nofollow">Exercise: urllib</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=g9flPDG9nnY" target="_blank" rel="noopener noreferrer nofollow">Exercise: urllinks</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What Python library is used for parsing HTML documents and extracting data from HTML documents?
|
||||
|
||||
## --answers--
|
||||
|
||||
socket
|
||||
|
||||
---
|
||||
|
||||
http
|
||||
|
||||
---
|
||||
|
||||
BeautifulSoup
|
||||
|
||||
---
|
||||
|
||||
PrettyBiscuit
|
||||
|
||||
---
|
||||
|
||||
WonderfulSalad
|
||||
|
||||
---
|
||||
|
||||
HttpParser
|
||||
|
||||
---
|
||||
|
||||
GrunkleStan
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0c0b6c005b0e76f071
|
||||
title: Networking with Python
|
||||
challengeType: 11
|
||||
videoId: _kJvneKVdNM
|
||||
bilibiliIds:
|
||||
aid: 419494612
|
||||
bvid: BV1r341167jT
|
||||
cid: 376385858
|
||||
dashedName: networking-with-python
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What Python library gives access to TCP Sockets?
|
||||
|
||||
## --answers--
|
||||
|
||||
tcp
|
||||
|
||||
---
|
||||
|
||||
socket
|
||||
|
||||
---
|
||||
|
||||
http
|
||||
|
||||
---
|
||||
|
||||
port
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0c0b6c005b0e76f073
|
||||
title: 'Networking: Write a Web Browser'
|
||||
challengeType: 11
|
||||
videoId: zjyT9DaAjx4
|
||||
bilibiliIds:
|
||||
aid: 761908574
|
||||
bvid: BV1j64y1x7wx
|
||||
cid: 377319579
|
||||
dashedName: networking-write-a-web-browser
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What does the following code create?:
|
||||
|
||||
```py
|
||||
import socket
|
||||
|
||||
mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
|
||||
mysock.connect(('data.pr4e.org', 80))
|
||||
cmd = 'GET http://data.pr4e.org/romeo.txt HTTP/1.0\r\n\r\n'.encode()
|
||||
mysock.send(cmd)
|
||||
|
||||
while True:
|
||||
data = mysock.recv(512)
|
||||
if len(data) < 1:
|
||||
break
|
||||
print(data.decode(),end='')
|
||||
mysock.close()
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
A simple web server.
|
||||
|
||||
---
|
||||
|
||||
A simple email client.
|
||||
|
||||
---
|
||||
|
||||
A simple todo list.
|
||||
|
||||
---
|
||||
|
||||
A simple web browser.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f170b6c005b0e76f087
|
||||
title: Object Lifecycle
|
||||
challengeType: 11
|
||||
videoId: p1r3h_AMMIM
|
||||
bilibiliIds:
|
||||
aid: 461998717
|
||||
bvid: BV1JL411n7Hr
|
||||
cid: 377529681
|
||||
dashedName: object-lifecycle
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following program print?:
|
||||
|
||||
```python
|
||||
class PartyAnimal:
|
||||
x = 0
|
||||
name = ''
|
||||
def __init__(self, nam):
|
||||
self.name = nam
|
||||
print(self.name,'constructed')
|
||||
def party(self):
|
||||
self.x = self.x + 1
|
||||
print(self.name,'party count',self.x)
|
||||
|
||||
q = PartyAnimal('Quincy')
|
||||
m = PartyAnimal('Miya')
|
||||
|
||||
q.party()
|
||||
m.party()
|
||||
q.party()
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
<pre>
|
||||
Quincy constructed
|
||||
Miya constructed
|
||||
Quincy party count 1
|
||||
Miya party count 2
|
||||
Quincy party count 3
|
||||
</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>
|
||||
Quincy constructed
|
||||
Miya constructed
|
||||
Quincy party count 1
|
||||
Miya party count 1
|
||||
Quincy party count 2
|
||||
</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>
|
||||
Quincy constructed
|
||||
Quincy party count 1
|
||||
Quincy party count 2
|
||||
Miya constructed
|
||||
Miya party count 1
|
||||
</pre>
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f160b6c005b0e76f086
|
||||
title: 'Objects: A Sample Class'
|
||||
challengeType: 11
|
||||
videoId: FiABKEuaSJ8
|
||||
bilibiliIds:
|
||||
aid: 589451777
|
||||
bvid: BV1rq4y1X7TG
|
||||
cid: 377523194
|
||||
dashedName: objects-a-sample-class
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following program print?:
|
||||
|
||||
```python
|
||||
class PartyAnimal:
|
||||
x = 0
|
||||
def party(self):
|
||||
self.x = self.x + 2
|
||||
print(self.x)
|
||||
|
||||
an = PartyAnimal()
|
||||
an.party()
|
||||
an.party()
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
<pre>
|
||||
So far 1
|
||||
So far 2
|
||||
</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>
|
||||
0
|
||||
0
|
||||
</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>
|
||||
2
|
||||
2
|
||||
</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>
|
||||
2
|
||||
4
|
||||
</pre>
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f170b6c005b0e76f088
|
||||
title: 'Objects: Inheritance'
|
||||
challengeType: 11
|
||||
videoId: FBL3alYrxRM
|
||||
bilibiliIds:
|
||||
aid: 631990691
|
||||
bvid: BV1sb4y1r7GF
|
||||
cid: 377529901
|
||||
dashedName: objects-inheritance
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What is inheritance in object-oriented programming?
|
||||
|
||||
## --answers--
|
||||
|
||||
A new class created when a parent class is extended.
|
||||
|
||||
---
|
||||
|
||||
A constructed instance of a class.
|
||||
|
||||
---
|
||||
|
||||
The ability to create a new class by extending an existing class.
|
||||
|
||||
---
|
||||
|
||||
A method that is called at the moment when a class is being used to construct an object.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f090b6c005b0e76f067
|
||||
title: Python Dictionaries
|
||||
challengeType: 11
|
||||
videoId: dnzvfimrRMg
|
||||
bilibiliIds:
|
||||
aid: 631893305
|
||||
bvid: BV19b4y167kj
|
||||
cid: 376386176
|
||||
dashedName: python-dictionaries
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What does dict equal after running this code?:
|
||||
|
||||
```python
|
||||
dict = {"Fri": 20, "Thu": 6, "Sat": 1}
|
||||
dict["Thu"] = 13
|
||||
dict["Sat"] = 2
|
||||
dict["Sun"] = 9
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
```python
|
||||
{'Fri': 20, 'Thu': 6, 'Sat': 1}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
{'Fri': 20, 'Thu': 6, 'Sat': 1, 'Thu': 13, 'Sat': 2, 'Sun': 9}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
{'Sun': 9}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
{'Thu': 13, 'Sat': 2, 'Sun': 9}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
{'Fri': 20, 'Thu': 13, 'Sat': 2, 'Sun': 9}
|
||||
```
|
||||
|
||||
## --video-solution--
|
||||
|
||||
5
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f060b6c005b0e76f05a
|
||||
title: Python Functions
|
||||
challengeType: 11
|
||||
videoId: 3JGF-n3tDPU
|
||||
bilibiliIds:
|
||||
aid: 631881917
|
||||
bvid: BV1Xb4y167P4
|
||||
cid: 376337920
|
||||
dashedName: python-functions
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What is the purpose of the "def" keyword in Python?
|
||||
|
||||
## --answers--
|
||||
|
||||
It is slang that means "The following code is really cool."
|
||||
|
||||
---
|
||||
|
||||
It indicates the start of a function.
|
||||
|
||||
---
|
||||
|
||||
It indicates that the following indented section of code is to be stored for later.
|
||||
|
||||
---
|
||||
|
||||
It indicates the start of a function, and the following indented section of code is to be stored for later.
|
||||
|
||||
---
|
||||
|
||||
None of the above.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f080b6c005b0e76f064
|
||||
title: Python Lists
|
||||
challengeType: 11
|
||||
videoId: Y0cvfDpYC_c
|
||||
bilibiliIds:
|
||||
aid: 249460305
|
||||
bvid: BV1Dv411E7Uj
|
||||
cid: 376532993
|
||||
dashedName: python-lists
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What is the value of x after running this code:
|
||||
|
||||
```python
|
||||
fruit = "banana"
|
||||
x = fruit[1]
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
banana
|
||||
|
||||
---
|
||||
|
||||
a
|
||||
|
||||
---
|
||||
|
||||
b
|
||||
|
||||
---
|
||||
|
||||
True
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f160b6c005b0e76f085
|
||||
title: Python Objects
|
||||
challengeType: 11
|
||||
videoId: uJxGeTYy0us
|
||||
bilibiliIds:
|
||||
aid: 889496260
|
||||
bvid: BV1ZP4y1s7G6
|
||||
cid: 377522762
|
||||
dashedName: python-objects
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which is NOT true about objects in Python?
|
||||
|
||||
## --answers--
|
||||
|
||||
Objects get created and used.
|
||||
|
||||
---
|
||||
|
||||
Objects are bits of code and data.
|
||||
|
||||
---
|
||||
|
||||
Objects hide detail.
|
||||
|
||||
---
|
||||
|
||||
Objects are one of the five standard data types.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f080b6c005b0e76f062
|
||||
title: Reading Files
|
||||
challengeType: 11
|
||||
videoId: Fo1tW09KIwo
|
||||
bilibiliIds:
|
||||
aid: 334439927
|
||||
bvid: BV1pw411R7UK
|
||||
cid: 376532076
|
||||
dashedName: reading-files
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What is used to indicate a new line in a string?
|
||||
|
||||
## --answers--
|
||||
|
||||
\\n
|
||||
|
||||
---
|
||||
|
||||
{new_line}
|
||||
|
||||
---
|
||||
|
||||
{n}
|
||||
|
||||
---
|
||||
|
||||
/n
|
||||
|
||||
---
|
||||
|
||||
/new
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0b0b6c005b0e76f06f
|
||||
title: 'Regular Expressions: Matching and Extracting Data'
|
||||
challengeType: 11
|
||||
videoId: LaCZnTbQGkE
|
||||
bilibiliIds:
|
||||
aid: 975629041
|
||||
bvid: BV1i44y1b7hE
|
||||
cid: 414167130
|
||||
dashedName: regular-expressions-matching-and-extracting-data
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following program print?:
|
||||
|
||||
```python
|
||||
import re
|
||||
s = 'A message from csev@umich.edu to cwen@iupui.edu about meeting @2PM'
|
||||
lst = re.findall('\\S+@\\S+', s)
|
||||
print(lst)
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
['csev@umich.edu', 'cwen@iupui.edu']
|
||||
|
||||
---
|
||||
|
||||
['csev@umich.edu']
|
||||
|
||||
---
|
||||
|
||||
['umich.edu', 'iupui.edu']
|
||||
|
||||
---
|
||||
|
||||
['csev@', 'cwen@']
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0b0b6c005b0e76f070
|
||||
title: 'Regular Expressions: Practical Applications'
|
||||
challengeType: 11
|
||||
videoId: xCjFU9G6x48
|
||||
bilibiliIds:
|
||||
aid: 546924659
|
||||
bvid: BV1mq4y1H7rZ
|
||||
cid: 376386493
|
||||
dashedName: regular-expressions-practical-applications
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will search for a "$" in a regular expression?
|
||||
|
||||
## --answers--
|
||||
|
||||
$
|
||||
|
||||
---
|
||||
|
||||
\\dollar\\
|
||||
|
||||
---
|
||||
|
||||
\\$
|
||||
|
||||
---
|
||||
|
||||
!$
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0b0b6c005b0e76f06e
|
||||
title: Regular Expressions
|
||||
challengeType: 11
|
||||
videoId: Yud_COr6pZo
|
||||
bilibiliIds:
|
||||
aid: 759422542
|
||||
bvid: BV1W64y167YD
|
||||
cid: 376387549
|
||||
dashedName: regular-expressions
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which regex matches only a white space character?
|
||||
|
||||
## --answers--
|
||||
|
||||
\\S
|
||||
|
||||
---
|
||||
|
||||
\\s
|
||||
|
||||
---
|
||||
|
||||
.
|
||||
|
||||
---
|
||||
|
||||
\_
|
||||
|
||||
---
|
||||
|
||||
\\.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f180b6c005b0e76f08c
|
||||
title: Relational Database Design
|
||||
challengeType: 11
|
||||
videoId: AqdfbrpkbHk
|
||||
bilibiliIds:
|
||||
aid: 504388066
|
||||
bvid: BV1Qg411j742
|
||||
cid: 377532216
|
||||
dashedName: relational-database-design
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What is the best practice for how many times a piece of string data should be stored in a database?
|
||||
|
||||
## --answers--
|
||||
|
||||
0
|
||||
|
||||
---
|
||||
|
||||
1
|
||||
|
||||
---
|
||||
|
||||
2
|
||||
|
||||
---
|
||||
|
||||
3
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f170b6c005b0e76f08a
|
||||
title: Relational Databases and SQLite
|
||||
challengeType: 11
|
||||
videoId: QlNod5-kFpA
|
||||
bilibiliIds:
|
||||
aid: 249449958
|
||||
bvid: BV12v411E74H
|
||||
cid: 377530805
|
||||
dashedName: relational-databases-and-sqlite
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<a href="https://www.sqlite.org/download.html" target="_blank" rel="noopener noreferrer nofollow">Download SQLite</a>
|
||||
<a href="https://sqlitebrowser.org/dl/" target="_blank" rel="noopener noreferrer nofollow">Download DB Browser for SQLite</a>
|
||||
<a href="https://www.sqlite.org/famous.html" target="_blank" rel="noopener noreferrer nofollow">SQLite usage</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which is NOT a primary data structure in a database?
|
||||
|
||||
## --answers--
|
||||
|
||||
index
|
||||
|
||||
---
|
||||
|
||||
table
|
||||
|
||||
---
|
||||
|
||||
row
|
||||
|
||||
---
|
||||
|
||||
column
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f180b6c005b0e76f08f
|
||||
title: 'Relational Databases: Join Operation'
|
||||
challengeType: 11
|
||||
videoId: jvDw3D9GKac
|
||||
bilibiliIds:
|
||||
aid: 804461215
|
||||
bvid: BV1Ry4y1j7tv
|
||||
cid: 377542880
|
||||
dashedName: relational-databases-join-operation
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
When using a JOIN clause in an SQL statement, what does ON do?
|
||||
|
||||
## --answers--
|
||||
|
||||
It indicates what tables to perform the JOIN on.
|
||||
|
||||
---
|
||||
|
||||
It specifies the fields to use for the JOIN.
|
||||
|
||||
---
|
||||
|
||||
It indicates how the two tables are to be joined.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f190b6c005b0e76f090
|
||||
title: 'Relational Databases: Many-to-many Relationships'
|
||||
challengeType: 11
|
||||
videoId: z-SBYcvEQOc
|
||||
bilibiliIds:
|
||||
aid: 291965127
|
||||
bvid: BV1Af4y1L7BK
|
||||
cid: 377543409
|
||||
dashedName: relational-databases-many-to-many-relationships
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
More resources:
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=uQ3Qv1z_Vao" target="_blank" rel="noopener noreferrer nofollow">Exercise: Email</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=qEkUEAz8j3o" target="_blank" rel="noopener noreferrer nofollow">Exercise: Roster</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=I-E7avcPeSE" target="_blank" rel="noopener noreferrer nofollow">Exercise: Tracks</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=RZRAoBFIH6A" target="_blank" rel="noopener noreferrer nofollow">Exercise: Twfriends</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=xBaJddvJL4A" target="_blank" rel="noopener noreferrer nofollow">Exercise: Twspider</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which is an example of a many-to-many relationship?
|
||||
|
||||
## --answers--
|
||||
|
||||
teacher to student
|
||||
|
||||
---
|
||||
|
||||
customer to order
|
||||
|
||||
---
|
||||
|
||||
book to pages
|
||||
|
||||
---
|
||||
|
||||
city to country
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f180b6c005b0e76f08e
|
||||
title: 'Relational Databases: Relationship Building'
|
||||
challengeType: 11
|
||||
videoId: CSbqczsHVnc
|
||||
bilibiliIds:
|
||||
aid: 376996473
|
||||
bvid: BV1jo4y1S7VY
|
||||
cid: 377532966
|
||||
dashedName: relational-databases-relationship-building
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What does the INSERT command do in SQL?
|
||||
|
||||
## --answers--
|
||||
|
||||
It defines a new row by listing the fields we want to include followed by the values we want placed in the new row.
|
||||
|
||||
---
|
||||
|
||||
It defines a new column by listing the rows we want to include followed by the values we want placed in the new column.
|
||||
|
||||
---
|
||||
|
||||
It defines a new table by listing the rows and fields we want to include followed by the values that we want placed in the table.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f180b6c005b0e76f08d
|
||||
title: Representing Relationships in a Relational Database
|
||||
challengeType: 11
|
||||
videoId: '-orenCNdC2Q'
|
||||
bilibiliIds:
|
||||
aid: 931953070
|
||||
bvid: BV1FM4y1N7hc
|
||||
cid: 377532529
|
||||
dashedName: representing-relationships-in-a-relational-database
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What is a foreign key?
|
||||
|
||||
## --answers--
|
||||
|
||||
A key that is not supposed to be there.
|
||||
|
||||
---
|
||||
|
||||
A key that uses non-latin characters.
|
||||
|
||||
---
|
||||
|
||||
A number that points to the primary key of an associated row in a different table.
|
||||
|
||||
---
|
||||
|
||||
A key that the "real world" might use to look up a row.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f090b6c005b0e76f066
|
||||
title: Strings and Lists
|
||||
challengeType: 11
|
||||
videoId: lxcFa7ldCi0
|
||||
bilibiliIds:
|
||||
aid: 804401443
|
||||
bvid: BV1By4y1j7F9
|
||||
cid: 376385517
|
||||
dashedName: strings-and-lists
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
More resources:
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=-9TfJF2dwHI" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What does n equal in this code?
|
||||
|
||||
```python
|
||||
words = 'His e-mail is q-lar@freecodecamp.org'
|
||||
pieces = words.split()
|
||||
parts = pieces[3].split('-')
|
||||
n = parts[1]
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
mail
|
||||
|
||||
---
|
||||
|
||||
q
|
||||
|
||||
---
|
||||
|
||||
lar
|
||||
|
||||
---
|
||||
|
||||
`lar@freecodecamp.org`
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
@@ -1,63 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f070b6c005b0e76f060
|
||||
title: Strings in Python
|
||||
challengeType: 11
|
||||
videoId: LYZj207fKpQ
|
||||
bilibiliIds:
|
||||
aid: 504434218
|
||||
bvid: BV1Lg41177s8
|
||||
cid: 376531802
|
||||
dashedName: strings-in-python
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following code print?:
|
||||
|
||||
```python
|
||||
for n in "banana":
|
||||
print(n)
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
<pre>
|
||||
n
|
||||
n
|
||||
</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>
|
||||
0
|
||||
1
|
||||
</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>
|
||||
0
|
||||
1
|
||||
2
|
||||
3
|
||||
4
|
||||
5
|
||||
</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>
|
||||
b
|
||||
a
|
||||
n
|
||||
a
|
||||
n
|
||||
a
|
||||
</pre>
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
@@ -1,63 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0a0b6c005b0e76f06c
|
||||
title: The Tuples Collection
|
||||
challengeType: 11
|
||||
videoId: 3Lxpladfh2k
|
||||
bilibiliIds:
|
||||
aid: 334468209
|
||||
bvid: BV1aw411R77G
|
||||
cid: 376533308
|
||||
dashedName: the-tuples-collection
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following code print?:
|
||||
|
||||
```python
|
||||
d = dict()
|
||||
d['quincy'] = 1
|
||||
d['beau'] = 5
|
||||
d['kris'] = 9
|
||||
for (k,i) in d.items():
|
||||
print(k, i)
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
<pre>
|
||||
k i
|
||||
k i
|
||||
k i
|
||||
</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>
|
||||
quincy 0
|
||||
beau 1
|
||||
kris 2
|
||||
</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>
|
||||
quincy 1
|
||||
beau 5
|
||||
kris 9
|
||||
</pre>
|
||||
|
||||
---
|
||||
|
||||
<pre>
|
||||
1 quincy
|
||||
5 beau
|
||||
9 kris
|
||||
</pre>
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0e0b6c005b0e76f07a
|
||||
title: Using Web Services
|
||||
challengeType: 11
|
||||
videoId: oNl1OVDPGKE
|
||||
bilibiliIds:
|
||||
aid: 759406136
|
||||
bvid: BV1b64y16746
|
||||
cid: 377332189
|
||||
dashedName: using-web-services
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What are the two most common ways to send data over the internet?
|
||||
|
||||
## --answers--
|
||||
|
||||
JSON and TXT
|
||||
|
||||
---
|
||||
|
||||
JSON and XML
|
||||
|
||||
---
|
||||
|
||||
XML and TXT
|
||||
|
||||
---
|
||||
|
||||
XML and PHP
|
||||
|
||||
---
|
||||
|
||||
PHP and TXT
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f050b6c005b0e76f056
|
||||
title: 'Variables, Expressions, and Statements'
|
||||
challengeType: 11
|
||||
videoId: nELR-uyyrok
|
||||
bilibiliIds:
|
||||
aid: 419396811
|
||||
bvid: BV1iV411p7Mn
|
||||
cid: 376318116
|
||||
dashedName: variables-expressions-and-statements
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What is the symbol used in an assignment statement?
|
||||
|
||||
## --answers--
|
||||
|
||||
~
|
||||
|
||||
---
|
||||
|
||||
&
|
||||
|
||||
---
|
||||
|
||||
=
|
||||
|
||||
---
|
||||
|
||||
\|
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f690b6c005b0e76f095
|
||||
title: Visualizing Data with Python
|
||||
challengeType: 11
|
||||
videoId: e3lydkH0prw
|
||||
bilibiliIds:
|
||||
aid: 291996462
|
||||
bvid: BV15f4y1L7jH
|
||||
cid: 377544192
|
||||
dashedName: visualizing-data-with-python
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Most data needs to be \_\_\_\_\_\_ before using it.
|
||||
|
||||
## --answers--
|
||||
|
||||
converted to JSON format
|
||||
|
||||
---
|
||||
|
||||
graphed
|
||||
|
||||
---
|
||||
|
||||
cleaned
|
||||
|
||||
---
|
||||
|
||||
memorized
|
||||
|
||||
---
|
||||
|
||||
turned into song
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f150b6c005b0e76f080
|
||||
title: 'Web Services: API Rate Limiting and Security'
|
||||
challengeType: 11
|
||||
videoId: pI-g0lI8ngs
|
||||
bilibiliIds:
|
||||
aid: 249456172
|
||||
bvid: BV1Sv411E7qa
|
||||
cid: 377336269
|
||||
dashedName: web-services-api-rate-limiting-and-security
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
More resources:
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=TJGJN0T8tak" target="_blank" rel="noopener noreferrer nofollow">Exercise: GeoJSON</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=vTmw5RtfGMY" target="_blank" rel="noopener noreferrer nofollow">Exercise: JSON</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=2c7YwhvpCro" target="_blank" rel="noopener noreferrer nofollow">Exercise: Twitter</a>
|
||||
|
||||
\- <a href="https://www.youtube.com/watch?v=AopYOlDa-vY" target="_blank" rel="noopener noreferrer nofollow">Exercise: XML</a>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
When making a request from the Twitter API, what information must always be sent with the request?
|
||||
|
||||
## --answers--
|
||||
|
||||
Twitter username
|
||||
|
||||
---
|
||||
|
||||
date range
|
||||
|
||||
---
|
||||
|
||||
search term
|
||||
|
||||
---
|
||||
|
||||
key
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f150b6c005b0e76f07f
|
||||
title: 'Web Services: APIs'
|
||||
challengeType: 11
|
||||
videoId: oUNn1psfBJg
|
||||
bilibiliIds:
|
||||
aid: 589451017
|
||||
bvid: BV1zq4y1X7A9
|
||||
cid: 377336011
|
||||
dashedName: web-services-apis
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What does API stand for?
|
||||
|
||||
## --answers--
|
||||
|
||||
Application Portable Intelligence
|
||||
|
||||
---
|
||||
|
||||
Associate Programming International
|
||||
|
||||
---
|
||||
|
||||
Application Program Interface
|
||||
|
||||
---
|
||||
|
||||
Action Portable Interface
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f140b6c005b0e76f07d
|
||||
title: 'Web Services: JSON'
|
||||
challengeType: 11
|
||||
videoId: ZJE-U56BppM
|
||||
bilibiliIds:
|
||||
aid: 419491911
|
||||
bvid: BV1r3411672w
|
||||
cid: 377332928
|
||||
dashedName: web-services-json
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following code print?:
|
||||
|
||||
```python
|
||||
import json
|
||||
data = '''
|
||||
[
|
||||
{ "id" : "001",
|
||||
"x" : "2",
|
||||
"name" : "Quincy"
|
||||
} ,
|
||||
{ "id" : "009",
|
||||
"x" : "7",
|
||||
"name" : "Mrugesh"
|
||||
}
|
||||
]
|
||||
'''
|
||||
info = json.loads(data)
|
||||
print(info[1]['name'])
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
Quincy
|
||||
|
||||
---
|
||||
|
||||
Mrugesh
|
||||
|
||||
---
|
||||
|
||||
001
|
||||
|
||||
---
|
||||
|
||||
009
|
||||
|
||||
---
|
||||
|
||||
[Error]
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f140b6c005b0e76f07e
|
||||
title: 'Web Services: Service Oriented Approach'
|
||||
challengeType: 11
|
||||
videoId: muerlsCHExI
|
||||
bilibiliIds:
|
||||
aid: 846899335
|
||||
bvid: BV1E54y1J7oz
|
||||
cid: 377333277
|
||||
dashedName: web-services-service-oriented-approach
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
With a services oriented approach to developing web apps, where is the data located?
|
||||
|
||||
## --answers--
|
||||
|
||||
Spread across many computer systems connected via the internet or internal network.
|
||||
|
||||
---
|
||||
|
||||
Within different services on the main web server.
|
||||
|
||||
---
|
||||
|
||||
On a separate database server.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0e0b6c005b0e76f07c
|
||||
title: 'Web Services: XML Schema'
|
||||
challengeType: 11
|
||||
videoId: yWU9kTxW-nc
|
||||
bilibiliIds:
|
||||
aid: 631951466
|
||||
bvid: BV1Vb4y1r7m7
|
||||
cid: 377332603
|
||||
dashedName: web-services-xml-schema
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What is XSD?
|
||||
|
||||
## --answers--
|
||||
|
||||
The W3C Schema specification for XML.
|
||||
|
||||
---
|
||||
|
||||
The standard JSON schema from MOZ.
|
||||
|
||||
---
|
||||
|
||||
Extensible Situational Driver
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f0e0b6c005b0e76f07b
|
||||
title: 'Web Services: XML'
|
||||
challengeType: 11
|
||||
videoId: _pZ0srbg7So
|
||||
bilibiliIds:
|
||||
aid: 761920032
|
||||
bvid: BV1n64y1x7KW
|
||||
cid: 377332379
|
||||
dashedName: web-services-xml
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What is wrong with the following XML?:
|
||||
|
||||
```xml
|
||||
<person>
|
||||
<name>Chuck</name>
|
||||
<phone type="intl">
|
||||
+1 734 303 4456
|
||||
<email hide="yes" />
|
||||
</person>
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
Email tag is missing closing tag.
|
||||
|
||||
---
|
||||
|
||||
Spacing will cause XML to be invalid.
|
||||
|
||||
---
|
||||
|
||||
Phone tag is missing closing tag.
|
||||
|
||||
---
|
||||
|
||||
Plain text should be encoded using UTF-8.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
id: 5e7b9f090b6c005b0e76f065
|
||||
title: Working with Lists
|
||||
challengeType: 11
|
||||
videoId: lCnHfTHkhbE
|
||||
bilibiliIds:
|
||||
aid: 376965958
|
||||
bvid: BV1No4y1S7oi
|
||||
cid: 376387989
|
||||
dashedName: working-with-lists
|
||||
---
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which method is used to add an item at the end of a list?
|
||||
|
||||
## --answers--
|
||||
|
||||
insert
|
||||
|
||||
---
|
||||
|
||||
push
|
||||
|
||||
---
|
||||
|
||||
append
|
||||
|
||||
---
|
||||
|
||||
new
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
---
|
||||
id: 615389bd81347947ea7ba896
|
||||
title: الخطوة 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Flexbox هو تخطيط CSS أحادي البعد يمكنه التحكم في الطريقة التي يتم فيها المسافة بين العناصر وتحويلها داخل الحاوية.
|
||||
|
||||
لاستخدامه، أعطي عنصر `display` خاصية `flex`. هذا سيجعل العنصر <em>حاوي flex</em>. أي فرع مباشر لحاوي flex تسمى <em>عناصر flex</em>.
|
||||
|
||||
أنشئ منتقي `.gallery`, يحتوى على خاصية flex.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لديك منتقي `.gallery`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery'));
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقي `.gallery` على خاصية `display` بقيمة `flex`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<h1>css flexbox photo gallery</h1>
|
||||
</header>
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@@ -1,112 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51578
|
||||
title: الخطوة 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ابدأ بإعداد بنية HTML الخاصة بك. قم بإضافة تعريف `<!DOCTYPE>` وعنصر `html` مع سمة `lang` تم تعيينها إلى `en`. ضمن عنصر `html` أضف عنصر `head` وعنصر `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يحتوي الكود الخاص بك على `DOCTYPE`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
يجب عليك تضمين مسافة بعد `DOCTYPE`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
يجب عليك تحديد نوع المستند ليكون `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/html/gi));
|
||||
```
|
||||
|
||||
يجب عليك إغلاق تعريف `DOCTYPE` باستخدام `>` بعد تحديد النوع.
|
||||
|
||||
```js
|
||||
assert(code.match(/html\s*>/gi));
|
||||
```
|
||||
|
||||
يجب أن يكون تعريف `DOCTYPE` في بداية HTML الخاص بك.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
```
|
||||
|
||||
يجب أن يحتوي عنصر `html` الخاص بك على علامة افتتاحية مع سمة `lang` بقيمة `en`
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
```
|
||||
|
||||
يجب أن يحتوي عنصر `html` الخاص بك على closing tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
يجب أن يكون لديك الـ opening tag للـ `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
يجب أن يكون لديك الـ closing tag للـ `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
يجب أن يكون لديك الـ opening tag للـ `body`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
يجب أن يكون لديك الـ closing tag للـ `body`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
عناصر `head` و `body` يجب أن يكونا أشقاء (siblings).
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
|
||||
```
|
||||
|
||||
عنصر `head` يجب أن يكون داخل عنصر `html`.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
عنصر `body` يجب أن يكون داخل عنصر `html`.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -1,63 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51579
|
||||
title: الخطوة 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ضمن عنصر `head` الخاص بك، أضف وسم `meta` مع سمة `charset` معينة إلى `utf-8`. ايضا قم بإضافة عنصر `title` مع النص `Picasso Painting`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك إضافة عنصر `meta` واحد بالضبط.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('meta').length === 1);
|
||||
```
|
||||
|
||||
يجب أن يحتوي وسم `meta` الخاص بك علي سمة `charset`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('meta')?.getAttribute('charset'));
|
||||
```
|
||||
|
||||
يجب تعيين سمة `charset` الخاصة بك إلى `utf-8`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8');
|
||||
```
|
||||
|
||||
يجب عليك إضافة عنصر `title` واحد بالضبط.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('title').length === 1);
|
||||
```
|
||||
|
||||
عنصر `title` الخاص بك يجب أن يحتوي على النص `Picasso Painting`. لاحظ أن التهجئة والـ casing مهمان.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('title')?.innerText === 'Picasso Painting');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -1,56 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157a
|
||||
title: الخطوة 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
FontAwesome هي مكتبة من الأيقونات التي تعمل بالـ SVG، والعديد منها متاح للاستخدام مجاناً. سوف تستخدم بعض هذه الايقونات في هذا المشروع، لذا سوف تحتاج إلى ربط الـ style sheet الخارجية مع الـ HTML.
|
||||
|
||||
قم بإضافة عنصر `link` مع `rel` من `stylesheet` و `href` من `https://use.fontawesome.com/releases/v5.8.2/css/all.css`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لديك عنصران `link`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('link').length === 2);
|
||||
```
|
||||
|
||||
`link` الخاص بك يجب أن يحتوي على `rel` من `stylesheet`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet');
|
||||
```
|
||||
|
||||
عنصر `link` الخاص بك يجب أن يحتوي على `href` من `https://use.fontawesome.com/releases/v5.8.2/css/all.css`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -1,50 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157b
|
||||
title: الخطوة 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
لبدء لوحتك، أعط عنصر `body` الـ `background-color` من `rgb(184, 132, 46)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك استخدام منتقي `body`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
يجب أن يكون لعنصر `body` الخاص بك خاصية `background-color` بقيمة `rgb (184, 132, 46)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -1,51 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157c
|
||||
title: الخطوة 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ضمن body tag الخاص بك، أضف عنصر `div`. أعطيه `id` من `back-wall`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك إضافة عنصر واحد `div` بالضبط.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 1);
|
||||
```
|
||||
|
||||
يجب أن يكون لعنصر `div` الخاص بك `id` بقيمة `back-wall`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.getAttribute('id') === 'back-wall');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
```
|
||||
@@ -1,54 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157d
|
||||
title: الخطوة 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
استخدم محدد معرف (id selector) لإعطاء عنصر `back-wall` خاصية `background-color` بقيمة `#8B4513`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك استخدام منتقي `#back-wall`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall'));
|
||||
```
|
||||
|
||||
يجب أن يكون لمنتقي `#back-wall` الخاص بك `background-color` من `#8B4513`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -1,56 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157e
|
||||
title: الخطوة 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
اعطي عنصر `#back-wall` خاصية `width` بقيمة `100%` و `height` بقيمة `60%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك تعيين `width` الـ `#back-wall` إلى `100%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%');
|
||||
```
|
||||
|
||||
يجب عليك تعيين `height` الـ `#back-wall` إلى `60%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,69 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157f
|
||||
title: الخطوة 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
عادةً، يتم تقديم HTML بترتيب من أعلى إلى أسفل. العناصر في الجزء العلوي من التعليمات البرمجية موضوعة في الجزء العلوي من الصفحة. ومع ذلك، قد ترغب مرات عدّة في نقل العناصر إلى مواقف مختلفة. يمكنك الفعل ذلك باستخدام سمة `position`.
|
||||
|
||||
عيّن خاصية `position` لعنصر `#back-wall` بقيمة `absolute`. يخرج موضع `absolute` العنصر من ذلك التدفق المستند من أعلى إلى أسفل ويسمح لك بتعديله بالنسبة (relative) إلى الحاوية.
|
||||
|
||||
عندما يتم وضع عنصر يدوياً، يمكنك نقل تخطيطه باستخدام `top`, و`left`، و`right`، و`bottom`. يجب أن يحتوي `#back-wall` على `top` بقيمة `0`، و `left` بقيمة `0`.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب يحتوي منتقيك `#back-wall` على `position` محدد على `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقيك `#back-wall` على خاصية `top` بقيمة `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقيك `#back-wall` على خاصية `left` بقيمة `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,59 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51580
|
||||
title: الخطوة 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
يتم استخدام خاصية `z-index` لإنشاء "طبقات" (layers) لعناصر HTML الخاصة بك. إذا كنت على دراية بأدوات تحرير الصور، ربما كنت قد عملت مع الطبقات من قبل. هذا مفهوم مشابه.
|
||||
|
||||
ستبدو العناصر التي تحتوي على قيمة `z-index` أعلى فوق العناصر التي تحتوي على قيمة `z-index` اقل. يمكن الجمع بين ذلك وبين تحديد المكان (positioning) في الدرس السابق، لإنشاء تأثيرات فريدة.
|
||||
|
||||
بما أن عنصر `back-wall` سيحتاج إلى أن يظهر "خلف" العناصر الأخرى التي ستقوم بإنشائها، قم إعطاء عنصر `back-wall` الـ `z-index` بقيمة `-1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يحتوي منتقي `#back-wall` الخاص بك على خاصية `z-index` بقيمة `-1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,68 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51581
|
||||
title: الخطوة 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
أسفل عنصرك `#back-wall`، أنشئ `div` مع `class` بقيمة `characters`. هذا هو المكان الذي ستنشئ فيه شخصيات لوحتك.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك إضافة عنصر `div` جديد واحد فقط.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 2);
|
||||
```
|
||||
|
||||
عنصر `div` الجديد الخاص بك يجب أن يأتي بعد عنصر `#back-wall` الخاص بك.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div');
|
||||
```
|
||||
|
||||
عنصر `div` الجديد الخاص بك يجب أن يحتوي على `class` يسمي `characters`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
@@ -1,70 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51582
|
||||
title: الخطوة 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
داخل عنصر `.characters`، أنشئ `div` آخر مع `id` بقيمة `offwhite-character`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك إنشاء عنصر `div` إضافي واحد فقط.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 3);
|
||||
```
|
||||
|
||||
يجب أن يكون عنصر `div` الجديد متداخلا في عنصر `.characters` الخاص بك.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.characters div'));
|
||||
```
|
||||
|
||||
يجب أن يحتوي عنصر `div` الجديد على`id` بقيمة `offwhite-character`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
@@ -1,84 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51583
|
||||
title: الخطوة 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
قم بإنشاء أربعة عناصر `div` داخل عنصر`offwhite-character` الخاص بك. اعطي تلك العناصر `div` قيم `id` التالية، بالترتيب: `white-hat` و `black-mask` و `gray-instrument` و `tan-table`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك إضافة أربعة عناصر `div` ضمن عنصر `.offwhite-character` الخاص بك.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div').length === 4);
|
||||
```
|
||||
|
||||
يجب أن يحتوي العنصر `div` الجديد على `id` بقيمة `white-hat`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat');
|
||||
```
|
||||
|
||||
يجب أن يحتوي عنصر `div` الجديد الثاني على `id` بقيمة `black-mask`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask');
|
||||
```
|
||||
|
||||
عنصر `div` الجديد الثالث الخاص بك يجب أن يحتوي على `id` بقيمة `gray-instrument`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument');
|
||||
```
|
||||
|
||||
عنصر `div` الجديد الرابع يجب أن يحتوي على `id` بقيمة `tan-table`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
@@ -1,79 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51584
|
||||
title: الخطوة 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
هذه الشخصية تحتاج إلى عينين. أنشئ عنصرين `div` في عنصر `#black-mask`. اعطيهم الـ classes الآتية `eyes left` و `eyes right`، بذلك الترتيب.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك إنشاء عنصرين `div` ضمن عنصر `#black-mask` الخاص بك.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#black-mask div').length === 2);
|
||||
```
|
||||
|
||||
يجب أن تحتوي أول `div` جديدة على `eyes` و `left`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes'));
|
||||
assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left'));
|
||||
```
|
||||
|
||||
يجب أن تحتوي ثاني `div` جديدة على classes تدعي `eyes` و `right`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes'));
|
||||
assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div id="gray-instrument"></div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
@@ -1,74 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51585
|
||||
title: الخطوة 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
قم بإنشاء بعض "النقاط" للجهاز (instrument). أضف خمس عناصر `div` داخل عنصرك `#gray-instrument`. قم بتعيين `class` كل منهما إلى `black-dot`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لديك خمسة عناصر `div` جديدة داخل عنصر `#gray-instrument` الخاص بك.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#gray-instrument div').length === 5);
|
||||
```
|
||||
|
||||
يجب أن تحتوي عناصر `div` الخمسة الخاصة بك على الـ classes الآتية `black-dot`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
@@ -1,93 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51586
|
||||
title: الخطوة 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `offwhite-character`. أعطيه `width` بقيمة `300px`،و `height` بقيمة `550px`، و `background-color` بقيمة `GhostWhite`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك استخدام منتقي `#offwhite-character`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character'));
|
||||
```
|
||||
|
||||
يجب أن يكون لـ `#offwhite-character` الخاص بك خاصية `width` بقيمة `300px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px');
|
||||
```
|
||||
|
||||
يجب أن يكون لـ `#offwhite-character` الخاص بك خاصية `height` بقيمة `550px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px');
|
||||
```
|
||||
|
||||
يجب أن يحتوي `#offwhite-character` على خاصية `background-color` تم تعيينها إلى `GhostWhite`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -1,91 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51587
|
||||
title: الخطوة 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
أنقل `#offwhite-character` إلى مكانه بواسطة إعطائه `position` بقيمة `absolute` و `top` بقيمة `20%` و `left` بقيمة `17.5%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لمنتقي `#offwhite-character` الخاص بك خاصية `position` بقيمة `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقي `#offwhite-character` على خاصية `top` بقيمة `20%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقي `#offwhite-character` على خاصية `left` بقيمة `17.5%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,102 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51588
|
||||
title: الخطوة 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
باستخدام منتقي معرف (id selector)، صمم العنصر مع معرف (id) يسمى `white-hat`. أعطيه `width` و `height` بقيمة `0`، و `border-style` بقيمة `solid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك استخدام منتقي `#white-hat`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat'));
|
||||
```
|
||||
|
||||
يجب أن يكون لمنتقي `#white-hat` الخاص بك الخاصية `width` بقيمة `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px');
|
||||
```
|
||||
|
||||
يجب أن يكون لمنتقي `#white-hat` الخاص بك الخاصية `height` بقيمة `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px');
|
||||
```
|
||||
|
||||
يجب أن يكون لمنتقي `#white-hat` الخاص بك الخاصية `border-style` بقيمة `solid`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -1,88 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51589
|
||||
title: الخطوة 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
هذا لا يبدو صحيحا. قم بتعيين `border-width` الى `0 120px 140px 180px` لتحديد حجم القبعة (hat) بشكل صحيح.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لمنتقي `#white-hat` الخاص بك خاصية `border-width` بقيمة `0 120px 140px 180px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,107 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158a
|
||||
title: الخطوة 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
الآن لديك صندوق كبير. إعطائه `border-top-color`, و`border-right-color`, و`border-left-color` من `transparent`. عيّن `border-bottom-color` إلى `GhostWhite`. وهذا سيجعلها تبدو أشبه بالقبعة.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب يحمل منتقيك `#white-hat` خاصية `border-top-color` بقيمة `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent');
|
||||
```
|
||||
|
||||
يجب يحمل منتقيك `#white-hat` خاصية `border-right-color` بقيمة `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent');
|
||||
```
|
||||
|
||||
يجب يحمل منتقيك `#white-hat` خاصية `border-left-color` بقيمة `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent');
|
||||
```
|
||||
|
||||
يجب يحمل منتقيك `#white-hat` خاصية `border-bottom-color` بقيمة `GhostWhite`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,105 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158b
|
||||
title: الخطوة 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
أعطي القبعة `position` بقيمة `absolute`، و`top` بقيمة `-140px`، و `left` بقيمة `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يحتوي منتقيك `#white-hat` على خاصية `position` بقيمة `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقيك `#white-hat` الخاصية `top` بقيمة `-140px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px');
|
||||
```
|
||||
|
||||
يجب يحمل منتقيك `#white-hat` خاصية `left` بقيمة `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,116 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158c
|
||||
title: الخطوة 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `black-mask`. أعطيه `width` بقيمة `100%`، و `height` بقيمة `50px`، و `background-color` بقيمة `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لديك منتقي `#black-mask`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask'));
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقيك `#black-mask` على خاصية `width` بقيمة `100%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقيك `#black-mask` على خاصية `height` بقيمة `50px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقي `#black-mask` على خاصية `background-color` بقيمة `rgb(45, 31, 19)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -1,114 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158d
|
||||
title: الخطوة 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
اعطي قناع `position` بقيمة `absolute`، و`top` و`left` بقيمة `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لمنتقي `#black-mask` الخاص بك خاصية `position` بقيمة `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقي `#black-mask` الخاص بك على خاصية `top` بقيمة `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقي `#black-mask` الخاص بك على خاصية `left` بقيمة `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,105 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158e
|
||||
title: الخطوة 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
للتأكد من أنك تستطيع رؤية الأقنعة (mask)، قم بإعطائه `z-index` بقيمة `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يحتوي منتقي `#black-mask` على خاصية `z-index` بقيمة `1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,126 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158f
|
||||
title: الخطوة 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
باستعمال منتقي معرف (id selector), اعطي عنصر الذي يحتوي على معرف (id) يسمى `gray-instrument` خاصية `width` بقيمة `15%`، و`height` بقيمة `40%`، و `background-color` بقيمة `rgb(167, 162, 117)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لديك منتقي `#gray-instrument`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument'));
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقيك `#gray-instrument` على خاصية `width` بقيمة `15%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقيك `#gray-instrument` على خاصية `height` بقيمة `40%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقي `#gray-instrument` على خاصية `background-color` بقيمة `rgb(167, 162, 117)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -1,124 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51590
|
||||
title: الخطوة 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
الآن انقله إلى مكانه باستخدام `position` بقيمة `absolute` و `top` بقيمة `50px` و `left` بقيمة `125px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لمنتقي `#gray-instrument` الخاص بك خاصية `position` بقيمة `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute');
|
||||
```
|
||||
|
||||
يجب أن يكون لمنتقي `#gray-instrument` الخاص بك خاصية `top` بقيمة `50px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px');
|
||||
```
|
||||
|
||||
يجب أن يكون لمنتقي `#gray-instrument` الخاص بك خاصية `left` بقيمة `125px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,115 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51591
|
||||
title: الخطوة 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
عيّن `z-index` إلى `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يحتوي منتقيك `#gray-instrument` على خاصية `z-index` بقيمة `1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,136 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51592
|
||||
title: الخطوة 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
استخدم منتقي الفئة (class selector) لإنشاء قاعدة لعناصر يحتوي على فئة (class) تسمى `black-dot`. عيّن `width` بقيمة `10px`, و`height` بقيمة `10px`, و`background-color` بقيمة `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لديك منتقي `.black-dot`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot'));
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقي `.black-dot` على خاصية `width` بقيمة `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px');
|
||||
```
|
||||
|
||||
يجب أن يكون لدى منتقي `.black-dot` خاصية `height` تم تعيينها إلى `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px');
|
||||
```
|
||||
|
||||
منتقي `.black-dot` يجب أن يكون لديه خاصية `background-color` بقيمة `rgb(45, 31, 19)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -1,125 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51593
|
||||
title: الخطوة 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
هذه النِّقَاط هي مجرد مربعا قليلاً. امنح فئة `black-dot` خاصية `border-radius` بقيمة `50%` لتصليحا.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يحتوي منتقيك `.black-dot` على خاصية `border-radius` بقيمة `50%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,135 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51594
|
||||
title: الخطوة 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
نقل النِّقَاط إلى مكانها عن طريق تحديد `display` بقيمة `block`، و`margin` بقيمة `auto`، و`margin-top` بقيمة `65%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يحتوي منتقيك `.black-dot` على خاصية `display` بقيمة `block`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block');
|
||||
```
|
||||
|
||||
يجب أن يكون لمنتقيك `.black-dot` خاصية `margin` بقيمة `auto`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto'));
|
||||
```
|
||||
|
||||
يجب أن يكون لمنتقيك `.black-dot` خاصية `margin-top` بقيمة `65%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,146 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51595
|
||||
title: الخطوة 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
استخدام منتقي معرف (id selector) لتصميم عنصر مع معرف (id) يسمى `tan-table`. أعطيه `width` بقيمة `450px`، و`height` بقيمة `140px`، و`background-color` بقيمة `#D2691E`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لديك منتقي `#tan-table`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table'));
|
||||
```
|
||||
|
||||
يجب أن يحتوي لمنتقيك `#tan-table` على خاصية `width` بقيمة `450px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px');
|
||||
```
|
||||
|
||||
يجب أن يحتوي لمنتقيك `#tan-table` على خاصية `height` بقيمة `140px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px');
|
||||
```
|
||||
|
||||
يجب أن يحتوي لمنتقيك `#tan-table` على خاصية `background-color` بقيمة `#D2691E`.
|
||||
|
||||
```js
|
||||
assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -1,144 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51596
|
||||
title: الخطوة 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
أنقل الجدول (table) إلى مكانه بواسطة إعطائه `position` بقيمة `absolute` وخاصية `top` بقيمة `275px`, وخاصية `left` بقيمة `15px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يحتوي منتقيك `#tan-table` على خاصية `position` بقيمة `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقي `#tan-table` على خاصية `top` تم تعيينها إلى `275px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقيك `#tan-table` على خاصية `left` تم تعيينها إلى `15px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,135 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51597
|
||||
title: الخطوة 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
إعطاء الجدول `z-index` بقيمة `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يحتوي منتقيك `#tan-table` على خاصية `z-index` بقيمة `1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -1,142 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51598
|
||||
title: الخطوة 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
بعد عنصرك `div#offwhite-character`، أضف `div` مع `id` بقيمة `black-character`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك إضافة عنصر `div` جديد داخل عنصر `.characters`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.length === 2);
|
||||
```
|
||||
|
||||
يجب أن يحتوي عنصر `div` الجديد على `id` تم تعينه إلى `black-character`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
```
|
||||
@@ -1,156 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51599
|
||||
title: الخطوة 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ضمن عنصر `#black-character`، أضف ثلاث عناصر `div` مع قيم `id` التالية، بالترتيب: `black-hat`، و`gray-mask`، و`white-paper`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لديك ثلاث عناصر `div` داخل عنصرك `#black-character`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#black-character > div')?.length === 3);
|
||||
```
|
||||
|
||||
يجب أن يحتوي أول عنصرك `div` على `id` يسمي `black-hat`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat');
|
||||
```
|
||||
|
||||
يجب أن يحتوي ثاني عنصرك `div` على `id` يسمي `gray-mask`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask');
|
||||
```
|
||||
|
||||
يجب أن يحتوي ثالث عنصرك `div` على `id` يسمي `white-paper`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
```
|
||||
@@ -1,158 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5159a
|
||||
title: الخطوة 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
إن القناع يحتاج إلى عيون. ضمن عنصر `#gray-mask`، أضف عنصرين `div`. يجب أن يكون الأول `class` يسمى `eyes left`, وينبغي أن يكون الثاني `class` يسمى `eyes right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لديك عنصران `div` ضمن عنصرك `#gray-mask`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#gray-mask > div')?.length === 2);
|
||||
```
|
||||
|
||||
يجب أن يحتوي أول عنصرك `div` على `class` يسمي `eyes left`.
|
||||
|
||||
```js
|
||||
const first = document.querySelectorAll('#gray-mask > div')?.[0];
|
||||
assert(first?.classList?.contains('eyes'));
|
||||
assert(first?.classList?.contains('left'));
|
||||
```
|
||||
|
||||
يجب أن يحتوي ثاني عنصرك `div` على `class` يسمي `eyes right`.
|
||||
|
||||
```js
|
||||
const second = document.querySelectorAll('#gray-mask > div')?.[1];
|
||||
assert(second?.classList?.contains('eyes'));
|
||||
assert(second?.classList?.contains('right'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div id="white-paper"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
```
|
||||
@@ -1,161 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5159b
|
||||
title: الخطوة 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
حان الوقت لاستخدام بعض FontAwesome icons.
|
||||
|
||||
يتم استخدام عنصر `i` للنص الاصطلاحي (idiomatic)، أو النص المنفصل عن محتوى النص "العادي". يمكن أن يكون هذا للنص _italic_، مثل المصطلحات العلمية، أو للرموز مثل تلك المقدمة من FontAwesome.
|
||||
|
||||
ضمن عنصر `#white-paper`، أضف أربع عناصر `i`. أعطيهم جميع `class` بقيمة `fas fa-music`.
|
||||
|
||||
تحدد هذه الفئة المميزة كيفية تحميل رمز FontAwesome. يشير `fas` إلى فئة الأيقونات (FontAwesome Solid، هنا)، بينما يختار `fa-music` الرمز المحدد.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لديك أربع عناصر `i` جديدة داخل عنصرك `#white-paper`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#white-paper > i')?.length === 4);
|
||||
```
|
||||
|
||||
يجب أن تحتوي جميع عناصرك `i` على `class` بقيمة `fas fa-music`.
|
||||
|
||||
```js
|
||||
const icons = document.querySelectorAll('#white-paper > i');
|
||||
for (const icon of icons) {
|
||||
assert(icon.classList?.contains('fas'));
|
||||
assert(icon.classList?.contains('fa-music'));
|
||||
};
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
```
|
||||
@@ -1,169 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5159c
|
||||
title: الخطوة 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `black-character`. عيّن `width` بقيمة `300px`, و`height` بقيمة `500px`, و`background-color` بقيمة `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك استخدام منتقيك `#black-character`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character'));
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقيك `#black-character` على خاصية `width` بقيمة `300px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقيك `#black-character` على خاصية `height` بقيمة `500px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقيك `#black-character` على خاصية `background-color` بقيمة `rgb(45, 31, 19)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -1,167 +0,0 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5159d
|
||||
title: الخطوة 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
أنقل عنصر `#black-character` إلى المكان عن طريق تعيين `position` بقيمة `absolute`, و`top` بقيمة `30%`, و`left` بقيمة `59%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يحتوي منتقيك `#black-character` على خاصية `position` بقيمة `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقيك `#black-character` على خاصية `top` بقيمة `30%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%');
|
||||
```
|
||||
|
||||
يجب أن يحتوي منتقيك `#black-character` على خاصية `left` بقيمة `59%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user