warsawjs-workshop-41-gallery

⛩️ WarsawJS Workshop #41 — JavaScript (Basic Level)

Preview 🎉

https://piecioshka.github.io/warsawjs-workshop-41-gallery

Links

• Place holders
  • https://placeskull.com/
  • https://placeskull.com/200/300
  • https://picsum.photos/
  • https://picsum.photos/200/300
• https://bulma.io/documentation/
• https://www.webfx.com/tools/emoji-cheat-sheet/
• https://icons8.com/preloaders
• https://github.com/piecioshka/innerhtml-vs-innertext-vs-textcontent

What subjects can you learn after doing this project?

JavaScript

• ✅ Variables (var, let, const)
• ✅ Data Types (string, number, array)
• ✅ Operators (++, ===, <)
• ✅ Functions (Function Declaration, Method Shorthand Definition)
• ✅ Arrays
• ✅ Objects
• ✅ Conditions (if)
• ✅ Loops (for, forEach)
• ✅ Error Handling (try...catch)
• ⚠️ Falsy Values (false, 0, '', NaN, null, undefined)
• ⚠️ JSON
• ⚠️ BOM — Browser Object Model
• ✅ Date
• ⚠️ Math
• ✅ Clocks (setTimeout, setInterval)
• ✅ Comments
• ✅ DOM Elements (ClassList API)

Step by step 👣

Display photos

• EDIT: scripts/main.js
• EDIT: index.html
  • Link a main.js file by script tag
• EDIT: scripts/main.js
  • Create function main()
  • Create list of different URLs to photos
  • Create loop for
  • Create HTMLImageElement for each array item

Refactoring

• EDIT: scripts/main.js
  • Create function renderPhoto()
    • With for loop content
  • Create function renderPhotos()
    • Use Array.prototype.forEach
  • Change structure of photos
    • Switch from URL to object with url property

Handle empty photos

• EDIT: scripts/main.js
  • Create function displayMessage()
    • TALK: innerHTML, innerText, textContent
    • Use simple strategy with textContent
    • Use complex strategy with innerHTML with Bulma component
  • Create function displayEmptyGalleryMessage()
  • Add condition if an array is empty
  • Comment content of photos collection

Handler errors

• EDIT: scripts/main.js
  • Add null as next element of photos
  • Add try...catch to catch Uncaught TypeError
    • Cannot read property 'url' of null

Loader

• EDIT: images/loader.gif
• EDIT: scripts/loader.js
  • Create object loader with functions: show(), hide()
• EDIT: index.html
  • Link a loader.js file by script tag
• EDIT: scripts/loader.js
  • Funkcja show()
    • Get reference to outlet container
    • Create HTMLElement
  • Funkcja hide()
    • Remove HTMLElement from DOM
• EDIT: scripts/main.js
  • Invoke loader.show() and the beginning
  • Invoke loader.hide() before rendering use setTimeout

Display current time

• EDIT: scripts/main.js
  • Create function displayCurrentTime()
  • Use setInterval() to render time on each second

Related

• Other trainers
  • by @Kamil Grabek
  • by @Daniel Karski

License

The MIT License @ 2020