DEV Community: Chinedu Daniel

Javascript Array Methods: Re-implementing Slice 🍕

Chinedu Daniel — Sun, 08 Mar 2020 19:02:20 +0000

The slice method in JavaScript is a useful utility method, when it is called on an
array, it will return a shallow copy of a part of that array. It expects two
arguments that represent indexes of the array, the first one is used to indicate
where to begin shaving off portions of the array, and the second one is used
to indicate where to stop (non inclusive). Slice does not modify the original
array.

With that all out of the way, let’s get started!

(Re)Implementing Slice

In order to implement slice, we need to create an empty array, iterate over the values in the original array and copy the values that are within the begin and end indexes to our initially empty array. That’s all there is to it really.

Here’s our slice reimplementation in all its’ glory:

const slice = (
  arr,
  start,
  stop = arr.length /* Default value for stop if not present */
) => {
  let res = [];

  /* 
    Oh yes, the slice method accepts negative indexes as well and we have to
    take care of that in our reimplementation function.

    The ternary condition in the following expressions is to take care of
    converting negative indexes to positive indexes. When the full length of the
    array is added to the negative index, it sums up to the equivalent positive
    index.
  */

  let currentIndex = start < 0 ? arr.length + start : start;
  let stopIndex = stop < 0 ? arr.length + stop : stop;

  /* A humble while loop that iterates from the start index to the stop index */
  while (currentIndex < stopIndex) {
    res.push(arr[currentIndex]);
    currentIndex += 1;
  }

  return res;
};

The function starts iterating from the given start index all the way to the stop
index and simply populates the empty array with values from the original array
that fall within the start and stop range.

Conclusion

Sometimes, the best way to learn how something works is to build your own version;
this gives you a clearer perspective and better understanding of how to piece
things together from scratch and greater clarity into how things work.

Originally published on My personal site

Let's build - Christmas lights with HTML, CSS and JavaScript 🎄

Chinedu Daniel — Mon, 16 Dec 2019 22:11:00 +0000

In this article, I'll be discussing how to build an interactive light display using
the three musketeers of the frontend - HTML, CSS & JavaScript...

In this article, I'll be discussing how to build an interactive light display using
the three musketeers of the frontend - HTML, CSS & JavaScript. We'll build a string
of lights to simulate the effect of blinking lights similar to Christmas lights
as seen during Christmas holidays.

To follow along with this, you should be fairly comfortable with using HTML, CSS
and JavaScript.

You can find the final result for this on Codepen

Structure

Before proceeding with anything else, we'll have to first define the structure of
the light display using HTML. We'll create a file called index.html and define a couple
of divs to represent our light bulbs:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Christmas Lights</title>
  </head>
  <body>
    <section class="light-bulbs">
      <div class="light-bulb theme-color-one"></div>
      <div class="light-bulb theme-color-two"></div>
      <div class="light-bulb theme-color-three"></div>
      <div class="light-bulb theme-color-four"></div>
      <div class="light-bulb theme-color-five"></div>
      <div class="light-bulb theme-color-one"></div>
    </section>
  </body>
</html>

At this point we should have an empty page staring right back at us but with the
markup that we have defined, we have laid the necessary groundwork for the light
display we set out to build.

Note that it's not mandatory that divs are used for this, any block level
element will do.

Style

Now that we have the initial setup of the page structure, Let's move on to the styling.
What we want to do is style our divs to look light light bulbs connected via strings
and to give each of them unique colors that can also be changed as needed (we'll
implement this when we add behavior). If you take a look at the HTML, you'll
notice that each div has a class of light-bulb and an extra class to represent
the color for that particular div.

This is done this way so that we can apply
general styles that will affect all divs as well as specific styles for each
individual div. Let's create a file called style.css that will contain all
the necessary style declarations. We'll then proceed to link this file to the
html page we created earlier:

