Let’s dive right in.

Disclaimer: before you read this and want to jump right in, here are a couple of things you should probably know (or at least be familiar with) first:

• Javascript. React is a Javascript Library so you’re gonna need to understand at least the basics. I’d recommend getting started at MDN Web Docs.
• NodeJS. For the way I’m going to set up the example React App in this tutorial, you’ll need to have NodeJs installed on your computer and have at least a basic understanding of how NPM works. But don’t let this over face use – we’ll just be using NodeJS and NPM to quickly install everything we need (and more) to get a quick install of React working (more on this later).

What is React?

React is a really popular web technology right now – and rightly so.

React is an open-source Javascript library that’s used for building quick User Interfaces (UI’s).

React was created by Facebook software engineer Jordan Walke as was first deployed on Facebook news feeds in 2011. Since then it’s been adopted on many big websites such as Instagram, Paypal, Netflix, and many more.

Why Use React?

One of the reasons why React has become so popular is that there are many advantages to using it:

• Getting started with React is quick & easy.
• It promotes a component-based design – that means code is written to be re-used and therefore building user interfaces is faster.
• Allows developers to logically see the flow of data.
• It uses a Virtual Dom which allows for better performance when it comes to user interaction and data updates.
• A special mashup of HTML and Javascript called JSX makes it easier to write code. It also makes the code easier to read and using JSX prevents XSS attacks, so it also makes the code safer. See more information about this in the React Documentation.
• ReactJs.org has great documentation and tutorials for you to follow to better understand how everything works.

Some of those advantages may not make sense to you right now and that’s okay.

Just wait until you start using it; then everything will click into place and you’ll fall in love with it just like I have.

Now that we know what React is and why it’s a good idea to use it, let’s actually take a look at getting started with React.

Getting Started with React: How to set up React

There are a few of ways to set up React:

• Import into your HTML file like any other Javascript library (note: you’ll need a couple of other libraries to get it working though – more on this later).
• Use something called Create-React-App to install a quick start React environment.
• Use Webpack (and a few other tools, libraries, etc) to create your own React environment. Don’t worry about this one for now. It’s a bit advanced for our purposes in this getting started with React article, we’ll get into this somewhere down the line.

Adding React to a Webpage like a Library

The fastest way to add React to a Webpage is to use the HTML Script tag to load into the page like any other Javascript file.

Here’s a CodePen with a working example:

See the Pen Loading React Directly into the Web Browsers by Kris Barton (@krisbarton) on CodePen.

There’s lots to unpack here.

Firstly, we need to load more packages to get it working. These packages are:

• ReactDom.
• Babel.

What is ReactDOM?

You don’t have to worry too much about this and how it works, just that you need it.

But if you want a brief explanation, the ReactJs.org documentation does a pretty good job of explaining it:

“The react-dom package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to.”

Essentially, it’s an efficient way of handling DOM elements of a webpage.

In the example above, we use ReactDOM’s render method to add a component (more on that later) to our div element (with the id of “root”).

TL;DR – Don’t worry about how ReactDOM works, just know that we’re using it and it’s pretty useful.

What is Babel?

In a nutshell, Babel is a tool that React uses to compile its code to standard Javascript so that web browsers can understand it.

Drawbacks of Setting Up React this Way

Using React this way is absolutely fine functionality-wise.

But for usability and readability? Not so much. For really small apps you might not come across any issues. For bigger apps, enhancing and updating that code is not going to be pleasant – it’s going to get out of control pretty quickly and will basically make your life harder.

So what’s the “right” way to set up React? There is no real “right” way but using a build environment makes it a whole lot easier and cleaner.

So how do you use React with a build environment? The quickest way is to use Create-React-App. Here’s how.

What is Create-React-App?

Create-React-App is basically an “out of the box” React build environment. You install this and BAM! you have a pre-made React app that contains dummy content.

This tool was created by the developers at Facebook as way for developers new to React to quickly learn how to use it.

It’s also great for prototyping – a quick start React app, full of features and functionality that’s ready to go.

Essentially, if you’re just getting started with React you should use Create-React-App.

How to set-up Create-React-App?

Create-React-App is installed on the command line and uses NodeJs and NPM (node package manager – it’s built into NodeJs).

So the first step in setting up Create-React-App is making sure you have NodeJS installed or, if you already have NodeJS installed, making sure you have the right version installed. You can check what version you’re currently using, type node -v into a command line.

You will need to have version 8.10 or higher installed in order to use this create-react-app installer. 

If you don’t already have NodeJs installed on your computer, you can download NodeJs here and install it like you would any other program.

So, what do you do to actually install create-react-app?

You install create-react-app in a command line. You can use any, but my preference is the terminal in VSCode. It’s my Code Editor of choice, so it just makes sense.

In your command line, you install create-react-app by typing the following:

npx create-react-app my-app

This goes and gets the create-react-app code and installs in a folder called my-app (if that folder doesn’t exist, one will be automatically created). And yes, you can change the folder name to whatever you’d like.

Then type this in the terminal:

cd my-app

All this does is get your terminal into the my-app folder. This is so that we can run the next bit of code, which we’ve installed in this my-app folder.

Obviously, if you’ve gone ahead and called your folder something else, change the command above to reflect that. So cd “whatever your folder is”.

Finally, we want to get the react app running.

npm start

This triggers a function in the package.json file that initializes the application. Don’t get bogged down on this bit if you don’t fully grasp what’s going on here – the more you use stuff like this, the more it will fall into place.

All you need to know for now is: it starts the React environment for you to view in a web browser.

So, if you go to http://localhost:3000/ in your web browser of choice, your app will be running and you’ll see a React welcome page.

Now that our React app is up and running, let’s take a look at some React coding concepts.

Getting Started with React: Coding Concepts

I know what you want to do.

Now the app is set up, you want to go ahead, pull it apart, and do some coding. I know, because that’s exactly what I’d want to do.

But before you do, you should check out some of core coding concepts that come with React – it’ll make your life a whole lot easier, trust me.

There are 5 main concepts:

1. JSX.
2. Elements.
3. Components.
4. Props.
5. State.

Let’s take a look at each of them in a bit more detail.

JSX

One of the first things you’ll come across when building apps in React is JSX.

What is JSX?

JSX stands for Javascript XML.

It’s a Javascript syntax expression used mostly in React. It basically allows us to easily write HTML within Javascript.

For a basic example of this:

const hello = <h1>Hello, world!</h1>;

As you can see, we’re declaring a variable as we normally would in Javascript, but the syntax after that is not common: it’s neither a string nor HTML…

…it’s JSX.

JSX isn’t essential for developing in React, but it does make life a whole lot easier.

For example, without JSX the above code snippet would need to be:

const hello = React.createElement('h1', {}, 'Hello, world!');

I think you’ll agree, just by looking at it JSX is clearly easier to write.

Expressions in JSX

JSX also allows us to write expressions and embed them in the code.

For example, what if we wanted to add introduction text to that Hello, World! greeting?

const greeting = "My name is Kris Barton.";
const hello = <h1>Hello, World! {greeting}</h1>

ReactDOM.render(
  hello,
  document.getElementById('root')
);

Let’s see this in action in CodePen:

