Build a blog post image maker app in vanilla JS
This fun tutorial shows how easy it is to build something that you can use again and again
By: Ajdin Imsirovic 17 June 2021
In this post we’ll code a custom blog post image generator.
Scratching our own itch
In IT, there’s an old concept of “scratching your own itch”. What that means is that you build a project that solves a problem that you are having.
Thus, this chapter deals with such a scenario. This book’s accompanying website, codingexercises.com, currently has a layout which assumes that each blog post has an image associated with it.
Since this blog also runs on a small budget (basically, whatever I invest in it from my paycheck), it’s not really worth it for me to spend any money on blog post images.
Unfortunately, free image resources such as unsplash.com or pexels.com offer only a limited amount of JavaScript-related or coding-related photos and illustrations.
Which means that very often, I’d have to come up with my own graphics. Hence, I came up with the simple image maker app.
Preview the app live
Currently, the app has only the minimal functionalities. But it still works for me.
To preview the app live, visit codingexercises.com/simple-image-maker.
Here’s how we’re going to re-built it.
Building the app from scratch
We’ll again start with a basic HTML page that has bootstrap 4 added to it from a CDN.
After this basic setup is ready, we’ll turn to the body element; inside of the body element we’ll add the following code:
<div class="container-fluid pt-4 pb-1">
<div class="container">
<!-- simple image maker goes here -->
</div>
</div>
Next, we’ll replace the HTML with the following code:
<h1 class="h3 pb-2">Simple image maker</h1>
<div style="
width: 800px;
height: 455px;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
color: white;
font-family: Arial;
font-size: 50px;
letter-spacing: -2px;
line-height: 46px;
/* top: 50%; */
/* position: relative; */
text-align: center;
background-image: linear-gradient(-215deg, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
">
<p id="first" style="padding-top: 140px;">
Capitalize
</p>
<p id="second" style="font-weight: bold;">
the first letter of a string
</p>
<p id="third">
in JavaScript
</p>
</div>
<form>
<h2 class="h5 pt-4">Settings</h2>
<div class="form-group" style="max-width: 500px">
<label for="first" class="sr-only">First row</label>
<input type="text" class="form-control form-control-sm" id="firstInput" aria-describedby="firstRowText" placeholder="Enter first row">
</div>
<div class="form-group" style="max-width: 500px">
<label for="first" class="sr-only">Second row</label>
<input type="text" class="form-control form-control-sm" id="secondInput" aria-describedby="secondRowText" placeholder="Enter second row">
</div>
<div class="form-group" style="max-width: 500px">
<label for="first" class="sr-only">Third row</label>
<input type="text" class="form-control form-control-sm" id="thirdInput" aria-describedby="thirdRowText" placeholder="Enter third row">
</div>
<div class="form-group" style="max-width: 500px">
<label for="selectBg" class="sr-only">background</label>
<select class="form-control form-control-sm" id="selectBg">
<option selected>Choose background...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
<button type="submit" class="btn btn-primary" id="download">Preview</button>
</form>
Additionally, just above the closing </body> tag, we’ll add the following script element:
<script>
document.getElementById("download").addEventListener("click", function(event){
event.preventDefault();
let firstInput = document.getElementById("firstInput").value;
let secondInput = document.getElementById("secondInput").value;
let thirdInput = document.getElementById("thirdInput").value;
let firstPara = document.getElementById("first");
let secondPara = document.getElementById("second");
let thirdPara = document.getElementById("third");
firstPara.textContent = firstInput;
secondPara.textContent = secondInput;
thirdPara.textContent = thirdInput;
console.log(firstPara.textContent, secondPara.textContent, thirdPara.textContent);
let selectedBg = document.getElementById("selectBg");
let stylesOption = selectedBg.value;
console.log(stylesOption);
});
</script>
Next, we’ll move the inline styles in the #bg div to a separate style tag in the head of our HTML file. Additionally, we’ll add the dropdown with five possible choices for background colors in our form.
<h1 class="h3 pb-2">Simple image maker</h1>
<div id="bg">
<p id="first" style="padding-top: 140px;">
Capitalize
</p>
<p id="second" style="font-weight: bold;">
the first letter of a string
</p>
<p id="third">
in JavaScript
</p>
</div>
<form>
<h2 class="h5 pt-4">Settings</h2>
<div class="form-group" style="max-width: 500px">
<label for="first" class="sr-only">First row</label>
<input type="text" class="form-control form-control-sm" id="firstInput" aria-describedby="firstRowText" placeholder="Enter first row">
</div>
<div class="form-group" style="max-width: 500px">
<label for="first" class="sr-only">Second row</label>
<input type="text" class="form-control form-control-sm" id="secondInput" aria-describedby="secondRowText" placeholder="Enter second row">
</div>
<div class="form-group" style="max-width: 500px">
<label for="first" class="sr-only">Third row</label>
<input type="text" class="form-control form-control-sm" id="thirdInput" aria-describedby="thirdRowText" placeholder="Enter third row">
</div>
<div class="form-group" style="max-width: 500px">
<label for="selectBg" class="sr-only">background</label>
<select class="form-control form-control-sm" id="selectBg">
<option selected>Choose background...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
<button type="submit" class="btn btn-primary" id="download">Preview</button>
</form>
Getting the values from the option element using JavaScript
Now we’ll need to expand our JavaScript logic so that it takes care of the option the user picks from the color-choosing select element (i.e the dropdown):
<script>
document.getElementById("download").addEventListener("click", function(e){
e.preventDefault();
let firstInput = document.getElementById("firstInput").value;
let secondInput = document.getElementById("secondInput").value;
let thirdInput = document.getElementById("thirdInput").value;
let firstPara = document.getElementById("first");
let secondPara = document.getElementById("second");
let thirdPara = document.getElementById("third");
firstPara.textContent = firstInput;
secondPara.textContent = secondInput;
thirdPara.textContent = thirdInput;
let selectedBg = document.getElementById("selectBg");
let stylesOption = selectedBg.value;
console.log(stylesOption);
let bg = document.getElementById("bg");
switch(stylesOption) {
case "1":
bg.setAttribute("style",
"background: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)");
break;
case "2":
bg.setAttribute("style",
"background: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%)");
break;
case "3":
bg.setAttribute("style",
"background: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)");
break;
case "4":
bg.setAttribute("style",
"background: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%)");
break;
case "5":
bg.setAttribute("style",
"background: linear-gradient(to right, #d1913c, #ffd194)");
break;
default:
bg.setAttribute("style",
"color: black; background: yellow");
}
});
</script>
That’s it for our simple image maker.
It is still a work in progress, as I keep improving the app, I’ll upload it to the live version, at codingexercises.com/simple-image-maker.
Obviously, I’ll also make updates to this book, so that the current state of the app reflects the code here.
In the next chapter, we’ll build a simple stopwatch.
Note:
This exercise comes from Book 4
of my book series on JS, available on Leanpub.com.
