Create a JavaScript Background Changer

The reason behind this javascript background changer project is I haven’t done a JavaScript project in a while and I wanted to start off with something relatively easy. I also thought it would be neat to learn how to change the background image using a dropdown element.

A live example of the code: https://dmarcisovska.github.io/javascript-background-changer/

Github code: https://github.com/dmarcisovska/javascript-background-changer

Brainstorming

Before starting any programming project I like to sit down and jot down the steps needed to complete it. For the JavaScript background changer I determined I would need the following steps:

1. Create a hero
2. Add background image to the hero
3. Add a dropdown to the hero with different values
4. Create different classes with different background images

So first, I would need to create a hero image and I would initially add a background image to it. I would then need to add a dropdown on this hero image. The drop down would contain a few values that would match class names I create. Each class name would have a different background url. Upon selection of each value in the dropdown it would change to the corresponding class. The background would then change.

HTML

To create the javascript background changer I decided to use Bootstrap because then I can use the jumbotron element for the hero image. After adding in the jumbotron I added in a drop down element. The dropdown element contains five values — forest, stars, lake, stream, and mountain. Each of these match up with a class in my CSS file. I added an id to the dropdown element and the jumbotron to be able to grab both of these in my JavaScript file.

<div class="jumbotron jumbotron-fluid forest" id="banner">
    <div class="container">
        <h1 class="display-4 mt-4">Background Changer</h1>
        <p class="lead">Use the dropdown below to change the background of this Jumbotron.</p>
        <div class="form-group">
            <label class="mb-3" for="dropdown">Change Background</label>
            <select id="dropdown" class="form-control">
                <option value="forest">Forest</option>
                <option  value="stars">Stars</option>
                <option value="lake">Lake</option>
                <option value="stream">Stream</option>
                <option value="mountain">Mountains</option>
            </select>
        </div>
</div>
</div>

CSS

In the CSS file for the javascript background changer I added in 5 classes of forest, stars, lake, stream, and mountain. Each of these classes has a different background image and formatting for the image. I added in some extra css to have the image take 100% of the screen’s height and to make the image stretch to take up the whole jumbotron width. Lastly, I added a width to the bootstrap dropdown and from control elements.

.forest {
            background:url('https://cdn.pixabay.com/photo/2018/12/15/18/02/forest-3877365_1280.jpg') no-repeat;
            background-size: cover;
            color: white;
            height: 100vh;
}
.stars {
  background:url('https://cdn.pixabay.com/photo/2015/08/28/11/27/space-911785_1280.jpg') no-repeat;
  background-size: cover;
  color: white;
  height: 100vh;
}
.lake {
  background:url('https://cdn.pixabay.com/photo/2016/11/06/05/36/landscape-1802337_1280.jpg') no-repeat;
  background-size: cover;
  color: white;
  height: 100vh;
}
.stream {
  background:url('https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg') no-repeat;
  background-size: cover;
  color: white;
  height: 100vh;
}
.mountain {
  background:url('https://cdn.pixabay.com/photo/2015/07/27/17/14/switzerland-862870_1280.jpg') no-repeat;
  background-size: cover;
  color: white;
  height: 100vh;
}
select {
  width: 60px;
}
.form-control {
  width: 150px;
}

JavaScript

To make the JavaScript background changer we only need 3 lines of code. I created an on change function for the dropdown by grabbing the dropdown element by its id. When a change occurs on the dropdown (ie selecting a different value) the function will grab the jumbotron by its id and add the class from the dropdown (this.value) and add the jumbotron class back in, so we don’t lose bootstrap jumbotron styling.

document.getElementById('dropdown').onchange = function(){
  document.getElementById('banner').className = this.value + " jumbotron jumbotron-fluid";
};

Originally published at https://denisa.dev on March 29, 2020.