quentin-f451 / gd3-coding-tutorials-2

Tutorials #2 for Coding lesson at KABK Graphic Design Y3 — 2022/2023

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tutorials #2

You will find on this repo the resources to use for the second tutorial lesson. Next to this README.md file, you will find an index.html file and an assets/ folder, where the CSS and Javascript are located, alongside font files and images.

Table of contents

Exercice #1

You will find a artworks object in the ìndex.js file.

  1. You need to create a function that will modify this object when the user clicks on the .button and show the result in the .results section.
  2. The result you should get from the object is: Far from Home (Print, 2021), Migrations of Memory-Wild Geese Descend on Level Sands IV no. 3 (Painting, 2021), Migrations of Memory-Wild Geese Descend on Level Sands IV, no. 1 (Painting, 2021), Hope Is the Thing with Feathers (The Little Bird) (Print, 2021), Raitra Marosoratra (Textile, 2021).

Hints: These artworks are only the 5 artworks created in 2021, sorted by id.

Exercice #2

With the same artworks object, and without changing anything in the HTML file:

  1. Create a ul element with the class .list.
  2. Append each of the artwork as a li element in this list with the class .list__item.
  3. Each of these list items should contain the title, the department, the date of creation, the technique and the type. You are free to create the structure you want in these list items in order to make the content as easy to understand as possible.

About

Tutorials #2 for Coding lesson at KABK Graphic Design Y3 — 2022/2023


Languages

Language:JavaScript 81.4%Language:CSS 13.8%Language:HTML 4.8%