See the Pen JSX Expressions by Kris Barton (@krisbarton) on CodePen.

With Expressions, you can embed pretty much anything from function output or equations like 2 + 2…it’s really cool.

JSX Can Used in Logic

Because JSX is compiled to Javascript, logic may be used to render elements.

What does this mean? We may use if and for statements to determine output.

For example:

function doGreeting(user) {
      if(!user.name){
        return <div>Hi there.</div>
      }
      return <div>Hi, my name is {user.name}</div>;
    }

How to Specify an Attribute in JSX

One more important thing you need to know about writing JSX code are attributes.

Much like HTML attributes may be written and assigned to a JSX element.

For example, consider this image element:

const user = {
  name: "Kris Barton",
  avatar: "img.jpg"
}
const avatar = <img src={user.avatar} alt="This is the user's avatar" tabIndex="0" className="avatar__img" />

There’s a bit to unpack here.

Firstly, you will note tabIndex and className.

In regular HTML, this would be tabindex and class respectively. Because JSX is closer to Javascript than HTML, ReactDOM uses the camelCase naming convention.

But don’t worry: it will get compiled to the attribute name you’ll be expecting by the time it get’s to a web browser.

Next you will probably note the attributes take two different types of value: a string and a value in curly braces.

Just remember:

• Attributes can take both strings and expressions.
• These attribute curly braces work in the same way as our greeting example above – as JSX Expressions. So, in the example above the <Img /> element’s src attribute will compile to <img src=”img.jpg” alt=”This is the user’s avatar” tabindex=”0″ class=”avatar__img” />

For more information and examples of JSX, check out the React docs and for a little more advanced JSX stuff, check out the Advanced JSX React docs.

Now let’s move onto the next React coding concept: Elements.

Elements

The React documentation goes a great job of describing what elements mean in React:

“An element describes what you want to see on the screen“

So, from my first JSX example above, the following is an element:

const hello = <h1>Hello, world!</h1>;

The same as the below chunk of code is an element:

const list = 
<ul>
  <li> Item One </li>
  <li> Item Two </li>
  <li> Item Three </li>
</ul>

And as you’ve seen from the CodePen examples above, we render an element by using ReactDOM’s render method.

const greeting = "Hi, my name's Kris Barton.";
const hello = <h1>Hello, World! {greeting}</h1>;

ReactDOM.render(hello, document.getElementById('root'));

As you can see, we:

• Call the ReactDOM’s render method.
• Passes in our element as the first argument.
• Then we tell it where to render the element. In this case, in an HTML element that has the id of root.

Now let’s take a look at slightly bigger concept that’s important for getting started with React: components.

Components

The concept of components isn’t unique to React, but it’s a big part of React’s DNA.

A component-based architecture allows developers to create reusable chunks of code that can easily be reused throughout a website, an app or even on the same web page.

It allows use to create code in isolation that does not need to interact with out components or aspects of the web page they’re on at all.

Again, the ReactJS.org documentation perfectly describes components in React:

“Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.”

How to Define a Component in React

In React, component’s can be defined a couple of different ways.

The first way is pretty much exactly like defining a Javascript function (don’t worry about props just yet, we’ll cover that next):

function Hello(props) {
  return <h1>Hey there, {props.name}.<h1>;
}

The second way to define a component is using Javascript ES6:

class Hello extends React.Component {
   render() {
     return <h1>Hey there, {this.props.name}.</h1>;
   }
}

How to Render a Component in React

We render a component in React pretty much how we’d rendered an element in the example earlier in the article.

function Hello(props) {
  return <h1>Hey there, {props.name}</h1>;
}

const greeting = <Hello name="Kris Barton" />;
ReactDOM.render(
  greeting,
  document.getElementById('root')
);

Let’s break down the example above:

1. We declare Hello as a component just like we would a regular Javascript function.
2. We use the props object to grab the name attribute and use JSX expressions to add it to the welcome message. More on props later.
3. Then, we use it like we would an HTML element. We declare the name attribute and give that attribute a value.
4. Then we render the component in our root div using the ReactDOM.render() method.

Components within Components

As mentioned earlier in this section, components allow us to break down our User Interface into small chunks.

So, in React we have the ability to use components within components and of course use the same component multiple times.

So using the example above, we abstract our Hello element and add it multiple times (with different names) to another function. Then, we’ll use ReactDOM to render everything.

That looks a little like this:

 function Hello(props) {
  return <h1>Hey there, {props.name}</h1>;
}
    
    function App() {
      return (
        <div>
          <Hello name="Joe Montana" />
          <Hello name="Jim McMahon" />
          <Hello name="Terry Bradshaw" />
        </div>
      );
    }

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Let’s take a look at a working version of that code:

See the Pen Rendering Components in React by Kris Barton (@krisbarton) on CodePen.

I think that covers components pretty well, let’s move onto Props.

Props

We’ve already already used examples of Props earlier in the article and by now you’ll probably have a good idea what they are.

Here’s a quick Props overview:

• Props stands for properties.
• Props are arguments that are passed into React Components, which are then used in those React Components.
• Props are immutable. Meaning they’re read-only – we can display and use them, but not alter them.
• Props are just regular Javascript objects.

Let’s take one of the components we created and passed props into in the last Components example.

<Hello name="Joe Montana" />

Here, we declare an iteration of the Hello component and pass name into the component as props.

Inside the component, we have access to the value of name by accessing props.name. Like this:

function Hello(props) {
  return <h1>Hey there, {props.name}</h1>;
}

The naming is like for like: so we declare the attribute as name and access in the props as props.name. If we decided that we wanted to add an age attribute, we’d declare it like this:

<Hello name="Joe Montana" age="64" />

And access it using props.age. So let’s apply this to the component:

function Hello(props) {
  return <h1>Hey there, {props.name}. I'm {props.age} years old.</h1>;
}

Now let’s take a look at that in our CodePen.

See the Pen Adding the Age Props by Kris Barton (@krisbarton) on CodePen.

Essentially…

You can think of props as an object in which of the component attributes are stored.

Now it’s time to look at another important concept that you absolutely need to know when getting started with React.

State

What is state in React? Here’s a quick overview:

• State is a Javascript object that stores all of a component’s dynamic data and determines behaviour.
• When the state object changes, the component re-renders.
• State can only be used in a Class component out of the box. For a functional component, React Hooks may be used instead.
• The state handles the component that it’s declared and used in.

Sounds a bit like a prop, right?

What’s the difference between Prop and State?

I think the explanation from the React Documentation is the best:

“props (short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).“

I think a good demonstration of state within a component is a Timer function.

Consider the below React component.

class Timer extends React.Component {
    constructor(props) {
      super(props);
      this.state = {date: new Date() };
    }

   render() {
     return <h1>Current time: {this.state.date.toLocaleTimeString()}.</h1>;
   }
}
     
ReactDOM.render(
  <Timer />,
  document.getElementById('root')
);

A couple of things to note:

• When using a constructor, props have to be passed in using super(props) – don’t worry about this just yet.
• We declare the state in the constructor using this.state = {date: new Date()}.
• We display the name using a JSX expression pretty much the same way we did props with this.state.date.
• We render the component in the exact same way as before – passing it into ReactDOM.render() and pushing it our div with an id of root.

