How to manipulate CSS with JavaScript by coding photo frames

Javascript Programming

DOM manipulation can be simply defined as manipulating HTML documents (or pages) with JavaScript.

DOM stands for Document Object Model which you can visualize as a tree structure made up of different HTML elements.

Visualizing an HTML document as a tree makes it easy to access its elements and potentially change them. JavaScript helps us do this.

The DOM is visualized as a tree

Now, JavaScript is a powerful language, so not only can we manipulate HTML elements with it, but we can also use it to manipulate the CSS properties of any web page.

In this tutorial, I’ll teach you how to manipulate the styling of a website by building a simple project.

In this project, we will code a picture frame using HTML and CSS, then we will use JavaScript to make the picture frame animate. Sound fun? Let’s get started!

How to create an HTML file

Create a folder for this project and name it whatever you want. Then navigate to the folder in your favorite code editor and create a new HTML file. I named myself box.htmlbut you can put your name whatever you like.

Next, create an HTML5 editor by pressing the exclamation point and pressing the enter key.

In the body tag, create an h1 tag and enter the title of this project in it. In my case I did this:

<h1>CSS Picture Frame</h1>

Next, create a div and give it a “border” class like so:

<div class = “border”></div>

Within this div, create another div and give it a “padding” class like this:

<div class = “padding”></div>

Inside the “padding” div, create another div and give it a “content” class like this:

<div class = “content”></div>

Now, this “content” div is the position of the picture. You can choose to use images or emojis. I chose to use an emoji, so I did something like this:

<div class = “content”>&#127856;</div>

So far, we’ve created three divs. Together, they will look like this:

<div class="border">
   <div class="padding">
       <div class="content">
            &#127856;
                </div>
           </div>
       </div

Just below the above code, create a new div and give it an “input” Id like so:

<div id = “inputs”></div>

In this “input” div, let’s create another div with the Id as “slider”, because we will create sliders inside them.

To create a slider in HTML, simply do the following:

<input type="range" name="" id=""  min="10" max="100">

<input type = "range"> create slider input and min and max used to specify the minimum and maximum values ​​the slider can have. In this case, the minimum is 10 and the maximum is 100.

For this project, we need 3 sliders, one for “border”, one for “padding” and one for “content”, respectively. Give each slider a suitable Id or you can do as I did:

<div id="sliders">
<h3>Border: </h3>
<input type="range" name="" id="border-range"  min="10" max="100">
<h3>Padding: </h3>
<input type="range" name="" id="padding-range" min="10" max="100">
<h3>Content: </h3>
<input type="range" name="" id="content-range" min="10" max="100">
</div>

Below the “slider” divider, create a new div and give it a “color” Id, like this:

<div id = “colors”></div>

because we will create color pickers in this div. You can create a color picker by doing the following:

<input type="color" name="" id="">

We also need 3 color pickers for this project, one for each div “border”, “padding” and “content”, respectively. So go ahead and create three color pickers in the “Colors” div. Your code will look like this:

<div id="colors">
<h3>Border:</h3>
<input type="color" name="" id="border-color">
<h3>Padding</h3>
<input type="color" name="" id="padding-color">
<h3>Content</h3>
<input type="color" name="" id="content-color">
</div>

When you view your page in the browser, you will get results like below screenshot:

Screenshot - 9--1

The next step is to link the CSS and JavaScript files. If you haven’t already, you should create CSS and JS files and link them to your HTML. In my case I created box.css and a box.js file. Do not forget:

  • Link your CSS file in the HTML head tag with the following code: <link rel="stylesheet" href="https://www.freecodecamp.org/news/learn-how-to-manipulate-css-with-javascript-by-coding-a-dynamic-picture-frame/box.css">
  • Link your JS file in the body tag at the end of your code, just below the final closing div and above the content closing tag like this: <script src="https://www.freecodecamp.org/news/learn-how-to-manipulate-css-with-javascript-by-coding-a-dynamic-picture-frame/box.js"></script>

If you’ve done this successfully, congratulations! The HTML part of this tutorial is now complete. Here is the full HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Model</title>
    <link rel="stylesheet" href="https://www.freecodecamp.org/news/learn-how-to-manipulate-css-with-javascript-by-coding-a-dynamic-picture-frame/box.css">
</head>
<body>
    <h1>CSS Picture Frame</h1>
        <div class="border">
            <div class="padding">
                <div class="content">
                    &#127856;
                </div>
            </div>
        </div>

        <div id="inputs">
        <div id="sliders">
            <h3>Border: </h3>
            <input type="range" name="" id="border-range"  min="10" max="100">
            <h3>Padding: </h3>
            <input type="range" name="" id="padding-range" min="10" max="100">
            <h3>Content: </h3>
            <input type="range" name="" id="content-range" min="10" max="100"> 
        </div>

            <div id="colors">
                <h3>Border:</h3>
                <input type="color" name="" id="border-color">
                <h3>Padding</h3>
                <input type="color" name="" id="padding-color">
                <h3>Content</h3>
                <input type="color" name="" id="content-color">
            </div>
        </div>
        <script src="https://www.freecodecamp.org/news/learn-how-to-manipulate-css-with-javascript-by-coding-a-dynamic-picture-frame/box.js"></script>
