-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 9a43909
Showing
11 changed files
with
9,254 additions
and
0 deletions.
There are no files selected for viewing
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
name: GitHub Classroom Workflow | ||
|
||
on: | ||
push: | ||
branches: | ||
- '*' | ||
- '!badges' | ||
|
||
jobs: | ||
build: | ||
name: Autograding | ||
runs-on: ubuntu-latest | ||
steps: | ||
- uses: DCI-EdTech/autograding-action@main | ||
id: autograder | ||
with: | ||
token: ${{ secrets.AUTOGRADING }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,141 @@ | ||
# Created by https://www.toptal.com/developers/gitignore/api/react,node' | ||
# Edit at https://www.toptal.com/developers/gitignore?templates=react,node' | ||
|
||
### Node ### | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
lerna-debug.log* | ||
.pnpm-debug.log* | ||
|
||
# Diagnostic reports (https://nodejs.org/api/report.html) | ||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json | ||
|
||
# Runtime data | ||
pids | ||
*.pid | ||
*.seed | ||
*.pid.lock | ||
|
||
# Directory for instrumented libs generated by jscoverage/JSCover | ||
lib-cov | ||
|
||
# Coverage directory used by tools like istanbul | ||
coverage | ||
*.lcov | ||
|
||
# nyc test coverage | ||
.nyc_output | ||
|
||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) | ||
.grunt | ||
|
||
# Bower dependency directory (https://bower.io/) | ||
bower_components | ||
|
||
# node-waf configuration | ||
.lock-wscript | ||
|
||
# Compiled binary addons (https://nodejs.org/api/addons.html) | ||
build/Release | ||
|
||
# Dependency directories | ||
node_modules/ | ||
jspm_packages/ | ||
|
||
# Snowpack dependency directory (https://snowpack.dev/) | ||
web_modules/ | ||
|
||
# TypeScript cache | ||
*.tsbuildinfo | ||
|
||
# Optional npm cache directory | ||
.npm | ||
|
||
# Optional eslint cache | ||
.eslintcache | ||
|
||
# Microbundle cache | ||
.rpt2_cache/ | ||
.rts2_cache_cjs/ | ||
.rts2_cache_es/ | ||
.rts2_cache_umd/ | ||
|
||
# Optional REPL history | ||
.node_repl_history | ||
|
||
# Output of 'npm pack' | ||
*.tgz | ||
|
||
# Yarn Integrity file | ||
.yarn-integrity | ||
|
||
# dotenv environment variables file | ||
.env | ||
.env.test | ||
.env.production | ||
|
||
# parcel-bundler cache (https://parceljs.org/) | ||
.cache | ||
.parcel-cache | ||
|
||
# Next.js build output | ||
.next | ||
out | ||
|
||
# Nuxt.js build / generate output | ||
.nuxt | ||
dist | ||
|
||
# Gatsby files | ||
.cache/ | ||
# Comment in the public line in if your project uses Gatsby and not Next.js | ||
# https://nextjs.org/blog/next-9-1#public-directory-support | ||
# public | ||
|
||
# vuepress build output | ||
.vuepress/dist | ||
|
||
# Serverless directories | ||
.serverless/ | ||
|
||
# FuseBox cache | ||
.fusebox/ | ||
|
||
# DynamoDB Local files | ||
.dynamodb/ | ||
|
||
# TernJS port file | ||
.tern-port | ||
|
||
# Stores VSCode versions used for testing VSCode extensions | ||
.vscode-test | ||
|
||
# yarn v2 | ||
.yarn/cache | ||
.yarn/unplugged | ||
.yarn/build-state.yml | ||
.yarn/install-state.gz | ||
.pnp.* | ||
|
||
### Node Patch ### | ||
# Serverless Webpack directories | ||
.webpack/ | ||
|
||
### react ### | ||
.DS_* | ||
**/*.backup.* | ||
**/*.back.* | ||
|
||
node_modules | ||
|
||
*.sublime* | ||
|
||
psd | ||
thumb | ||
sketch | ||
|
||
# End of https://www.toptal.com/developers/gitignore/api/react,node |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
# HTML table striping | ||
|
||
Here you can practise techniques for applying more colorful striping to your tables! | ||
|
||
## Task | ||
|
||
Working in the files [index.html](./index.html) and [style.css](./style.css), create a website which meets the following requirements. | ||
|
||
## Requirements | ||
|
||
- Using the example image below as a reference, create an HTML data table shown using the `:first-child`, `:last-child`, `:nth-child` and `:not` pseudo classes | ||
- Use the data below to fill in your table | ||
- Apply background colors to the `<td>` elements | ||
- Use the colors: `#c0c0c0`, `#888888`, `#efefef`, `#ffbbbb` | ||
- Do NOT use deprecated HTML attributes. Style using CSS. | ||
|
||
### Table Data | ||
|
||
| First Name | Last Name | Role | | ||
| ---------- | --------- | --------- | | ||
| Scott | Gomez | Player | | ||
| Paul | Mackie | Coach | | ||
| Leoni | Cabrera | Assistant | | ||
| Gregor | Byrne | Player | | ||
| Francis | Shaffer | Manager | | ||
| Walter | Gale | Player | | ||
|
||
## Reference Image | ||
|
||
![Reference](/reference.png) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
# Grundlegende Datenübungen | ||
|
||
## Übung: Tabelle 4 | ||
|
||
**Anweisungen**: | ||
|
||
1. Erstelle eine einfache HTML-Seite mit allen wichtigen Elementen, indem du die bereitgestellten Dateien `index.html` und `main.css` verwendest. | ||
2. Sieh dir die Mockup-Datei an und erstelle die abgebildete Tabelle mit den Pseudoklassen `:first-child`, `:last-child`, `:nth-child` und `:not`. | ||
3. Wende Hintergrundfarben auf die `<td>` Elemente an. | ||
4. Verwendete Farben sind: `#c0c0c0`, `#888888`, `#efefef`, `#ffbbbb`. | ||
5. Verwende KEINE veralteten HTML-Attribute. Style mit CSS. | ||
|
||
![mockup-image](image/mockup.jpg) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,126 @@ | ||
const puppeteer = require("puppeteer"); | ||
const path = require("path"); | ||
const fs = require("fs"); | ||
|
||
const browserOptions = { | ||
headless: true, | ||
ignoreHTTPSErrors: true, | ||
defaultViewport: null, | ||
devtools: false, | ||
}; | ||
let browser; | ||
let page; | ||
|
||
beforeAll(async () => { | ||
browser = await puppeteer.launch(browserOptions); | ||
page = await browser.newPage(); | ||
await page.goto("file://" + path.resolve("./index.html")); | ||
}, 30000); | ||
|
||
afterAll((done) => { | ||
try { | ||
this.puppeteer.close(); | ||
} catch (e) {} | ||
done(); | ||
}); | ||
|
||
describe("Table", () => { | ||
it("Table exists", async () => { | ||
const table = await page.$("table", (el) => el.innerHTML); | ||
expect(table).toBeTruthy(); | ||
}); | ||
|
||
it("Table has table head", async () => { | ||
const tableHeaders = await page.$$("table th"); | ||
expect(tableHeaders.length).toBeTruthy(); | ||
}); | ||
|
||
it("Table has 'First Name', 'Last Name' and 'Role' column headers", async () => { | ||
const table = await page.$("table", (el) => el.innerHTML); | ||
const firstName = await table.$x( | ||
'//th[text()[contains(translate(., "FIRSTNAME", "firstname"),"first name")]]' | ||
); | ||
expect(firstName.length).toBeTruthy(); | ||
const lastName = await table.$x( | ||
'//th[text()[contains(translate(., "LASTNAME", "lastname"),"last name")]]' | ||
); | ||
expect(lastName.length).toBeTruthy(); | ||
const role = await table.$x( | ||
'//th[text()[contains(translate(., "ROLE", "role"),"role")]]' | ||
); | ||
expect(role.length).toBeTruthy(); | ||
}); | ||
|
||
it("Table has 7 rows in total", async () => { | ||
const table = await page.$("table", (el) => el.innerHTML); | ||
const rows = await table.$$("tr"); | ||
expect(rows.length).toBe(7); | ||
}); | ||
|
||
it("Table contains correct number cells", async () => { | ||
const table = await page.$("table", (el) => el.innerHTML); | ||
const cells = await table.$$("td"); | ||
expect(cells.length).toBe(18); | ||
}); | ||
}); | ||
describe("Styling the table", () => { | ||
it("`:first-child` should be used to style the first row", async () => { | ||
// first row should has a different background color than the rest of the rows | ||
// get all computed styles for all rows | ||
const rows = await page.evaluate(() => { | ||
const allRows = document.querySelectorAll("tr"); | ||
// get computed styles for each row | ||
const allComputedStyles = Array.from(allRows).map((row) => | ||
window.getComputedStyle(row) | ||
); | ||
// return the first computed style for each row | ||
return allComputedStyles.map((style) => | ||
style.getPropertyValue("background-color") | ||
); | ||
}); | ||
// check that the first row has a different background color than the rest of the rows | ||
expect(rows[0]).not.toBe(rows[1]); | ||
// get main.css file as a string | ||
const style = fs.readFileSync(path.resolve("./main.css"), "utf8"); | ||
// it should contain the `:first-child` selector | ||
expect(style).toContain(":first-child"); | ||
}); | ||
it("`style`, `class`, and `id` attributes should not be applied to the table's child elements", async () => { | ||
// get all table child elements | ||
const table = await page.$("table", (el) => el.innerHTML); | ||
const idAttr = await table.$$eval("*", (el) => | ||
Array.from(el) | ||
.map( | ||
(child) => | ||
child.getAttribute("id") || | ||
child.getAttribute("class") || | ||
child.getAttribute("style") | ||
) | ||
.filter((e) => e !== null) | ||
); | ||
expect(idAttr.length).toBe(0); | ||
}); | ||
it("`:nth-child` should be used to style the rows", async () => { | ||
const style = fs.readFileSync(path.resolve("./main.css"), "utf8"); | ||
// it should contain the `:nth-child` selector | ||
expect(style).toMatch(/tr:nth-child/i); | ||
}); | ||
it("The table should use three different background colors", async () => { | ||
// get all background colors | ||
const backgroundColors = await page.evaluate(() => { | ||
const allRows = document.querySelectorAll("tbody tr, tbody td"); | ||
// get computed styles for each row | ||
const allComputedStyles = Array.from(allRows).map((row) => | ||
window.getComputedStyle(row) | ||
); | ||
// return the first computed style for each row | ||
return allComputedStyles.map((style) => | ||
style.getPropertyValue("background-color") | ||
); | ||
}); | ||
// remove duplicates | ||
const uniqueBackgroundColors = [...new Set(backgroundColors)]; | ||
// check that there are three different background colors | ||
expect(uniqueBackgroundColors.length).toBeGreaterThanOrEqual(3); | ||
}); | ||
}); |
Empty file.
Oops, something went wrong.