The example above captures the state on page load and renders the output – in this date the current time.

But state can be updated within a component. Most commonly, this is through user interaction – a button click, a form input or something like that.

And to do this, we use the this.setState() option.

So:

• We use this.state on initialization in the construction function. i.e. this.state.date = new date().
• We use this.setState() to update the state. i.e. this.setState( date: new date()).

So let’s update our example above so we change update the time to update in real time.

class Timer extends React.Component {
    constructor(props) {
      super(props);
      this.state = {date: new Date() };
    }
    
    componentDidMount() {
      this.timerId = setInterval(
        () => this.updateTime(),
        1000
      );
    }
    
    componentWillUnmount() {
      clearInterval(this.timerId);
    }
    
    updateTime() {
      this.setState( { date: new Date() } ) 
    }

   render() {
     return <h1>Current time: {this.state.date.toLocaleTimeString()}.</h1>;
   }
}
    
ReactDOM.render(
  <Timer />,
  document.getElementById('root')
);

Let’s walk through the code a little.

You’ll notice:

• We’ve added a function called updateTime() in which we update the state of the component. i.e. we set it to the current time.
• We’ve added a React Lifecycle method called componentDidMount(). This is a part of the React library and it’s basically a function that fires when the component is mounted i.e. when the page is first loaded.
• In componentDidMount() we’ve set up a standard Javascript setInterval function that fires our updateTime function every second.
• We also used the componentWillUnmount React Lifecycle method that clears the interval.

Don’t worry about the React Lifecycle stuff just yet – I’ll cover that in another article later. All you need to know is that the state updates as intended.

Here’s a working CodePen showing this functionality in action:

See the Pen Using State in React by Kris Barton (@krisbarton) on CodePen.

Are You Set For Getting Started With React?

Hopefully this article has given you a good idea for getting started with React, but remember: the learning doesn’t stop here.

There’s a lot more to learn with React, but this article is a great start.

You might be asking yourself: what’s next? What’s next for learning React?

Next Steps for getting started with React are:

• Read through the React Documentation from back to front.
• Once you’ve installed create-react-app as mentioned earlier in this article, pull it apart and try to see how it all hangs together.
• Come back and check out more React articles here.

Further Reading

Below is a list of resources we’ve used in our Getting Started with React article:

• ReactJS Documentation.
• ReactJS Tutorials.
• Create React App.

Let’s examine these Javascript methods and see what each of them can do.

Using Javascript to Add to an Array with Array Push

The array.push() Javascript method allows you to easily add a value to the end of an array. Here’s how it works:

let items = [‘item1’, ‘item2’];
items.push(‘item3’); 
//Output: item1, item2, item3

As you can see from the example above, adding a value to the array is as simple as adding the .push() method to your declared array variable and placing the value you want to add inside it.

It really is that simple.

But what if you wanted to use Javascript to add multiple items to an array? The array.push() method can totally do that too.

let items = [‘item1’, ‘item2’];
items.push(‘item3’, ‘item4’); 
//Output: item1, item2, item3,  ‘item4’

Pretty easy, right? Let’s take a look at the array.unshift() Javascript method in action.

Using Javascript to Add to an Array with Array Unshift

The array.unshift() Javascript method is the polar opposite of array.push(), allowing you to add values to the start of any array. Here’s how it works:

let items = [‘item1’, ‘item2’];
items.unshift(‘item3’); 
//Output: item3, item1, item2

As you see from the example above, the array.unshift() method works exactly like the array.push() method. You attached the .unshift() method to our array variable and then place the value we want to add to the array inside it.

Again, super simple to use.

And like the array.push() Javascript method, array.unshift() allows for multiple items to be added to the start of the array:

let items = [‘item1’, ‘item2’];
items.push(‘item3’, ‘item4’); 
//Output: item3, item4, item1, item2

Using Javascript to Add to an Array with Array Splice

But what if you wanted to add a value to an array, but in a specific place? Well, you could use the array.splice() Javascript method to accomplish that.

With array.splice() you can add values to an array, but you could also replace items too.

The syntax of the Javascript method is this:

array.splice(index, howmany, newvalues);

It breaks down like this:

• The index refers to the location within the array where you want to place any new items.
• The howmany refers to the number of items you’d like to replace (0 means you remove nothing just add items).
• The newvalues refers to any new values you’d like to add to the array.

So for example, let’s say I have an array like this:

let items = ['item1', 'item2', 'item4', 'item5']; 

And I want to add a value of ‘item3’ in between ‘item2’ and ‘item4’. Then you would do this:

items.splice(2, 0, 'item3');
//Output item1, item2, item3, item4, item5

But what if I wanted to add that new value into the array, but remove the last 2 items? Then this would do the job:

let items = ['item1', 'item2', 'item4', 'item5'];
items.splice(2, 2, 'item3');
//Output item1, item2, item3

Of course, using the array.splice() Javascript method, you’re reliant on already knowing what the index is of the value you want to include.

Splicing Into an Array at a Specific Place Based on an Array Value

What if you didn’t know the index of where you wanted to splice in a new value? What if you wanted to add the value ‘item3’ after ‘item2’, without knowing where in the array ‘item2’ actually is?

Well, we could do a for loop to help us out with that:

let items = ['item1', 'item2', 'item4', 'item5'];
let position = 0;

for(let i = 0; i < items.length; i++) {
    if(items[i] === 'item2') {
      position = i+1;
    }  
} 

items.splice(position, 0, 'item3');

//output of items is item1, item2, item3, item4, item5;

As you can see from the example above, I’m setting up two variable first, the array itself and a placeholder variable which will store the position in the array we’re going to include our new value.

Then, we loop through the array using the Javascright .length function and standard increment variable. Inside the loop, we’re access each item of the array and checking for our item2 value. When our value has been found, set our position variable to be the next item.

We’re doing this because we want to insert our item after ‘item2’ – if we wanted to insert it before ‘item2’, we wouldn’t need to increment the iteration number by 1 to mark the position.

Then, outside the loop, we’re splicing the array. We’re using the position value we obtained with the loop as the index where we want the splice to happen, we’re setting a remove value of 0 because in this case we don’t want to cut any values out of the array and finally we’re declaring what value we’d like to insert.

Using Javascript to Combine Arrays

What if the value we’re trying to add to the array is actually another array? What do we do then?

Then we use the array.concat() Javascript Method. It works like this:

let arr1 = ['item1', 'item2'];
let arr2 = ['item3', 'item4'];

let items = arr1.concat(arr2);
//Output of items is: item1, item2, item3, item4.
//Output for arr1 is: item1, item2.
//Output for arr2 is: item3, item4.

Combining arrays in Javascript is as simple as the above example and much like other examples of adding values to arrays, more than 2 arrays can be combined.

Like this:

let arr1 = ['item1', 'item2'];
let arr2 = ['item3', 'item4'];
let arr3 = ['item5', 'item6'];
let arr4 = ['item7', 'item8'];

