root
/
public
mirror of https://github.com/01-edu/public.git
8
9
Fork 0
Code Issues 2 Projects Releases Wiki Activity
Browse Source

fix(public/subjects): change css sentence all dom subjects

pull/1811/head
lee 1 year ago committed by LEEDASILVA
parent
97d7414484
commit
629c2369ea
14 changed files with 281 additions and 286 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      subjects/build-brick-and-break/README.md
  2. 2
      subjects/fifty-shades-of-cold/README.md
  3. 2
      subjects/get-them-all-dom/README.md
  4. 236
      subjects/get-them-all-dom/get-them-all.html
  5. 69
      subjects/get-them-all/README.md
  6. 0
      subjects/get-them-all/get-them-all.css
  7. 236
      subjects/get-them-all/get-them-all.html
  8. 2
      subjects/gossip-grid/README.md
  9. 2
      subjects/harder-bigger-bolder-stronger/README.md
  10. 2
      subjects/keycodes-symphony/README.md
  11. 4
      subjects/mouse-trap/README.md
  12. 3
      subjects/pick-and-click/README.md
  13. 2
      subjects/pimp-my-style/README.md
  14. 5
      subjects/where-do-we-go/README.md

2
subjects/build-brick-and-break/README.md
unescape_control_characters View File

@ -26,7 +26,7 @@ You only need to create & submit the JS file `build-brick-and-break.js`, We're p
- the HTML file [build-brick-and-break.html](./build-brick-and-break.html) can be opened in the browser, which includes:
- the JS script running some code, and which will enable you to run your code.
- the CSS file [build-brick-and-break.css](./build-brick-and-break.css) feel free to use those as they are, or modify them.
- feel free to use the CSS file [build-brick-and-break.css](./build-brick-and-break.css) as it is or you can also modify it.
### Expected result

2
subjects/fifty-shades-of-cold/README.md
unescape_control_characters View File

@ -32,7 +32,7 @@ You only need to create & submit the JS file `fifty-shades-of-cold.js`, we're pr
- the data file [fifty-shades-of-cold.data.js](./fifty-shades-of-cold.data.js) from which you can import `colors`.
- the CSS file [fifty-shades-of-cold.css](./fifty-shades-of-cold.css) feel free to use those as they are, or modify them.
- feel free to use the CSS file [fifty-shades-of-cold.css](./fifty-shades-of-cold.css) as it is or you can also modify it.
### Expected result

2
subjects/get-them-all-dom/README.md
unescape_control_characters View File

@ -51,5 +51,3 @@ You only need to create & submit the JS file `get-them-all.js` ; we're providing
- the import of the data
- the data file [get-them-all.data.js](./get-them-all.data.js) used to generate content in the HTML
- the CSS file [get-them-all.css](./get-them-all.css) used to style the content in the HTML

236
subjects/get-them-all-dom/get-them-all.html
unescape_control_characters View File

