Posts

Showing posts from October, 2018

Code Wars: Salesman's Travel

A traveling salesman has to visit clients. He got each client's address e.g.  "432 Main Long Road St. Louisville OH 43071"  as a list. The basic zipcode format usually consists of two capital letters followed by a white space and five digits. The list of clients to visit was given as a string of all addresses, each separated from the others by a comma, e.g. : "123 Main Street St. Louisville OH 43071,432 Main Long Road St. Louisville OH 43071,786 High Street Pollocksville NY 56432" . To ease his travel he wants to group the list by zipcode. Task The function  travel  will take two parameters  r  (addresses' list of all clients' as a string) and  zipcode  and returns a string in the following format: zipcode:street and town,street and town,.../house number,house number,... The street numbers must be in the same order as the streets where they belong. If a given zipcode doesn't exist in the list of clients' addresses return  "z...

Regex funny comment

Some people, when confronted with a problem, think "I know, I'll use regular expressions." Now they have two problems.

FCC Regular Expressions: Find Characters with Lazy Matching

Fix the regex  /<.*>/ to return the HTML tag  <h1> and not the text  "<h1>Winter is coming</h1>" . Remember the wildcard  . in a regular expression matches any character. let text = "<h1>Winter is coming</h1>" ; let myRegex = /<h1*?>/; // Change this line let result = text.match(myRegex);

FCC Regular Expressions (+ sign)

Match a character (or group of characters) that appears one or more times in a row . This means it occurs at least once, and may be repeated. For example,  /a+/g  would find one match in  "abc"  and return  ["a"] . Because of the  + , it would also find a single match in  "aabc"  and return  ["aa"] . If it were instead checking the string  "abab" , it would find two matches and return  ["a", "a"]  because the  a  characters are not in a row - there is a  b  between them. 

Code Wars: Find the capitals

Write a function that takes a single string ( word ) as argument. The function must return an ordered list containing the indexes of all capital letters in the string. Followed this method: https://stackoverflow.com/questions/2295657/return-positions-of-a-regex-match-in-javascript var capitals = function (word) { let regex = /[A-Z]/g;   let arr = [];   while((isMatch = regex.exec(word)) != null) {     arr.push(isMatch.index);   }   return arr; }; Someone else's easier solution: var capitals = function ( word ) { var caps = []; for ( var i = 0 ; i < word.length; i++) { if (word[i].toUpperCase() == word[i]) caps.push(i); } return caps; };

Code Wars: Word a10n (abbreviation)

