jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-25 14:01:44 -04:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): legacy rwd project files equal to new rwd project files (#46895)

Browse Source 
fix: copied legacy rwd project files from new
This commit is contained in:
Ilenia
2022-07-19 16:04:52 +02:00
committed by GitHub
parent 090a1caa7a
commit 55ee7eef7d
5 changed files with 118 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md
View File

@@ -172,11 +172,11 @@ Your `#navbar` element should always be at the top of the viewport.
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="styles.css">
<title>Personal Portfolio</title>
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<!--Font Reference-->
<nav id="navbar">
<a href="#projects">Projects</a> |

52
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md
View File

@@ -34,63 +34,63 @@ Fulfill the user stories and pass all the tests below to complete this project.
# --hints--
You should have a `header` element with an `id` of `header`
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`
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`
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
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`)
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`
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`
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`
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
Each `.nav-link` element should have an `href` attribute.
```js
const els = document.querySelectorAll('.nav-link')
@@ -100,7 +100,7 @@ els.forEach(el => {
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`)
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')
@@ -111,14 +111,14 @@ els.forEach(el => {
assert(els.length > 0)
```
You should have a `video` or `iframe` element with an `id` of `video`
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
Your `#video` should have a `src` attribute.
```js
let el = document.getElementById('video')
@@ -133,77 +133,77 @@ if (sourceElement) {
assert(el.hasAttribute('src'));
```
You should have a `form` element with an `id` of `form`
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`
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`
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
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`
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`
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`
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`
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`
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`
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
Your `#nav-bar` should always be at the top of the viewport.
```js
(async () => {
@@ -243,7 +243,7 @@ Your `#nav-bar` should always be at the top of the viewport
})();
```
Your Product Landing Page should use at least one media query
Your Product Landing Page should use at least one media query.
```js
const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
@@ -251,7 +251,7 @@ 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
Your Product Landing Page should use CSS Flexbox at least once.
```js
const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
@@ -281,7 +281,7 @@ assert(usesFlex)
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="styles.css" />
<title>Product Landing Page</title>
</head>
<body>

82
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
View File

@@ -35,84 +35,84 @@ Fulfill the user stories and pass all the tests below to complete this project.
# --hints--
You should have an `h1` element with an `id` of `title`
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
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`
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
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`
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`
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`
Your `#name` should have a `type` of `text`.
```js
const el = document.getElementById('name')
assert(!!el && el.type === 'text')
```
Your `#name` should require input
Your `#name` should require input.
```js
const el = document.getElementById('name')
assert(!!el && el.required)
```
Your `#name` should be a descedant of `#survey-form`
Your `#name` should be a descedant of `#survey-form`.
```js
const el = document.querySelector('#survey-form #name')
assert(!!el)
```
You should have an `input` element with an `id` of `email`
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`
Your `#email` should have a `type` of `email`.
```js
const el = document.getElementById('email')
assert(!!el && el.type === 'email')
```
Your `#email` should require input
Your `#email` should require input.
```js
const el = document.getElementById('email')
@@ -126,56 +126,56 @@ const el = document.querySelector('#survey-form #email')
assert(!!el)
```
You should have an `input` element with an `id` of `number`
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 descedant of `#survey-form`
Your `#number` should be a descedant of `#survey-form`.
```js
const el = document.querySelector('#survey-form #number')
assert(!!el)
```
Your `#number` should have a `type` of `number`
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
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
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`
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`
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`
You should have a `label` element with an `id` of `number-label`.
```js
const el = document.getElementById('number-label')
@@ -203,84 +203,84 @@ const el = document.getElementById('number-label')
assert(!!el && el.innerText.length > 0)
```
Your `#name-label` should be a descedant of `#survey-form`
Your `#name-label` should be a descedant of `#survey-form`.
```js
const el = document.querySelector('#survey-form #name-label')
assert(!!el)
```
Your `#email-label` should be a descedant of `#survey-form`
Your `#email-label` should be a descedant of `#survey-form`.
```js
const el = document.querySelector('#survey-form #email-label')
assert(!!el)
```
Your `#number-label` should be a descedant of `#survey-form`
Your `#number-label` should be a descedant of `#survey-form`.
```js
const el = document.querySelector('#survey-form #number-label')
assert(!!el)
```
Your `#name` should have a `placeholder` attribute and value
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
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
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`
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
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`
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)
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`
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
All your radio buttons should have a `value` attribute and value.
```js
const els1 = document.querySelectorAll('input[type="radio"]')
@@ -288,7 +288,7 @@ const els2 = document.querySelectorAll('input[type="radio"][value=""], input[typ
assert(els1.length > 0 && els2.length === 0)
```
All your radio buttons should have a `name` attribute and value
All your radio buttons should have a `name` attribute and value.
```js
const els1 = document.querySelectorAll('input[type="radio"]')
@@ -296,7 +296,7 @@ const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type
assert(els1.length > 0 && els2.length === 0)
```
Every radio button group should have at least 2 radio buttons
Every radio button group should have at least 2 radio buttons.
```js
const radioButtons = document.querySelectorAll('input[type="radio"]');
@@ -318,14 +318,14 @@ groupKeys.forEach(key => {
assert(groupKeys.length > 0)
```
You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`
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
All your checkboxes inside `#survey-form` should have a `value` attribute and value.
```js
const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
@@ -333,28 +333,28 @@ const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][valu
assert(els1.length > 0 && els2.length === 0)
```
You should have at least one `textarea` element that is a descendant of `#survey-form`
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`
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`
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`
Your `#submit` should be a descendant of `#survey-form`.
```js
const el = document.querySelector('#survey-form #submit')
@@ -380,7 +380,7 @@ assert(!!el)
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="styles.css" />
<title>Survey Form</title>
</head>
<body>

48
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md
View File

@@ -24,7 +24,7 @@ dashedName: build-a-technical-documentation-page
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. 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
@@ -34,21 +34,21 @@ Fulfill the user stories and pass all the tests below to complete this project.
# --hints--
You should have a `main` element with an `id` of `main-doc`
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`
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
All of your `.main-section` elements should be `section` elements.
```js
const els = document.querySelectorAll('.main-section')
@@ -58,14 +58,14 @@ els.forEach(el => {
assert(els.length > 0)
```
You should have at least five `.main-section` elements that are descendants of `#main-doc`
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
The first child of each `.main-section` should be a `header` element.
```js
const els = document.querySelectorAll('.main-section')
@@ -75,7 +75,7 @@ els.forEach(el => {
assert(els.length > 0)
```
None of your `header` elements should be empty
None of your `header` elements should be empty.
```js
const els = document.querySelectorAll('header')
@@ -85,7 +85,7 @@ els.forEach(el => {
assert(els.length > 0)
```
All of your `.main-section` elements should have an `id`
All of your `.main-section` elements should have an `id`.
```js
const els = document.querySelectorAll('.main-section')
@@ -95,7 +95,7 @@ els.forEach(el => {
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
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')
@@ -106,49 +106,49 @@ els.forEach(el => {
assert(els.length > 0)
```
You should have at least 10 `p` elements (total) within your `.main-section` elements
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
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
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`
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
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`
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
All of your `.nav-link` elements should be anchor (`a`) elements.
```js
const els = document.querySelectorAll('.nav-link')
@@ -158,7 +158,7 @@ els.forEach(el => {
assert(els.length > 0)
```
All of your `.nav-link` elements should be in the `#navbar`
All of your `.nav-link` elements should be in the `#navbar`.
```js
const els1 = document.querySelectorAll('.nav-link')
@@ -166,7 +166,7 @@ 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
You should have the same number of `.nav-link` and `.main-section` elements.
```js
const els1 = document.querySelectorAll('.main-section')
@@ -174,7 +174,7 @@ 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`
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');
@@ -190,7 +190,7 @@ navLinks.forEach((navLink) => {
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")
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 =>
@@ -203,7 +203,7 @@ 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)
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'))
@@ -212,7 +212,7 @@ const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' +
assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0)
```
Your `#navbar` should always be on the left edge of the window
Your `#navbar` should always be on the left edge of the window.
```js
const el = document.getElementById('navbar')
@@ -221,7 +221,7 @@ 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
Your Technical Documentation project should use at least one media query.
```js
const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
@@ -248,7 +248,7 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="styles.css" />
<title>Technical Documentation Page</title>
</head>
<body>

50
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md
View File

@@ -12,11 +12,11 @@ dashedName: build-a-tribute-page
**User Stories:**
1. Your tribute page should have an element with a corresponding `id="main"`, which contains all other elements
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. 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
@@ -28,14 +28,14 @@ Fulfill the user stories and pass all the tests below to complete this project.
# --hints--
You should have a `main` element with an `id` of `main`
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`
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')
@@ -46,14 +46,14 @@ const el5 = document.querySelector('#main #tribute-link')
assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5)
```
You should have an element with an `id` of `title`
You should have an element with an `id` of `title`.
```js
const el = document.getElementById('title')
assert(!!el)
```
Your `#title` should not be empty
Your `#title` should not be empty.
```js
const el = document.getElementById('title')
@@ -61,84 +61,84 @@ assert(!!el && el.innerText.length > 0)
```
You should have a `figure` or `div` element with an `id` of `img-div`
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`
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`
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`
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`
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
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`
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
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`
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
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`
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`
Your `img` element should have a `display` of `block`.
```js
const img = document.getElementById('image');
@@ -147,7 +147,7 @@ const style = imgStyle?.getPropertyValue('display')
assert(style === 'block')
```
Your `#image` should have a `max-width` of `100%`
Your `#image` should have a `max-width` of `100%`.
```js
const img = document.getElementById('image');
@@ -156,7 +156,7 @@ const style = imgStyle?.getPropertyValue('max-width')
assert(style === '100%')
```
Your `#image` should have a `height` of `auto`
Your `#image` should have a `height` of `auto`.
```js
// taken from the testable-projects repo
@@ -170,7 +170,7 @@ img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
assert(heightValue === 'auto')
```
Your `#image` should be centered within its parent
Your `#image` should be centered within its parent.
```js
// taken from the testable-projects repo
@@ -207,14 +207,14 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
<link
href="https://fonts.googleapis.com/css?family=Pacifico"
rel="stylesheet"
type="text/css"
/>
<link
href="https://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet"
type="text/css"
/>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" />
<title>Tribute Page</title>
</head>
<body>