Skip to content

Commit

Permalink
Add new track
Browse files Browse the repository at this point in the history
  • Loading branch information
@danfimov
danfimov committed Jun 30, 2021
1 parent 84728c0 commit 07e9b9c
Show file tree
Hide file tree
Showing 14 changed files with 1,160 additions and 0 deletions.
265 changes: 265 additions & 0 deletions Frontend Developer/Flashcards/Design/task-info.yaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,265 @@
type: edu
files:
- name: src/index.html
visible: true
text: |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
learner_created: false
- name: test/test.js
visible: false
text: |
const puppeteer = require('puppeteer');
const path = require('path');
// '..' since we're in the test/ subdirectory; learner is supposed to have src/index.html
const pagePath = 'file://' + path.resolve(__dirname, '../src/index.html');
const hs = require('hs-test-web');
const sleep = (ms) => new Promise(res => setTimeout(res, ms));
async function stageTest() {
const browser = await puppeteer.launch({
headless: false,
defaultViewport: null,
args: ['--start-maximized']
});
const page = await browser.newPage();
await page.goto(pagePath);
page.on('console', msg => console.log(msg.text()));
await sleep(1000);
let result = await hs.testPage(page,
//test1
/*
1)Checks existence of h1 element on the page.
2)Checks that there is text inside of h1
3)Checks that font !== serif | Times New Roman
* */
() => {
let h1 = document.body.getElementsByTagName("h1");
if (h1.length === 0) return hs.wrong("There should be h1 element on the page.");
if (h1.length > 1) return hs.wrong("There should be only one h1 element on the page.");
if (!h1[0].innerText) return hs.wrong("The h1 element should contain text.");
let font = window.getComputedStyle(h1[0]).fontFamily;
if (font === '"serif"' || font === '"Times New Roman"') return hs.wrong("The text inside the h1 element should have a font different from 'serif' and 'Times New Roman'.");
return hs.correct()
},
//#test2
/*
Two correct cases:
1.
1) Finds element with 9 divs
2) Checks if it has CSS property display: flex/ grid
2.
1) Finds element with 3 divs, each of 3 divs contains 3 divs inside
2) For each of 3 divs checks, that there are properties display: flex flex-direction: row
*/
() => {
let divs = document.body.getElementsByTagName("div");
let blocksCounter = 0;
for (let div of divs) {
if (div.children.length === 9) {
const display = window.getComputedStyle(div).display;
if (display && (display.toLowerCase() === 'flex' || display.toLowerCase() === 'grid')) {
return hs.correct();
} else {
return hs.wrong("The CSS property display: flex or display: grid should be set to the element with 9 div elements inside.");
}
} else if (div.children && div.children.length === 3 &&
div.children[0].children && div.children[0].children.length === 3) {
for (let divBlockOfThree of div.children) {
const display = window.getComputedStyle(divBlockOfThree).display;
const flexDirection = window.getComputedStyle(divBlockOfThree).flexDirection;
if (display && display.toLowerCase() === 'flex' &&
flexDirection && flexDirection.toLowerCase() === 'row') {
blocksCounter++;
} else {
return hs.wrong("The CSS property display: flex and flex-direction: row should be set to the element with 3 div elements inside.");
}
}
}
}
return blocksCounter === 3 ? hs.correct() : hs.wrong("There should be an element with 9 div elements inside.");
},
//#test3
/*
2 correct cases
*In both cases test tries to find property font on different levels
1.
1) Finds element with 9 divs
2) Checks if it(or each of cards) has CSS property font !== serif | Times New Roman
2.
1) Finds element with 3 divs, each of 3 divs contains 3 divs inside
2) Checks if it(or each of its children or each of cards) has CSS property font !== serif | Times New Roman
*/
() => {
let divs = document.body.getElementsByTagName("div");
let k = 0;
for (let div of divs) {
if (div.children.length === 9) {
const font = window.getComputedStyle(div).font
if (font !== '"serif"' || font !== '"Times New Roman"') {
return hs.correct();
}
for (let card of Array.from(div.children)) {
if (card.children[0] && card.children[0].tagName.toLowerCase() === 'p') {
let font = window.getComputedStyle(div.children[0]).fontFamily;
if (font === '"serif"' || font === '"Times New Roman"') {
return hs.wrong("Text on cards should have font different from 'serif' and 'Times New Roman'");
} else {
k++;
}
} else {
return hs.wrong("The structure should be the same as given in the step and all text on the cards should be in 'p' element");
}
}
} else if (div.children && div.children.length === 3 &&
div.children[0].children && div.children[0].children.length === 3) {
const font = window.getComputedStyle(div).font;
if (font !== '"serif"' || font !== '"Times New Roman"') {
return hs.correct();
}
for (let divBlockOfThree of div.children) {
const font = window.getComputedStyle(divBlockOfThree).font;
if (font !== '"serif"' || font !== '"Times New Roman"') {
return hs.correct();
}
for (let card of divBlockOfThree.children) {
const font = window.getComputedStyle(card).font;
if (font !== '"serif"' || font !== '"Times New Roman"') {
k++;
} else {
return hs.wrong("Text on cards should have font different from 'serif' and 'Times New Roman'");
}
}
}
}
}
return k !== 9 ? hs.wrong("9 div elements should contain p element.") : hs.correct();
},
//#test4
/*
1)Checks that cards form a table 3x3 (for 2 cases)
*/
() => {
let divs = document.body.getElementsByTagName("div");
let cardsH = [];
let cardsL = [];
for (let div of divs) {
if (div.children && div.children.length === 9) {
for (let cardDiv of div.children) {
let styles = window.getComputedStyle(cardDiv);
if (styles.width === styles.height) {
let left = cardDiv.getBoundingClientRect().left;
let top = cardDiv.getBoundingClientRect().top;
if (!cardsH.includes(top)) {
cardsH.push(top);
}
if (!cardsL.includes(left)) {
cardsL.push(left);
}
if (!styles.backgroundColor && !styles.backgroundImage)
return hs.wrong("Each card should have a background.")
}
}
} else if (div.children && div.children.length === 3 &&
div.children[0].children && div.children[0].children.length === 3) {
for (let divBlockOfThree of div.children) {
for (let cardDiv of divBlockOfThree.children) {
let styles = window.getComputedStyle(cardDiv);
if (styles.width === styles.height) {
let left = cardDiv.getBoundingClientRect().left;
let top = cardDiv.getBoundingClientRect().top;
if (!cardsH.includes(top)) {
cardsH.push(top);
}
if (!cardsL.includes(left)) {
cardsL.push(left);
}
if (!styles.backgroundColor && !styles.backgroundImage)
return hs.wrong("Each card should have a background.")
}
}
}
}
}
return cardsH.length === 3 && cardsL.length === 3 ? hs.correct() :
hs.wrong("The cards should form a table 3x3 and each of them should have equal width and height.")
},
//#test5
/*
1)Checks the background of the element, which contains h1 and div with 9 divs
*/
() => {
let divs = document.body.getElementsByTagName("div");
for (let div of divs) {
let childrenElements = Array.from(div.children)
if (childrenElements.find(el => el.tagName.toLowerCase() === "h1")) {
if (window.getComputedStyle(div).backgroundColor !== 'rgba(0, 0, 0, 0)' ||
window.getComputedStyle(div).backgroundImage !== 'none') {
return hs.correct();
}
}
}
let bodyStyles = window.getComputedStyle(document.body);
if (bodyStyles.backgroundColor !== 'rgba(0, 0, 0, 0)' ||
bodyStyles.backgroundImage !== 'none') {
return hs.correct();
}
return hs.wrong("The element that contains header and cards should have a background.\n" +
"Please, make sure you set a background as CSS property.");
}
)
await browser.close();
return result;
}
jest.setTimeout(30000);
test("Test stage", async () => {
let result = await stageTest();
if (result['type'] === 'wrong') {
fail(result['message']);
}
}
);
learner_created: false
- name: src/style.css
visible: true
learner_created: true
- name: src/world.png
visible: true
learner_created: true
feedback_link: https://hyperskill.org/projects/115/stages/626/implement#comment
status: Solved
feedback:
message: Congratulations!
time: Tue, 29 Jun 2021 23:47:49 UTC
record: -1
2 changes: 2 additions & 0 deletions Frontend Developer/Flashcards/Design/task-remote-info.yaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
id: 10246
update_date: Wed, 19 May 2021 09:03:57 UTC
28 changes: 28 additions & 0 deletions Frontend Developer/Flashcards/Design/task.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<h2>Description</h2>

