mirror of https://github.com/01-edu/public.git
Updated the `readme` to indicate the files provided + the right path matching the new structure of files.
This commit is contained in:
parent
3c0b87ef69
commit
aa7f28182c
|
@ -41,6 +41,3 @@ export const choseShade = (shade) => {
|
|||
}
|
||||
})
|
||||
}
|
||||
|
||||
generateClasses()
|
||||
generateColdShades()
|
||||
|
|
|
@ -2,7 +2,7 @@ import { places } from './data.js'
|
|||
|
||||
const body = document.querySelector('body')
|
||||
|
||||
export const scroll = () => {
|
||||
export const explore = () => {
|
||||
createSections()
|
||||
|
||||
const location = document.createElement('div')
|
||||
|
|
|
@ -4,25 +4,21 @@
|
|||
|
||||
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 will receive a unique `id` property, like following:
|
||||
- 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:
|
||||
|
||||
```html
|
||||
<div id="brick-1"></div>
|
||||
```
|
||||
```html
|
||||
<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 `destroy`
|
||||
|
||||
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.
|
||||
- 🔨 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`: write the body of that function, which removes the current last brick in the tower
|
||||
|
||||
### Notions
|
||||
|
||||
|
@ -36,7 +32,10 @@ Write the body of the `destroy` function, which removes the current last brick i
|
|||
|
||||
### 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
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
||||
- 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
|
||||
.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:
|
||||
|
||||
```html
|
||||
|
@ -32,7 +32,12 @@ Check the `colors` array provided in the data file below.
|
|||
|
||||
### 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
|
||||
|
||||
|
|
|
@ -46,7 +46,10 @@ div {
|
|||
<body>
|
||||
<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')]
|
||||
divs.map((d) => {
|
||||
|
|
|
@ -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`.
|
||||
|
||||
> 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
|
||||
|
||||
- [`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
|
||||
|
||||
- Use this CSS file: [style.css](./style.css)
|
||||
- You can take a look at the data: [data.js](./data.js)
|
||||
- Use the HTML file [index.html](/public/subjects/get-them-all/index.html), which includes:
|
||||
|
||||
- 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
|
||||
|
|
|
@ -15,7 +15,12 @@ Create the function `grid` which displays all the `gossips`, provided in the dat
|
|||
|
||||
### 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
|
||||
|
||||
|
|
|
@ -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!
|
||||
|
||||
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-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
|
||||
|
||||
- [`style`](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style)
|
||||
|
|
|
@ -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.
|
||||
|
||||
Export the function `compose`:
|
||||
Write the function `compose`:
|
||||
|
||||
- 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 `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)
|
||||
|
||||
### 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
|
||||
|
||||
You can see an example of the expected result [here](https://youtu.be/5DdijwBnpAk)
|
||||
|
|
|
@ -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)
|
||||
- [`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
|
||||
|
||||
You can see an example of the expected result [here](https://youtu.be/qF843P-V2Yw)
|
||||
|
|
|
@ -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)
|
||||
- [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)
|
||||
- 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
|
||||
|
||||
|
|
|
@ -41,8 +41,12 @@ Click 6 --> <div class="button"></div>
|
|||
|
||||
### 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)
|
||||
- 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)
|
||||
- Use the HTML file [index.html](/public/subjects/pimp-my-style/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 `styles` from the data file [data.js](/public/subjects/pimp-my-style/data.js)
|
||||
|
||||
### Expected result
|
||||
|
||||
|
|
|
@ -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!
|
||||
|
||||
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
|
||||
- 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 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.
|
||||
|
@ -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)
|
||||
- [`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
|
||||
|
||||
- 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
|
||||
|
||||
|
|
|
@ -60,9 +60,9 @@ section {
|
|||
</head>
|
||||
<body>
|
||||
<script type="module">
|
||||
import { scroll } from './where-do-we-go.js'
|
||||
import { explore } from './where-do-we-go.js'
|
||||
|
||||
scroll()
|
||||
explore()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue