Start Menu: Windows Clone

Here I have made a clone of windows start Menu. The Elements are created from an javascript object.

This is how I did it :
I defined a class with the constructors, having all the parameters required to create the elements.

class FileMetadata {
  constructor(name, size, type, creationDate) {
    this.name = name;
    this.size = size;
    this.type = type;
    this.creationDate = creationDate;
  }
}

I created an array to store the data.

let fileMetadataArray = [];

Then using the push option added the values.

fileMetadataArray.push(new FileMetadata("My Computer", 1024, "https://cdn-icons-png.flaticon.com/512/2933/2933245.png", new Date()));

Now I created a grid container, having 3 rows and 6 columns. Now this is the parent element. Using the function _.createElement_ .
I then proceeded to create div and defined the style of those elements in for loop

for (let i = 0; i < 3; i++) {
      let row = document.createElement("div");
      row.classList.add("row");
      row.style.display = "flex";

      for (let j = 0; j < 6; j++) {
        let dataa = fileMetadataArray[countt];
        let namee = fileMetadataArray[countt].name;
        let imgg = fileMetadataArray[countt].type;
        countt++;

        let column = document.createElement("div");
        column.style.flex = "1 1 16.666667%";
        column.style.alignItems = "center";
        column.style.justifyContent = "center";
        column.classList.add("columnn");
        row.appendChild(column);
        let img = document.createElement("img");
        img.src = imgg;
        img.style.width = "45px";
        img.style.height = "45px";
        img.classList.add("imggg");

        column.appendChild(img);
        let name = document.createElement("p");
        name.innerHTML = namee;
        name.style.textAlign = "center";
        name.style.fontSize = "12px";
        name.style.color = "white";
        column.appendChild(name);

      }
      gridContainer.appendChild(row);

    }

Finally adding the finishing touch with some CSS the component is made.

Comments

[Declan Middleton]

keep it up.