DEV Community: Seth

Roman to Integer

Seth — Wed, 06 Apr 2022 02:51:38 +0000

This one is similar to the Integer to Roman one, but it has some differences.

Let's begin by creating a map of our values as we will need to be able to reference these later. When we have this map handy, we can reference it when looking at every letting in the string. Here's a few string examples to keep in mind too: XIX, XI which is 19 and 11.

function romanToInteger(string) {
 let map = {
     I: 1,
     V: 5,
     X: 10,
     L: 50,
     C: 100,
     D: 500,
     M: 1000,
 }

Next we will loop through the string and assign each letter as either current or next.

In XI, or 11, the current is X and the next is I.

If the current letter is greater than the next, we can add it to our result normally.

In the case of XI, we can add 10 and then next, which is 1 and get 11.

If the current letter is less than the next one, as is the case in 20, XIX, we want to subtract the next element by the current element.

So, imagine this. Looking at XIX, current is X and next is I. Since X is greater then I, we add X. Then we look at I and X, the current isn't greater than the next, so we add the values of next minus the current or 10 - 1.

This gets up to 19.

function romanToInteger(string) {
 let map = {
     I: 1,
     V: 5,
     X: 10,
     L: 50,
     C: 100,
     D: 500,
     M: 1000,
 }
  let result = 0
  for (let i = 0; i < string.length; i++) {
   let current = map[string.charAt(i)]
   let next = map[string.charAt(i+1)]
    if (current > next) {
   result += current
  } else {
   result += next - current
   }
  }
}

This should handle most cases except for the last case, which is when we are at the end of the string and there are no more next elements to review.

In this case, we wrap all the if statements under a new if statement, that says as long as there is a next statement, run these if statements.

function romanToInteger(string) {
 let map = {
     I: 1,
     V: 5,
     X: 10,
     L: 50,
     C: 100,
     D: 500,
     M: 1000,
 }
  let result = 0
  for (let i = 0; i < string.length; i++) {
   let current = map[string.charAt(i)]
   let next = map[string.charAt(i+1)]

    if (next) {
    if (current > next) {
   result += current
  } else {
   result += next - current
   }
  }
 } else {
  result += current
 }
return result
}

And there we've got it folks.

Integer to Roman

Seth — Sun, 20 Mar 2022 18:07:45 +0000

We'er going to kick things off by creating 2 variables. One will store our numbers, and the other will store the corresponding roman numeral, and both will go from highest to lowest.

This will allow us to associate a number with its counterpart. Note: Remember to put each number and roman numeral as a string within the overall array.

    let numbers = ['1000', '900', '500', '400', '100', '90', '50', '40', '10', '9', '5', '4', '1']
    let romans = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']
    let result = ''

Now that we have this dict ready, we can loop through the number and find out if the number given is greater than the current number.

If it is, we will add the corresponding roman numeral to a result variable, then we will subtract the given number by the current number.

We will continue to do this loop until we are 0 and then we return the result string.

    let numbers = ['1000', '900', '500', '400', '100', '90', '50', '40', '10', '9', '5', '4', '1']
    let romans = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']
    let result = ''

     //loop through numbers
     for (let i = 0; i < numbers.length; i++){

         //set variable to current number
         let current = numbers[i]

         //while the number equal the current number or is 
          bigger then it 
         while (num >= current) {


            //add the corresponding numeral to the result 
             string
             result += romans[i]

              //subtract the num by the current current in the 
              numbers array
             num-=current
         }
     }

       //return the result
    return result
};

Max Water Container

Seth — Sun, 20 Mar 2022 17:09:54 +0000

Let's observe the logic behind the chart we're seeing.

The area, and the answer, is 49.

We got that number because we looked at the distance between the two indices and then multiplied it by the minimum value of both indices.

Let's look at the first part, the width, since finding an area is width times height.

result = (j-i)*min(height[j], height[i])
         ______
           7

 height = [1,8,6,2,5,4,8,3,7]
             _             _
             1             8

   8-1 = 7

Now let's look at the second part. The height.

result = (j-i)*min(height[j], height[i])
                ___________________
                   7

 height = [1,8,6,2,5,4,8,3,7]
             _             _
             8             7

  min(7, 8) = 7

