Making Reusable Components

Using hopefully legible JavaScript

Until recently, my code was ALL over the place. Especially the header, the navigation bar and the footer. Whenever I had to update them to fit with the rest of the site, I painstakingly had to edit and save SEVEN different pages. That's bound to flop up sooner or later, so here I'll attempt to deconstruct how I went about making reusable components. It saved me from the hassle of countless mistakes and copy-pasting everywhere, and it will do the same to you too!

Title

Button 1

Button 2

Let's say that you have the above as your title. You copy and paste this title into all your pages and you are content with it, for now. Now you want to change it so that the bar was purple and the text white instead:

Title

Button 1

Button 2

Since we didn't make a reusable element yet, this'd be a hassle to change, as you'd have to edit SIX sites. Fortunately, you can use this exact opportunity to make one! Below is the code I use for the site with the title:

webpage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <div class="row stripurp">
        <div style="margin-top: auto; margin-bottom: auto; flex: 4%;">
            <img src="page.jpg" class="webicon">
        </div>
        <div style="margin-top: auto; margin-bottom: auto; flex: 50%;">
            <h1 style="text-align: left;">Title</h1>
        </div>
        <div style="text-align: right; margin-top: auto; margin-bottom: auto; flex: 23%;">
            <a class="round button windowblue">
                <h3>Button 1</h3>
            </a>
        </div>
        <div style="text-align: center; margin-top: auto; margin-bottom: auto; flex: 23%;">
            <a class="round button windowblue">
                <h3>Button 2</h3>
            </a>
        </div>
    </div>
</body>
</html>

stylesheet.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.row {display: flex;}

body {
    font-size: calc(12px + 0.390625vw);
    min-height: 100vh;
}

.stripurp {
	padding: 10px;
	background-color: #570861;
	color: white;
}

.round {
    border-radius: 8px;
    overflow: auto;
}

.button {
    transform: scale(.95);
    display: inline-block;
    padding: 10px 20px;
    color: black
    box-shadow: 4px 4px #570861;
    border: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.button:hover {transform: scale(1); background-color: #FF69B4;}

.windowblue {
	background-image: linear-gradient(
		rgb(115 231 255 / 80%),
		rgb(191 244 255 / 60%)
	);
}

We start by making a .js file, which you can call anything, but I'll go with title.js. Paste all of what's below:

title.js

class VinylTitle extends HTMLElement {
    constructor() {
        super();
    }
    connectedCallback() {
        this.innerHTML = `
                ((YOUR HTML CODE OF THE TITLE SHOULD BE HERE))
        `
    }
};
customElements.define('vinyl-title', VinylTitle);

We need not go into the specifics of how this code works, as you only need to change the text in bold and italics, but in short, we make a class called VinylTitle that contains the code for our title, which is whatever is in between the `. We call this class by using the <vinyl-title> tags. Remember that you can call it anything you like, it's just best to call it what reminds you of a title. What IS important, however, is how the italics and bold should NOT match. They should have unique text, and usually I would add a hyphen inbetween to cause this distinction, because I still have to remember that they're related. Thus in my case, title.js would look like this:

title.js

class VinylTitle extends HTMLElement {
    constructor() {
        super();
    }
    connectedCallback()
    {
    this.innerHTML =
        `
<div class="row stripurp">
    <div style="margin-top: auto; margin-bottom: auto; flex: 4%;">
        <img src="../images/page.jpg" class="webicon">
    </div>
    <div style="margin-top: auto; margin-bottom: auto; flex: 50%;">
        <h1 style="text-align: left;">Title</h1>
    </div>
    <div style="text-align: right; margin-top: auto; margin-bottom: auto; flex: 23%;">
        <a class="round button windowblue">
            <h3>Button 1</h3>
        </a>
    </div>
    <div style="text-align: center; margin-top: auto; margin-bottom: auto; flex: 23%;">
        <a class="round button windowblue">
            <h3>Button 2</h3>
        </a>
    </div>
</div>
        `
    }
};
customElements.define('vinyl-title', VinylTitle);

Notice how I didn't reference the stylesheet here, even though I had used the classes from it? This is because the styles are pulled from whatever HTML document the title is to be inserted into. Just make sure you reference the stylesheet there.

Now you can replace all the code of the title with our newly made tags:

webpage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="title.js" defer></script>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <vinyltitle></vinyltitle>
</body>
</html>

The bolded line of code references the title.js that we made, while the italicized text inserts the title itself. Now you should be able to see your all-new title! If you ever need to edit all the titles, you'll have to go to the .js file again and only edit it once! All your sites will acknowledge this change and take suit.

So now that you have this knowledge, you can save a lot of time and resources updating sites and focus on more important things. How was my breakdown of this topic? Do tell me using any one of the methods I mentioned in my about me. Thank you for reading, hope the rest of the day you have is a great day <3