:root {
  --theme-color-one: #025ba0;
  --theme-color-two: #9bc72b;
  --theme-color-three: #f0c517;
  --theme-color-four: #bf1724;
  --theme-color-five: #5cc9f4;
  --white: #fff;
  --black: #000;
  --grey: #999;
  background: var(--black);
  color: var(--white);
}

body {
  font-family: 'Alatsi', sans-serif;
}

.light-bulbs {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  width: 500px;
  margin: 0 auto;
}

.light-bulb {
  border-radius: 50%;
  height: 30px;
  width: 30px;
}

.light-bulb.theme-color-one {
  background: var(--theme-color-one);
}

.light-bulb.theme-color-two {
  background: var(--theme-color-two);
}

.light-bulb.theme-color-three {
  background: var(--theme-color-three);
}

.light-bulb.theme-color-four {
  background: var(--theme-color-four);
}

.light-bulb.theme-color-five {
  background: var(--theme-color-five);
}

<!DOCTYPE html>
<html>
  <head>
    . . .
    <link
      href="https://fonts.googleapis.com/css?family=Alatsi&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    . . .
  </body>
</html>

We've declared variables to store the color values for the different light bulbs as
well as some common color values in the root element (this will come into play later when we add behavior to the page).

We've also set the containing element for the light bulbs to be a 500px flex container
and positioned it to the center of the page and set it's children (the light bulbs) to have an equal
amount of spacing between them.

For the light bulbs themselves, we've set their dimensions as well as a background
color for each light bulb and we've also made them a circle using the border-radius
property.

We also linked to the google font Alatsi and set the default font-family for the
page to Alatsi. This can be changed to any other font if we so desire.

The page should now look like this:

Now that we have this, all we need is styling to help represent the base of the
light bulb and the string that will run through and connect each light bulb.

Let's add the following to the css file:

.light-bulb {
  /* prior styles go here */
  position: relative;
}

.light-bulb::before {
  content: '';
  position: absolute;
  border: 2px solid #222;
  width: 10px;
  height: 10px;
  background: #222;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  left: 25%;
  top: -12px;
}

We have used the pseudo element before to generate a representation of the base
of the light bulb. We set the dimensions, it's background color, the position and
then create curved borders using the border-top-left-radius and border-top-right-radius properties.

This will make the previous circles look a little bit more like real
light bulbs.

The page should now look like this:

The next point of action is to add the string that connects each light bulb. Let's
add this to our css file:

.light-bulb::after {
  content: '';
  top: -20px;
  left: 60%;
  position: absolute;
  width: 90px;
  height: 28px;
  border-bottom: 4px solid #222;
  border-radius: 50%;
  z-index: -1;
}

.light-bulb:last-of-type::after {
  border: none;
}

Here, we've used another pseudo element, this time around, we used after to simulate the string
connecting each element. Just like the style declaration prior, we've set it's dimensions,
positioning and border-radius. We've also set it's z-index property to negative one (-1) so
that it appears behind every other element on the page (particularly the element representing the base of the light bulb).

We've also removed the border from the last light bulb because it is the last item
and doesn't need the string simulation to show.

The page should look like this after applying this change:

Now, let's proceed to make our light bulbs slowly look like they are flashing on and off
by adjusting the box-shadow property of the light bulbs.

Let's add the following to the css file just after the root element:

@keyframes light-up-theme-color-one {
  0% {
    box-shadow: 0 1px 10px 5px var(--theme-color-one);
  }
  25% {
    box-shadow: 0 1px 15px 5px var(--theme-color-one);
  }
  50% {
    box-shadow: 0 1px 20px 5px var(--theme-color-one);
  }
  75% {
    box-shadow: 0 1px 25px 5px var(--theme-color-one);
  }
  100% {
    box-shadow: none;
  }
}

@keyframes light-up-theme-color-two {
  0% {
    box-shadow: 0 1px 10px 5px var(--theme-color-two);
  }
  25% {
    box-shadow: 0 1px 15px 5px var(--theme-color-two);
  }
  50% {
    box-shadow: 0 1px 20px 5px var(--theme-color-two);
  }
  75% {
    box-shadow: 0 1px 25px 5px var(--theme-color-two);
  }
  100% {
    box-shadow: none;
  }
}

