Coding Journal

Recently I have built a small pop up box that can be used as a contact form. I created it using HTML, CSS and a bit of JavaScript.  

You can see how it works on codepen: https://codepen.io/Magda_/full/LYppvpN

Today I want to describe how I built two small icons, and the next time I will be explaining how to make the rest of the pop-up box.

How to build small icons using CSS 

Creating small icons is surprisingly funny and satisfying.

Each icon is built in a div to move it pretty easily on the page without ruin it.

There are two more divs inside the chat-icon div.

index.html file:

The whole work takes place in style.css file.

First I set the overall conditions in CSS

I also set the background color:

My chat-icon is a square with rounded corners, small tringle on the left bottom side to look more like a comic speech bubble and there are three lines in the middle of the box to imitate chat. Those three lines are widely used in a hamburger menu. 

Let's start from the box with a triangle. First let's set width and height using ems, background colour, margin, border-radius and border (it is not necessary, but we could make a border in another colour.)

We also have to set the position to relative in order to use a pseudo-element to build a triangular shape. Pseudo-element ::before that I'm going to use next will be in relation to its parent element small-box. Otherwise, it would be in relation to the document body element. 

Now I'm starting building a pseudo-element. I set position to absolute, and another key property is content that must be set to empty string.

To build this small triangular (or arrow) shape at the left bottom of the box I'm using a great tool called CLIPPY - CSS clip-path maker: https://bennettfeely.com/clippy/
You can choose the shape you want to have, and then, it is enough to copy the line of code that is below. 

The last thing that has to be done is positioning the triangle against the icon box. And because I want it at the bottom of the triangle, I set the top to 100% and move it 10% left. 

Now it's hight time to create the three lines. Because the tree-lines div is inside small-box div, I set a few more properties on .small-box. 
The first one is the display property with the value of flex.

Now I can easily make sure that lines will be in the middle of the box horizontally and vertically. I can set the align-items property to center and justify-content to center, too.  Align-items property is responsible for vertical alignment, and justify-content is responsible for horizontal alignment.

As I want to have three lines, it's relatively easy to do with pseudo-elements.
First, I create the middle line. I set its width to 60%, and it will be 60% of the parent div. So in case I would like to make the icon smaller or bigger, I can change the width and height of the .small-box element, and the width of the line will adjust. 

 

Now to create an upper line and a lower one we will use pseudo-elements ::before and ::after. 

Like earlier, we have to set the position to absolute and content to an empty string.
We want to have lines that are the same width and height, so we set the width and height to 100%, and the background should be white as well. 

Now there is still only one bar visible because they all are one on another. Now we have to change their position towards the middle one. One should be higher, and we use property top and set it to -10px. The other should be lower, so we give the top property value 10px. 

The icon should behave a bit like a button so I'm changing the cursor to the pointer.

I'm also changing its look slightly on hover. When someone hovers over the icon box, it is changing colour a bit, and it's becoming a bit bigger thanks transform property. 
You change the number in value scale() to make it much bigger or smaller. 

And the icon is ready. 

Our last task is to put the icon at the right bottom corner of the page.  

Now we will style the parent div - #icon div. 
I want to have it always at the bottom of the page so its position must be fixed and I'm using property bottom. If I set bottom to 0 it will be at the bottom without any margin or padding so I'm adding 2rem value to make a bit of space between the icon and the bottom of the site. I want to have it at the right side of the website but with a bit of space so I set property right to 10%. 

The last thing I'm going to do with the chat icon is too hide for now using JavaScript. 

First, I have to create a variable

const icon = document.getElementById('icon');
and then I want to set the display style to none. I could do it also in CSS, but I will be changing the display in JavaScript later on. 

icon.style.display = "none"; 

After setting icon to none, we have an empty page again. 

Now we can create a second icon - the closing button. 

There is not much work, because we already have an orange box created. 

First, let's create two divs in html:

To avoid code repetition, we need to add #cross-icon element to .small-box properties. 

Now we need to create a cross sign using pseudo-elements.

Both elements should be white and have the same width and height.

The only difference is the position of both bars. Now we can see only one bar in the middle of the box. To move the bars, we can use property transform and property of value. One of the bars should have value rotate(45deg), and the other rotate(-45deg).

 

Now we can change its look on hover 

And push the button to the bottom of the page in the same way as I did it with icon element before. 

Later I will be rewriting this part of the code. 

The next step is creating a variable for .three-lines element in JavaScript file.

const crossIcon = document.getElementById('cross-icon;);

I'm setting the display of this element to none: 

crossIcon.style.display = "none" 

and uncommenting this line:

icon.style.display = "none"; 

Now the chat icon is visible. To make it work I need to add an event listener to it, we want to make it invisible on click, and at the same time we want to see a close button (and the whole contact box but I will be writing about it next time). Setting display to block on 

To make the closing button work we have to add another event listener:

 

Each icon can be used separately, and we can easily change its size or colour. 
Next time I'm going to explain how to build the rest of the modal with contact form.