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
<divid="brick-1"></div>
```
```html
<divid="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
@ -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)
@ -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
@ -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
- 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)
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
- 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)
Marie Malarme
