ytursyna
/
public
forked from root/public
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Updated the `readme` to indicate the files provided + the right path matching the new structure of files.

content-update
Marie Malarme 4 years ago committed by Clément
parent
3c0b87ef69
commit
aa7f28182c
14 changed files with 89 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      puppeteer/fifty-shades-of-cold.js
  2. 2
      puppeteer/where-do-we-go.js
  3. 29
      subjects/build-brick-and-break/README.md
  4. 11
      subjects/fifty-shades-of-cold/README.md
  5. 5
      subjects/fifty-shades-of-cold/index.html
  6. 9
      subjects/get-them-all/README.md
  7. 7
      subjects/gossip-grid/README.md
  8. 9
      subjects/harder-bigger-bolder-stronger/README.md
  9. 11
      subjects/keycodes-symphony/README.md
  10. 7
      subjects/mouse-trap/README.md
  11. 8
      subjects/pick-and-click/README.md
  12. 8
      subjects/pimp-my-style/README.md
  13. 12
      subjects/where-do-we-go/README.md
  14. 4
      subjects/where-do-we-go/index.html

3
puppeteer/fifty-shades-of-cold.js
unescape_control_characters View File

@ -41,6 +41,3 @@ export const choseShade = (shade) => {
} }
}) })
} }
generateClasses()
generateColdShades()

2
puppeteer/where-do-we-go.js
unescape_control_characters View File

