Introduction

I ran into a situation during the coding of a grid in the Etch A Sketch project that I'm elbows deep into right now, where I needed to repeat a string a certain number of times. The specific number of times the string needed to repeat itself was variable in nature, but as soon as I saw it, I was filled with relief. I had seen that very piece of code just a few weeks ago when I did the JavaScript exercises of Fundamentals Part 4 in The Odin Project (TOP) where we had to solve algorithms. Luckily for me, I had decided to save all those algorithms in a JavaScript file with comments explaining their use.

This journal entry will be a bit more of a guide than my previous posts. As I get more comfortable with programming, I intend to write more and more informative articles. For now though, I will only slowly introduce informative writing as I feel like I am confident enough in the subject matter to adequately write/teach on it.

Code Repository

Since this is tagged for beginners, I will assume not everyone that reads this will know what a code repository is. A code repository is a place that stores code. It can be as simple as a text file with code you've written/found, or as big as GitHub where they offer version control and branching services that allows you to work on collaborative projects with other developers.

What I'm talking about today is a personal code repository for pieces of code that may or may not come in handy some day down the road. Specifically, my code repository is stored in a random projects folder on my hard drive, and I've named it codeRepository.js:

figure 1- Folder Structure with codeRepository.js

I started this file with the idea that the code block I wrote for the repeatString() function might someday be useful and, that code block took me a fair bit of time to figure out and I didn't necessarily want to have to start over from scratch should I possibly need them later. Little did I know that this particular function would be useful so soon after writing it. So, after the first algorithm (repeatString) was done I opted to stash it in a new file I aptly named as you've seen above in fig. 1.

Fastforward three weeks and two projects (working on the second one now) later, I have just finished the design for Etch A Sketch and I'm working on the code for the grid. CSS Grid being new to me, I was reading the MDN and looking at the various ways to implement the grid-template-columns and I was immediately drawn to the <flex> method and knew that was what I was going to use to implement the grid's rows and columns. The grid was going to be made up of square <div>'s inside a gridContainer and that meant the width and height of the <div> elements needed to be equal which is what made this such an appealing choice.

With my mind made up, I got busy coding the grid and figuring out how to implement the 1fr units for the columns and rows. An example of what the CSS code looks like for the <flex> units of the grid-template-columns is below:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2.5fr 1.5fr;
}

As soon as I saw how the grid-template-columns (and rows) were structured with the code I knew I had a function previously built that would save me some time in implementing and I just had to use it.

NOTE: Keep in mind I'm a beginner. I know about the repeat() method and I gave it a bit of a go to implement it, but in the end, I opted to use the following method because it was something I knew worked and could implement more feasibly.

Implementation

At first I wasn't going to share my code because being a beginner, I know there are a lot of ways my code could be optimized. However, one of these days in the not-so-distant future I will be more knowledgeable of those ways, and there is a process to get there and this is part of that process so, here you have it, my implementation of the repeatString() function that I somewhat luckily had the foresight to think to save:

const repeatString = function(string, num) {
    const err = 'ERROR';
    let result = '';
    if (num < 0) result = err;
    for (let i = 0; i < num; i++) {
        result += string;
        }
    return result
};

function defaultGrid() {
    // create a 10x10 grid
    let colRows = repeatString('1fr ', 10);
    // create columns
    for (let i = 1; i <= 10; i++) {
        // create rows
        for (let j = 1; j <=10; j++) {
            let grid = document.createElement('div');
            gridContainer.append(grid);
            grid.className = 'grid';
            gridContainer.style.gridTemplateColumns = `${colRows}`;
            gridContainer.style.gridTemplateRows = `${colRows}`;
        }
    }
}

In the above functions, in the first function I have the repeatString() code I saved to my personal repository, and in the second function is the default grid when Etch A Sketch is first loaded. In defaultGrid() the colRows = repeatString('1fr ', 10); is calling the function I created several weeks ago and I didn't have to modify it in any way. All that does is repeats the 1fr string ten times with a space between each unit and it is used for both the columns and the rows since again, the grid <div> elements are square. This is what it looks like in Dev Tools after the grid is created:
figure 2- Dev Tools CSS Grid: inline style showing the grid-template-columns units of measurement

Conclusion

I'm aware this isn't necessarily the most ground-breaking discovery ever, and I don't intend to portray that. What my intention is, however, is to show you that when you spend a lot of time on a piece of code, and there is a chance you could use it later on, don't hesitate to put the code snippet in a file somewhere. Before long you'll be organizing your files by types where DOM code blocks go in this file, database-related code goes in that one, algorithms in another one, the list could go on. Ultimately, the idea is to save time. Being organized enough to be able to quickly recall where you saved certain code pieces will save you time on future projects. Since I just got started learning this stuff and I'm already reusing code, you will too!

I hope this was helpful to you and it prompts you to want to save code snippets here and there as you find them useful. Even if there is a remote chance you could use it, it is worth it to save because time is money! It won't be long and you'll be using one of your saved code snippets guaranteed. That's it for now, until the next one...be good!

Cover Photo by Luke Chesser on Unsplash