@ -1,93 +1,179 @@
<!DOCTYPE html>
<html>
<head>
<title>Get them all</title>
<title>Get them all</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
<link rel="stylesheet" type="text/css" href="./get-them-all.css">
<style>
:root {
--background: hsl(0, 0%, 12%);
--text: hsl(0, 0%, 80%);
--clear: hsl(0, 0%, 65%);
--disabled: hsl(0, 0%, 35%);
--purple: #bb73e6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
letter-spacing: 1.5px;
background: var(--background);
display: flex;
flex-wrap: wrap;
padding: 100px;
justify-content: center;
align-items: center;
font-size: 15px;
margin-top: 150px;
}
button {
outline: none;
border: none;
}
#buttons {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
top: 0;
height: 150px;
background: var(--background);
box-shadow: 0 0 50px black;
}
#buttons * {
margin: 0 20px;
padding: 10px 20px;
background: var(--clear);
border-radius: 20px;
cursor: pointer;
user-select: none;
width: 200px;
text-align: center;
}
.disabled {
pointer-events: none;
opacity: 0.3;
}
a,
span {
min-width: 110px;
min-height: 110px;
width: 5vw;
height: 5vw;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
border: solid 1px var(--clear);
line-height: 22px;
padding: 10px;
color: var(--clear);
margin: 30px;
}
.found {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.6),
-10px -10px 15px rgba(255, 255, 255, 0.074);
border: none;
background: var(--purple);
color: var(--background);
}
</style>
</head>
<body>
<script type="module">
import { people } from './get-them-all.data.js'
import {
getBonannoPisano,
getActive,
getArchitects,
getClassical,
} from './get-them-all.js'
const body = document.querySelector('body')
const shuffle = (array) => {
const test = array.length - 1
for (let i = test; i > 0; i--) {
const j = Math.floor(Math.random() * i)
const temp = array[i]
array[i] = array[j]
array[j] = temp
}
return array
import { people } from './get-them-all.data.js'
import {
getBonannoPisano,
getActive,
getArchitects,
getClassical,
} from './get-them-all.js'
const body = document.querySelector('body')
const shuffle = (array) => {
const test = array.length - 1
for (let i = test; i > 0; i--) {
const j = Math.floor(Math.random() * i)
const temp = array[i]
array[i] = array[j]
array[j] = temp
}
return array
}
shuffle(people).map(({ id, classe, address, plans, tag, active }) => {
const people = document.createElement(tag)
people.id = id
people.textContent = 'Someone'
people.className = `${classe} ${active ? 'active' : ''}`
body.append(people)
})
const buttonsContainer = document.createElement('div')
buttonsContainer.id = 'buttons'
body.append(buttonsContainer)
const buttons = [
{ name: 'Architect', action: getArchitects },
{ name: 'Classical', action: getClassical },
{ name: 'Active', action: getActive },
{ name: 'Bonanno', action: getBonannoPisano },
]
buttons.forEach(({ name, action }, i) => {
const btn = document.createElement('button')
btn.id = `btn${name}`
btn.textContent = `Get ${name}${i === 0 ? 's' : ''}`
if (i > 0) {
btn.className = 'disabled'
}
btn.addEventListener('click', () => {
const [targetted, others] = action()
if (name === 'Bonanno') {
targetted.textContent = targetted.id.replace('P', ' P')
targetted.classList.add('found')
} else {
targetted.forEach((t) => {
t.textContent = name
})
}
shuffle(people).map(({ id, classe, address, plans, tag, active }) => {
const people = document.createElement(tag)
people.id = id
people.textContent = 'Someone'
people.className = `${classe} ${active ? 'active' : ''}`
body.append(people)
others.forEach((o) => {
o.style.opacity = 0.2
})
const buttonsContainer = document.createElement('div')
buttonsContainer.id = 'buttons'
body.append(buttonsContainer)
const buttons = [
{ name: 'Architect', action: getArchitects },
{ name: 'Classical', action: getClassical },
{ name: 'Active', action: getActive },
{ name: 'Bonanno', action: getBonannoPisano },
]
buttons.forEach(({ name, action }, i) => {
const btn = document.createElement('button')
btn.id = `btn${name}`
btn.textContent = `Get ${name}${i === 0 ? 's' : ''}`
if (i > 0) {
btn.className = 'disabled'
}
btn.addEventListener('click', () => {
const [targetted, others] = action()
if (name === 'Bonanno') {
targetted.textContent = targetted.id.replace('P', ' P')
targetted.classList.add('found')
} else {
targetted.forEach((t) => {
t.textContent = name
})
}
others.forEach((o) => {
o.style.opacity = 0.2
})
btn.className = 'disabled'
const last = i + 1 === buttons.length
if (last) return
const next = document.getElementById(`btn${buttons[i + 1].name}`)
next.classList.remove('disabled')
})
btn.className = 'disabled'
buttonsContainer.append(btn)
})
const last = i + 1 === buttons.length
if (last) return
const next = document.getElementById(`btn${buttons[i + 1].name}`)
next.classList.remove('disabled')
})
buttonsContainer.append(btn)
})
</script>
</body>
</html>

69
subjects/get-them-all/README.md
unescape_control_characters View File

@ -2,55 +2,54 @@
### Instructions
You've been given the task of finding the main architect of the Tower of Pisa before he achieves his plans; avoiding all those lame pictures of people pretending to stop it from falling.
You've been attributed the task to find the main architect of the Tower of Pisa before he achieves his plans, avoiding us nowadays all those lame pictures of people pretending to stop it from falling.
You arrive at the architects' chamber, but all you have in front of you is a bunch of unknown people.
You arrive at the architects' chamber to find him, but all you have in front of you is a bunch of unknown people.
Step by step, with the little information you have, gather information and figure out by elimination who he is.
Step by step, gather information and figure out by elimination who he is.
Launch the provided HTML file in the browser to begin your investigation.<br/>
On top of the webpage, each of the four buttons fires a function:
Launch the provided HTML file in the browser to begin your investigation.
- Write the body of the `getArchitects` function, which returns an array containing 2 arrays of HTML elements:
At the top of the webpage, each of the four buttons fires a function:
- the first array contains the architects, all corresponding to a `<a>` tag
- the second array contains all the non-architects people
Complete the body of the following functions. The first three functions return an array containing two arrays of HTML elements:
- Write the body of the `getClassical` function, which returns an array containing 2 arrays of HTML elements:
- `getArchitects`:
- 1st array: the architects, all corresponding to a `<a>` tag.
- 2nd array: all the non-architects.
- the first array contains the architects belonging to the `classical` class
- the second array contains the non-classical architects
- `getClassical`:
- 1st array: the architects belonging to the `classical` class.
- 2nd array: the non-classical architects.
- Write the body of the `getActive` function, which returns an array containing 2 arrays of HTML elements:
- `getActive`:
- 1st array: the classical architects who are `active` in their class.
- 2nd array: the non-active classical architects.
- the first array contains the classical architects who are `active` in their class
- the second array contains the non-active classical architects
The last function is `getBonannoPisano`. It returns an array containing:
- the HTML element of the architect you're looking for, whose `id` is `BonannoPisano`.
- an array containing all the remaining HTML elements of active classical architects.
- Write the body of the `getBonannoPisano` function, which returns an array containing:
- the HTML element of the architect you're looking for, whose `id` is `BonannoPisano`
- an array which contains all the remaining HTML elements of active classical architects
> From now on, don't forget to [**export**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) all the expected functions, so that they can be imported to be tested<br/> > `export const getArchitects = () => {...}`
### Notions
- [HTML Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)
- [`getElementsByTagName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName)
- [`getElementsByClassName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName)
- [`getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
- [`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) / [`querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
- ...and bit of CSS that could help with the [`:not` pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:not)
> From now on, don't forget to [**export**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) all the expected functions, so that they can be imported to be tested.
```js
export const getArchitects = () => {...}
```
### Files
You only need to create & submit the JS file `get-them-all.js`. We're providing you the following files to download. You may test them locally:
You only need to create & submit the JS file `get-them-all.js` ; we're providing you the following files to download (click right and save link) & test locally:
- the HTML file [get-them-all.html](./get-them-all.html) to open in the browser, which includes:
- the JS script running some code, and which will allow you to run your code.
- some CSS pre-styled classes: feel free to use those as they are, or modify them.
- an import of the data.
- the data file [get-them-all.data.js](./get-them-all.data.js) used to generate content in the HTML.
- the JS script running some code, and which will also allow to run yours
- some CSS pre-styled classes: feel free to use those as they are, or modify them
- the import of the data
### Notions
- the data file [get-them-all.data.js](./get-them-all.data.js) used to generate content in the HTML
- [HTML Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)
- [getElementsByTagName](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName)
- [getElementsByClassName](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName)
- [getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) / [querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
- ...and bit of CSS that could help with the [`:not` pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:not)
- feel free to use the CSS file [get-them-all.css](./get-them-all.css) as it is or you can also modify it.

0
subjects/get-them-all-dom/get-them-all.css → subjects/get-them-all/get-them-all.css
unescape_control_characters View File

236
subjects/get-them-all/get-them-all.html
unescape_control_characters View File

@ -1,179 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<title>Get them all</title>
<title>Get them all</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
<style>
:root {
--background: hsl(0, 0%, 12%);
--text: hsl(0, 0%, 80%);
--clear: hsl(0, 0%, 65%);
--disabled: hsl(0, 0%, 35%);
--purple: #bb73e6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
letter-spacing: 1.5px;
background: var(--background);
display: flex;
flex-wrap: wrap;
padding: 100px;
justify-content: center;
align-items: center;
font-size: 15px;
margin-top: 150px;
}
button {
outline: none;
border: none;
}
#buttons {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
top: 0;
height: 150px;
background: var(--background);
box-shadow: 0 0 50px black;
}
#buttons * {
margin: 0 20px;
padding: 10px 20px;
background: var(--clear);
border-radius: 20px;
cursor: pointer;
user-select: none;
width: 200px;
text-align: center;
}
.disabled {
pointer-events: none;
opacity: 0.3;
}
a,
span {
min-width: 110px;
min-height: 110px;
width: 5vw;
height: 5vw;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
border: solid 1px var(--clear);
line-height: 22px;
padding: 10px;
color: var(--clear);
margin: 30px;
}
.found {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.6),
-10px -10px 15px rgba(255, 255, 255, 0.074);
border: none;
background: var(--purple);
color: var(--background);
}
</style>
<link rel="stylesheet" type="text/css" href="./get-them-all.css">
</head>
<body>
<script type="module">
import { people } from './get-them-all.data.js'
import {
getBonannoPisano,
getActive,
getArchitects,
getClassical,
} from './get-them-all.js'
const body = document.querySelector('body')
const shuffle = (array) => {
const test = array.length - 1
for (let i = test; i > 0; i--) {
const j = Math.floor(Math.random() * i)
const temp = array[i]
array[i] = array[j]
array[j] = temp
}
return array
}
shuffle(people).map(({ id, classe, address, plans, tag, active }) => {
const people = document.createElement(tag)
people.id = id
people.textContent = 'Someone'
people.className = `${classe} ${active ? 'active' : ''}`
body.append(people)
})
const buttonsContainer = document.createElement('div')
buttonsContainer.id = 'buttons'
body.append(buttonsContainer)
const buttons = [
{ name: 'Architect', action: getArchitects },
{ name: 'Classical', action: getClassical },
{ name: 'Active', action: getActive },
{ name: 'Bonanno', action: getBonannoPisano },
]
buttons.forEach(({ name, action }, i) => {
const btn = document.createElement('button')
btn.id = `btn${name}`
btn.textContent = `Get ${name}${i === 0 ? 's' : ''}`
if (i > 0) {
btn.className = 'disabled'
}
btn.addEventListener('click', () => {
const [targetted, others] = action()
if (name === 'Bonanno') {
targetted.textContent = targetted.id.replace('P', ' P')
targetted.classList.add('found')
} else {
targetted.forEach((t) => {
t.textContent = name
})
import { people } from './get-them-all.data.js'
import {
getBonannoPisano,
getActive,
getArchitects,
getClassical,
} from './get-them-all.js'
const body = document.querySelector('body')
const shuffle = (array) => {
const test = array.length - 1
for (let i = test; i > 0; i--) {
const j = Math.floor(Math.random() * i)
const temp = array[i]
array[i] = array[j]
array[j] = temp
}
return array
}
others.forEach((o) => {
o.style.opacity = 0.2
shuffle(people).map(({ id, classe, address, plans, tag, active }) => {
const people = document.createElement(tag)
people.id = id
people.textContent = 'Someone'
people.className = `${classe} ${active ? 'active' : ''}`
body.append(people)
})
btn.className = 'disabled'
const last = i + 1 === buttons.length
if (last) return
const next = document.getElementById(`btn${buttons[i + 1].name}`)
next.classList.remove('disabled')
})
const buttonsContainer = document.createElement('div')
buttonsContainer.id = 'buttons'
body.append(buttonsContainer)
const buttons = [
{ name: 'Architect', action: getArchitects },
{ name: 'Classical', action: getClassical },
{ name: 'Active', action: getActive },
{ name: 'Bonanno', action: getBonannoPisano },
]
buttons.forEach(({ name, action }, i) => {
const btn = document.createElement('button')
btn.id = `btn${name}`
btn.textContent = `Get ${name}${i === 0 ? 's' : ''}`
if (i > 0) {
btn.className = 'disabled'
}
btn.addEventListener('click', () => {
const [targetted, others] = action()
if (name === 'Bonanno') {
targetted.textContent = targetted.id.replace('P', ' P')
targetted.classList.add('found')
} else {
targetted.forEach((t) => {
t.textContent = name
})
}
others.forEach((o) => {
o.style.opacity = 0.2
})
btn.className = 'disabled'
const last = i + 1 === buttons.length
if (last) return
const next = document.getElementById(`btn${buttons[i + 1].name}`)
next.classList.remove('disabled')
})
buttonsContainer.append(btn)
})
buttonsContainer.append(btn)
})
</script>
</body>
</html>

2
subjects/gossip-grid/README.md
unescape_control_characters View File

@ -25,7 +25,7 @@ You only need to create & submit the JS file `gossip-grid.js`; we're providing y
- the data file [gossip-grid.data.js](./gossip-grid.data.js) from which you can import `gossips`.
- the CSS file [gossip-grid.css](./gossip-grid.css) feel free to use those as they are, or modify them.
- feel free to use the CSS file [gossip-grid.css](./gossip-grid.css) as it is or you can also modify it.
### Expected result

2
subjects/harder-bigger-bolder-stronger/README.md
unescape_control_characters View File

@ -18,7 +18,7 @@ You only need to create & submit the JS file `harder-bigger-bolder-stronger.js`.
- the JS script running some code, and which will enable you to run yours.
- the CSS file [harder-bigger-bolder-stronger.css](./harder-bigger-bolder-stronger.css) feel free to use those as they are, or modify them.
- feel free to use the CSS file [harder-bigger-bolder-stronger.css](./harder-bigger-bolder-stronger.css) as it is or you can also modify it.
### Notions

2
subjects/keycodes-symphony/README.md
unescape_control_characters View File

@ -18,7 +18,7 @@ You only need to create & submit the JS file `keycodes-symphony.js`; we're provi
- the JS script which will allow to run your code.
- the CSS file [keycodes-symphony.css](./keycodes-symphony.css) feel free to use those as they are, or modify them.
- feel free to use the CSS file [keycodes-symphony.css](./keycodes-symphony.css) as it is or you can also modify it.
### Expected result

4
subjects/mouse-trap/README.md
unescape_control_characters View File

@ -1,4 +1,4 @@
## Mouse trap
****## Mouse trap
### Instructions
@ -23,7 +23,7 @@ You only need to create & submit the JS file `mouse-trap.js`; we're providing yo
- the JS script which will enable you to run your code.
- the CSS file [mouse-trap.css](./mouse-trap.css) feel free to use those as they are, or modify them.
- feel free to use the CSS file [mouse-trap.css](./mouse-trap.css) as it is or you can also modify it.
### Expected result

3
subjects/pick-and-click/README.md
unescape_control_characters View File

@ -33,8 +33,7 @@ You only need to create & submit the JS file `pick-and-click.js`; we're providin
- the JS script which will enable you to run your code.
- the CSS file [pick-and-click.css](./pick-and-click.css) feel free to use those as they are, or modify them.
- feel free to use the CSS file [pick-and-click.css](./pick-and-click.css) as it is or you can also modify it.
### Expected result

2
subjects/pimp-my-style/README.md
unescape_control_characters View File

@ -48,7 +48,7 @@ You only need to create & submit the JS file `pimp-my-style.js`. Ee're providing
- the JS script running some code, and which will enable you to run yours.
- the data file [pimp-my-style.data.js](./pimp-my-style.data.js) from which you can import `styles`.
- the CSS file [pimp-my-style.css](./pimp-my-style.css) feel free to use those as they are, or modify them.
- feel free to use the CSS file [pimp-my-style.css](./pimp-my-style.css) as it is or you can also modify it.
### Expected result

5
subjects/where-do-we-go/README.md
unescape_control_characters View File

@ -31,10 +31,9 @@ You only need to create & submit the JS file `where-do-we-go.js`; we're providin
- the data file [where-do-we-go.data.js](./where-do-we-go.data.js) from which you can import `places`
- the CSS file [where-do-we-go.css](./where-do-we-go.css) feel free to use those as they are, or modify them.
- the images to use, in this [compressed folder](https://assets.01-edu.org/where-do-we-go_images.zip) or you can can fetch from the public URL, example `https://public.01-edu.org/subjects/where-do-we-go/where-do-we-go_images/arlit.jpg` [arlit](https://public.01-edu.org/subjects/where-do-we-go/where-do-we-go_images/arlit.jpg)
- feel free to use the CSS file [where-do-we-go.css](./where-do-we-go.css) as it is or you can also modify it.
- you can get the images to be used in this [compressed folder](https://assets.01-edu.org/where-do-we-go_images.zip) or you can get them in the where-do-we-go_images folder from the public URL. Example: `https://public.01-edu.org/subjects/where-do-we-go/where-do-we-go_images/arlit.jpg
### Expected result
You can see an example of the expected result [here](https://youtu.be/BLxNi1WH6_0)

Write Preview
Loading…
Cancel
Save