@ -2,7 +2,7 @@ import { places } from './data.js'
const body = document.querySelector('body') const body = document.querySelector('body')
export const scroll = () => { export const explore = () => {
createSections() createSections()
const location = document.createElement('div') const location = document.createElement('div')

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

@ -4,25 +4,21 @@
Today, your mission is to build a 3-column brick tower, maintain it and finally break it! Today, your mission is to build a 3-column brick tower, maintain it and finally break it!
Create a function `build` which will create and display the given amount of bricks passed as argument: - Create a function `build` which will create and display the given amount of bricks passed as argument:
- each brick has to be created and added to the page at a regular interval of time (at least 50ms), - each brick has to be created and added to the page at a regular interval of time (at least 50ms),
- each brick will receive a unique `id` property, like following: - each brick will receive a unique `id` property, like following:
```html ```html
<div id="brick-1"></div> <div id="brick-1"></div>
``` ```
- each brick in the middle column has to be set with the custom attribute `foundation` receiving the value `true` - each brick in the middle column has to be set with the custom attribute `foundation` receiving the value `true`
Each one of the two emojis in the top-right corner fires a function on click: - Each one of the two emojis in the top-right corner fires a function on click:
- 🔨 triggers the function `repair` - 🔨 triggers the function `repair`: write the body of that function, which receives any number of `ids`, and for each `id`, retrieves the HTML element and set a custom attribute `repaired` set to `in progress` if it is a brick situated in the middle column, and `true` if not
- 🧨 triggers the function `destroy` - 🧨 triggers the function `destroy`: write the body of that function, which removes the current last brick in the tower
Write the body of the `repair` function, which receives any number of `ids`, and for each `id`, retrieves the HTML element and set a custom attribute `repaired` set to `in progress` if it is a brick situated in the middle column, and `true` if not.
Write the body of the `destroy` function, which removes the current last brick in the tower.
### Notions ### Notions
@ -36,7 +32,10 @@ Write the body of the `destroy` function, which removes the current last brick i
### Provided files ### Provided files
- Use this CSS file: [style.css](./style.css) - Use the HTML file [index.html](/public/subjects/build-brick-and-break/index.html), which includes:
- 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
### Expected result ### Expected result

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

@ -6,7 +6,7 @@ You've been asked to freshen a webpage atmosphere by displaying shades of cold c
Check the `colors` array provided in the data file below. Check the `colors` array provided in the data file below.
- Create a `<style>` tag in the `<head>` tag and generate, for each color of `colors`, a class setting the `background` attribute and taking the color as value, like following: - Write the `generateClasses` function which creates a `<style>` tag in the `<head>` tag and generates, for each color of `colors`, a class setting the `background` attribute and taking the color as value, like following:
```css ```css
.indianred { .indianred {
@ -14,7 +14,7 @@ Check the `colors` array provided in the data file below.
} }
``` ```
- Create a `<div>` for each color of the `colors` array whose name contains `aqua`, `blue`, `turquoise`, `green`, `cyan`, `navy` or `purple`.\ - Write the `generateColdShades` function which creates a `<div>` for each color of the `colors` array whose name contains `aqua`, `blue`, `turquoise`, `green`, `cyan`, `navy` or `purple`.\
Each `<div>` must have the corresponding generated class and display the name of the color, like following: Each `<div>` must have the corresponding generated class and display the name of the color, like following:
```html ```html
@ -32,7 +32,12 @@ Check the `colors` array provided in the data file below.
### Provided files ### Provided files
- Import the `colors` from the data file: [data.js](./data.js) - Use the HTML file [index.html](/public/subjects/fifty-shades-of-cold/index.html), which includes:
- 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
- Import `colors` from the data file [data.js](/public/subjects/fifty-shades-of-cold/data.js)
### Expected result ### Expected result

5
subjects/fifty-shades-of-cold/index.html
unescape_control_characters View File

@ -46,7 +46,10 @@ div {
<body> <body>
<script type="module"> <script type="module">
import { choseShade } from './fifty-shades-of-cold.js' import { generateClasses, generateColdShades, choseShade } from './fifty-shades-of-cold.js'
generateClasses()
generateColdShades()
const divs = [...document.querySelectorAll('div')] const divs = [...document.querySelectorAll('div')]
divs.map((d) => { divs.map((d) => {

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

@ -17,6 +17,8 @@ On top of the webpage, each of the four buttons fires a function which has to re
- Write the body of the `getBonannoPisano` function, which targets the architect you're looking for, whose `id` is `BonannoPisano`. - Write the body of the `getBonannoPisano` function, which targets the architect you're looking for, whose `id` is `BonannoPisano`.
> 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
### Notions ### Notions
- [`getElementsByTagName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName) - [`getElementsByTagName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName)
@ -26,5 +28,8 @@ On top of the webpage, each of the four buttons fires a function which has to re
### Provided files ### Provided files
- Use this CSS file: [style.css](./style.css) - Use the HTML file [index.html](/public/subjects/get-them-all/index.html), which includes:
- You can take a look at the data: [data.js](./data.js)
- the JS script running some code, and which will also allow to run yours
- some data used to generate content
- some CSS pre-styled classes: feel free to use those as they are, or modify them

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

@ -15,7 +15,12 @@ Create the function `grid` which displays all the `gossips`, provided in the dat
### Provided files ### Provided files
- Import the `gossips` from the data file: [data.js](./data.js) - Use the HTML file [index.html](/public/subjects/gossip-grid/index.html), which includes:
- the JS script which will allow to run your code
- some CSS pre-styled classes: feel free to use those as they are, or modify them
- Import `gossips` from the data file [data.js](/public/subjects/gossip-grid/data.js)
### Expected result ### Expected result

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

@ -6,11 +6,18 @@ Being stuck at home, bored, desperate and coming up with a lot of weird ideas, a
Generate a board where each new letter is harder, bigger, bolder and stronger! Generate a board where each new letter is harder, bigger, bolder and stronger!
Create the function `generateLetters` which creates 100 `div`, each containing a letter randomly picked through the alphabet, and whose style properties have to be increased: Write the function `generateLetters` which creates 100 `div`, each containing a letter randomly picked through the alphabet, and whose style properties have to be increased:
- `font-size` has to grow from `20` to at least `100` pixels - `font-size` has to grow from `20` to at least `100` pixels
- `font-weigth` has to be `300` for the first third of the letters, `400` for the second third, and `600` for the last third - `font-weigth` has to be `300` for the first third of the letters, `400` for the second third, and `600` for the last third
### Provided files
- Use the HTML file [index.html](/public/subjects/harder-bigger-bolder-stronger/index.html), which includes:
- 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
### Notions ### Notions
- [`style`](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style) - [`style`](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style)

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

@ -4,10 +4,10 @@
Like an inspired Beethoven who's going to write his Moonlight Sonata, you're about to compose a colourful symphony of letters with your keyboard. Like an inspired Beethoven who's going to write his Moonlight Sonata, you're about to compose a colourful symphony of letters with your keyboard.
Export the function `compose`: Write the function `compose`:
- Make it fire every time a key is pressed - Make it fire every time a key is pressed
- Create a new `note`, which has a background color generated using its `keyCode`, and displays the corresponding letter pressed - Create a new `note`, which has a background color generated using its `key`, and displays the corresponding letter pressed
- If the pressed key is the `Delete` one, delete the last note - If the pressed key is the `Delete` one, delete the last note
- If the pressed key is the `Escape` one, clear all the notes - If the pressed key is the `Escape` one, clear all the notes
@ -15,6 +15,13 @@ Export the function `compose`:
- [Keyboard event](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent): [`keydown`](https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event), [`key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) - [Keyboard event](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent): [`keydown`](https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event), [`key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)
### Provided files
- Use the HTML file [index.html](/public/subjects/keycodes-symphony/index.html), which includes:
- the JS script which will allow to run your code
- some CSS pre-styled classes: feel free to use those as they are, or modify them
### Expected result ### Expected result
You can see an example of the expected result [here](https://youtu.be/5DdijwBnpAk) You can see an example of the expected result [here](https://youtu.be/5DdijwBnpAk)

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

@ -17,6 +17,13 @@ Develop a trap to capture the elements when the mouse is getting too close to th
- [Mouse event](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent): [`click`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event), [`mousemove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event) / [`clientX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX), [`clientY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY) - [Mouse event](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent): [`click`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event), [`mousemove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event) / [`clientX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX), [`clientY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)
- [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) - [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
### Provided files
- Use the HTML file [index.html](/public/subjects/mouse-trap/index.html), which includes:
- the JS script which will allow to run your code
- some CSS pre-styled classes: feel free to use those as they are, or modify them
### Expected result ### Expected result
You can see an example of the expected result [here](https://youtu.be/qF843P-V2Yw) You can see an example of the expected result [here](https://youtu.be/qF843P-V2Yw)

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

@ -17,6 +17,14 @@ Write the function `pick` which creates a `hsl` color picker varying the `hue` a
- [Copy event](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event) - [Copy event](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event)
- [Mouse move event](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event) - [Mouse move event](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event)
- [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg): [`createElementNS`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS), [`setAttribute`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) - [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg): [`createElementNS`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS), [`setAttribute`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)
- Take a look at the [HSL section](https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color)
### Provided files
- Use the HTML file [index.html](/public/subjects/pick-and-click/index.html), which includes:
- the JS script which will allow to run your code
- some CSS pre-styled classes: feel free to use those as they are, or modify them
### Expected result ### Expected result

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

@ -41,8 +41,12 @@ Click 6 --> <div class="button"></div>
### Provided files ### Provided files
- Use this CSS file: [https://mariemalarme.github.io/dom-js/assets/style/pimp-my-style.css](https://mariemalarme.github.io/dom-js/assets/style/pimp-my-style.css) - Use the HTML file [index.html](/public/subjects/pimp-my-style/index.html), which includes:
- Import the `styles` from the data file: [https://mariemalarme.github.io/dom-js/assets/data/pimp-my-style.js](https://mariemalarme.github.io/dom-js/assets/data/pimp-my-style.js)
- 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
- Import `styles` from the data file [data.js](/public/subjects/pimp-my-style/data.js)
### Expected result ### Expected result

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

@ -4,10 +4,10 @@
Tired of staying home for too long, you decide to develop a page to index ideas for your next travel destinations, so that next time you'll ask yourself 'Where do we go?', you won't need to get lost for 3 hours! Tired of staying home for too long, you decide to develop a page to index ideas for your next travel destinations, so that next time you'll ask yourself 'Where do we go?', you won't need to get lost for 3 hours!
Create a page which displays the list of `places` provided in the data file below: Write the function `explore` which creates a page displaying the list of `places` provided in the data file below:
- sort the `places` from the Northest to the Southest - sort the `places` from the Northest to the Southest
- display a fullscreen-size image for each place ; use the images hosted here: `https://github.com/MarieMalarme/dom-js/tree/master/assets/images`, also available as Github Pages here `https://mariemalarme.github.io/dom-js/assets/images/locationName.jpg` - display a fullscreen-size image for each place ; use the images hosted [here](/public/subjects/where-do-we-go/images)
- display a location indicator, displaying the `name` and the `coordinates` of the current place featured in the image, using the corresponding `color` as text color, which updates on scroll when another image is reached - display a location indicator, displaying the `name` and the `coordinates` of the current place featured in the image, using the corresponding `color` as text color, which updates on scroll when another image is reached
- display a compass indicating the latitude direction ; North if the user is scrolling up, South if he's scrolling down - display a compass indicating the latitude direction ; North if the user is scrolling up, South if he's scrolling down
- when clicking on the page, open a link redirecting to the Google Maps' coordinates of the place currently displayed. - when clicking on the page, open a link redirecting to the Google Maps' coordinates of the place currently displayed.
@ -16,10 +16,16 @@ Create a page which displays the list of `places` provided in the data file belo
- [Wheel event](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event): [`deltaY`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY) - [Wheel event](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event): [`deltaY`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY)
- [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window): [`innerHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight), [`scrollY`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY), [`open()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open) - [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window): [`innerHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight), [`scrollY`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY), [`open()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open)
- Take a look at the [DMS coordinates system](https://en.wikipedia.org/wiki/Geographic_coordinate_system#Degrees:_a_measurement_of_angle)
### Provided files ### Provided files
- Import the `places` from the data file: [https://mariemalarme.github.io/dom-js/assets/data/where-do-we-go.js](https://mariemalarme.github.io/dom-js/assets/data/where-do-we-go.js) - Use the HTML file [index.html](/public/subjects/where-do-we-go/index.html), which includes:
- the JS script which will allow to run your code
- some CSS pre-styled classes: feel free to use those as they are, or modify them
- Import `places` from the data file [data.js](/public/subjects/where-do-we-go/data.js)
### Expected result ### Expected result

4
subjects/where-do-we-go/index.html
unescape_control_characters View File

@ -60,9 +60,9 @@ section {
</head> </head>
<body> <body>
<script type="module"> <script type="module">
import { scroll } from './where-do-we-go.js' import { explore } from './where-do-we-go.js'
scroll() explore()
</script> </script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save