@keyframes light-up-theme-color-three {
  0% {
    box-shadow: 0 1px 10px 5px var(--theme-color-three);
  }
  25% {
    box-shadow: 0 1px 15px 5px var(--theme-color-three);
  }
  50% {
    box-shadow: 0 1px 20px 5px var(--theme-color-three);
  }
  75% {
    box-shadow: 0 1px 25px 5px var(--theme-color-three);
  }
  100% {
    box-shadow: none;
  }
}

@keyframes light-up-theme-color-four {
  0% {
    box-shadow: 0 1px 10px 5px var(--theme-color-four);
  }
  25% {
    box-shadow: 0 1px 15px 5px var(--theme-color-four);
  }
  50% {
    box-shadow: 0 1px 20px 5px var(--theme-color-four);
  }
  75% {
    box-shadow: 0 1px 25px 5px var(--theme-color-four);
  }
  100% {
    box-shadow: none;
  }
}

@keyframes light-up-theme-color-five {
  0% {
    box-shadow: 0 1px 10px 5px var(--theme-color-five);
  }
  25% {
    box-shadow: 0 1px 15px 5px var(--theme-color-five);
  }
  50% {
    box-shadow: 0 1px 20px 5px var(--theme-color-five);
  }
  75% {
    box-shadow: 0 1px 25px 5px var(--theme-color-five);
  }
  100% {
    box-shadow: none;
  }
}

What we've done here is declare keyframe animations that will increase the
blur of the light bulb at different points of the animation to be run. This will give
the effect that the light bulb has turned on and is increasing in intensity. At a 100%,
we set the box-shadow to none to give the effect of the light turning off.

You will also notice a bit of duplication in the different keyframes with the only
difference being the color being used for the box-shadow. With a tool like sass,
we could clean this up with a loop and some interpolation magic but we are in css
land so we have no such options.

We've also named the keyframes similarly to the color names used for the light bulbs
but they can be given different names and it wouldn't make much of a difference.
The important thing is making sure the different theme colors have a keyframe specific
to just them.

The keyframe declarations alone won't do much unless they are used and so for our
next point of action, we'll be applying the keyframe animations to the various light
bulb elements. Let's add the following to our css file:

.light-bulb {
  /* prior styles go here */
  animation-duration: 1.1s;
  animation-iteration-count: infinite;
}

.light-bulb.theme-color-one {
  animation-name: light-up-theme-color-one;
}

.light-bulb.theme-color-two {
  animation-name: light-up-theme-color-two;
}

.light-bulb.theme-color-three {
  animation-name: light-up-theme-color-three;
}

.light-bulb.theme-color-four {
  animation-name: light-up-theme-color-four;
}

.light-bulb.theme-color-five {
  animation-name: light-up-theme-color-five;
}

Now that we have added this to the css file, we should have a real light show on our hands.
We are now using the keyframe animations we declared earlier and we've specified a different
animation name for each light bulb. We've set the animation-duration for every
element to be 1.1s and for the animation to loop infinitely.

Our page should now look like this:

With that, we are all done with our styles for now. Now, let's add some behavior
so that we can toggle the light display on or off, dynamically set the
animation duration as well as change the color of the light bulbs when we want.

Behavior

Let's proceed to add some behavior to the light display. We want to be able to
turn it on and off, change the animation duration and also we want to be able to
set the color of each light bulb to a different color if we so choose.

Luckily for us, we can achieve all of this using JavaScript. First, we'll create
a file called christmas-light.js (it can be any name but the extension has to be js).

Once this has been done, we can now begin to add a little interactivity to the page.

We'll begin with implementing the ability to toggle the light bulbs. Let's modify
our html a little bit to add a settings panel as well link our newly created js file.