let items = arr1.concat(arr2, arr3, arr4);
//Output of items is: item1, item2, item3, item4, item5, item6, item7, item8.
//Output for arr1 is: item1, item2.
//Output for arr2 is: item3, item4.
//Output for arr3 is: item5, item6.
//Output for arr4 is: item7, item8.

Pretty cool and and easy stuff, right?

The array.concat() Javascript function works by create a new array based on all the arrays combined. It places the array items in the newly create array the order in which they’re included.

So what that means is because we declare arr1 as the starting array, the values for the new array will begin whatever values were held with the arr1 array.

To demonstrate what I mean by this, let’s change up the code a little:

let arr1 = ['item1', 'item2'];
let arr2 = ['item3', 'item4'];
let arr3 = ['item5', 'item6'];
let arr4 = ['item7', 'item8'];

let items = arr2.concat(arr1, arr3, arr4);
//Output would be: item3, item4, item1, item2, item3, item4, item5, item6, item7, item8.

The output changes because in this example we’re starting with arr2 which contains values ‘item3’ and ‘item4’.

Equally, if we change the order in which we list the arrays within the concat function we’d get a different output.

let arr1 = ['item1', 'item2'];
let arr2 = ['item3', 'item4'];
let arr3 = ['item5', 'item6'];
let arr4 = ['item7', 'item8'];

let items = arr2.concat(arr3, arr4, arr1);
//Output would be: item3, item4, item3, item4, item5, item6, item7, item8, item1, item2.

Conclusion

With Javascript there are a number of ways you can add a value (or values) to array, it really just depends on how you want to add those values to your array and how complex it needs to be.

If you need to know more information about removing values from an array, then I do recommend you check out our Javascript Remove from Array article.

For more information about everything we’ve discussed above, check out the further reading below.

Further Reading:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
• https://www.w3schools.com/jsref/jsref_push.asp
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
• https://www.w3schools.com/jsref/jsref_unshift.asp
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
• https://www.w3schools.com/jsref/jsref_splice.asp
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
• https://www.w3schools.com/jsref/jsref_concat_array.asp

• getElementsByClassName()
• querySelectorAll()

But there are a few things you might want to consider before you implement either of these methods.

Let’s take a closer look.

Using Javascript to Get an Element by Class

The first way to use Javascript to get an element by class is to the getElementsByClassName method.

This method is used to get a group of elements by a particular class name. All elements, regardless of type, will be returned in an array-like object which can be accessed in a variety of ways.

Elements can then be accessed how you would normally access arrays in javascript – directly or dynamically, depending on your requirements.

Why a Group of Elements and Not Just One?

The getElementsByClassName Javascript method returns a group of elements in an array object rather than just one because classes are designed to be used multiple times on any given webpage and are used as such.

If you know there will always be one identifier for one element, then it would be better to use the ID attribute to access the element with the getElementById Javascript method. Or you could also use custom Data Attributes and use the querySelector Javascript method to access the element.

But what if you’re dealing with dynamic data? What if you don’t know how many elements there are? What if there could be one element or many elements and you need to anticipate that?

In this scenario, the getElementsByClassName Javascript method is absolutely an acceptable way to do so.

So let’s take a look at it in action.

Using get Elements By Class Name Javascript method to get an element by class

This is the scenario: we have 4 divs with the same class and we want to collect them together to be able to access them.

Here’s what the divs look like:

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div> 

Here’s how we collect them using getElementsByClassName:

const items = document.getElementsByClassName('item');

If we were to console log the items variable, we’d get the following output:

HTMLCollection(4) [div.item, div.item, div.item, div.item]

0: div.item
1: div.item
2: div.item
3: div.item
length: 4
__proto__: HTMLCollection

As you can see, this function has collected all of our elements with the item class together and output them into an array. Now, we can access the collections like we would an array:

We have access to the the length property, so we can count how many elements on the page have the item class:

items.length;
//Output is 4

Like any array, we can access any of the items directly:

Items[0]
//Output is: <div class="item">Item 1</div>

Or we can loop through the array:

for(let i = 0; i < items.length; i++) {
console.log(items[i]);
}
//Output is:<div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div>

Multiple Class Names

But there’s a little more cool functionality to the getElementsByClassName that you might not be aware of: the method accepts multiple class names.

So imagine that you have a set of elements with the same class, but you wanted to filter elements out by a second class.

Take these elements for example:

<div class="item dogs">Item 1</div>
<div class="item cats">Item 2</div>
<div class="item fish">Item 3</div>
<div class="item fish">Item 4</div>

It’s pretty much the same as before, but each element has a second class – an animal class. Let’s say we wanted to select all the elements that have the item class that also have the fish class.

We’d do this:

const filterItems = document.getElementsByClassName('item fish');
//Output: <div class="item fish">Item 3</div> <div class="item fish">Item 4</div>

Now let’s say we altered our elements to add a class for the animals that are still currently on sale or have been sold:

<div class="item dogs sale">Item 1</div>
<div class="item cats sale">Item 2</div>
<div class="item fish sale">Item 3</div>
<div class="item fish sold">Item 4</div>

And we want to see all the fish that are for sale:

const saleItems = document.getElementsByClassName('item fish sale');
//Output: <div class="item fish sale">Item 3</div>

That’s pretty useful, right?

You can check out the Codepen I used for this demonstration here; fork it and have a play around!

Now, let’s take a look at the querySelectorAll Javascript method and see how we can use this to achieve the same results.

Using querySelectorAll

Another way you can use Javascript to get an element by a class is to use the querySelectorAll Javascript method.

The difference between the getElementsByClassName and querySelectorAll Javascript methods isn’t that much when it comes to getting elements by a class name.

Overall, however, the querySelectorAll method is more powerful and allows you to grab pretty much any element by pretty much any means imaginable.

What I mean by that is you can use this method to select an element by class, id, element type, data attribute or a combination of those elements.

Let’s take a look at the the querySelectorAll Javascript method in action.

First, let’s define our elements:

<div class="items">
<div id="1" data-type="fish" data-status="sale" class="item">Fish 1 for Sale</div>
<div id="2" data-type="doggo" data-status="sale" class="item">Doggo 1 for Sale</div>
<div id="3" data-type="doggo" data-status="sold" class="item">Doggo 2 sold</div>
<div id="4" data-type="fish" data-status="sale" class="item">Fish 2 for Sale</div>
</div>

You’ll notice this time I’ve been a little creative with my elements, adding both IDs and data attributes to them.

Now, let’s take a look at some of our queries in action. First, we’re going to use querySelectorAll to get all the elements with the item class.

let items = document.querySelectorAll('.item');
//Output 
NodeList(4): 
div#1.item: 
div#2.item: 
div#3.item: 
div#4.item
length: 4__proto__: NodeList

This will return all 4 divs with the item class.

Interestingly, we’d get pretty much the same result with any of the following querySelectorAll queries:

let items = document.querySelectorAll('[data-type=”fish]');
let items = document.querySelectorAll('div.item'); 
let items = document.querySelectorAll('[data-status]');
let items = document.querySelectorAll('#1, #2, #3, #4, #5');

There are a couple of things to note in the examples above.

The div.Item

The first is that we had to use div.item there. If we used just div, the parent element would’ve been included too, as it’s also a div.

Accessing Data Attributes