Link to code challenge The word i18n is a common abbreviation of internationalization in the developer community, used instead of typing the whole word and trying to spell it correctly. Similarly, a11y is an abbreviation of accessibility. Write a function that takes a string and turns any and all "words" (see below) within that string of length 4 or greater into an abbreviation, following these rules: A "word" is a sequence of alphabetical characters. By this definition, any other character like a space or hyphen (eg. "elephant-ride") will split up a series of letters into two words (eg. "elephant" and "ride"). The abbreviated version of the word should have the first letter, then the number of removed characters, then the last letter (eg. "elephant ride" => "e6t r2e"). function abbreviate(string) { // + sign in regex not needed let arr = string.split(/([-,\s]+)/g); /* parentheses split string at the...

Linking to other sections of page with fixed Nav Bar/Header

Whatever section you link to on the page, your position would start there but not accounting the space the fixed Nav bar takes up (its height) since its z-index is greater. What should be shown on screen is covered by the Nav bar, so you start at a section below the area where you would want to. Fix: add another <div> element right above the section where you want to go to. Set CSS properties to: position: relative;     //position the <div> relative to its current position (itself) top: -140px;             //represents the height of the Nav bar to account for its space it takes up Original position remains in the flow of the document, just like the  static  value. Positioning definitions: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

FCC Product Page project

1. Used Flexbox for the first time to position multiple elements on one line or more. Set display: flexbox on parent to position its children. -Can quickly position elements across the page.

Hack Reactor Intro to React JS Notes

React JS is not a framework but a JS library with a rich community. -Handling the view (MVC) / user interface -Puts HTML in JS -JSX support which produces React "elements" -Build complex and modern UI's -Component based structure -Props: allows you to pass data from parent (wrapping) component -(Props) Triggers UI to re-render when changed -State: used to change the component from within rather than by parent / also triggers re-rendering. -Context API: to avoid props drilling -Create React App

FCC Project Euler: Problem 3: Largest prime factor

The prime factors of 13195 are 5, 7, 13 and 29. What is the largest prime factor of the given  number ? function largestPrimeFactor( number ) { let primeArr = []; for ( let i = 2 ; i <= number ; i++) { if ( number % i === 0 ) { primeArr.push(i); } } // console.log(primeArr); for ( let i = 0 ; i < primeArr.length; i++) { for ( let j = 2 ; j < primeArr[i]; j++) { if (primeArr[i] % j === 0 ) { primeArr[i] = -primeArr[i]; break ; } } } return Math.max(...primeArr); } largestPrimeFactor( 13195 );

FCC Intermediate Algorithm Scripting: Arguments Optional

Create a function that sums two arguments together. If only one argument is provided, then return a function that expects one argument and returns the sum. For example,  addTogether(2, 3) should return  5 , and  addTogether(2) should return a function. Calling this returned function with a single argument will then return the sum: var sumTwoAnd = addTogether(2); sumTwoAnd(3) returns  5 . If either argument isn't a valid number, return undefined. function addTogether() { if (Number.isInteger(arguments[ 0 ]) === false || (arguments[ 1 ] && Number.isInteger(arguments[ 1 ]) === false )) { return undefined ; } else if (arguments.length === 1 ) { let arg1 = arguments[ 0 ]; return function (arg2) { if (Number.isInteger(arg1) === false || Number.isInteger(arg2) === false ) { return undefined ; } return arg1 + arg2; } } return arguments[ 0 ] + arguments[ 1 ]; ...

FCC Project Euler: Problem 2: Even Fibonacci Numbers

Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ... By considering the terms in the Fibonacci sequence whose values do not exceed  n th term, find the sum of the even-valued terms. function fiboEvenSum(n) { let total = 0 ; let fibArr = [ 1 , 2 ]; if (n < 2 ) return fibArr[ 1 ]; for ( let i = 2 ; i <= n; i++) { fibArr.push(fibArr[i- 2 ] + fibArr[i- 1 ]); } for ( let i = 0 ; i < fibArr.length; i++) { if (fibArr[i] % 2 === 0 ) { total += fibArr[i]; } } return total; } fiboEvenSum( 10 );

FCC Project Euler: Problem 1: Multiples of 3 and 5

If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. function multiplesOf3and5( number ) { let total = 0 ; //instead of creating an array (of multiples of 3 & 5) which takes up more memory? for ( let i = 1 ; i < number ; i++) { if (i % 3 === 0 || i % 5 === 0 ) { total += i; } } return total; } multiplesOf3and5( 1000 );

FCC Intermediate Algorithm Scripting: Binary Agents

Return an English translated sentence of the passed binary string. The binary string will be space separated. function binaryAgent(str) { let arr = str.split( " " ); arr = arr.map(item => parseInt(item, 2 )); //binary to decimal of base 2 return String.fromCharCode(...arr); //does not accept variables } binaryAgent( "01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111" );

FCC Intermediate Algorithm Scripting: Steamroller

Flatten a nested array. You must account for varying levels of nesting. function steamrollArray(arr) { // I'm a steamroller, baby let flatArr = []; function recursionFunc(item) { item.forEach( function (entry) { if (Array.isArray(entry) === true ) { recursionFunc(entry); } else flatArr.push(entry); } ) } arr.forEach( function (item) { if (!Array.isArray(item)) { flatArr.push(item); } else { recursionFunc(item); } }) return flatArr; } steamrollArray([ 1 , [ 2 ], [ 3 , [[ 4 ]]]]);

FCC Intermediate Algorithm Scripting: Drop it

Given the array  arr , iterate through and remove each element starting from the first element (the 0 index) until the function  func returns  true when the iterated element is passed through it. Then return the rest of the array once the condition is satisfied, otherwise,  arr should be returned as an empty array. function dropElements(arr, func) { // Drop them elements. for ( let i = 0 ; i < arr.length; i++) { if (func(arr[i]) === true ) { arr.splice( 0 , i); return arr; } } arr.splice( 0 , arr.length); return arr; } dropElements([ 1 , 2 , 3 ], function (n) { return n < 3 ; });

Javascript Objects

Dot vs. bracket notation Cannot use dot notation with variables If  'dog' is a variable: Attempting to lookup  obj.dog  will actually just look for the string value of  'dog'  within our object instead of using the variables value.  Problem under FCC: Basic JavaScript: Record Collection // Setup var collection = { "2548" : { "album" : "Slippery When Wet" , "artist" : "Bon Jovi" , "tracks" : [ "Let It Rock" , "You Give Love a Bad Name" ] }, "2468" : { "album" : "1999" , "artist" : "Prince" , "tracks" : [ "1999" , "Little Red Corvette" ] }, "1245" : { "artist" : "Robert Palmer" , "tracks" : [ ] }, ...

FreeCode Camp Algorithms: Find the Symmetric Difference

Create a function that takes two or more arrays and returns an array of the  symmetric difference  ( △ or  ⊕ ) of the provided arrays. Given two sets (for example set  A = {1, 2, 3} and set  B = {2, 3, 4} ), the mathematical term "symmetric difference" of two sets is the set of elements which are in either of the two sets, but not in both ( A △ B = C = {1, 4} ). For every additional symmetric difference you take (say on a set  D = {2, 3} ), you should get the set with elements which are in either of the two the sets but not both ( C △ D = {1, 4} △ {2, 3} = {1, 2, 3, 4} ). The resulting array must contain only unique values ( no duplicates ). function sym(args) { let arr = [...arguments]; function toCompare(arr1, arr2) { let arr3 = []; for ( let i = 0 ; i < arr1.length; i++) { if (!arr2.includes(arr1[i])) { if (!arr3.includes(arr1[i])) { //to avoid duplicate entries arr3.push(arr1[i]); } } } for ( let i = 0 ; i ...

Use of Headings

Headings should be used based on their semantic meaning rather than their sizes. H1-H6 tags should go in order and not skipped. Headings with equal (or higher) rank start new implied sections, headings with lower rank start subsections of the previous one.

FreeCodeCamp: Intermediate Algorithm Scripting: Smallest Common Multiple

Find the smallest common multiple of the provided parameters that can be evenly divided by both, as well as by all sequential numbers in the range between these parameters. The range will be an array of two numbers that will not necessarily be in numerical order. For example, if given 1 and 3, find the smallest common multiple of both 1 and 3 that is also evenly divisible by all numbers  between  1 and 3. The answer here would be 6. function smallestCommons(arr) { let orderArr = arr.sort((a,b) => a-b); //arr.sort() works too. let allArr = []; let smallest = 0 ; for ( let i = orderArr[ 0 ]; i <= orderArr[orderArr.length - 1 ]; i++) { allArr.push(i); } while ( true ) { //use a while loop so the for loop starts at 0 again smallest++; for ( let i = 0 ; i < allArr.length; i++) { if (smallest % allArr[i] !== 0 ) { break ; } else if (i === allArr.length - 1 ) { return...

CSS Flexbox

When setting element's display to flexbox: display: flexbox; Defaults flex-direction to row (as compared to column).

FreeCodeCamp: Intermediate Algorithm Scripting: Sum All Primes

Sum all the prime numbers up to and including the provided number. A prime number is defined as a number greater than one and having only two divisors, one and itself. For example, 2 is a prime number because it's only divisible by one and two. The provided number may not be a prime. My solution using another function to test if number is prime: (FreeCodeCamp used recursion) function primeNumber(num) {    for ( let i = 2 ; i < num; i++) {      if (num % i === 0 ) return false ;   }    return true ; } function sumPrimes(num) { //Greater than 1 //Prime is only divisible by 1 and itself let allArr = []; let primeArr = []; for ( let i = 2 ; i <= num; i++) { allArr.push(i); } for ( let i = 0 ; i < allArr.length; i++) { if (primeNumber(allArr[i]) === true ) { primeArr.push(allArr[i]); } } return primeArr.reduce((a,b) => a+b); } sumPrimes( 10 );

text-transform

CSS property: text-transform: uppercase text-transform: capitalize Convenient way to change style without needing to edit all the letters in html.

CSS Variables

Use CSS variables when you want to apply a CSS style to many elements (selectors) so you don't need to individually style them. 1. First you need to declare your variables inside a selector. ":root" is used so that the variables can be applied to any selectors on the page. The variable name/custom property begins with two dashes "--". When you create a variable, it becomes available for you to use inside the element in which you create it. It also becomes available within any elements nested within it. This effect is known as  cascading .  Because of cascading, CSS variables are often defined in the  :root  element. :root  {     --main-bg-color :  coral ;   } 2. You then insert the variable to the properties of elements you want it applied to using var("variable name"). This var function has two properties where value is the fallback value: var("custom name", "value") #div1  {     background-color :  ...