And let's do the last step just for kicks, multiplying them together, then we'll jump into code.

result = (j - i)*min(height[j], height[i])
          ___________________  _________________________
              7             *             7
           **= 49**

And that is how we will get our answer.

The first thing we want is to declare variables. i is at the left, and j is at the right.

Then we will want them to move left and right.


function maxWater (array) {
 let i = 0
 let j = array.length - 1
 let area = 0

}

Now let start iterating through the array, and we will do so with a while loop until the two pointers meet each other.


function maxWater (array) {
 let i = 0
 let j = array.length - 1
 let area = 0

 while (i < j) {
   const temp = (j - i).Math.min(array[j], array[i])

 }

}

Then we update the area and move the i and j. It's not helpful to move the larger number in this case, so we only move the lower number.


function maxWater (array) {
 let i = 0
 let j = array.length - 1
 let area = 0

 while (i < j) {
   const temp = (j - i).Math.min(array[j], array[i])
   area = Math.max(temp, area)
   if (array[i] > array[j]) {
    array[j]-=1
   } 
     else {
   array[i]+=1
  }
 }
 return area
}

String to integer aloi

Seth — Sat, 19 Mar 2022 18:28:09 +0000

Lets say the string we are given is '4123'. Lets's start by figuring out how we are going to get to that number itself.

This way is cheeky.

When we look at any number we can do the first number times 10 plus then 2nd number. In this case

((4 * 10 + 1)* 10 + 2) * 10 + 3)
________
  {41}
((4 * 10 + 1)* 10 + 2) * 10 + 3)
________________
  {410}
((4 * 10 + 1)* 10 + 2) * 10 + 3)
______________________
        {412}
((4 * 10 + 1)* 10 + 2) * 10 + 3)
_________________________________
                   {4123)

Every time we multiply the number by ten we get a 0 in place that we can then change using addition. We keep adding numbers to the right hand side each iteration until we've got the entire number.

Another way to look at it is this.

41 ->
410 -> 
 +12 ->
____
412. 
*10 ->
4120
  +3 ->
____
4123

Now, let's get into how we're going to solve this problem. It's very simple with the code, and you'll be kicking yourself if you've been struggling with it once you see it.

1) turn the str into a number with parseInt method
2) if the number isn't a number, return 0
3) if the number is less then the lower bound, return the lower bound
4) if the number is greater the the higher bound, return the higher bound
5) if we don't hit any of these condition return the parseInt'd number

const aloi = (str) => {
 let num = parseInt(str) 
 if (Number.isNaN(num)){
 return 0
}
 if (num < -2**31) {
 return -2**31
}
 if (num > 2**31-1) {
 return 2**31-1
}
 return num
}

Reverse Integer

Seth — Sat, 19 Mar 2022 03:26:51 +0000

Don't get scared when it tells you that the integer is 32 bit. I had no idea what this was at first, but it just means the number has an upper bound and an lower bound number, meaning there are limits to its largest and lowest numbers.

We will start with the base case.


const reverse = (x) => {
 if (x < 0) return -1 * reverse(-x)
}

This line is important. If the number is negative, we will want to turn it into a positive number so we can break out of the if loop.

const reverse = (x) => {
 if (x < 0) return -1 * reverse(-x)
 const solution = x.toString().split('').reverse().join('')

}

Next we will turn the number into a string, split it, reverse, then join it back together.

Now let's finish it out.

