Border Change on Text Input

I've created a small input field whose border turns green when the user enters text. When the user deletes the text, the border returns to it's default color. Nothing fancy.

The structure of the page is an input field with a placeholder attribute. This one has some simple text that says, "Please type text in here ..." For the stylesheet, I imported a nice sans-serif font from the Google Fonts website using @import. To the universal selector, I've set the box-sizing to border-box which includes both padding and borders when calculating the width of an element (the margin is not included in this calculation). The input field, I've set to display:block so that I am able to easily center the field horizontally on the page using margin:auto. I've removed the default focus glow from the input field and styled it's text with the imported Google font.

The micro interaction is controlled by setting the input element to a variable, in this case I left it at input to keep things simple. Then, used this input element to add an event listener (in this case I'm using keydown) so that when we interact with the element by placing our cursor in the field and start typing, we can get the border color to change. I save the border color information to a class in the CSS file.

The event listener takes in two parameters, the first is the event and the second is the function that holds the behavior for the event. The second parameter in the event listener will run after the user does the action in the first parameter. The second parameter contains a conditional statement that states when the user types something in the input field, the border will turn green else if the field is empty it will revert to its default color. A class of .success is added to the input element via the classList property which references the .success class defined in the CSS file.

Trying out a new Javascript Design Pattern

So, lately I've been obsessed with writing beautiful, modular, well-written code. To date, I feel that I've been writing code in a reactive manner - throwing things together like spaghetti, crossing my fingers and hoping it all works. For the most part they do, barely. I've been comparing my progress with learning to write code with learning to write; or at least what I remember it was like to learn to write. Now that I fell as though I can get some sentences and even paragraphs out onto the page, I'd like to be able to construct these thoughts more elegantly.

Lucky for me, a design pattern already exists for writing beautiful, modular code -- the JavaScript Module Pattern. It's also one of the more common design patterns made popular by Douglas Crockford.

    var MYAPP = MYAPP || {};

    // arithmetic is the namespace
    MYAPP.arithmetic = (function(){
        'use strict';

        // this is a private property
        var _result = 'The result is: ';

        // this is a private function
        var _showResult = function(answer){
            console.log(answer);
        }

        return {
            addMethod: function(num1, num2){
                // console.log('this is a public method');
                var sum = num1 + num2;
                _showResult(_result + sum);
            },
            subtractMethod: function(num1, num2){
                // console.log('this is a public method');
                var subtract = num1 - num2;
                _showResult(_result + subtract);
            }
        };
     })();

    // multiplication is the namespace
    MYAPP.multiplication = (function(){
        'use strict';

        // this is a private property
        var _result = 'The result is: ';

        // this is a private function
        var _showResult = function(answer){
            console.log(answer);
        }

        return {
            multiplyMethod: function(num1, num2){
                var times = num1 * num2;
                _showResult(_result + times);
            }
        };
     })();

    MYAPP.arithmetic.addMethod(4, 8);
    MYAPP.arithmetic.subtractMethod(24, 18);
    MYAPP.multiplication.multiplyMethod(4, 8);

The foundation of a module is the anonymous closure that encapsulates the code, keeping all within it private from any conflicting code another developer may write. This closure is formally known as an immediately invoked function expression aka IIFE.

(function(){
    // all the code here
 })();

The IIFE is then assigned to a variable, which is basically the Module. In this case, I have very generically called it, MYAPP. This Module will then be used to call the methods.

var MYAPP = (function(){
    // all the code here
 })();

Since all of the methods within the Module are private, in order for them to be made public and available to the Module, we must return an Object with the methods defined within.  

var MYAPP = (function(){
    return {
        publicMethod: function() {
            console.log('The information is here is public.');
        }
    }
})();

// This will output the statement 'The information is here is public.'
MYAPP.publicMethod();

Now, let's create a private method and call it from the public one.

var MYAPP = (function(){
    var _privateProperty = 'The information in here is public';
    var _privateMethod = function(){
        console.log(_privateProperty);
    }
    return {
        publicMethod: function(){
            _privateMethod();
        }
    }
});
// This will output the statement 'The information is here is public.'
MYAPP.publicMethod();

The publicMethod allows access to the _privateMethod, providing control. In the example at the top, I've created two namespaces (just for show) within the MYAPP method - arithmetic and multiplication. In the arithmetic namespace, both the addMethod and subtractMethod allow access to the private _showResult method. On the last three lines, we interact with the different methods within the Module through the namespaces.

Algorithms | Brain Teaser

Earlier this year I decided to get a mentor. Someone who works in a robust codebase on a daily basis but is new enough to the industry to understand those challenges that come along with ramping up on data structure and algorithms. We meet weekly and he walks me through white-boarding algorithms. This is one that I learned last week. This is my second time running through the exercise. 

“You have a five-quart jug, a three quart jug and an unlimited supply of water (but no measuring cups). How would you come up with exactly four quarts of water? Note that the jugs are oddly shaped, such that filling up exactly ‘half’ of the jug would be impossible.”
— Cracking the Coding Interview, Gayle Laakmann McDowell

Let's walk through this problem. You start by filling the five-quart jug with water and pour off three into the other jug. This leaves you with two quarts of water in the five-quart jug. Then, pour out the water in the three-quart jug and fill it with the remaining two quarts from the five-quart jug. Now, the five-quart jug is empty and the three-quart jug has only two quarts. Fill up the five-quart jug with water and top up the three-quart jug with one more quart of water to fill it to the brim. The five-quart jug is left with four quarts of water. The end.

Whiteboarding on a post it

Whiteboarding on a post it

Coding Challenge | Button + Modal

Whenever I come across an interesting coding challenge, I love writing a blog post about it because it provides me an opportunity to document these milestones and its a retrospective on the code itself -- what I liked and what I could have improved. For this challenge, the user clicks a button and a modal appears.

Button

Button

Modal

Modal

So, as with most front-end problems, there is the structure (html), the style (css) and the behavior (javascript). The structure of this challenge is very straightforward with two elements: the button and the modal (see figures above). For the target element, I used a <button> tag and for the modal, I created a wrapper <div>  and inside that, placed the modal content which includes the text and close button.

<button id="modalBtn">Open Me</button>

<div id="wrapperEl">
  <div class="modalEl">
    <span class="closeBtn">x</span>
    <p>I am a pretty modal</p>
  </div>
</div>

Now, let's look at the first element. It's located at the top left corner of our browser window. The goal is to horizontally center the button in the window. In order for this button to behave the way that I have sketched,  it needs to be a block-level element.

#modalBtn {
  display: block;
  margin: auto;
}