The second is the way in which you call data attributes with querySelectorAll. Data attributes are to be wrapped in square brackets and can be called just based on the data attribute itself or the data attribute and its value.

As you can see from the example above, I’ve used both methods. The first is to get all of the elements that have a data-type of “fish” and the second is to get me all elements with the status data attribute.

I go into a little more detail about access Data Attributes in my Javascript Get Data Attribute article – it’s well worth a read if you’re interested.

Accessing IDs

IDs have to be accessed by naming them all like in the example above. There is no way to just select every element that has an ID and other methods, such as data attributes or classes are a better way of getting access to a collection of elements in this manner.

Javascript Get Element By Class: Conclusion

If you want to access a group of elements in Javascript by class, then using the getElementsByClassName or querySelectorAll methods are your two best options. Both return the same results, BUT the getElementsByClassName method is faster according our performance tests.  

However, if your goal is to get just one element then the getElementsByClassName is probably not your best option. Getting the element by its ID or data attribute is, depending what attributes the element holds.

Further Reading:

• W3Schools
• Mozilla Get Elements By Class Name
• Mozilla Query Selector All

Is this you (but without the cursing)? Don’t worry – I feel your pain. No matter how many pop-ups or fixed navigation systems I make, I always seem to forget the golden rule with the CSS z-index selector: they only work on specifically positioned elements.

Gets me every single time.

TL;DR: the most common cause for z-index not working is not explicitly declaring a CSS position value (i.e. position: relative, absolute, fixed or stick) on the element.

But if this hasn’t solved your z-index issue or just want to get a little more information about the CSS property, then let’s go a little deeper.

What’s a CSS z-index?

I think the W3Schools definition of the z-index property sums it up the best:

“The z-index property specifies the stack order of an element.”

W3Schools –
https://www.w3schools.com/cssref/pr_pos_z-index.asp

This basically means you can use this CSS property to stack items on top of each other.

Another good way I like to look at it is: it’s basically the concept of layers for websites.

If you’ve ever used any kind of decent image editing/creation software like Photoshop, GIMP or maybe even Canva, then will no doubt have come across the concept of layers: the ability place images, shapes, text and anything else you might use on top of each other to create a stunning effect or display.

That’s what the CSS z-index property can do for your website design.

I’ve set the positioning, but my CSS z-index is not working!

Okay, you’ve read the section above and have a pretty good grip on the concept of the z-index property. You’ve also set a CSS position value on the element, but your CSS z-index is still not working.

What now?

Well, the next thing to investigate is the order of your HTML elements and how you’ve applied your z-index property to them.

Here’s a pretty good example how the CSS z-index works in a real-world scenario that might just fix your problem.

How does the CSS z-index Property Work?

The CSS z-index property works by assigning the property with a numeric value to any element.

The property can take large numeric values, as well as minus values should you want to position elements further back in the stack.

An element without a z-index specifically assigned to it, automatically inherits in the z-index of its parent and if the parent element doesn’t have a value set, then the default z-index is 0.

Here’s a visual demonstration of how it works:

  See the Pen 
  Help! My z-index isn't working! The Web Developer Guide by Kris Barton (@TheWebDeveloperGuide)
  on CodePen.

As you can see from the example above, we’re trying to position both layer 1 and layer 2 to the top left of the base layer. To do this we’re using the absolute positioning CSS property along with the z-index property.

As you can see, the orange layer (layer 2) is the layer on top. This is because we’ve set the z-index for the layer to 2. The blue layer (layer 1) is set to a z-index of 1, so layer 2 will be displayed on top.

But what if we set layer 2 to have a z-index of 1? You might think that layer 1 would take precedence and layer 2 would be hidden behind it, but that’s not what happens.

Because layer 2 uses absolute positioning and its HTML element is underneath layer 1, it takes precedence. This can be tested by moving layer 1’s element underneath layer 2.

Now, if we alter the layer 2 z-index to have a value of 2 rather than 1, layer 2 takes precedence again because we’ve explicitly stated it should be place higher than layer 1 in the CSS.

Very interesting stuff (at least, it is for geek like me).

What can you do with a z-index?

Okay, so there’s the basic functionality of the z-index CSS property so let’s take a look at some real world examples.

Let’s say we want to create a fixed navigation menu that hovers over the main page content. Then, whenever an option is clicked a sub menu is displayed over the top of the floating navigation menu and the main content. This is a scenario where the z-index CSS property becomes essential.

To do this, we’ll be using HTML5, CSS and Javascript – click here to jump to the codepen (a codepen embed can’t do this bad boy justice).

Z-Index: Get Your Layers Right!

As you can see from the code demo, I’m setting the z-index in 2 places:

1. I’m setting the main navigation panel to have a z-index of 1.
2. I’m setting the sub navigation panels to have a z-index of 2.

I want the layering of my elements to be the sub navigation links on the top, then the navigation and finally the content behind them. This could’ve been achieved a little easier than I’ve done it in this example, but I wanted to demonstrate the z-index element hierarchy in action.

I’ve included the HTML elements in this order:

1. Sub navigation links.
2. Navigation panel.
3. Content.

Because I’ve added the sub navigation links first, I have to specifically assign them a higher z-index than the navigation panel. This is because if the second element has the same z-index, it will take precedence over the first and will overlap it.

In our example, it would mean the sub navigation links would be hidden behind the navigation panel.

Conversely, if I move the sub navigation below the navigation panel and changed its z-index to 1, then the sub navigation items would still overlap the navigation panel.

Pretty interesting stuff once you break it down and examine it. Feel free to fork my codepen and have a play around with the elements yourself.

Top Tip: Think About Your z-index Elements In Advance When Planning Your Website

When creating a website, you might find yourself with a number of different elements that will need to be layered and overlap on the same page, sometimes at the same time.

Start Planning

It’s worth planning in advance the order in which your z-index elements should take precedence. For example, should your popup box be able to overlap your navigation element? Or should it be the other way around.

I say this because a lot of developers will automatically set the z-index of an element to a high number (something like 999) and this okay because it’s definitely going to overlap the page with such a high value, but doesn’t take into account scenarios where you have two or more overlapping elements action and open at the same time.

Let me hammer home that point in meme form:

This might not ever be a scenario you need to worry about, but if you think it might be then it’s a good idea to come up with a more sensible z-index valuation system.

For example, you can always image the base layer of your website to have a z-index value of 0. Set the next value you’d like to overlap to have a z-index value of 1. If then you decide you need another element to overlap and it’s more important to the user to display it over the top of the previous overlapping element, then set it to 2 and so on.

This way, you can always guaranteed the right overlay will be displayed to the user.

Further Reading:

• https://www.w3schools.com/cssref/pr_pos_z-index.asp
• https://css-tricks.com/almanac/properties/z/z-index/
• https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
• https://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property–webdesign-16892

Perhaps array.remove() is a thing? You think, hopefully. That would be REALLY useful..

Guess what. It’s not a thing and that, quite understandably, frustrates you.

You think, Well, what the hell should I do then?

Let’s take a look at your options.

Javascript Remove First Item from Array with the Shift Method

Before we get into some of the more complex methods of removing items from an array, it’s probably a good idea to start with the basics – removing the first item of an array.

This can be achieved quite easily with the Javascript Shift method. Let’s take a look at an example:

Let items = [‘item1’, ‘item2’, ‘item3’];
items.shift(); // will get you [‘item2’, ‘item3’]

And to add an item to the start of the array, you use the unshift Javascript method. Let’s take a look at that in action:

Let items = [‘item2’, ‘item3’];
items.unshift(‘item1’); // will get you [‘item1’, ‘item2’, ‘item3’]

Pretty straightforward stuff, right? Now let’s take a look at removing the last item from an array.

Javascript Remove Last Item from Array with the Pop Method

As you might have already guessed, this Javascript method is just as straightforward as the shift method.

It’s called pop and it works in the exact same way as shift. Let’s take a look:

Let items = [‘item1’, ‘item2’, ‘item3’];
items.pop(); // will get you [‘item1’, ‘item2’]

To add an item back to the end of the array, you use the push method, like this:

Let items = [‘item1’, ‘item2’];
items.push(‘item3’); // will get you [‘item1’, ‘item2’, ‘item3’]

But removing an item from anywhere within the array? That’s where things get a little bit more complex.

Javascript Remove from Array with Splice Method

We’ll start with the most common method for removing an item from an array: splice.

What is the Javascript splice method? The MDN Web Docs definition is:

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

You basically use the splice to determine three things:

1. Which part of the array you want to change – it’s index.
2. How many items in the array you want to remove.
3. The new item you want to insert into the array.

So the syntax for the splice method is like this:

array.splice(index, howmany, replacement items);

So let’s take a look at a standard splice method in action. The scenario is, we have an array of items and we want to replace the second item in the array with a different item.

Let items = [‘item1’, ‘item2’, ‘item3’];
 
items.splice(1,1,’item4’); // Will get you [‘item1’, ‘item4’, ‘item3’] 

Here, I’m telling the splice method to index 1 and replace 1 item with the ‘item4’ value.

But wait. If you’re starting at index 1, why is it the second item in the array that’s being replaced rather than the first? You might be thinking.

Good question. It’s because the array index actually starts at 0, not 1. So in our array, it would go 0 = ‘item1’, 1 = ‘item2’, 2 = ‘item3’.

Let’s test this by changing the 1 to a 0 in our splice method.

Let items = [‘item1’, ‘item2’, ‘item3’];
items.splice(0,1,’item4’); // Will get you [‘item4’, ‘item2’, ‘item3’] 

Complex Array Splicing

We’ve used the Javascript splice method to replace an item in an array, but what if you just wanted to remove an item? What then?

Well then you just don’t stipulate the replacement item.

Let items = [‘item1’, ‘item2’, ‘item3’];
items.splice(1,1); // Will get you [‘item1’, ‘item3’] 

Pretty straightforward so far, right? So why can this be complex?

What if you wanted to remove an item from an array, but didn’t know the index of the item within the array? It’s a likely scenario, especially when dealing with dynamic content.

So how can we accomplish this? We’ll need to do three things:

1. We’re going to need to loop through the array.
2. We’re going to need to check the value we want to remove against all the values in the array.
3. If we find the value in the array, we need to remove it from the array.

Let’s take a look how we can do this:

let moreItems = [1, 2, 3, 4, 5];
let removeItem = 3;

for (i = 0; i < moreItems.length; i++) {
  if(moreItems[i] === removeItem) {
    moreItems.splice(i,1);
  }
}
// will get us [1,2,4,5]

Okay, let’s run through what I’ve done here.

First of all, I’ve defined our array and then I’ve defined the item we want to find in our array and remove.

Then I’ve run through the array using the Javascript for loop. I’ve created a variable, called it i and set its initial value to 0. Then I’ve told the loop to run through the array until the end of the array, which I’ve dynamically determined using the .length Javascript method. Then I’ve set the loop to increment my i variable by 1 for every loop until it reaches the length of the array.

Inside the loop, we’re using our i variable as an index for our variable and then comparing each array value to the value we’re searching for.

If we find a match, we use that i variable as our splice index and remove it from our array.

Then the loop continues, because you never know when there might be more of those values we want to remove.

Let me demonstrate by adding more items to the array.

let moreItems = [1, 2, 3, 4, 5, 2, 6, 7, 3, 8, 9, 6];
let removeItem = 3;

for (i = 0; i < moreItems.length; i++) {
  if(moreItems[i] === removeItem) {
    moreItems.splice(i,1);
  }
}

// will get us: [1,2,4,5,2,6,7,8,9,6]

But our fun with removing items from a array doesn’t end there. There is, in fact, a slightly better way handle item removal with the Javascript filter method.

Javascript Remove from Array with Filter Method

The Javascript filter method accomplishes what our splice method inside a FOR loop did, just with slightly less lines of code and without actually having to use a for loop. The filter method also allows for a little more added cool functionality in case we wanted to be a little clever.

First, let’s take a look at how we can use the filter method to remove items from an array.

let moreItems = [1, 2, 3, 4, 5, 2, 6, 7, 3, 8, 9, 6];
let removeItem = 3;

moreItems = moreItems.filter(item => item !== removeItem);
// will get us: [1,2,4,5,2,6,7,8,9,6] 

With the Javascript filter method, that’s literally all there is to it.

Let’s take a look what’s going on here:

1. We’re re-assigning our array to contain the filtered items.
2. Then the filter method will search through each item in our array and we declare a variable for each item (in the example above, we call it item, but it could be called anything you like) and compares it against the value we want to remove.
3. If the item is not equal to the item we want to remove, we keep it.

One other thing to note about the example about is the use of the Javascript Arrow function (=>). If you’re unfamiliar with it, the Arrow Function isn’t a part of the Javascript Filter method – it’s actually the new fangled way of writing functions in ES2015 Javascript. Therefore, this piece of code will not work in Internet Explorer at all (but it does work in Edge). For more information on what browsers do currently support this, check out CanIUse.

So, the above ES2015 written code is basically this in old Javascript:

 moreItems = moreItems.filter(function(item){
  return item !== removeItem;
});

Makes sense, right?

There are also a few extra cool things you can do with the Javascript method which might appeal to your array item removal needs – you can set conditions.

For example, say we only wanted items in the array that was bigger than 3. We could do this:

var biggerThan = function(value) {
  return value > 3;
}

moreItems = moreItems.filter(biggerThan);
// will get us [4,5,6,7,8,9,6]

Here we create a function that accepts a value and returns the value if it’s bigger than 3. We pass this function into our filter method and the filter method knows to access the biggerThan function with each item in our array and filter out the unwanted values accordingly.

Pretty cool, right?

Conclusion

So what’s the best way of removing items from an array?

Personally, I prefer using the filter function over the splice function because it’s less code and I think it’s a nicer way to go about things. BUT, if I was ever in a situation where I just wanted to remove the first or last item from my array, I’d use the shift and pop Javascript methods accordingly.

I guess my point is, the best way to use Javascript to remove items from an array depends on what exactly you need to do and your situation.

Further Reading:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#Polyfill
• https://www.w3schools.com/jsref/jsref_splice.asp
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
• https://alligator.io/js/push-pop-shift-unshift-array-methods/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
• https://www.w3schools.com/jsref/jsref_filter.asp
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

But if you want a bit more information about using Javascript to get Data Attributes, then let’s get started.

HTML5 Data attributes are a really cool and useful way of storing more information in your HTML code and help extend the front-end functionality of a webpage or mobile app.

But how do you use Javascript to get the data attribute?

Let’s take a look.

What is a Data Attribute?

Firstly, let’s define what I mean by Data Attribute to make sure we’re all on the same page.

Data Attributes are custom HTML attributes that can be added to any HTML5 item and allow us to store extra information we can use and manipulate.The data is localised to the web page or application they’re on and therefore can only be manipulated on that web page or application.

So what data can or should be stored using Data Attributes? What is the correct syntax to use? When should Data Attributes be used?

Let’s take a look at a couple of Data Attribute pointers / best practices directly from W3C to answer those questions:

• Data tags should begin with the data- prefix and must contain at least one character after the hyphen. For example, data-tag or data-nav etc.
• Custom Data Attributes should only really be used to store custom data and are not intended to replace existing HTML attributes and elements.
• Data Attributes will work on any HTML element.
• Each HTML element can have any number of Data Attribute properties.
• Data Attributes can have any value.

A Real-World Example of Data Attrbutes

Let’s take a look at a real-world example of the HTML5 Data Attribute syntax and what you might use it for:

<a id='link-1' 
   data-link='1' 
   data-target='1' 
   data-product-title='Worship Coffee T-Shirt' 
   data-product-img='product.jpg' 
   data-product-link='https://www.thewebdeveloperguide.com' 
   class="link'>
Worship Coffee Tee</a>

In the example above, we have a regular HTML anchor tag. It has a standard HTML ID and Class, but as you can see it has a number of HTML5 Data Attributes too.

Some of these Data Attributes are out of context and are meaningless at this point, but others are a little more obvious.

In our real-world example we’re going to be making a simple item picker using these HTML5 Data Attributes and Javascript. We’re going to create links and a content area and the idea is we’re going to use the data we store in the above anchor tag’s Data Attributes to build our display.

Let’s take a look at the Data Attributes in a little more detail:

• A data-link attribute to help us identify the link from the others (we’ll be adding more links later).
• A data-target attribute, which we’re going to use to work out where we’re going to build our display.
• A data-product-title attribute, which is going to contain the name of our product.
• A data-product-img attribute which is going to contain the location of the image we want to display.
• A data-product-link attribute which is going to contain a link to where the user can buy the product.

Now we’ve stored our data using Data Attributes, let’s take a look at how to access and use it.

How Can I Use Javascript to Get a Data Attribute?

There are a couple of different ways to use Javascript to get a Data Attribute:

1. Using the .dataset property.
2. Using the .getAttribute property.  

Okay, so what’s the difference between the two? The answer is: not much. Obviously, the syntax is a little different for each property but they can be used to basically do the same thing: extract data.

The main difference is that the dataset property is solely for accessing custom data in Data Attribute, whereas the getAttribute property is to get data from any attribute within an HTML element.

Interestingly, each of the methods have slightly different performance results. Using the .dataset to get all of the dataset attributes was a little faster than using .getAttribute, HOWEVER, using getAttribute to access a single Data Attribute was actually faster.

Also, both properties are pretty much fully supported:

• Dataset Browser Support.
• getAttribute Browser Support.

In terms of which property is better to use, I think it pretty much comes down to personal preference so let’s take a look at both methods in action.

Using Javascript Get to a Data Attribute using Dataset

The first thing we need to do is to grab the HTML element so we can access it’s properties. There are a couple of ways you can do this using Vanilla Javascript:

1. Get the element by its id using the Javascript document.getElementById function.
2. Or grab the element by a dataset itself using the Javascript document.querySelector function.

Let’s take a look at that in the code.

First, here’s a little reminder of the HTML element we want to access.

<a id='link-1' 
   data-link='1' 
   data-target='1' 
   data-product-title='Example Product' 
   data-product-img='product.jpg' 
   data-product-link='https://www.thewebdeveloperguide.com' 
   class="link'>
Worship Coffee Tee</a>

Here’s how we get the element by its ID using the Javascript document.getElementById function:

const link = document.getElementById('link-1');

And here’s how we get the same element by a Data Attribute using the Javascript document.querySelector function:

const link = document.querySelector('[data-link="1"]');

In the above example, I used the data-link Data Attribute as the hook to grab the element in Javascript because that’s what I intended the function of that Data Attribute to be. However, I could’ve grabbed the element using any of the Data Attributes in that element with Javascript document.querySelector – include the class attribute.

Now that we have the HTML element, let’s access a couple of our Data Attribute’s using the Javascript Dataset property.

link.dataset.target
// This will get us 1

link.dataset.productTitle
// This will get us 'Example Product'

link.dataset.productImg
// This will get us 'product.jpg'

Did you notice the dataset syntax in both of those examples? The prefix of data- is removed and the attribute name remains. For the second Data Attribute the dash is removed and converted to a camelCase format.

This is because the functionality uses DOMStringMap to handle key transformations.

Using Javascript to Get a Data Attribute using getAttribute

Now let’s get our custom data from the Data Attribute using the getAttribute Javascript function.

We still have to get the element using either the document.getElementById or document.querySelector functions like before, but we access the data like this:

const link = document.getElementById('link-1');

Or like this:

const link = document.querySelector('[data-link="1"]');

So now we get the Data Attributes by:

link.getAttribute('data-target');
// This will get us 1
 
link.getAttribute('data-product-title');
// This will get us 'Example Product'

link.getAttribute('data-product-img');
// This will get us 'product.jpg' 

Again, you’ll notice the syntax used to grab the Data Attribute is completely different from using the dataset function. When using the getAttribute function, you have to use the full Data Attribute term to access its content.

This is because the getAttribute function is able to access all the attributes in the element (like the class element for example), not just Data Attributes.

Bonus: Access Data Attributes using CSS

While we’re on the subject of Data Attributes, it’s also worth mentioning that you can access and style them directly using CSS. Here’s a really basic example:

See the Pen Styling Data Attributes Directly by Kris Barton (@TheWebDeveloperGuide) on CodePen.

Okay, so this functionality may have limited use in real-world coding but it’s certainly a cool little bit of functionality worth knowing.

Using Javascript to get Data Attributes: A Real-World Example

Before I finish this article, it’s worth exploring how a web developer may want to use Data Attributes in a real-world example.

Here’s the scenario: we want a simple HTML/CSS/Javascript item picker (or maybe tab) component to allow users to choose from a series of cool t-shirt designs.

We load all of the relevant data on page load and store it all in Data Attributes within the component’s relevant HTML elements.

We’ll be storing:

• The product title.
• The product image URL.
• The product link.

For the User Interface, we’re going to display the product title’s as clickable links, with a HTML div underneath.

The first product will be displayed on page load and the idea is for the user to click the product links to display the relevant product and information.

Let’s take a look at the Codepen:

See the Pen HTML5 Data Attributes – Read World Example – dataset by Kris Barton (@TheWebDeveloperGuide) on CodePen.

Further Reading

• https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
• https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
• https://www.w3schools.com/tags/att_global_data.asp
• https://webdesign.tutsplus.com/tutorials/all-you-need-to-know-about-the-html5-data-attribute–webdesign-9642
• https://www.sitepoint.com/how-why-use-html5-custom-data-attributes/
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
• https://www.w3schools.com/jsref/met_element_getattribute.asp

Or maybe you want a completely different kind of CSS vertical align text altogether. Maybe you have a line of text with two different font sizes and you want the smaller font to be vertically aligned to the middle of the larger font size – like a quote or citation or something like that.

Both are completely different scenarios, with different solutions but both of them make you want to scream the same thing: CSS vertical align text how I do dis???

It can be frustrating, but we have options – let’s take a look.

Defining our Scenarios

I know we kinda defined the scenarios already in the introduction to this post, but let’s make sure we’re absolutely clear on what we’re trying to accomplish here.

Scenario 1

We have an HTML div where we want the text inside the div to be vertically aligned at the center. Like this:

Scenario 2

We have a line code that has two different font sizes. We want the smaller font size to be vertically aligned to the middle of the larger font size. Like this:

Let’s start off with the first scenario.

CSS Vertical Align Text with CSS Flexbox

So we want to vertically align text in a div or some other container.

One way to do this, is to use CSS Flexbox. If you’re unfamiliar with Flexbox, it’s a CSS layout module that makes it easier to make your layout design more flexible and responsive.

Flexbox allows you to have a little more control over your layout and makes vertically aligning text a breeze using the align-items selector.

Let’s take a look at the code:

See the Pen CSS Vertical Align Text Scenario 1 – Flex by Kris Barton (@TheWebDeveloperGuide) on CodePen.

Here, I’m using 3 CSS Flexbox selectors:

1. I’m declaring it a Flexbox item using display: flex; This means that I’m making it possible for anything inside that div (child elements) to be controlled by CSS Flexbox.
2. I’m using justify-content: center to center the text horizontally.
3. I’m using align-items: center to align the text vertically.

Can I Use Flexbox Align-Items?

Before you take this as your final solution, you should probably first work out whether you’re able to actually use CSS Flex and the align-items selector.

Why can’t I use it? You might be asking yourself. The answer is simple: browser support. CSS Flex doesn’t work all that great in older browser – particularly IE (surprise, surprise).

In fact, even IE11 is listed as having only partial support (IE Edge supports it completely).

So if you need to support older browsers for any reason, just be aware of this. You can find out more about the browser support for the align-items CSS selector at CanIUse.com.

CSS Vertical Align Text with CSS Grid

We can accomplish CSS vertical align text with a newer CSS layout module know as Grid. CSS Grid is a bit of an update on CSS Flexbox and is really useful for making great layouts.

Here’s a Codepen showing how we vertically aligned our text using CSS Grid:

See the Pen CSS Vertical Align Text Scenario 1 – Grid by Kris Barton (@TheWebDeveloperGuide) on CodePen.

For a simple example such as this, it might seem there’s no difference between the CSS Flexbox and CSS Grid layout modules, but once your layout become a little more complicated the power of the Grid layout style will become more and more apparent.

Can I Use CSS Grid Align-Items?

Again, a word of warning before you implement this solution: make sure you’re able to use it on whichever web browsers you support.

Despite CSS Grid is a newer technology than CSS Flexbox, there’s still pretty much the same support there. There’s minor support on IE10 and IE11 (limited functionality and what you can do must be limited to IE specific CSS selectors), but every other modern browser is basically fine.

Again, you can check out browser support for CSS Grid yourself at CanIUse.com.

CSS Vertical Align Text with CSS Absolute Positioning

With all the wonderful layout functionality that’s built into CSS, using Absolute Positioning in CSS to accomplish our goal of vertically aligning text, in my opinion, is a little bit overkill.

BUT for thoroughness, it’s worth mentioning this way of aligning text vertically just in case it’s the only option available to you (for whatever reason).

Take a look at our Pen:

See the Pen CSS Vertical Align Text Scenario 1 – Absolute Positioning by Kris Barton (@TheWebDeveloperGuide) on CodePen.

As you may notice, there’s a little more going on in here.

Firstly, if you’ve used absolute positioning in CSS before then you’ll know that if I want my item to be positioned absolutely within the containing div, then that divs positioning must be set explicitly to relative. Otherwise, the div assigned absolute positioning will not be contained to the container – just the webpage itself.

Secondly, you may be wondering about the use of the CSS Calc function. For those of you who haven’t used the Calc function before, your missing out on a really powerful CSS feature. I’m not going to go into too much detail about the function here, but go read more about it at W3Schools for more information – it’ll be SO worth your time. Essentially, what I’m doing here is calculating the true middle of the container div, based on the height of the inner div.

Let me explain: when you use top  50%, the web browser will calculate 50% from the top of the container div (in this case .box) to the top of our inner div (.box__content). This means the content inside the inner div will fall below the middle of the contain div and just look off.

There are a number of ways to combat this, but assigning the inner div a set height and using the CSS Calc function to work out absolute center is the sleekest option for me.

You could just tweak the top value until it looks right, but then you’ll end up with a value of 47% or some other random number (or magic number if you like) which isn’t as web developer friendly for my liking.

Let’s take a look how we can vertically align our text for the second scenario.

CSS Vertical Align Text with Vertical Align CSS Selector

Let’s start off by defining a real-world example of why you might need to vertically align different sized font on the same line.

We want to create a standard quote styling in which the actual quote text is larger than the citation.

In this situation you’d use the vertical-align selector tag and set it’s value to middle.

As the name of the CSS selector suggests, the vertical-align property sets the vertical alignment of an inline or table property. It has a number of cool options:

1. Baseline
2. Top
3. Middle
4. Bottom
5. Sub
6. Text-Top
7. Length (in which you can specify a value for the vertical alignment)
8. Percentage (in which you can specify the percentage of the vertical alignment)

For the task we’re trying to accomplish here, we’re going to use the middle option. See our demo Codepen below:

See the Pen CSS Vertical Align Text Scenario 2 by Kris Barton (@TheWebDeveloperGuide) on CodePen.

This way of vertical alignment in CSS is actually really quite useful, especially of you have a combination of text and images you want to line up just right on the same line.

Conclusion

CSS Vertical Align Text can mean 2 different things.

1. You want to align text vertically within a container.
2. You want larger and smaller text or text and images to align vertically inline.

For the first scenario there are 3 different ways to do it:

1. Using CSS Flexbox.
2. Using CSS Grid.
3. Using CSS Absolute position.

Option 1 or 2 are the best ways to vertically align text within a container, but don’t have full support in some of the older web browsers.

For the second scenario, there’s only really one option that makes any kind of sense: the vertical-align: middle tag.

Further Reading

• Vertical Align CSS Property – MDN Web Docs
• W3Schools Vertical Align Property
• Flexbox Cheat Sheet – CSS Tricks
• W3Schools CSS Flexbox
• Basic Concepts of Flexbox – MDN Web Docs
• Align-Items Property – W3Schools
• CSS Positioning – W3Schools
• CSS Calc Function – W3Schools