We basically use a Flexbox section to insert HTML figures with images and captions, and an extra div to maximize the clicked image. All effects are Pure CSS, the JavaScript is really simple, only to deploy the HTML and launch the lightbox.
Imagine you are in a queue, every time you reach the first position you can buy just one ticket. Buyers have to wait through the line again if they want to buy more tickets. You are standing in line and has a number of tickets to purchase.
Given a list of buyers with the number of tickets they want to buy, determine how long it will take you to purchase your tickets if you are in the second position. Each transaction takes 1 unit of time. No time is spent moving to the back of the line.
JavaScript is always pass by value, except when you are working with object that is pass by reference. In JS objects are not like in other languages. An object is a collection of properties, for example an array is an object too.
So, how do we copy objects straightforward? There are 2 basic options depending of the object depth.
A) Shallow copy where all nested objects are still copied as reference, so any change in those nested objects in obj_B will change obj_A.
const obj_B = {...obj_A}
const arr_B = [...arr_A]
B) Deep copy where the two objects will be completely different even with nested objects.
const obj_B = JSON.parse(JSON.stringify(obj_A))
To know more check MDN Web Docs.
In this example I’ve defined a web project structure in a JSON to show a basic (but beauty) tree view of folders and files. Click on folders to display 🙂
Imagine you want to calculate the minimum amount of time it takes to type a random code, for example, ‘3428’ in a random dialer, for example, ‘523789614’ (ASCII art is coming).
[5][2][3]
[7][8][9]
[6][1][4]