The wrapper for the modal is an overlay that spans the width and height of the browser window. The content modal is a smaller rectangle that I've decided to let take up 25% of the browser window and given a fixed height of 200px. 

.wrapperEl {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.modalEl {
  background-color: #F2F2F2;
  width: 25%;
  height: 200px;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
}

The elements inside the modal element include a close button and some paragraph text. I've floated this close button to the right and changed its properties using a :hover pseudo-class.

.closeBtn {
  float: right;
  font-size: 1.5em;
}

.closeBtn:hover,
.closeBtn:focus {
  color: #00B16A;
  font-weignt: 700;
}

.modalEl p {
  text-align: center;
  text-transform: uppercase;
  font-size: 35px;
}

Closing out the behavior part of this problem, I use vanilla javascript to grab the button and the close button, then tell it to show/hide the modal when I click the button. I also grab the modal so the program knows what it needs to show or hide.

var btn = document.getElementById('modalBtn');
var modal = document.querySelector('.wrapperEl');
var span = document.querySelector('.closeBtn');

btn.addEventListener('click', function(e){
  e.preventDefault();
  
  modal.style.display = "block";
});

span.addEventListener('click', function(e){
  e.preventDefault();
  
  modal.style.display = "none";
});

So there we have it, we've successfully grabbed all the elements (button tag, span tag, and wrapper element) and added event listeners to the button which will be 'clicked' to show the modal as well as the close button, which has a hover state and hides the modal when clicked.

Aligning Elements on a Page | Vertically & Horizontally

Before aligning an element on a page, you should be clear about one thing: is it an inline or block level element. This will determine how the element will behave. Some examples of block-level elements include: div, aside, section, footer, h1 - h6, form and nav; there are many more. These elements take up the full width of space available (sometimes that is the full width of the screen).

In the following example, the div is positioned in relation to the container element it is housed within. The top of the element is then pushed halfway down the page, from the top of the container element (so the entire div sits just below the center horizontal line). translateY changes the position of an element along the Y-axis. In this case, it pulls the div halfway back up  (hence the negative number) .

div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

To center the div horizontally on the page, again make sure you're manipulating a block level element. Give it a width; this can be a hard pixel number or percentage of the overall width. Set the left and right margins to auto. The div will take up the space you've determined and split the remaining white space evenly between the two margins.

div {
  width: 25%;
  margin: auto;
}

There you have it, now you can simply, and with very little code position elements exactly where you'd like them on the web page. 

Temperature Converter in Vanilla JavaScript

As far as simple projects go, this one is right up there with the nest of them. I took the idea of a temperature converter and applied some visual interest. At it's core, the project is made up of two basic functions -- one to convert the temperature in each direction and the other to change the color of each temperatures' background. I wrote this project several months ago, when I was just diving into front end using vanilla javascript. I'm sure that if I were to refactor this code today, it would look much cleaner.

If you'd like to play with the actual project, check it out here.

Spot the Track

Last week I decided to embark on a side project, making a music search app using the Spotify API. It's pretty simple, you can search for songs that you like and play a 30-second sample.

Spot the Track | Uses the Spotify API

Spot the Track | Uses the Spotify API

Using the Spotify API, I made an AJAX call to the endpoint and used jQuery to get the track name from the search bar. I used Postman to figure out how to get at the track name and practiced drilling down into the data before jumping into the code. For the duration of this project, console.log and debugger were my friends. Before moving on, I made sure I was hitting the endpoint and the track name entered. 

The challenge for me, lay in getting the artist name, track name, album image and 30-second preview to render using Underscore. I'm used to using ejs (embedded javascript) with Node/Express app and the only similarity I find between the two is <% %>. What are these things called anyway?

I have  a few features and bugs to complete. You can see them here on the GitHub repo.