Add the following to the html page:

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <section class="light-bulbs">...</section>
    <section class="light-bulb-settings">
      <h3>Settings</h3>
      <div class="group">
        <label>State:</label>
        <div class="checkbox-container">
          <input type="checkbox" class="light-switch" />
        </div>
        <span class="light-switch-state">off</span>
      </div>
    </section>

    <script src="./christmas-light.js"></script>
  </body>
</html>

With this, we should have a checkbox now displaying on the page but it will be a
regular old checkbox and the entire settings panel will be flushed to the left
side of the page. Let's give the settings panel some love by adding some style
declarations for it to our css file:

.light-bulb-settings {
  background: var(--white);
  color: #333;
  width: 500px;
  margin: 30px auto 0;
  padding: 20px;
  border-radius: 10px;
}

.light-bulb-settings .group {
  align-items: center;
  display: flex;
  margin: 15px 0;
}

.light-bulb-settings .group label {
  flex-basis: 80px;
}

.checkbox-container {
  cursor: pointer;
  width: 43px;
  height: 20px;
  background: var(--grey);
  border-radius: 100px;
  margin-right: 5px;
  position: relative;
  padding: 6px 12px;
  transition-duration: 0.4s;
}

.checkbox-container.active {
  background: var(--black);
}

.checkbox-container.active::after {
  left: 50%;
}

.checkbox-container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background: var(--white);
  border-radius: 100%;
  left: 5%;
  top: 9%;
  transition-duration: 0.4s;
}

.light-switch {
  opacity: 0;
  visibility: hidden;
}