</body>
</html>

How to Style a Website with CSS

Open the CSS file you created and add the following code:

body{
display: flex;
align-items: center;
justify-content: center;
background-color: aquamarine;
flex-direction: column;
}
.border{
background-color: #0b67c4;
padding: 45px;
}
.padding{
background-color: #42b3dd;
padding: 45px;
}
.content{
background-color: #299baf;
padding: 45px;
font-size: 78px;
}
#inputs{
display: flex;
flex-direction: row;
}
#sliders{
margin-right: 30px;
}

Note: This style will only work if you use the same ids and classes that I used in the HTML.

Now, let’s pay attention to .border, .paddingand .content style. You will notice that in addition to .contentall have two rules namely: background-color and padding. These are the two rules that we will manipulate with our JavaScript code.

Remember the sliders and color pickers we created in our HTML code? We will use sliders to manipulate the padding property of .border, .paddingand .content corresponding. And we will use the color picker to change background-color properties of each div.

When you refresh your browser, you should have something similar to the screenshot below:

Screenshot - 2--1

How to write JavaScript

The JS code for this project can be divided into three parts. First, we get the Ids of the sliders and color pickers and store them in variables. Next, we take the classes of the divs “border”, “padding” and “content” and also store them in variables. And finally, we attach event listeners to the variables.

Since we want the sliders to change the padding property of the divs and the color picker to change their background color, we use the change event listener to achieve that.

Now it’s time to code. First, get the Ids of the sliders like this and store them in variables (remember the names of the Ids used in the HTML code.):

let borderRange = document.getElementById("border-range")
let paddingRange = document.getElementById("padding-range")
let contentRange = document.getElementById("content-range")

Next, get the Ids of the color pickers and also store them in variables, like this:

let borderColor = document.getElementById("border-color")
let paddingColor = document.getElementById("padding-color")
let contentColor = document.getElementById("content-color")

Now get the classes of border, padding and content div using querySelector like this:

let borderBox = document.querySelector(".border")
let paddingBox = document.querySelector(".padding")
let contentBox = document.querySelector(".content")

The next step is to attach event listeners to each slider and color picker. To make the first slider change the CSS padding property of the border div we simply use the following code:

borderRange.addEventListener("change", function(){
borderBox.style.padding = borderRange.value + "px"
})

Let me explain: The change event listener listens for changes in the slider. Code borderBox.style.padding used to target the borderBox’s padding property.

borderRange.value get the value of the slider and +  “px” add px to whatever this value is. Balance borderBox.style.padding arrive borderRange.value + “px” is a way of telling our code to change the borderBox’s padding property to whatever value borderRange enters in pixels whenever we move the slider (i.e. the change event is fired).

Do the same for the padding and the content div as follows:

paddingRange.addEventListener("change", function(){
paddingBox.style.padding = paddingRange.value + "px"
})
contentRange.addEventListener("change", function(){
contentBox.style.padding = contentRange.value + "px"
})

After doing this, attach the event handler to the color picker following the same principle – except, in this case, the color values ​​are in hexadecimal, so we don’t need to add any units on them.

Instead of targeting the padding property, we target backgroundColor replacement property. (Note: the syntax for background color in JS is in camel case.)

Your code will look like this:

borderColor.addEventListener("change", function(){
borderBox.style.backgroundColor = borderColor.value
})
paddingColor.addEventListener("change", function(){
paddingBox.style.backgroundColor = paddingColor.value
})
contentColor.addEventListener("change", function(){
contentBox.style.backgroundColor = contentColor.value
})

Now, when you refresh your browser, you will be able to change the size of the boxes and their color using the sliders and color pickers. With this code, you can create a picture frame of various sizes and colors.

Here is the full JS code:

let borderRange = document.getElementById("border-range")

let paddingRange = document.getElementById("padding-range")

let contentRange = document.getElementById("content-range")


let borderColor = document.getElementById("border-color")

let paddingColor = document.getElementById("padding-color")

let contentColor = document.getElementById("content-color")


let borderBox = document.querySelector(".border")

let paddingBox = document.querySelector(".padding")

let contentBox = document.querySelector(".content")

borderRange.addEventListener("change", function(){
    borderBox.style.padding = borderRange.value + "px"
    console.log(borderRange.value)
   
})

paddingRange.addEventListener("change", function(){
    paddingBox.style.padding = paddingRange.value + "px"
    console.log(paddingRange.value)
   
})

contentRange.addEventListener("change", function(){
    contentBox.style.padding = contentRange.value + "px"
    console.log(contentRange.value)
})

borderColor.addEventListener("change", function(){
    borderBox.style.backgroundColor = borderColor.value
})


paddingColor.addEventListener("change", function(){
    paddingBox.style.backgroundColor = paddingColor.value
})

contentColor.addEventListener("change", function(){
    contentBox.style.backgroundColor = contentColor.value
})

Inference

You can use JavaScript’s DOM manipulation techniques to manipulate not only the HTML file, but also its styles.

The applications of this knowledge are limited only by your imagination. You can create CSS art and effects using this technique with just a little creativity.

Hope this helps!

Source link

Share: