A Random pic collage with JS

I should seriously start getting that website up so that I can show it as some sort of portfolio or resume, I just can't seem to find inspiration to do something worthwhile, or maybe I am scared that whatever I come up with is just not good enough for those looking to hire a junior JavaScript developer... either way, I know I should get to it sooner rather later.

In the meantime, I leave you with yet another little project that helps me keep grinding my skills and at the same time, build another layer of my soon to be portfolio.

Cool Random pic Collage

For this project I will build a random image feed: When the user gets to the front page, they will see a mosaic of X random images. With JS I will pick how many files and ranks the mosaic will have. I will get the pics from a website. There is no way to fetch random images from a local folder using Javascript (I checked) so I am left with the random image-from-website-option, still cool though.

_{The end goal looks like this}

HTML Code

  <body>
    <h1>Welcome to my Mosaic</h1>
    <div class="container"></div>

    <script src="script.js"></script>
  </body>
</html>

No progress picture showing what is so far here because well, there's actually nothing here yet.

JavaScript Code

This time the order of the code will be different. I will first work on the JavaScript code and once there is something to show, I will work on styling the mosaic.

First of all, I will not be doing a fetch request to an API that returns image URLs, instead I'll use random urls from source.unsplash.com where I will just get a new image every time the loop runs.

const mosaic = document.querySelector(".container");
const unsplashURL = "https://source.unsplash.com/random/";

const ranks = 10;

for (let i = 0; i < ranks * 3; i++) {
  const img = document.createElement("img");
  img.src = `${unsplashURL}${getRandomSize()}`;
  mosaic.appendChild(img);
}

function getRandomSize() {
  return `${getRandomNr()}x${getRandomNr()}`;
}

function getRandomNr() {
  return Math.floor(Math.random() * 10) + 300;
}

As you can see, when I refresh the page the images generate randomly and then they cover the whole window. The images are there, all I need is to style the mosaic.

CSS Code

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.title {
  margin: 10px 0 0;
  text-align: center;
}

All the images are inside the container, so when I turn it into a flex display they order in a single row/rank.

Wrapping them makes them use as much horizontal space as they can, so now I need to set a max width or a max number of images per row.

Each image is no bigger than 310 pixels each, so setting the max width to 1000 sounds about right.

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1000px;
}

Now, each image come from the source with a width between 301 and 310 pixels, so I need to work with that and set a standard width and height.

.container img {
  width: 300px;
  /*
  I could also do the same with:
  object-fit: cover;
  */
  height: 300px;
  margin: 1px;
  max-width: 100%;
}

There we go, you now have a styled, standard-sized, randomly-generated picture collage.

---

---

---

_{These projects are based on a CSS, HTML and JS paid course I got on Udemy by Brad Traversy. I made my own changes and tweaks but the template so to speak, is his idea and I do not claim them to be my own. If you are looking to practice CSS and JavaScript, his courses are the way to go, check them out on Udemy.}