From f04fbba22d3a90b7a6ae0fc718106cd8019d5fab Mon Sep 17 00:00:00 2001 From: Tom <20648924+moT01@users.noreply.github.com> Date: Thu, 5 May 2022 03:58:14 -0500 Subject: [PATCH] feat: convert RWD cert projects (#44564) * feat: convert RWD cert projects * feat: convert original projects * fix: add usesMultiFileEditor to meta * feat: add cypress tests for saving and loading to/from database * fix: broken cypress tests * fix: inconsistent variable naming * fix: missed variable name * fix: more cypress * feat: add solutions for english * fix: ctrl+s to database only if signed in * fix: prioritize code from db * refactor: expand the comments slightly --- api-server/src/server/boot/challenge.js | 6 +- client/src/redux/save-challenge-saga.js | 4 +- .../Challenges/classic/action-row.tsx | 6 +- .../Challenges/classic/desktop-layout.tsx | 12 +- .../templates/Challenges/classic/editor.tsx | 10 +- .../src/templates/Challenges/classic/show.tsx | 4 +- .../Challenges/components/tool-panel.tsx | 5 +- .../Challenges/redux/code-storage-epic.js | 16 +- .../Challenges/redux/completion-epic.js | 2 +- .../redux/execute-challenge-saga.js | 4 +- .../src/templates/Challenges/redux/index.js | 2 +- .../src/templates/Challenges/utils/build.js | 12 +- client/src/utils/challenge-request-helpers.ts | 2 +- client/src/utils/solution-display-type.ts | 2 +- client/utils/challenge-types.js | 8 +- client/utils/gatsby/challenge-page-creator.js | 2 +- .../meta.json | 1 + .../meta.json | 1 + .../build-a-survey-form-project/meta.json | 1 + .../meta.json | 1 + .../build-a-tribute-page-project/meta.json | 1 + .../responsive-web-design-projects/meta.json | 1 + .../build-a-personal-portfolio-webpage.md | 268 ++++++++- .../build-a-product-landing-page.md | 415 +++++++++++++- .../build-a-survey-form.md | 507 ++++++++++++++++- .../build-a-technical-documentation-page.md | 516 +++++++++++++++++- .../build-a-tribute-page.md | 318 ++++++++++- .../build-a-personal-portfolio-webpage.md | 268 ++++++++- .../build-a-product-landing-page.md | 415 +++++++++++++- .../build-a-survey-form.md | 507 ++++++++++++++++- .../build-a-technical-documentation-page.md | 516 +++++++++++++++++- .../build-a-tribute-page.md | 318 ++++++++++- .../integration/learn/challenge-hot-keys.js | 6 +- .../learn/challenges/multifileCertProject.js | 56 ++ .../donate/donation-block-completion-modal.js | 14 +- .../show-cert-from-superblock.js | 20 +- cypress/support/commands.js | 9 + 37 files changed, 3985 insertions(+), 271 deletions(-) create mode 100644 cypress/integration/learn/challenges/multifileCertProject.js diff --git a/api-server/src/server/boot/challenge.js b/api-server/src/server/boot/challenge.js index 4b734adbeb5..1c47b85718e 100644 --- a/api-server/src/server/boot/challenge.js +++ b/api-server/src/server/boot/challenge.js @@ -91,7 +91,7 @@ const jsCertProjectIds = [ 'aa2e6f85cab2ab736c9a9b24' ]; -const multiFileCertProjectIds = getChallenges() +const multifileCertProjectIds = getChallenges() .filter(challenge => challenge.challengeType === 14) .map(challenge => challenge.id); @@ -132,7 +132,7 @@ export function buildUserUpdate( let completedChallenge = {}; if ( jsCertProjectIds.includes(challengeId) || - multiFileCertProjectIds.includes(challengeId) + multifileCertProjectIds.includes(challengeId) ) { completedChallenge = { ..._completedChallenge, @@ -315,7 +315,7 @@ export function modernChallengeCompleted(req, res, next) { // step or normal challenge we can avoid storing in the database. if ( jsCertProjectIds.includes(id) || - multiFileCertProjectIds.includes(id) + multifileCertProjectIds.includes(id) ) { completedChallenge.challengeType = challengeType; } diff --git a/client/src/redux/save-challenge-saga.js b/client/src/redux/save-challenge-saga.js index 9b081245deb..0c87196bb26 100644 --- a/client/src/redux/save-challenge-saga.js +++ b/client/src/redux/save-challenge-saga.js @@ -31,8 +31,8 @@ export function* saveChallengeSaga() { ); } - // only allow saving of multiFileCertProject's - if (challengeType === challengeTypes.multiFileCertProject) { + // only allow saving of multifileCertProject's + if (challengeType === challengeTypes.multifileCertProject) { const body = standardizeRequestBody({ id, challengeFiles, challengeType }); const bodySizeInBytes = getStringSizeInBytes(body); diff --git a/client/src/templates/Challenges/classic/action-row.tsx b/client/src/templates/Challenges/classic/action-row.tsx index 3e2bcbc5587..f1d6067e233 100644 --- a/client/src/templates/Challenges/classic/action-row.tsx +++ b/client/src/templates/Challenges/classic/action-row.tsx @@ -8,7 +8,7 @@ import EditorTabs from './editor-tabs'; interface ActionRowProps { block: string; hasNotes: boolean; - isMultiFileCertProject: boolean; + isMultifileCertProject: boolean; showConsole: boolean; showNotes: boolean; showPreview: boolean; @@ -23,7 +23,7 @@ const mapDispatchToProps = { const ActionRow = ({ hasNotes, - isMultiFileCertProject, + isMultifileCertProject, togglePane, showNotes, showPreview, @@ -40,7 +40,7 @@ const ActionRow = ({
- {!isMultiFileCertProject && ( + {!isMultifileCertProject && ( diff --git a/client/src/templates/Challenges/classic/desktop-layout.tsx b/client/src/templates/Challenges/classic/desktop-layout.tsx index 12386813803..297cb5ba774 100644 --- a/client/src/templates/Challenges/classic/desktop-layout.tsx +++ b/client/src/templates/Challenges/classic/desktop-layout.tsx @@ -86,15 +86,15 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => { const challengeFile = getChallengeFile(); const projectBasedChallenge = hasEditableBoundaries; - const isMultiFileCertProject = - challengeType === challengeTypes.multiFileCertProject; + const isMultifileCertProject = + challengeType === challengeTypes.multifileCertProject; const displayPreview = - projectBasedChallenge || isMultiFileCertProject + projectBasedChallenge || isMultifileCertProject ? showPreview && hasPreview : hasPreview; const displayNotes = projectBasedChallenge ? showNotes && hasNotes : false; const displayConsole = - projectBasedChallenge || isMultiFileCertProject ? showConsole : true; + projectBasedChallenge || isMultifileCertProject ? showConsole : true; const { codePane, editorPane, @@ -106,11 +106,11 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => { return (
- {(projectBasedChallenge || isMultiFileCertProject) && ( + {(projectBasedChallenge || isMultifileCertProject) && ( void; initialTests: Test[]; isResetting: boolean; + isSignedIn: boolean; output: string[]; resizeProps: ResizeProps; saveChallenge: () => void; @@ -118,6 +120,7 @@ const mapStateToProps = createSelector( isDonationModalOpenSelector, isProjectPreviewModalOpenSelector, isResettingSelector, + isSignedInSelector, userSelector, challengeTestsSelector, ( @@ -127,6 +130,7 @@ const mapStateToProps = createSelector( open, previewOpen: boolean, isResetting: boolean, + isSignedIn: boolean, { theme = Themes.Default }: { theme: Themes }, tests: [{ text: string; testString: string }] ) => ({ @@ -134,6 +138,7 @@ const mapStateToProps = createSelector( challengeType, previewOpen, isResetting, + isSignedIn, output, theme, tests @@ -427,7 +432,8 @@ const Editor = (props: EditorProps): JSX.Element => { label: 'Save editor content', keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S], run: - props.challengeType === challengeTypes.multiFileCertProject + props.challengeType === challengeTypes.multifileCertProject && + props.isSignedIn ? // save to database props.saveChallenge : // save to local storage diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx index c8158b66e38..91671cef925 100644 --- a/client/src/templates/Challenges/classic/show.tsx +++ b/client/src/templates/Challenges/classic/show.tsx @@ -316,7 +316,7 @@ class ShowClassic extends Component { return ( challengeType === challengeTypes.html || challengeType === challengeTypes.modern || - challengeType === challengeTypes.multiFileCertProject + challengeType === challengeTypes.multifileCertProject ); } @@ -333,7 +333,7 @@ class ShowClassic extends Component { } = this.getChallenge(); const showBreadCrumbs = - challengeType !== challengeTypes.multiFileCertProject; + challengeType !== challengeTypes.multifileCertProject; return ( {isMobile ? t('buttons.run') : t('buttons.run-test')} - {isSignedIn && challengeType === challengeTypes.multiFileCertProject && ( + {isSignedIn && challengeType === challengeTypes.multifileCertProject && ( )} - {challengeType !== challengeTypes.multiFileCertProject && ( + {challengeType !== challengeTypes.multifileCertProject && ( + + + + + +``` + +```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; +} ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md index edf404b17a9..3f8bf2d7218 100644 --- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md +++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md @@ -1,55 +1,525 @@ --- id: 587d78b0367417b2b2512b05 title: Build a Technical Documentation Page -challengeType: 3 +challengeType: 14 forumTopicId: 301146 dashedName: build-a-technical-documentation-page --- # --description-- -**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: . +**Objective:** Build an app that is functionally similar to -Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style. +**User Stories:** -You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! +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 -**User Story #1:** I can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation). +Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! -**User Story #2:** Within the `#main-doc` element, I can see several `section` elements, each with a class of `main-section`. There should be a minimum of 5. +# --hints-- -**User Story #3:** The first element within each `.main-section` should be a `header` element which contains text that describes the topic of that section. +You should have a `main` element with an `id` of `main-doc` -**User Story #4:** 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"`). +```js +const el = document.getElementById('main-doc') +assert(!!el) +``` -**User Story #5:** The `.main-section` elements should contain at least 10 `p` elements total (not each). +You should have at least five `section` elements with a class of `main-section` -**User Story #6:** The `.main-section` elements should contain at least 5 `code` elements total (not each). +```js +const els = document.querySelectorAll('#main-doc section') +assert(els.length >= 5) +``` -**User Story #7:** The `.main-section` elements should contain at least 5 `li` items total (not each). +All of your `.main-section` elements should be `section` elements -**User Story #8:** I can see a `nav` element with a corresponding `id="navbar"`. +```js +const els = document.querySelectorAll('.main-section') +els.forEach(el => { + if (el.tagName !== 'SECTION') assert(false) +}) +assert(els.length > 0) +``` -**User Story #9:** The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation. +You should have at least five `.main-section` elements that are descendants of `#main-doc` -**User Story #10:** 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`. +```js +const els = document.querySelectorAll('#main-doc .main-section') +assert(els.length >= 5) +``` -**User Story #11:** The `header` element in the navbar must come before any link (`a`) elements in the navbar. +The first child of each `.main-section` should be a `header` element -**User Story #12:** 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"). +```js +const els = document.querySelectorAll('.main-section') +els.forEach(el => { + if(el.firstElementChild?.tagName !== 'HEADER') assert(false) +}) +assert(els.length > 0) +``` -**User Story #13:** When I click on a navbar element, the page should navigate to the corresponding section of the `main-doc` element (e.g. If I click on a `nav-link` element that contains the text "Hello world", the page navigates to a `section` element that has that id and contains the corresponding `header`. +None of your `header` elements should be empty -**User Story #14:** 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. +```js +const els = document.querySelectorAll('header') +els.forEach(el => { + if (el.innerText?.length <= 0) assert(false) +}) +assert(els.length > 0) +``` -**User Story #15:** My Technical Documentation page should use at least one media query. +All of your `.main-section` elements should have an `id` -You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +```js +const els = document.querySelectorAll('.main-section') +els.forEach(el => { + if (!el.id || el.id === '') assert(false) +}) +assert(els.length > 0) +``` -Once you're done, submit the URL to your working project with all its tests passing. +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 -# --solutions-- +```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[class="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 +assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1); +``` + +# --seed-- + +## --seed-contents-- ```html -// solution required + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + Technical Documentation Page + + + +
+
+
Introduction
+

+ Welcome to a basic introduction of algebra. In this tutorial, we will + review some of the more common algebraic concepts. +

+
+
+
Definitions
+

+ To start with, let's define some of the more common terms used in + algebra: +

+
    +
  • + Variable: A variable is an unknown value, usually represented + by a letter. +
    • +
  • + Expression: Essentially a mathematical object. For the + purpose of this tutorial, an expression is one part of an equation. +
    • +
  • + Equation: An equation is a mathematical argument in which two + expressions result in the same value. +
    • +
+
+
+
Examples
+

+ 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.

+ x + 5 = 12

+ In this above example, we have: +

+
    +
  • Variable: The variable in the example is "x".
    • +
  • + Expression: There are two expressions in this example. They + are "x+5" and "12". +
    • +
  • + Equation: The entire example, "x+5=12", is an equation. +
    • +
+
+
+
Solving Equations
+

+ 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".

+ x + 5 = 12

+ 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 + get the variable into its own expression, or by itself on one side + of the = sign.
For this example, we want to remove the "+5" so the "x" is + alone. To do this, we can subtract 5, 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.

+ x + 5 - 5 = 12 - 5

+ The equation looks like a mess right now, because we haven't completed + the operations. We can simplify this equation to make it easier + to read by performing the operations "5-5" and "12-5". The result + is:

+ x = 7

+ We now have our solution to this equation! +

+
+
+
Solving Equations II
+

+ Let us look at a slightly more challenging equation.

+ 3x + 4 = 13

+ 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:

+ 3x = 9

+ "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 + divide each expression by 3.

+ x = 3

+ And now we have our solution! +

+
+
+
Solving Equations III
+

+ Now we are getting in to more complex operations. Here is another + equation for us to look at:

+ x^2 - 8 = 8

+ Our very first step will be to add 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.

+ x^2 = 16

+ But what does the "^2" mean? The "^" symbol is used to denote + exponents in situations where superscript is not available. When + superscript is available, you would see it as x2. + For the sake of this project, however, we will use the "^" symbol.
+ 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 + divide both sides by "x". 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: +

+ x = √9

+ 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 + perfect square, so we do not need to calculate anything. Instead, we find our + answer to be:

+ x = 3 +

+
+
+
System of Equations
+

+ 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:

+ y = 3x

+ An equation like this does not have one single solution. + 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.
+ Getting more complicated, though, you may be given a pair 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:

+ y = 3x | y - 6 = x + 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:

+ 3x - 6 = x

+ Now we can solve for "x"! We start by adding 6 to each side.

+ 3x = x + 6

+ We still need to get "x" by itself, so we subtract "x" from both sides + and get:

+ 2x = 6

+ 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!

+ x = 3

+ However, our work is not done yet. We still need to find the value for + "y". Let's go back to our first equation:

+ y = 3x

+ We have a value for "x" now, so let's see what happens if we put that + value in.

+ y = 3*3

+ We perform the multiplication and discover that "y=9"! Our solution to + this system of equations then is:

+ x = 3 and y = 9

+

+
+
+
Try it Yourself!
+

Coming Soon!

+

Keep an eye out for new additions!

+
+
+
More Information
+

Check out the following links for more information!

+ +
+
+ + + +``` + +```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; +} ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md index 55dd100b336..17ce68e00ec 100644 --- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md @@ -1,43 +1,327 @@ --- id: bd7158d8c442eddfaeb5bd18 title: Build a Tribute Page -challengeType: 3 +challengeType: 14 forumTopicId: 301147 dashedName: build-a-tribute-page --- # --description-- -**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: . +**Objective:** Build an app that is functionally similar to -Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style. +**User Stories:** -You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! +1. Your tribute page should have an element with a corresponding `id="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 -**User Story #1:** My tribute page should have an element with a corresponding `id="main"`, which contains all other elements. +Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! -**User Story #2:** I should see an element with a corresponding `id="title"`, which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug"). +# --hints-- -**User Story #3:** I should see either a `figure` or a `div` element with a corresponding `id="img-div"`. +You should have a `main` element with an `id` of `main` -**User Story #4:** Within the `img-div` element, I should see an `img` element with a corresponding `id="image"`. +```js +const el = document.getElementById('main') +assert(!!el && el.tagName === 'MAIN') +``` -**User Story #5:** Within the `img-div` element, I should see an element with a corresponding `id="img-caption"` that contains textual content describing the image shown in `img-div`. +Your `#img-div`, `#image`, `#img-caption`, `#tribute-info`, and `#tribute-link` should all be descendants of `#main` -**User Story #6:** I should see an element with a corresponding `id="tribute-info"`, which contains textual content describing the subject of the tribute page. +```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) +``` -**User Story #7:** I 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 (i.e. `target="_blank"`). +You should have an element with an `id` of `title` -**User Story #8:** The `img` element should responsively resize, relative to the width of its parent element, without exceeding its original size. +```js +const el = document.getElementById('title') +assert(!!el) +``` -**User Story #9:** The `img` element should be centered within its parent element. +Your `#title` should not be empty -You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`. +```js +const el = document.getElementById('title') +assert(!!el && el.innerText.length > 0) -Once you're done, submit the URL to your working project with all its tests passing. +``` -# --solutions-- +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') +``` + +You should use an `#image` selector in your CSS to style the `#image` and pass the next three tests + +```js +const style = new __helpers.CSSHelp(document).getStyle('#image') +assert(!!style) +``` + +Your `#image` should have a `display` of `block` + +```js +const style = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('display') +assert(style === 'block') +``` + +Your `#image` should have a `max-width` of `100%` + +```js +const style = new __helpers.CSSHelp(document).getStyle('#image')?.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 maxWidthValue = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('max-width') +const displayValue = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('display') +const oldDisplayValue = img?.style.getPropertyValue('display'); +const oldDisplayPriority = img?.style.getPropertyPriority('display'); +img?.style.setProperty('display', 'none', 'important'); +const heightValue = new __helpers.CSSHelp(document).getStyle('#image')?.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 -// solution required + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + + + Tribute Page + + +

Tribute Page

+

The below card was designed as a tribute page for freeCodeCamp.

+
+
+ An image of Togepi +
Togepi, happy as always.
+
+

Togepi

+
+
+

+ 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. +

+

+ Togepi is a very childlike Pokemon, and is very emotionally + expressive. He demonstrates extreme levels of joy and sadness. +

+
+

Battle Information

+
    +
  • Type: Fairy
    • +
  • Evolutions: Togepi -> Togetic -> Togekiss
    • +
  • Moves: Growl, Pound, Sweet Kiss, Charm
    • +
  • Weaknesses: Poison, Steel
    • +
  • Resistances: Dragon
    • +
+

+ Check out this + Bulbapedia article on Togepi + for more information on this great Pokemon. +

+
+
+ + + +``` + +```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; +} ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md index 1a08c12c988..a786ded61a8 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md @@ -1,47 +1,277 @@ --- id: bd7158d8c242eddfaeb5bd13 title: Build a Personal Portfolio Webpage -challengeType: 3 +challengeType: 14 forumTopicId: 301143 dashedName: build-a-personal-portfolio-webpage --- # --description-- -**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: . +**Objective:** Build an app that is functionally similar to -Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style. +**User Stories:** -You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! +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 -**User Story #1:** My portfolio should have a welcome section with an id of `welcome-section`. +Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! -**User Story #2:** The welcome section should have an `h1` element that contains text. +# --hints-- -**User Story #3:** My portfolio should have a projects section with an id of `projects`. +Your portfolio should have a "Welcome" section with an `id` of `welcome-section`. -**User Story #4:** The projects section should contain at least one element with a class of `project-tile` to hold a project. +```js +const el = document.getElementById('welcome-section') +assert(!!el); +``` -**User Story #5:** The projects section should contain at least one link to a project. +Your `#welcom-section` element should contain an `h1` element. -**User Story #6:** My portfolio should have a navbar with an id of `navbar`. +```js +assert.isAbove( + document.querySelectorAll('#welcome-section h1').length, + 0, + 'Welcome section should contain an h1 element ' +); +``` -**User Story #7:** The navbar should contain at least one link that I can click on to navigate to different sections of the page. +You should not have any empty `h1` elements within `#welcome-section` element. -**User Story #8:** My portfolio should have a link with an id of `profile-link`, which opens my GitHub or FCC profile in a new tab. +```js +assert.isAbove( + document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, + 0, + 'h1 element in welcome section should contain your name or camper ' + + 'name ' +); +``` -**User Story #9:** My portfolio should have at least one media query. +You should have a "Projects" section with an `id` of `projects`. -**User Story #10:** The height of the welcome section should be equal to the height of the viewport. +```js +const el = document.getElementById('projects') +assert(!!el); +``` -**User Story #11:** The navbar should always be at the top of the viewport. +Your portfolio should contain at least one elment with a class of `project-tile`. -You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +```js +assert.isAbove( + document.querySelectorAll('#projects .project-tile').length, + 0 +); +``` -Once you're done, submit the URL to your working project with all its tests passing. +Your `#projects` element should contain at least one `a` element. -# --solutions-- +```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') || '').substr(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 +assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1); +``` + +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 -// solution required + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + Personal Portfolio + + + + + +
+
+
+

It's me!

+ +

Naomi Carrigan

+

Welcome to my portfolio page!

+
+
+

Projects

+

Here's what I've worked on!

+

+ + + + +

+
+

Contact me!

+

Use the links below to get in touch.

+

FreeCodeCamp.org | GitHub | Facebook | LinkedIn +

+ + + +``` + +```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; +} ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md index 8c59b183c82..df9ea5df4b4 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md @@ -1,55 +1,424 @@ --- id: 587d78af367417b2b2512b04 title: Build a Product Landing Page -challengeType: 3 +challengeType: 14 forumTopicId: 301144 dashedName: build-a-product-landing-page --- # --description-- -**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: . +**Objective:** Build an app that is functionally similar to -Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style. +**User Stories:** -You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! +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 -**User Story #1:** My product landing page should have a `header` element with a corresponding `id="header"`. +Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! -**User Story #2:** I can see an image within the `header` element with a corresponding `id="header-img"`. A company logo would make a good image here. +# --hints-- -**User Story #3:** Within the `#header` element I can see a `nav` element with a corresponding `id="nav-bar"`. +You should have a `header` element with an `id` of `header` -**User Story #4:** I can see at least three clickable elements inside the `nav` element, each with the class `nav-link`. +```js +const el = document.getElementById('header') +assert(!!el && el.tagName === 'HEADER') +``` -**User Story #5:** When I click a `.nav-link` button in the `nav` element, I am taken to the corresponding section of the landing page. +You should have an `img` element with an `id` of `header-img` -**User Story #6:** I can watch an embedded product video with `id="video"`. +```js +const el = document.getElementById('header-img') +assert(!!el && el.tagName === 'IMG') +``` -**User Story #7:** My landing page has a `form` element with a corresponding `id="form"`. +Your `#header-img` should be a descendant of the `#header` -**User Story #8:** Within the form, there is an `input` field with `id="email"` where I can enter an email address. +```js +const els = document.querySelectorAll('#header #header-img') +assert(els.length > 0) +``` -**User Story #9:** The `#email` input field should have placeholder text to let the user know what the field is for. +Your `#header-img` should have a `src` attribute -**User Story #10:** The `#email` input field uses HTML5 validation to confirm that the entered text is an email address. +```js +const el = document.getElementById('header-img') +assert(!!el && !!el.src) +``` -**User Story #11:** Within the form, there is a submit `input` with a corresponding `id="submit"`. +Your `#header-img`’s `src` value should be a valid URL (starts with `http`) -**User Story #12:** When I click the `#submit` element, the email is submitted to a static page (use this mock URL: ). +```js +const el = document.getElementById('header-img') +assert(!!el && /^http/.test(el.src)) +``` -**User Story #13:** The navbar should always be at the top of the viewport. +You should have a `nav` element with an `id` of `nav-bar` -**User Story #14:** My product landing page should have at least one media query. +```js +const el = document.getElementById('nav-bar') +assert(!!el && el.tagName === 'NAV') +``` -**User Story #15:** My product landing page should utilize CSS flexbox at least once. +Your `#nav-bar` should be a descendant of the `#header` -You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +```js +const els = document.querySelectorAll('#header #nav-bar') +assert(els.length > 0) +``` -Once you're done, submit the URL to your working project with all its tests passing. +You should have at least 3 `.nav-link` elements within the `#nav-bar` -# --solutions-- +```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 +const el = document.getElementById('video') +assert(!!el && !!el.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 +const el = document.getElementById('nav-bar') +const top1 = el?.offsetTop +const top2 = el?.offsetTop +assert(!!el && top1 >= -15 && top1 <= 15 && top2 >= -15 && top2 <= 15) +``` + +Your Product Landing Page should use at least one media query + +```js +assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1); +``` + +Your Product Landing Page should use CSS Flexbox at least once + +```js +const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() +const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) +const usesFlex = cssRules.find(rule => { + return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex' +}) +assert(usesFlex) +``` + +# --seed-- + +## --seed-contents-- ```html -// solution required + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + Product Landing Page + + + +
+

+ Pokemon Daycare Service +

+
+

What we offer

+
+
+ +
+
Guaranteed friendly and loving staff!
+
+
+
+ +
+
+ Comfortable environment for Pokemon to explore and play! +
+
+
+
+ +
+
+ Multiple membership plans to fit your lifestyle! +
+
+
+
+

Check us out!

+ A sneak peek into our facility: +
+ +
+
+

Membership Plans

+
+
+ Basic Membership
+
    +
  • One Pokemon
    • +
  • Food and berries provided
    • +
+ $9.99/month +
+
+ Silver Membership
+
    +
  • Up to Three Pokemon
    • +
  • Food and berries provided
    • +
  • Grooming and accessories included
    • +
+ $19.99/month +
+
+ Gold Membership
+
    +
  • Up to six Pokemon!
    • +
  • Food and berries provided
    • +
  • Grooming and accessories included
    • +
  • Personal training for each Pokemon
    • +
  • Breeding and egg hatching
    • +
+ $29.99/month +
+
+
+
+

Sign up for our newsletter!

+ + +
+ +
+ + +``` + +```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; + } +} ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md index e62a17690f0..b00d9588463 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md @@ -1,57 +1,516 @@ --- id: 587d78af367417b2b2512b03 title: Build a Survey Form -challengeType: 3 +challengeType: 14 forumTopicId: 301145 dashedName: build-a-survey-form --- # --description-- -**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: . +**Objective:** Build an app that is functionally similar to -Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style. +**User Stories:** -You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! +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. If you enter non-numbers in the number input, you will see an HTML5 validation error +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 -**User Story #1:** I can see a title with `id="title"` in H1 sized text. +Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! -**User Story #2:** I can see a short explanation with `id="description"` in P sized text. +# --hints-- -**User Story #3:** I can see a `form` with `id="survey-form"`. +You should have an `h1` element with an `id` of `title` -**User Story #4:** Inside the form element, I am required to enter my name in a field with `id="name"`. +```js +const el = document.getElementById('title') +assert(!!el && el.tagName === 'H1') +``` -**User Story #5:** Inside the form element, I am required to enter an email in a field with `id="email"`. +Your `#title` should not be empty -**User Story #6:** If I enter an email that is not formatted correctly, I will see an HTML5 validation error. +```js +const el = document.getElementById('title') +assert(!!el && el.innerText.length > 0) +``` -**User Story #7:** Inside the form, I can enter a number in a field with `id="number"`. +You should have a `p` element with an `id` of `description` -**User Story #8:** If I enter non-numbers in the number input, I will see an HTML5 validation error. +```js +const el = document.getElementById('description') +assert(!!el && el.tagName === 'P') +``` -**User Story #9:** If I enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, I will see an HTML5 validation error. +Your `#description` should not be empty -**User Story #10:** For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"`. +```js +const el = document.getElementById('description') +assert(!!el && el.innerText.length > 0) +``` -**User Story #11:** For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field. +You should have a `form` element with an `id` of `survey-form` -**User Story #12:** Inside the form element, I can select an option from a dropdown that has a corresponding `id="dropdown"`. +```js +const el = document.getElementById('survey-form') +assert(!!el && el.tagName === 'FORM') +``` -**User Story #13:** Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the `name` attribute. +You should have an `input` element with an `id` of `name` -**User Story #14:** Inside the form element, I can select several fields from a series of checkboxes, each of which must have a `value` attribute. +```js +const el = document.getElementById('name') +assert(!!el && el.tagName === 'INPUT') +``` -**User Story #15:** Inside the form element, I am presented with a `textarea` at the end for additional comments. +Your `#name` should have a `type` of `text` -**User Story #16:** Inside the form element, I am presented with a button with `id="submit"` to submit all my inputs. +```js +const el = document.getElementById('name') +assert(!!el && el.type === 'text') +``` -You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +Your `#name` should require input -Once you're done, submit the URL to your working project with all its tests passing. +```js +const el = document.getElementById('name') +assert(!!el && el.required) +``` -# --solutions-- +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` + +```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 descedant 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 descedant 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 not be empty + +```js +const el = document.getElementById('name-label') +assert(!!el && el.innerText.length > 0) +``` + +Your `#email-label` should not be empty + +```js +const el = document.getElementById('email-label') +assert(!!el && el.innerText.length > 0) +``` + +Your `#number-label` should not be empty + +```js +const el = document.getElementById('number-label') +assert(!!el && el.innerText.length > 0) +``` + +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` + +```js +const el = document.querySelector('#survey-form #email-label') +assert(!!el) +``` + +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 + +```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 -// solution required + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + Survey Form + + +

Survey Form

+

The card below was built as a sample survey form for freeCodeCamp.

+
+

Join the Togepi Fan Club!

+

+ Enter your information here to receive updates about club activities, + our monthly newsletter, and other email communications. +

+
+ + + + +

Who is your favourite Pokemon?

+ + + +

Which communications do you want to receive?

+ + + +

Any other information you would like to share?

+ +

+ Please note: This form is a proof of concept. Submitting the form + will not actually transmit your data. +

+ +
+
+ + + +``` + +```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; +} ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md index edf404b17a9..3f8bf2d7218 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md @@ -1,55 +1,525 @@ --- id: 587d78b0367417b2b2512b05 title: Build a Technical Documentation Page -challengeType: 3 +challengeType: 14 forumTopicId: 301146 dashedName: build-a-technical-documentation-page --- # --description-- -**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: . +**Objective:** Build an app that is functionally similar to -Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style. +**User Stories:** -You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! +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 -**User Story #1:** I can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation). +Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! -**User Story #2:** Within the `#main-doc` element, I can see several `section` elements, each with a class of `main-section`. There should be a minimum of 5. +# --hints-- -**User Story #3:** The first element within each `.main-section` should be a `header` element which contains text that describes the topic of that section. +You should have a `main` element with an `id` of `main-doc` -**User Story #4:** 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"`). +```js +const el = document.getElementById('main-doc') +assert(!!el) +``` -**User Story #5:** The `.main-section` elements should contain at least 10 `p` elements total (not each). +You should have at least five `section` elements with a class of `main-section` -**User Story #6:** The `.main-section` elements should contain at least 5 `code` elements total (not each). +```js +const els = document.querySelectorAll('#main-doc section') +assert(els.length >= 5) +``` -**User Story #7:** The `.main-section` elements should contain at least 5 `li` items total (not each). +All of your `.main-section` elements should be `section` elements -**User Story #8:** I can see a `nav` element with a corresponding `id="navbar"`. +```js +const els = document.querySelectorAll('.main-section') +els.forEach(el => { + if (el.tagName !== 'SECTION') assert(false) +}) +assert(els.length > 0) +``` -**User Story #9:** The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation. +You should have at least five `.main-section` elements that are descendants of `#main-doc` -**User Story #10:** 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`. +```js +const els = document.querySelectorAll('#main-doc .main-section') +assert(els.length >= 5) +``` -**User Story #11:** The `header` element in the navbar must come before any link (`a`) elements in the navbar. +The first child of each `.main-section` should be a `header` element -**User Story #12:** 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"). +```js +const els = document.querySelectorAll('.main-section') +els.forEach(el => { + if(el.firstElementChild?.tagName !== 'HEADER') assert(false) +}) +assert(els.length > 0) +``` -**User Story #13:** When I click on a navbar element, the page should navigate to the corresponding section of the `main-doc` element (e.g. If I click on a `nav-link` element that contains the text "Hello world", the page navigates to a `section` element that has that id and contains the corresponding `header`. +None of your `header` elements should be empty -**User Story #14:** 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. +```js +const els = document.querySelectorAll('header') +els.forEach(el => { + if (el.innerText?.length <= 0) assert(false) +}) +assert(els.length > 0) +``` -**User Story #15:** My Technical Documentation page should use at least one media query. +All of your `.main-section` elements should have an `id` -You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +```js +const els = document.querySelectorAll('.main-section') +els.forEach(el => { + if (!el.id || el.id === '') assert(false) +}) +assert(els.length > 0) +``` -Once you're done, submit the URL to your working project with all its tests passing. +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 -# --solutions-- +```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[class="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 +assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1); +``` + +# --seed-- + +## --seed-contents-- ```html -// solution required + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + Technical Documentation Page + + + +
+
+
Introduction
+

+ Welcome to a basic introduction of algebra. In this tutorial, we will + review some of the more common algebraic concepts. +

+
+
+
Definitions
+

+ To start with, let's define some of the more common terms used in + algebra: +

+
    +
  • + Variable: A variable is an unknown value, usually represented + by a letter. +
    • +
  • + Expression: Essentially a mathematical object. For the + purpose of this tutorial, an expression is one part of an equation. +
    • +
  • + Equation: An equation is a mathematical argument in which two + expressions result in the same value. +
    • +
+
+
+
Examples
+

+ 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.

+ x + 5 = 12

+ In this above example, we have: +

+
    +
  • Variable: The variable in the example is "x".
    • +
  • + Expression: There are two expressions in this example. They + are "x+5" and "12". +
    • +
  • + Equation: The entire example, "x+5=12", is an equation. +
    • +
+
+
+
Solving Equations
+

+ 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".

+ x + 5 = 12

+ 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 + get the variable into its own expression, or by itself on one side + of the = sign.
For this example, we want to remove the "+5" so the "x" is + alone. To do this, we can subtract 5, 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.

+ x + 5 - 5 = 12 - 5

+ The equation looks like a mess right now, because we haven't completed + the operations. We can simplify this equation to make it easier + to read by performing the operations "5-5" and "12-5". The result + is:

+ x = 7

+ We now have our solution to this equation! +

+
+
+
Solving Equations II
+

+ Let us look at a slightly more challenging equation.

+ 3x + 4 = 13

+ 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:

+ 3x = 9

+ "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 + divide each expression by 3.

+ x = 3

+ And now we have our solution! +

+
+
+
Solving Equations III
+

+ Now we are getting in to more complex operations. Here is another + equation for us to look at:

+ x^2 - 8 = 8

+ Our very first step will be to add 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.

+ x^2 = 16

+ But what does the "^2" mean? The "^" symbol is used to denote + exponents in situations where superscript is not available. When + superscript is available, you would see it as x2. + For the sake of this project, however, we will use the "^" symbol.
+ 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 + divide both sides by "x". 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: +

+ x = √9

+ 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 + perfect square, so we do not need to calculate anything. Instead, we find our + answer to be:

+ x = 3 +

+
+
+
System of Equations
+

+ 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:

+ y = 3x

+ An equation like this does not have one single solution. + 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.
+ Getting more complicated, though, you may be given a pair 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:

+ y = 3x | y - 6 = x + 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:

+ 3x - 6 = x

+ Now we can solve for "x"! We start by adding 6 to each side.

+ 3x = x + 6

+ We still need to get "x" by itself, so we subtract "x" from both sides + and get:

+ 2x = 6

+ 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!

+ x = 3

+ However, our work is not done yet. We still need to find the value for + "y". Let's go back to our first equation:

+ y = 3x

+ We have a value for "x" now, so let's see what happens if we put that + value in.

+ y = 3*3

+ We perform the multiplication and discover that "y=9"! Our solution to + this system of equations then is:

+ x = 3 and y = 9

+

+
+
+
Try it Yourself!
+

Coming Soon!

+

Keep an eye out for new additions!

+
+
+
More Information
+

Check out the following links for more information!

+ +
+
+ + + +``` + +```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; +} ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md index 55dd100b336..17ce68e00ec 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md @@ -1,43 +1,327 @@ --- id: bd7158d8c442eddfaeb5bd18 title: Build a Tribute Page -challengeType: 3 +challengeType: 14 forumTopicId: 301147 dashedName: build-a-tribute-page --- # --description-- -**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: . +**Objective:** Build an app that is functionally similar to -Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style. +**User Stories:** -You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! +1. Your tribute page should have an element with a corresponding `id="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 -**User Story #1:** My tribute page should have an element with a corresponding `id="main"`, which contains all other elements. +Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! -**User Story #2:** I should see an element with a corresponding `id="title"`, which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug"). +# --hints-- -**User Story #3:** I should see either a `figure` or a `div` element with a corresponding `id="img-div"`. +You should have a `main` element with an `id` of `main` -**User Story #4:** Within the `img-div` element, I should see an `img` element with a corresponding `id="image"`. +```js +const el = document.getElementById('main') +assert(!!el && el.tagName === 'MAIN') +``` -**User Story #5:** Within the `img-div` element, I should see an element with a corresponding `id="img-caption"` that contains textual content describing the image shown in `img-div`. +Your `#img-div`, `#image`, `#img-caption`, `#tribute-info`, and `#tribute-link` should all be descendants of `#main` -**User Story #6:** I should see an element with a corresponding `id="tribute-info"`, which contains textual content describing the subject of the tribute page. +```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) +``` -**User Story #7:** I 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 (i.e. `target="_blank"`). +You should have an element with an `id` of `title` -**User Story #8:** The `img` element should responsively resize, relative to the width of its parent element, without exceeding its original size. +```js +const el = document.getElementById('title') +assert(!!el) +``` -**User Story #9:** The `img` element should be centered within its parent element. +Your `#title` should not be empty -You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`. +```js +const el = document.getElementById('title') +assert(!!el && el.innerText.length > 0) -Once you're done, submit the URL to your working project with all its tests passing. +``` -# --solutions-- +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') +``` + +You should use an `#image` selector in your CSS to style the `#image` and pass the next three tests + +```js +const style = new __helpers.CSSHelp(document).getStyle('#image') +assert(!!style) +``` + +Your `#image` should have a `display` of `block` + +```js +const style = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('display') +assert(style === 'block') +``` + +Your `#image` should have a `max-width` of `100%` + +```js +const style = new __helpers.CSSHelp(document).getStyle('#image')?.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 maxWidthValue = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('max-width') +const displayValue = new __helpers.CSSHelp(document).getStyle('#image')?.getPropertyValue('display') +const oldDisplayValue = img?.style.getPropertyValue('display'); +const oldDisplayPriority = img?.style.getPropertyPriority('display'); +img?.style.setProperty('display', 'none', 'important'); +const heightValue = new __helpers.CSSHelp(document).getStyle('#image')?.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 -// solution required + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + + + Tribute Page + + +

Tribute Page

+

The below card was designed as a tribute page for freeCodeCamp.

+
+
+ An image of Togepi +
Togepi, happy as always.
+
+

Togepi

+
+
+

+ 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. +

+

+ Togepi is a very childlike Pokemon, and is very emotionally + expressive. He demonstrates extreme levels of joy and sadness. +

+
+

Battle Information

+
    +
  • Type: Fairy
    • +
  • Evolutions: Togepi -> Togetic -> Togekiss
    • +
  • Moves: Growl, Pound, Sweet Kiss, Charm
    • +
  • Weaknesses: Poison, Steel
    • +
  • Resistances: Dragon
    • +
+

+ Check out this + Bulbapedia article on Togepi + for more information on this great Pokemon. +

+
+
+ + + +``` + +```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; +} ``` diff --git a/cypress/integration/learn/challenge-hot-keys.js b/cypress/integration/learn/challenge-hot-keys.js index 4c9119f601d..e20ce54ba9a 100644 --- a/cypress/integration/learn/challenge-hot-keys.js +++ b/cypress/integration/learn/challenge-hot-keys.js @@ -11,9 +11,9 @@ const links = { classic2: '/learn/responsive-web-design/basic-html-and-html5/headline-with-the-h2-element', frontEnd1: - '/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page', + '/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine', frontEnd2: - '/learn/responsive-web-design/responsive-web-design-projects/build-a-survey-form', + '/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer', backEnd1: '/learn/back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice', backEnd2: @@ -28,7 +28,7 @@ const links = { // we wait for these titles to be present: const titles = { classic2: 'Headline with the h2 Element', - frontEnd2: 'Build a Survey Form', + frontEnd2: 'Build a Markdown Previewer', backEnd2: 'Request Header Parser Microservice', video2: 'Introduction: Hardware Architecture' }; diff --git a/cypress/integration/learn/challenges/multifileCertProject.js b/cypress/integration/learn/challenges/multifileCertProject.js new file mode 100644 index 00000000000..abc45c89487 --- /dev/null +++ b/cypress/integration/learn/challenges/multifileCertProject.js @@ -0,0 +1,56 @@ +const save1text = 'save 1'; +const save2text = 'save 2'; + +const selectors = { + editor: '.react-monaco-editor-container', + saveCodeBtn: '[data-cy="save-code-to-database-btn"]' +}; + +describe('multifileCertProjects', function () { + before(() => { + cy.exec('npm run seed'); + cy.login(); + cy.visit( + 'learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page' + ); + }); + + beforeEach(() => { + cy.preserveSession(); + }); + + it('should show a save code button', function () { + cy.get(selectors.saveCodeBtn); + }); + + it('should save to database (savedChallenges) when clicking save code button', function () { + cy.get(selectors.editor).click().focused().clear().type(save1text); + cy.get(selectors.saveCodeBtn).click(); + cy.contains('Your code was saved to the database.'); + }); + + it('should not allow you to save twice in a row too fast', function () { + cy.get(selectors.saveCodeBtn).click().click(); + cy.contains('Your code was not saved.'); + }); + + it('should load saved code on a hard refresh', function () { + cy.reload(); + cy.contains(save1text); + }); + + it('should save to database (savedChallenges) when using ctrl+s hotkey', function () { + cy.get(selectors.editor) + .click() + .focused() + .clear() + .type(`${save2text}{ctrl+s}`); + cy.contains('Your code was saved to the database.'); + }); + + it('should load saved code when navigating site (no hard refresh)', function () { + cy.contains('Responsive Web Design Projects').click(); + cy.contains('Build a Tribute Page').click(); + cy.contains(save2text); + }); +}); diff --git a/cypress/integration/learn/donate/donation-block-completion-modal.js b/cypress/integration/learn/donate/donation-block-completion-modal.js index 23ab5b3600b..84dcf1502aa 100644 --- a/cypress/integration/learn/donate/donation-block-completion-modal.js +++ b/cypress/integration/learn/donate/donation-block-completion-modal.js @@ -10,17 +10,17 @@ describe('Donate page', () => { }); const projects = [ - 'tribute-page', - 'survey-form', - 'product-landing-page', - 'technical-documentation-page', - 'personal-portfolio-webpage' + 'random-quote-machine', + 'markdown-previewer', + 'drum-machine', + 'javascript-calculator', + '25--5-clock' ]; it('Should be able to submit projects', () => { const submitProject = str => { cy.visit( - `/learn/responsive-web-design/responsive-web-design-projects/build-a-${str}` + `/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-${str}` ); cy.get('#dynamic-front-end-form') .get('#solution') @@ -37,7 +37,7 @@ describe('Donate page', () => { it('Should have a pop up modal', () => { cy.contains( - 'Nicely done. You just completed Responsive Web Design Projects.' + 'Nicely done. You just completed Front End Development Libraries Projects.' ); }); }); diff --git a/cypress/integration/learn/responsive-web-design/show-cert-from-superblock.js b/cypress/integration/learn/responsive-web-design/show-cert-from-superblock.js index 1a38fbfd5f3..e2675fc54b9 100644 --- a/cypress/integration/learn/responsive-web-design/show-cert-from-superblock.js +++ b/cypress/integration/learn/responsive-web-design/show-cert-from-superblock.js @@ -1,37 +1,37 @@ import { SuperBlocks } from '../../../../config/certification-settings'; const projects = { - superBlock: SuperBlocks.RespWebDesign, - block: 'responsive-web-design-projects', + superBlock: SuperBlocks.FrontEndDevLibs, + block: 'front-end-development-libraries-projects', challenges: [ { - slug: 'build-a-tribute-page', + slug: 'build-a-random-quote-machine', solution: 'https://codepen.io/moT01/pen/ZpJpKp' }, { - slug: 'build-a-survey-form', + slug: 'build-a-markdown-previewer', solution: 'https://codepen.io/moT01/pen/LrrjGz?editors=1010' }, { - slug: 'build-a-product-landing-page', + slug: 'build-a-drum-machine', solution: 'https://codepen.io/moT01/full/qKyKYL/' }, { - slug: 'build-a-technical-documentation-page', + slug: 'build-a-javascript-calculator', solution: 'https://codepen.io/moT01/full/JBvzNL/' }, { - slug: 'build-a-personal-portfolio-webpage', + slug: 'build-a-25--5-clock', solution: 'https://codepen.io/moT01/pen/vgOaoJ' } ] }; -describe('Responsive Web Design Superblock', () => { +describe('Front End Development Libraries Superblock', () => { before(() => { cy.exec('npm run seed'); cy.login(); - cy.visit('/learn/responsive-web-design'); + cy.visit('/learn/front-end-development-libraries'); }); describe('Before submitting projects', () => { it('should navigate to "/settings#certification-settings" when clicking the "Go to settings to claim your certification" anchor', () => { @@ -53,7 +53,7 @@ describe('Responsive Web Design Superblock', () => { cy.location().should(loc => { expect(loc.pathname).to.eq(`/settings`); }); - cy.get('[data-cy=btn-for-responsive-web-design]').click(); + cy.get('[data-cy=btn-for-front-end-development-libraries]').click(); cy.contains('Show Certification').click(); cy.location().should(loc => { expect(loc.pathname).to.eq( diff --git a/cypress/support/commands.js b/cypress/support/commands.js index b6f389edede..852a3a99a68 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -37,6 +37,15 @@ Cypress.Commands.add('login', () => { cy.contains('Welcome back'); }); +Cypress.Commands.add('preserveSession', () => { + Cypress.Cookies.preserveOnce( + 'jwt_access_token', + 'csrf_token', + '_csrf', + 'connect.sid' + ); +}); + Cypress.Commands.add('toggleAll', () => { cy.visit('/settings'); // cy.get('input[name="isLocked"]').click();