<p>You got to the most creative part of the project: design! It's time to work out what your web-page should look like. You can make the decisions as you go, draw a tentative plan on a paper, or even use a design app like <a target="_blank" href="https://www.figma.com/" rel="noopener noreferrer nofollow">Figma</a>. Feel free to express your creativity, though there are some restrictions: since projects are about learning, restrictions are necessary for educational and testing purposes.</p>

<p>Don't forget to add a CSS file to the src folder and include a link to it in HTML; otherwise, the added styles will not apply.</p>

<p>First of all, let's design our flashcards. Set the size of divs with questions (notice: the cards are square), add color to the background, round the corners if you want, and position the text inside. Then form a table from the cards. We suggest using the following model of a page and CSS properties <em>grid/flex</em>.</p>

<p><img alt="" src="https://ucarecdn.com/0ebb6172-7cbd-4433-a840-bc2b9bb2650f/"></p>

<p>Set the background for the element that contains all the cards and the title. We used the picture of the <a target="_blank" href="https://stepik.org/media/attachments/lesson/374893/world.png" rel="noopener noreferrer nofollow">world map</a>, but you can make a solid background if you prefer.</p>

<p>As a final touch, change the fonts of the title and the text on your flashcards.</p>

<p>Be careful, don't use extra elements without need.</p>

<h2>Objectives</h2>

<p>1. Make a set of square flash cards.<br>
2. Set the background for the cards and the whole page using the CSS property <code class="java">background-image/background-color</code>.<br>
3. Position the cards using the CSS property <code class="java">grid/flex</code> so they make a 3x3 table.<br>
4. Set the fonts for the text.</p>

<h2>Example</h2>

<p>The result of this stage should look something like this:</p>

<p><img alt="" src="https://ucarecdn.com/693b0b58-fdad-4cee-91fb-8b632a75d082/"></p>
Loading

0 comments on commit 07e9b9c

Please sign in to comment.