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.<\/p>\n\n\n\n
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 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: <\/p>\n\n\n\n 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 These last three lines logs the concatenated string returned by This project functions similarly to the excuse generator utilizing arrays and string concatenation, however with the excuse generator I was using 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.<\/p>\n\n\n\n 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!<\/p>\n","protected":false},"excerpt":{"rendered":" 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, …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1184","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/oliversimkovsky.com\/index.php\/wp-json\/wp\/v2\/posts\/1184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oliversimkovsky.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oliversimkovsky.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oliversimkovsky.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oliversimkovsky.com\/index.php\/wp-json\/wp\/v2\/comments?post=1184"}],"version-history":[{"count":11,"href":"https:\/\/oliversimkovsky.com\/index.php\/wp-json\/wp\/v2\/posts\/1184\/revisions"}],"predecessor-version":[{"id":1196,"href":"https:\/\/oliversimkovsky.com\/index.php\/wp-json\/wp\/v2\/posts\/1184\/revisions\/1196"}],"wp:attachment":[{"href":"https:\/\/oliversimkovsky.com\/index.php\/wp-json\/wp\/v2\/media?parent=1184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oliversimkovsky.com\/index.php\/wp-json\/wp\/v2\/categories?post=1184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oliversimkovsky.com\/index.php\/wp-json\/wp\/v2\/tags?post=1184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}who<\/code> contains a list of pronouns, the second array named action<\/code> contains a list of verbs, so on and so forth. The first four functions look like this:<\/p>\n\n\n\nfunction getRandomIndex(array) {\n const length = array.length;\n const result = Math.floor(Math.random() * length);\n\n return result;\n\n }<\/code><\/pre>\n\n\n\nfunction Result(array1, array2, array3, array4){\n array1 = who[getRandomIndex(who)];\n array2 = action[getSecondRandomIndex(action)];\n array3 = what[getThirdRandomIndex(what)];\n array4 = when[getFourthRandomIndex(when)];\n\n let space = \" \";\n return array1 + space + array2 + space + array3 + space + array4;\n }<\/code><\/pre>\n\n\n\nspace<\/code> variable between each one.<\/p>\n\n\n\nlet finalResult = Result(who, action, what, when);\nconsole.log(finalResult);\ndocumentID.textContent = finalResult;<\/code><\/pre>\n\n\n\nResult<\/code> to the console and writes it to the document. Now whenever you reload the page a new excuse is generated based on given arrays. <\/p>\n\n\n\nDomain Name Generator<\/h2>\n\n\n\n
Math.floor()<\/code> and Math.random()<\/code> 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:<\/p>\n\n\n\nconst pronouns = ['the', 'our'];\nconst adjectives = ['sneaky', 'suspicious'];\nconst nouns = ['person', 'friend'];\nconst suffixes = ['com', 'net'];\n\nfor (let index in pronouns) {\n for (let secondIndex in adjectives) {\n for (let thirdIndex in nouns) {\n for (let fourthIndex in suffixes) {\n let myUL = document.getElementById(\"myUl\");\n let myLi = document.createElement(\"li\");\n\n myLi.textContent = pronouns[index] + adjectives[secondIndex] + nouns[thirdIndex] + \".\" + suffixes[fourthIndex];\n myUL.appendChild(myLi);\n }\n }\n }\n }\n<\/code><\/pre>\n\n\n\n