During this past week in my studies, I took on a couple of different small scale front-end projects utilizing JavaScript and Bootstrap. With these projects I took advantage of core JavaScript concepts such as functions, loops, arrays, conditionals and ternary expressions. I’ll share a few things I’ve worked on and go into how I solved each one. This is mainly to document my progress but of course in hopes that it’ll support others in their endeavors.
Excuse Generator
This one is a simple excuse generator built with four arrays and five functions. The four arrays contain different parts of a sentence. For example, the first array named who contains a list of pronouns, the second array named action contains a list of verbs, so on and so forth. The first four functions look like this:
function getRandomIndex(array) {
const length = array.length;
const result = Math.floor(Math.random() * length);
return result;
}Just simply returning a variable that is equal to a random number between 0 and the length of the given array. I’m repeating this function for every array. Then with my last function, I’m putting all those randomized numbers into a final string of text, and this function returns that string of text. This is what it looks like:
function Result(array1, array2, array3, array4){
array1 = who[getRandomIndex(who)];
array2 = action[getSecondRandomIndex(action)];
array3 = what[getThirdRandomIndex(what)];
array4 = when[getFourthRandomIndex(when)];
let space = " ";
return array1 + space + array2 + space + array3 + space + array4;
}I’m passing each array into this function and storing the randomized index of each array into variables. I’m getting the randomized index using the functions I previously wrote and calling them here. At the end of this function I’m returning all the variables concatenated with a space variable between each one.
let finalResult = Result(who, action, what, when);
console.log(finalResult);
documentID.textContent = finalResult;These last three lines logs the concatenated string returned by Result to the console and writes it to the document. Now whenever you reload the page a new excuse is generated based on given arrays.
Domain Name Generator
This project functions similarly to the excuse generator utilizing arrays and string concatenation, however with the excuse generator I was using Math.floor() and Math.random() to come up with random sentences. For this one, I used a nested for loop that loops through the different array indexes to create domain names. Here’s how it looks:
const pronouns = ['the', 'our'];
const adjectives = ['sneaky', 'suspicious'];
const nouns = ['person', 'friend'];
const suffixes = ['com', 'net'];
for (let index in pronouns) {
for (let secondIndex in adjectives) {
for (let thirdIndex in nouns) {
for (let fourthIndex in suffixes) {
let myUL = document.getElementById("myUl");
let myLi = document.createElement("li");
myLi.textContent = pronouns[index] + adjectives[secondIndex] + nouns[thirdIndex] + "." + suffixes[fourthIndex];
myUL.appendChild(myLi);
}
}
}
}
As you can see, there are four arrays, and a loop with four levels of nesting. During the most outer loop’s first iteration, it will concatenate the first element with every possible combination before moving on to the next iteration. For example, first we will get “thesneakyperson.com” and then we will get “thesneakyperson.net”. After that we will get “thesneakyfriend.com” and then “thesneakyfriend.net” so on and so forth. Of course this all gets written to the document with every iteration, so we will see every possible domain name on the screen when the page loads. The whole purpose of this project was to get a handle on working with loops.
That’s all I have this week! A short post but wanted to share how I’m applying what I’m learning from practices and readings. Through projects like these I’m really able to get a grasp on how to write useful algorithms. What I plan on writing about next is DOM manipulation, as that’s the next learning curve after JavaScript fundamentals. This is how JavaScript reads, changes, and reacts to elements on a web page after it’s loaded. Thanks for the read! As said earlier, hoping this post will help out others in their studies. Cheers!