With this, our settings panel will now appear right under the light bulbs and our
regular old checkbox will be hidden (we'll add the checkbox behavior with JavaScript)
and in it's place a toggle switch should appear:

Right now, if we click on the toggle, nothing happens and that is because we
need to add the required behavior to our script file:

const checkBoxContainer = document.querySelector('.checkbox-container');

checkBoxContainer.addEventListener('click', e => {
  e.target.classList.toggle('active');
});

With this in place, we should now be able to transition the toggle from it's
initial state to a different state and back to it's initial state.
We'll use these states to represent the light bulbs being on or off.

First, we'll have to modify our css file. Right now, the light bulbs are always in
an active state but we want to change this behavior to allow the lights come on at the
click of a switch. Initially, the light bulbs will be in
a non-active state and when we click on the toggle, it'll switch the light bulbs
on and then off if we click on it again.

To represent the state of the light bulbs being active, we'll introduce a new class
which we'll call on and this will be added to the light bulb container. The light
bulbs will only come on when this class is present, otherwise, the light bulbs will
remain inactive.

Let's modify the css file:

.light-bulbs.on .light-bulb {
  animation-duration: 1.1s;
  animation-iteration-count: infinite;
}

.light-bulbs.on .light-bulb.theme-color-one {
  animation-name: light-up-theme-color-one;
}

.light-bulbs.on .light-bulb.theme-color-two {
  animation-name: light-up-theme-color-two;
}

.light-bulbs.on .light-bulb.theme-color-three {
  animation-name: light-up-theme-color-three;
}

.light-bulbs.on .light-bulb.theme-color-four {
  animation-name: light-up-theme-color-four;
}

.light-bulbs.on .light-bulb.theme-color-five {
  animation-name: light-up-theme-color-five;
}

What we've done is we've added the light bulb container with an extra class of on
before the light bulb declarations. We've also moved the declaration for animation-duration
and animation-iteration-count out of .light-bulb and used a descendant combinator to instead
set those values for .light-bulb. What all of this means is that the animation will only
run when the container has a class of on.

With this out of the way, we can now add the required behavior to our script:

const checkBoxContainer = document.querySelector('.checkbox-container');
const lightSwitch = document.querySelector('.light-switch');
const lightBulbContainer = document.querySelector('.light-bulbs');

checkBoxContainer.addEventListener('click', e => {
  e.target.classList.toggle('active');
  lightSwitch.click();
});

lightSwitch.addEventListener('change', () => {
  lightBulbContainer.classList.toggle('on');
});

With this in place, we should now be able to toggle the state of the light bulbs:

Awesome, the bulbs now light up when we click on the toggle switch but the text
that represents the state of the toggle switch doesn't indicate when it's in an
active state. Let's fix that by adding the following to the js file:

const lightSwitchState = document.querySelector('.light-switch-state');
const lightSwitchLabels = {
  on: 'off',
  off: 'on'
};

Here, we are just initializing variables that will come into play in a bit. We store
a reference to the DOM element representing the light switch state and also an
object that holds the two labels and the states that they will be transitioned to.

Now, let's add extra behavior to the event handler for the light switch (the checkbox element):

// let's add this within the body of the function for the change event handler
lightSwitchState.textContent = lightSwitchLabels[lightSwitchState.textContent];

With this in place, the label will now indicate when it's in an active state and
when it's not:

We can now implement the next set of behaviors that we initially planned out to do.
Next on our list is providing a way to dynamically change the animation duration. We'll
use an input number field and add an event listener which will update the animation
duration using the value of the input field.

First, let's add the following to our html file:

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <section class="light-bulbs">...</section>
    <section class="light-bulb-settings">
      <h3>Settings</h3>
      <div class="group">...</div>

      <div class="group">
        <label>Interval:</label>
        <input
          class="interval-control"
          type="number"
          value="1.1"
          step="0.1"
          min="0.1"
          max="2"
        />
      </div>
    </section>

    <script src="./christmas-light.js"></script>
  </body>
</html>

We've set the default value for the input box to be indicative of what we set in
our style for the animation duration. We've also set the number to step in increments/decrements
of 0.1 and also set the minimum and maximum values allowed.

Note that a value can still be entered freely in the input box, the attributes
only apply when the input controls are used.

Now, let's modify our script by adding the following:

// this should be at the top with all the prior declarations
const lightBulbs = lightBulbContainer.querySelectorAll('.light-bulb');
const intervalControl = document.querySelector('.interval-control');

// this should come after the event listener for the toggle switch
intervalControl.addEventListener('change', e => {
  const duration = e.target.value;
  lightBulbs.forEach(lightBulb => {
    lightBulb.style.animationDuration = `${duration}s`;
  });
});

With this in place, we should now be able to modify the animation duration property
of the light bulbs when we change the value of the number input field.

We should also style the number input field so that it is a little more consistent with the rest
of the page:

.interval-control {
  border: 1px solid var(--black);
  border-radius: 5px;
  font-family: inherit;
  font-size: inherit;
  padding: 6px 12px;
}

Our page should now look like this:

When we interact with the interval control, the animation duration for the light bulbs
will also change.

Let's proceed with implementing the final piece of behavior we set out to create --
the ability to change the colors of the light bulb.

To do this, we'll add a color picker beneath each light bulb. Changing the value
of one particular color picker will affect the light bulb that maps to that picker.

Let's modify our html a bit:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <section class="light-bulbs">
      <div class="light-bulb theme-color-one">
        <input
          type="color"
          class="color-setting"
          value="#025ba0"
          data-theme-color="one"
        />
      </div>
      <div class="light-bulb theme-color-two">
        <input
          type="color"
          class="color-setting"
          value="#9bc72b"
          data-theme-color="two"
        />
      </div>
      <div class="light-bulb theme-color-three">
        <input
          type="color"
          class="color-setting"
          value="#f0c517"
          data-theme-color="three"
        />
      </div>
      <div class="light-bulb theme-color-four">
        <input
          type="color"
          class="color-setting"
          value="#bf1724"
          data-theme-color="four"
        />
      </div>
      <div class="light-bulb theme-color-five">
        <input
          type="color"
          class="color-setting"
          value="#5cc9f4"
          data-theme-color="five"
        />
      </div>
      <div class="light-bulb theme-color-one">
        <input
          type="color"
          class="color-setting"
          value="#025ba0"
          data-theme-color="one"
        />
      </div>
    </section>

    <section class="light-bulb-settings">
      ...
    </section>

    <script src="./christmas-light.js"></script>
  </body>
</html>

Within each light bulb element, we have added a color picker with a class of color-setting
for each so that we can add styling information for them later. We've also set the value
for each color picker to be the initial color of the light bulb they belong to and
finally, we've added a data attribute whose value points to the theme of the light bulb
it belongs to (this will come into play when we update our script).

Let's also add the following to our css file to get the color pickers to display
right beneath the bulbs:

.light-bulb .color-setting {
  margin-top: 15px;
  position: absolute;
  top: 100%;
  left: -25%;
  transition-duration: 0.4s;
}

This will place each color picker right beneath the light bulb it belongs to.
We've also set a transition duration because later on, we'll be hiding the color
picker options and only revealing them when the user clicks on a button (which we'll be adding to the page soon)
and we want the color pickers to slowly fade into view.

Now the page should look like this:

We are all set to implement the ability to change the color of the light bulbs
as we please.

Let's add the following to the script:

lightBulbContainer.addEventListener('input', e => {
  /*
    This uses destructuring to get the themeColor
    value set using the data attribute
   */
  const { themeColor } = e.target.dataset;
  const lightBulb = e.target.parentElement;

  // This updates value of the css variable to the value set on the color picker
  lightBulb.style.setProperty(`--theme-color-${themeColor}`, e.target.value);
});

We've used event delegation to attach an input event to the parent element of
the color pickers and we dynamically update the css variable holding the value
of the light bulbs color to whatever color is set on the color picker.

The only thing left now is to toggle the display of the color pickers on the click
of a button.

Let's modify our html:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <section class="light-bulbs">
      <div class="light-bulb theme-color-one">
        <input
          type="color"
          class="color-setting hidden"
          value="#025ba0"
          data-theme-color="one"
        />
      </div>
      <div class="light-bulb theme-color-two">
        <input
          type="color"
          class="color-setting hidden"
          value="#9bc72b"
          data-theme-color="two"
        />
      </div>
      <div class="light-bulb theme-color-three">
        <input
          type="color"
          class="color-setting hidden"
          value="#f0c517"
          data-theme-color="three"
        />
      </div>
      <div class="light-bulb theme-color-four">
        <input
          type="color"
          class="color-setting hidden"
          value="#bf1724"
          data-theme-color="four"
        />
      </div>
      <div class="light-bulb theme-color-five">
        <input
          type="color"
          class="color-setting hidden"
          value="#5cc9f4"
          data-theme-color="five"
        />
      </div>
      <div class="light-bulb theme-color-one">
        <input
          type="color"
          class="color-setting hidden"
          value="#025ba0"
          data-theme-color="one"
        />
      </div>
    </section>

    <section class="light-bulb-settings">
      <h3>Settings</h3>
      <div class="group">
        <label>State:</label>
        <div class="checkbox-container">
          <input type="checkbox" class="light-switch" data-elem="switch" />
        </div>
        <span class="light-switch-state">off</span>
      </div>

      <div class="group">
        <label>Interval:</label>
        <input
          class="interval-control"
          type="number"
          value="1.1"
          step="0.1"
          min="0.1"
          max="2"
          data-elem="interval"
        />
      </div>

      <button class="color-wheel">Toggle color wheel</button>
    </section>

    <script src="./christmas-light.js"></script>
  </body>
</html>

We've added a class of hidden to all of the color pickers on the page which means
they'll be hidden at first until we toggle their display. Within the
light bulb settings section, we've also added a new button which will be used
to toggle the display of the color pickers on click.

We should update the styling of the color picker toggle button to make it
more consistent with the rest of the page as well as add styling for the hidden
class:

.hidden {
  opacity: 0;
}

.color-wheel {
  border: 1px solid var(--black);
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  margin-top: 10px;
  padding: 6px 12px;
  outline: 0;
  transition-duration: 0.4s;
}

.color-wheel:active {
  transform: scale(0.9);
}

The page should now look like this:

Now that this is out of the way, we will proceed to implement the toggle behavior:

// These initializations should be at the top with the other declarations
const colorWheelBtn = document.querySelector('.color-wheel');
const colorWheels = lightBulbContainer.querySelectorAll('.color-setting');

// This can come right after the other event listener functions
colorWheelBtn.addEventListener('click', e => {
  colorWheels.forEach(colorWheel => {
    colorWheel.classList.toggle('hidden');
  });
});

With this in place, the color pickers will now toggle their display when the
button is clicked.

Conclusion

Whew, we've reached the end of the article 👍🏾. I hope we've learnt something useful
out of all this. If you read through the whole post
then you deserve a reward, here, have a cookie (before the cookie monster gets them all)

Originally published on My personal site

Javascript String Methods: Reimplementing trim 💪🏾

Chinedu Daniel — Sun, 07 Jul 2019 12:15:56 +0000

The trim method removes trailing whitespace from both ends of a given string.
In this post, we’ll be building out our own version of trim that will function
effectively like the method provided by the language.

Why do this though?

Because it’s fun to learn how things work! (cross my heart) Also, it’s a cool
little problem solving exercise to help build up our problem solving chops.
Now that I’ve convinced you that this is a worthwhile use of your time, we can
get started with the implementation.

Implementing trim

The logic for trim is pretty easy to reason about, what we want to do is build
a new string by iterating over a given string. During this iteration, we will be
adding the characters that are non-whitespace characters from the given string
to the new string when we encounter the first non-whitespace character. We just
need to do this on both ends of the string to ensure that all trailing
whitespace characters are not added to the new string.

With that having been said, we’ll need to implement two helper functions that
will make our implementation of trim easier. The functions we’ll be
implementing will be called trimLeft and trimRight and they’ll function
(no pun intended, I swear) just as their names imply; trimLeft will build a
new string with trailing whitespace characters removed at the start of a given
string and trimRight will do the same thing but for whitespace characters
after the last character in a given string.

Doing this will simply make trim a combination (or is it a composition?) of
these two helpers.

Let’s start with the trimLeft function:

const trimLeft = str => {
 /*
   The res variable is initialized to an empty string.
   This is the new string that we'll be returning.

   The shouldMergeChar boolean variable will be used to indicate
   when we can start building our new string.
 */
 let res = "";
 let shouldMergeChar = false;


  /* Just a humble for loop */
  for (let i = 0; i < str.length; i += 1) {
   // store a reference to the current character in the string
   let char = str[i];

   /*
     The regex here checks to see if the current character
     is NOT a whitespace character.

     If that is the case, it sets the boolean variable
     shouldMergeChar to true
   */
    if (char.match(/[^\s]/)) shouldMergeChar = true;

   /*
     Once the first non-whitespace character has been
     encountered, we can proceed with building our new
     string using the characters from the given string
   */
    if (shouldMergeChar) res += char;
  }

  /* This does what you think it shoud do */
  return res;
};

trimLeft("         hello world       ") // "hello world       "

The function simply iterates over a given string and starts building a new
string once it finds the first non-whitespace character.

The logic for trimRight will follow a similar pattern with the only difference
being that the iteration will start at the end of the
given string and the new string will be built by adding characters to the
beginning of the string rather than at the end.

Here’s trimRight:

const trimRight = str => {
 /*
   Same basic logic for the variables here just like in trimLeft
 */
  let res = "";
  let shouldMergeChar = false;

 /*
    Our humble for loop again but this time iterating
    from the end of the string
  */
  for (let i = (str.length - 1); i >= 0; i -= 1) {
   /* store a reference to the current character in the string */
    let char = str[i];

   /*
     If the current character is NOT a whitespace character,
     we can proceed with building out the new string
   */
    if (char.match(/[^\s]/)) shouldMergeChar = true;

   /*
     Since we are looping from the back, we need a way
     to still build the new string in the correct order.

     This does just that by adding the characters to the
     beginning of our new string rather than at the end.
   */
    if (shouldMergeChar) res = char + res;
  }

 /* It still does what you think it should do */
  return res;
}

trimRight("       hello world       ") // "       hello world"

Now that we have both our helper functions to remove trailing whitespace
characters from the beginning of a string and the end of a string, we can
proceed with implementing our trim function which will simply just call out
the helper functions:

const trim = str => trimRight(trimLeft(str));

trim("       hello world       ") // "hello world"

What did I tell you? It’s that easy!

Conclusion

There are probably a dozen different ways to go about implementing trim
but the concepts discussed in this article gives a very good frame of
reference for how the trim method operates on a string.

Originally published on My personal site

Javascript String Methods: Re-implementing toLowerCase and toUpperCase 💪🏾

Chinedu Daniel — Sat, 15 Jun 2019 12:26:02 +0000

The toLowerCase and toUpperCase methods in JavaScript are string methods that
transform a given string, making all of it's characters either lowercase or
uppercase depending on the method called. In this post, I'll be discussing how
to implement the functionality of these two methods without directly using the
methods as provided by the language. Let's get started!

Every string character can be represented as a unique integer between 0 and 65535.
For any particular string character, the integer that maps to the character
represents the UTF-16 encoding for that character. JavaScript provides an easy
way to get the character code for any string character through the charCodeAt
method. charCodeAt takes a single argument representing the index for which we
want a character code returned. That is all fine and dandy but how do we get a
character from the integer representation? Javascript has got us covered through
the static String.fromCharCode method; String.fromCharCode takes a list of
character codes and spits out the relevant string representation for the given
character codes.

We now have all we need to proceed with re-implementing the toLowerCase and
toUpperCase methods. Our focus is on converting between the cases for the
letters of the English alphabet.

In order to convert from one case of a letter in the English alphabet to another,
what we need to do is either add or subtract 32 to the character code depending
on the functionality we want. The reason we use 32 is not because adding 10 to
it will yield the answer to the meaning of life, no, the reason we use 32 is
because the absolute difference between the character codes for a letter in both
cases is 32. A little explanation -- the character codes for lower case letters
in the English alphabet is a range of integers between 97 and 122 and for
uppercase letters, the range is between 65 and 90. If we take an integer at the
same index from both ranges and find the absolute difference, we will get 32.
Go ahead, try it!

With all of that out of the way, let's see some code shall we?

const convertCase = (str, charCase = "lowercase") => {
  if (charCase !== "lowercase" || charCase !== "uppercase") charCase = "lowercase";

  let res = "";
  let actions = {
    lowercase: char => {
      const res = String.fromCharCode(char.charCodeAt() + 32);
      return char.match(/[A-Z]/) ? res : char;
    },
    uppercase: char => {
      const res = String.fromCharCode(char.charCodeAt() - 32);
      char.match(/[a-z]/) ? res : char;
    }
  };

  for (let i = 0; i < str.length; i += 1) {
    let char = str[i];
    res += actions[charCase](char);
  }

  return res;
}


const toLowerCase = str => convertCase(str, "lowercase");
const toUpperCase = str => convertCase(str, "uppercase");

console.log(toLowerCase("HELLO WORLD")); // hello world
console.log(toUpperCase("hello world")); // HELLO WORLD

Our toLowerCase function and toUpperCase function both call the convertCase
function passing in the relevant arguments.

Let's walk through the convertCase function. The function takes two arguments,
the first is the string whose case we want converted and the second argument
is a string representing which case we want to convert to. At the very top of
the function, we add a guard clause to ensure the second argument is a valid
value as defined by us.

We follow that up with a variable declaration to store the result of our case
conversions, nothing too fancy. The actions object stores two functions that
will be called depending on the value passed to the second argument - this will
default to lowercase if no argument is passed or an invalid value is provided.
The lowercase method in the actions object checks using a regular expression
to see if a character is in uppercase and if it is, it converts it to
lowercase -- the uppercase function does the inverse.

We iterate through the characters in the provided string, calling the relevant
function in the actions object and appending the value to the result variable.

Finally, we return the result with the cases converted!

Originally published on my personal site