const reverse = (x) => {
 if (x < 0) return -1 * reverse(-x)
 const solution = x.toString().split('').reverse().join('')

 if (solution > 2 ** 31 - 1) {
  return 0
  } 
  else {
 return solution
 }

The number has an upper bound of 2^31 -1. So, if the solution is greater than the upper bound we return 0. This is because it's too large to be in the bounds of our answer.

If it's less, we can just return the solution.

Zigzag Direction

Seth — Fri, 18 Mar 2022 01:07:44 +0000

We've got 2 parameters in this function: a string, and then a certain number of rows.

For example, 'PAYPALISHIRING' is the final result we want to get. But in order to get there, we need to separate it by the number of rows and join the rows together.

P A H N
A P L S I I G
Y I R

var convert = function(s, numRows) {

    if (s.length < 2 || s.length < numRows){
        return s
    }

Looking at this first part, we are just saying if the length is only 1 letter or if the amount of letters is less than the amount of rows, just return the letter. This certifies our base condition.

var convert = function(s, numRows) {

    if (s.length < 2 || s.length < numRows){
        return s
    }

    const rows = new Array(numRows).fill('')
    let count = 0
    let reverse = false;

Now we will set ourselves up for success. We are going to create a new array for the amount rows there are and will fill it with an empty string. If we consoled logged here with numRows = 3, it'd look like this:

var convert = function(s, numRows) {

    if (s.length < 2 || s.length < numRows){
        return s
    }

    const rows = new Array(numRows).fill('')

If we console log rows, we get this below:

['']['']['']

Next, we need a counter variable of 0, since we will later traverse the string and let each letter sit in an Array. Then, if the count is 0, or equal to the number of rows, we change direction.

Since we go left to right, we will hit the numRows before we hit 0 (the first letter in the first array is at 1, not 0, so we will want to say if reverse is true, then decrement down). If it's false, then keep going forward.

var convert = function(s, numRows) {

    if (s.length < 2 || s.length < numRows){
        return s
    }

    const rows = new Array(numRows).fill('')
    let count = 0
    let reverse = false;

    for (let i = 0; i < s.length; i++) {
    rows[count] += s[i]
    reverse ? count-- : count++
    if (count === 0 || count === numRows - 1) {
       reverse = !reverse
    }
}

If we console log here, we can see the following happen: At the first array, we get the current letter and so on until we hit the 3rd letter. Then reverse changes course so the A, string 2, gets the next letter and we go down until we hit 1 and then

[ 'P', '', '' ]
   -
   1
[ 'P', 'A', '' ]
        -
        2
[ 'P', 'A', 'Y' ]
             -
             3
[ 'P', 'AP', 'Y' ]
        -
        2
[ 'PA', 'AP', 'Y' ]
   -
   1
[ 'PA', 'APL', 'Y' ]
          -
          2
[ 'PA', 'APL', 'YI' ]
                - 
                3
[ 'PA', 'APLS', 'YI' ]
           -
           2 
[ 'PAH', 'APLS', 'YI' ]
    -
    1

And on and on we go, but we can see that when we hit one end we zag. If we hit the other way then we zig. The only thing left is to join all the rows together and return it.

var convert = function(s, numRows) {

    if (s.length < 2 || s.length < numRows){
        return s
    }

    const rows = new Array(numRows).fill('')
    let count = 0
    let reverse = false;

    for (let i = 0; i < s.length; i++) {
        let current = s[i]
        rows[count] += current
        console.log(rows)
        reverse ? count-- : count++
        if (count === 0 || count === numRows - 1) {
            reverse = !reverse
        }
    }
   let joined = rows.join('')
   console.log(joined)
};

Median of Two Sorted Arrays

Seth — Tue, 08 Mar 2022 17:42:28 +0000

This question is deemed "Hard", but it's not too bad at all.

Let's assume we've got two parameters in our function, each are an array of nums.


function medianTwoArrays(num1, nums2) {

}

The first thing we can do is concat them together, and then sort the newly created array from lowest to highest.

function medianTwoArrays(num1, nums2) {
  let newArray = nums1.concat(nums2)
  let sorted = newArray.sort((a,b) => a - b)
}

Cool. We've now got a sorted merged array. Now to determine whether we have an odd or even amount of elements in our array.

If the length of the new array is even, we will take the two numbers separating the lower and upper half of the array, add them together, and divide them by two.

Doing so is simple. If the length modulo 2 is 0, then its even. If it has a remainder of 1, then it's odd. When its odd, we want to divide the length by 2 and the remove .5 from the index.

For example, if we have 5 elements, and we want the third, we can do 5 divided by 2 which is 2.5 and minus .5 we have 2 (which is the index, so we're talking about the third element).

function medianTwoArrays(num1, nums2) {
  let newArray = nums1.concat(nums2)
  let sorted = newArray.sort((a,b) => a - b)

  if (sorted.length % 2 === 1) {
    return sorted[(sorted.length/2) -.5]
  } 
    else {

  }
}

Now lets focus on the other part of the problem, if we have 8 numbers, or 4 numbers, in the array.

To solve this we will want to get the number in the lower boundary, and the number in the upper boundary, then we will divide both by 2.

function medianTwoArrays(num1, nums2) {
  let newArray = nums1.concat(nums2)
  let sorted = newArray.sort((a,b) => a - b)

  if (sorted.length % 2 === 1) {
    return sorted[(sorted.length/2) -.5]
  } 
    else {
 return (sorted[sorted.length/2] + sorted[sorted.length/2 -1]) /2
  }
}

And voila. We've managed to return the median whether the length of the merged and sorted array is odd or even.

Longest Substring without repeating characters

Seth — Tue, 08 Mar 2022 15:53:43 +0000

For this problem we are going to utilize the sliding window technique. Using this technique, we will have two pointers, and if the substring has no duplicates, we can increase the window by 1.

To determine if we don't have any duplicates we will use Set.

As we are traversing the string, we need to add the current letter to our set, and if we try to add it again, it won't work (this is how Sets work, they only have unique characters/elements).

function findLongestSubString(s) {
 let newSet = new Set()
 let pointerOne = 0
 let pointerTwo = 0
 let longSub = 0

}

All we've done in the above is create a new set (sets don't allow duplicates) and we've created two pointers that we will use to traverse the string. We've also created a longSub variable set to 0 since we are going to need to update this as we compare substrings.

function findLongestSubString(s) {
 let newSet = new Set()
 let pointerOne = 0
 let pointerTwo = 0
 let longSub = 0 

 while (pointerOne < s.length) {

 }

}

In the next step above, we've said while the pointer is less then the length of the string traverse the string. Then we will say that if the set doesn't have the character that pointerOne is on, then we want to add it to the set.


function findLongestSubString(s) {
 let newSet = new Set()
 let pointerOne = 0
 let pointerTwo = 0
 let longSub = 0 

 while (pointerOne < s.length) {
  if (!newSet.has(s.charAt(pointerOne))) {
   newSet.add(s.charAt[pointerOne])
  }
 }

}

Again, looking at what we have above, if the set doesn't have the character at the position of pointerOne, then add it to the set.

We will then use Math.max, which compares two elements, to see which has the longest length and we will then set that to the maxLength.

function findLongestSubString(s) {
 let newSet = new Set()
 let pointerOne = 0
 let pointerTwo = 0
 let longSub = 0 

 while (pointerOne < s.length) {
  if (!newSet.has(s.charAt(pointerOne))) {
   newSet.add(s.charAt[pointerOne])
   longSub = Math.max(longSub, newSet.size)
  }
 }

}

Now, what we need to do is move pointerOne forward, we can do so by just saying pointerOne++.

function findLongestSubString(s) {
 let newSet = new Set()
 let pointerOne = 0
 let pointerTwo = 0
 let longSub = 0 

 while (pointerOne < s.length) {
  if (!newSet.has(s.charAt(pointerOne))) {
   newSet.add(s.charAt[pointerOne])
   longSub = Math.max(longSub, newSet.size)
   pointerOne++
  }
 }

}

Now this will take us through the letters in the string, but at some point we will hit a duplicate. In this case, we want to remove the current letter that pointerTwo is on (the first character in the substring).

function findLongestSubString(s) {
 let newSet = new Set()
 let pointerOne = 0
 let pointerTwo = 0
 let longSub = 0 

 while (pointerOne < s.length) {
  if (!newSet.has(s.charAt(pointerOne))) {
   newSet.add(s.charAt[pointerOne])
   longSub = Math.max(longSub, newSet.size)
   pointerOne++
  }
   else {
    newSet.delete(s.charAt[pointerTwo])
    pointerTwo++
    }
 }
 return longSub
}

Eventually we we will get to a blank space (the end of the sting), and that means we've gone through everything. So, we can just return the longSub which is going to be a number.

Two Sum Problem

Seth — Wed, 02 Mar 2022 03:19:21 +0000

You want to find 2 numbers that add up to the target and return their indices.

This is considered an easy interview problem, if you get it, god is watching over you.

Now, there are few ways to approach this: the brute force way (it'l work but it aint impressive), and then the optimal way. We will cover both.

The brute force way

Note: This will work, but make sure you can optimize it too.

The logic is as follows. We will use two for loops. The first will look through all the elements starting at the first element. Then next loop will go through all the elements starting at second element. If the two add up to the target, return the indicies of them. Relatively straightforward, but it takes up a lot of memory to run two for loops so it'l become more inefficient as the array grows. Nevertheless, here's the answer.

`var twoSum = function(nums, target) {
    let result = []
    for (let i = 0; i < nums.length; i++) {
    for (let j = i + 1; j < nums.length; j++) {
        if (nums[i] + nums[j] === target) {
            result.push(i, j)
        }
     }
   }
     return result
}`

The efficient way

We don't want to use 2 for loops. Let's just use one.

What we'll do is create an empty object, and then we'll use forEach on the nums array. The forEach method can take in an element and its index, so we can set each set the element as the key and its index as its value.


`var twoSum = function(nums, target) {
 let obj = {}
 nums.forEach((num, index) => {
  obj[num] = index
 }


}`

Now we are going to loop through the nums array and use our one shot at a for loop.

var twoSum = function(nums, target) {
 let obj = {}
 nums.forEach((num, index) => {
  obj[num] = index
 }

 for (let i = 0; i < nums.length; i++) {
 let secondElement = target - element
 if (obj[secondElement] !== undefined && obj[secondElement] !== index) {
  return [index, secondElement]
  }
 }
}

Lets take a look at the example above.

We're looping through the numbers in the nums array and were saying, does the result of the target number minus the current element exist as a number here? That is, if the target is 9 and our nums array is [2, 7, 13, 15], does 9 - 2 exist? or does 9 - 7 exist? And is it not an existing element (we can use the same number twice)?

If so, return the element, and then the secondElement i.e the result of the target element minus the current element.

How to build Airbnb Header and Banner

Seth — Wed, 09 Feb 2022 22:47:31 +0000

Today we're going to take a look at React JS, a popular Javascript library. Before getting started with React, you should feel comfortable with Javascript.

If you didn't master Javascript, it's possible you'll still learn React just fine. But in my opinion, and I'm not the end all be all on the topic by any means, it's much easier to understand how to use React when your already familiar, and hopefully proficient, in JavaScript, CSS, and HTML.

Download Node.js

To check you've got node installed type in node -v into your terminal.

You should your version appear. If not, download Node here.

Next we are going to go ahead and get React downloaded.

Type in: npx create-react-appand then name your folder.

I'll call ours new-app so the full line of code will be:

npx create-react-app my-app
Npx stands for node package execute.

You'll see several dependencies start to load and you'll have 4 scripts you can run. The first one you'll want to try is npm start which will run the react app on your local machine.

Run npm-start

To do this, make sure you first change directory to the app folder you just created. Then run npm start. You'll see this:

Set up Firebase

Now you'll want to set up a Firebase server so you can see what you create and actually share it with people. Firebase will let you create the project as long as you have a Gmail account and firebase is a suite of free tools. Don't worry too much about the initial setup.

When your done, register your app:

Delete Test Files

You won't need all the files that you've downloaded with npx create-react-app. So, we'll go ahead and delete the files related to testing.

Also, delete the images in your "public" folder. We won't need them.

Remove information in the App.js div

Since you've deleted the images in the "public" folder, the app will present you with an error. Delete the image file from the top, and as well as the information between the divs.

Add an H1 tag in the div and include some information here, nothing crazy. When you reload the page you'll see something like this:

As you might be able to tell, the text is centered and there is margins to the left and right of it.

Delete everything in App.css

This will left-align your text.

Go into your index.css and we will remove the margin everywhere using * which tells the CSS to apply the changes to the entire code.

Begin building your application

You'll want to begin by planning out the components of your application. So let's start with the Home component. Inside of this component are several other components: Header, Banner, Cards, Footer. Laying it out like this will help out as we go to fill out this information.

Each of these components will be their own Javascript file inside your SRC folder.

Creating the Home component

If you don't have it yet, download the ES7 extensions from VS Code. Then type in rfce which will get you started.

We will also create a Home.css file so we can style the Home component. Then import it to your Home.js file.

Re-useable Header

Airbnb's header appears on every page that displays.

So let's go ahead and create the Header component i.e Header.js.

At the top, import Header.css so we can change the styling for the header and utilize it.

In the Header.js file, set the div className to 'header'.

Inside the div, create an img element and set the className to 'header__icon' so we know it's an icon in the header. Give it an src tag with the url of the logo. The alt tag can be left blank (or fill it it in).

The import the Header.js file to App.js to add the component in.

You should now see a massive logo above the Home component in your local host. I couldn't even see it on my page it was so large.

To fix this, we will target the header icon in the Header.css file and give it the below properties:

object-fit: contain; height: 100px; margin-left: 20px;

object-fit will keep the image within the screen, and we're using margin-left 20px to push it off the left border a bit.

Here's what it looks like now.

Understanding the Header

When we look at this more closely we can see the Header split into 3 parent container with 1-4 children.

The first container (1) just has 1 child - the image. The second (2) has two: search and it's icon. The third (3) has four, three icons and one text element.

Adding the property Flex 1 to the 2nd element will allow it to grow when we click on it and select a date.

Giving the entire Header align-items: center will make sure everything looks good. Every container will need these rules.

Creating the search bar component

Create a 2nd div under the header_icon div. Give it a className of headercenter and an input with a type text.

Next, we will utilize Material UI to get the search icon. Following their documentation we will type in $ npm install @material-ui/core. Then search through this lit of icons to find the one matching Airbnb.

When you find an icon you want, click on it and it'l give you the code to import at the top of your JS file.

Note: it's import you remember to use npm install --save @material-ui/icons otherwise your going to wonder why you it's not working which happened to me and left me screwed for at least an hour. You also need to CD into your project file folder before the npm install, otherwise its worthless.

Next, create a div with the className of header___right as this will be the icons and "Become a Host" section of their site.

Once you've added the search icon, go ahead and add 2 more:

<ExpandMoreIcon />
<Language />

Then add a component of Avatar which is available through the Material UI core package.

Now jump into the Header.css folder since we'll want to align-items:center everything and make sure it has a display:flex so it's in a row.

Then it should be looking like this:

When we then add justify-content:space-between it will push all these containers the farthest space away from each other.

Since we want to the header to stay throughout the page, even when scrolling we'll need to add the tags below to the header container.

position: sticky; top: 0; background-color: white; z-index: 100; width: 100%;

Tweaking the Header component

The Header will need to styled with lots of specific tags, and we will refrain from going into each of them now for the sake of time. However, note that in the header___center container you'll want to add max-width: fit-content. This will constrain your search field to the middle of the header.

To wrap an oval around it with a border:

border-radius: 999px; border: 1px solid blue;

Keep playing around with the CSS for the Header.js folder, but besides position:sticky it should be straightforward. You'll be aiming for the header to look something like this:

Building the Home Component

All we've done is create a Home.js file and added the component to the App.js file. In the Home.js file, add a quick h1 with some text to make sure it's set up properly.

Then add a banner component then below the h1 and create the banner file.

Afterwards, import the banner in to the Home js file since it'l live inside that file.

Now go to the banner.css file for styling the banner and add this:
.banner { height: 50vh; position: relative; background: url("http://cdn.home-designing.com/wp-content/uploads/2017/10/white-sectional-sofa.jpg"); }

This gives the banner a background image and sets the height to about 50% of the page.

To center the image properly, add center center to the end of the background tag. This is approximately what you'll see:

Next, we'll go ahead and create a div within the banner and include some text within it (Airbnb does this, so we are too):

<div className='banner'> <div className='banner__info'/> <h1> Get ready to explore </h1> <h5> Your dreams aren't far away </h5> </div>

We've came along way. Import a button from the material UI core folder then put it in underneath the text you added.

Afterwards, we're going to need to style everything to make sure it looks similar to how Airbnb has their site set up.

`.banner {
height: 50vh;
position: relative;
background: url("http://cdn.home-designing.com/wp-content/uploads/2017/10/white-sectional-sofa.jpg")center center;
}

.banner__info {
background-color: black;
color: white;
padding-top: 25vh;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 40px;
width: 300px;
}

.banner__info > button {
background-color: #ff7779;
color: white;
border: 2px solid white;
}`

For the banner, we're setting the height to 50% of the page. The rest should be explanatory.

For banner info, we're giving it a background color of black, and the text color of white. Then we're going to give it some padding.

For the banner button, we've given it the colors to match Airbnb. And this is where we're at.

The Banner

Note: Anything styled with a Material UI button needs the CSS property of !important to override its native CSS.

Underneath the Home Component placehodler text, add a Search Dates button.

Then in the Banner, create a div container with a className of 'banner__search'.

Now, inside that div we will have a button with a classNAme of 'banner__searchButton' so we can style it later.

.banner__searchButton { background-color: white !important; font-weight: 900 !important; text-transform: capitalize imo !important; color: #ff7779; width: 100vh; }

The styling above's use of !important makes sure it overrides the CSS associated with Material UI. Now when you hover over the button, you'll see it matches Airbnb's branding outline.

Get the Search Dates button to span the entire column of the page

.banner__search{ flex-direction: column; display: flex; top: 0; }

Currently when you click on it, you get a nice animation effect since we're using the button from Material UI, which already has code associated with the button.

But we'll want to change the start on it, so when its clicked, it shows the calendar. When it's not click, it stayed on this state.

To do this we'll start by importing { useState } from 'react'.

Then underneath the banner__search div we'll say if it's true, show the search bar component (we'll create this later). If it's false, hide it.

To add the functionality, we'll say that the Button onClick will set setShowSearch to the opposite of showSearch.

onClick={() => setShowSearch(!showSearch)}

Creating the Date Range component

Type in npm i react-date-range which is a handy npm library to have around.

To import it write:
import { DateRangePicker } from 'react-date-range' import "react-date-range/dist/styles.css" import "react-date-range/dist/theme.css"

Now, let's write a function that will set the startDate/endDate to the selection someone would choose as they're looking over the calendar.

function setSelection(ranges) { setStartDate(ranges.selection.startDate) setEndDate(ranges.selection.endDate) }

This is also done by the library we've set up via NPM.

How to install Tailwind CSS via Visual Studio Code using NPM

Seth — Fri, 14 Jan 2022 22:41:56 +0000

Tailwind CSS lets you leverage utility classes to build your own components. This means you can reference Tailwind CSS classes directly in HTML.

Yup, you heard that right.

To begin, create a new folder on your desktop and open the folder in Visual Studio Code.

Get started

If you have Visual Studio Code, pull up the terminal.

Type in npm -v. This command is necessary to see which version of npm you are running. If you don't have it installed, you'll have an error message. If you didn't download npm, don't worry. It's pretty easy, just search for it on Google.

Now go ahead and also install node.js. To make sure it's there, run npm -v again in the terminal. If you see your version, it's running and installed properly. If not, you're out of luck.

Nows our time for real trickery - type in npm install -d tailwindcss@latest postcss@latest autoprefixer@latest in your console.

You should see a lot of GET requests and 200 messages (which mean everything worked fine) roll in.

Reviewing your folders

After installing Tailwind CSS, you should see your folder has 3 files: node-modules, package-lock.json, package.json. In my case they are in the tailwind folder that I set up. For the sake of this exercise, I pulled in a Linktree clone I was working on.

The package.json folder has the dependencies we download, as well as their file version.

At this point, we will add a configuration file to the package.json file.

Add a configuration file to the package.json file.

Typine in "npx tailwindcss init" into the terminal. It's something that has to happen eventually (or so I'm told), so it's better to get it out the way now. You'll then see a tailwind.config.js file pop up in your folder.

Now create a style.css file in the tailwind folder (it's fine if you call it something different). In this file, we will add some Tailwind directives. Type in:

@tailwind base;
@tailwind components;
@tailwind utilities;

These directives are pulled from the node_modules > Tailwind CSS folders.

Switch to package.json folder

Now add a comma and then in double quotes add:

"scripts": { "build-css": "tailwindcss build style.css -o css/style.css" }

It's a simple key-value pair. build-css is the key, the value is tailwindcss. Build refers to what we want to build i.e our style.css file that we got. The -o specifies the output file. The final portion css/style/css tells the computer where we will store it.

Now in the console type in the script.

npm run build-css

This tells it to run the build-css key-value.

You should see a new folder built with CSS file inside. I'll end our lesson here, as you've set everything up correctly. Now the fun part begins - building!

The Two Pointer Technique

Seth — Mon, 03 Jan 2022 22:25:08 +0000

It's possible to brute force your way into solving a problem. But doing so leads to an inefficient solution.

One common inefficient, brute force method you might see in the wild is the notorious double loop.

function findpairs(arr, k) {
for (let i = 0; i < arr.length - 1; i++) {
 for (let k = 1 + 1; i < arr.length; k++) {
  }
 }
}

It takes forever to go through every element in an array once, but twice? Forget about it.

Instead of using double loops, consider using what is affectionately known as "The Two Pointer Technique".

What is a pointer?

In a for loop, the "i" value is the pointer i.e. it goes through each item in the array.

But we if have 2 pointers we can make different calculations based on the different pointers. It is also much faster than using two for loops as both pointers can move through the array at the same time (don't quote me on this part though).

In the example below, the carot symbol (^) is meant to visualize the two pointer concept. The array is in ascending order, which means the first element is the minimum and the last is the max.

const arr = [ 1, 2, 3, 4, 5, 6]
              ^              ^

While there are perhaps thousands of different combinations of pointers, the most typical combination is to have one start at the beginning, and another to start at the end.

Let' see now how we can solve a simple problem using this two pointer method.

The situation

We have an array that is sorted in ascending order, and we want to see if any pair of the elements in the array sum up to X.

const array = [1, 2, 3, 4, 5, 6, 7, 8]
                  ^                 ^
const x = 10

function findPairs(array, x) {
 let start = 0; //set the first element
 let end = array.length - 1; //set the last element

 while (start < end) {
  if (array[start] + array[end] === x) {
   return true; //if any two elements equal x, we are done. 
  } else if (array[start] + array[end] < x) {

 }
}

In the "else if" statement runs, we will change the first pointer to the next element in the array.

We will keep the second element in place, but need to increment the position (start++) of the first pointer.

const array = [1, 2, 3, 4, 5, 6, 7, 8]
                  ^                 ^
const x = 10

function findPairs(array, x) {
 let start = 0; //set the first element
 let end = array.length - 1; //set the last element

 while (start < end) {
  if (array[start] + array[end] === x) {
   return true; //if any two elements equal x, we are done. 
  } else if (array[start] + array[end] < x) {
   start++
  }
 }
}

Don't forget your second pointer

This situation above, however, doesn't fully satisfy all conditions. While the array is sorted, if a number is missing from the array it will result in an infinite loop.

This is because once the first pointer has made it through the loop, it will continue to look for the missing number. This search, though, is in vain.

The way we will get around it is by decrementing from the last element in the array.

const array = [1, 3, 4, 5, 6, 7, 8]
                  ^        ^
const x = 10

function findPairs(array, x) {
 let start = 0; //set the first element
 let end = array.length - 1; //set the last element

 while (start < end) {
  if (array[start] + array[end] === x) {
   return true; //if any two elements equal x, we are done. 
  } else if (array[start] + array[end] < x) {
   start++;
  } else {
    else--;
   }
 }
}

Return index of the elements

This might seem tricky since there are lots of combinations of elements that can equal the sum of X, but all we need to do is return the start and end instead of returning true.

const array = [1, 3, 4, 5, 6, 7, 8]
                  ^        ^
const x = 10

function findPairs(array, x) {
 let start = 0; //set the first element
 let end = array.length - 1; //set the last element

 while (start < end) {
  if (array[start] + array[end] === x) {
   **return [start, end]**; //if any two elements equal x, we are done. 
  } else if (array[start] + array[end] < x) {
   start++;
  } else {
    else--;
   }
 }
}