Responsive Filterable Image Gallery using HTML, CSS & Javascript

Responsive Filterable Image Gallery using HTML, CSS & Javascript

Responsive Filterable Image Gallery using HTML, CSS & Javascript

Responsive Filterable Image Gallery is used on various websites to sort images by category. In this article, I am going to show you how to create a Responsive Filterable Image Gallery with the help of HTML CSS, and javascript. 

Filterable Image Gallery is a popular web element that is used around various websites. It is a kind of image gallery where a large number of images are neatly arranged together. The notable point is that all the images can be sorted by category here. There is a navigation bar where all the categories are sorted. When clicking on any one of those categories. Then all the images in that category are seen and the rest of the images are hidden. As a result, the user can easily find the images of his choice. 

This type of design is mainly used in many websites where a lot of images are put together. However, in this case, I have created this Filterable Image Gallery using Pure JavaScript.

Video Tutorial of Responsive Filterable Image Gallery

If you do not understand what I am saying then you can watch the video tutorial below. This video will help you to know better how I made this design.

Hopefully, you have learned how to make it from the video tutorial above. As you can see above, I first created a navigation bar on a web page. Where I created five-category buttons. Here I have used a total of 9 images. I have used different categories of images here. 

You can add many more images with these 9 images if you want. In the category in the navigation bar, you can see the image related to the category you click on. In the same way, when you click on another category, the images of that category will be seen and the rest will be hidden. I made it fully responsive so that it can be used on all devices.

I hope you understand how this Responsive Filterable Image Gallery works. But for better understanding, I have given the live demo below. This live demo will help you get a live experience of this design.

See the Pen
by Foolish Developer (@fghty)
on CodePen.

How to Create Filterable Image Gallery using HTML and CSS (more…)

Continue ReadingResponsive Filterable Image Gallery using HTML, CSS & Javascript
Animated Accordion Menu using HTML, CSS & Javascript

Animated Accordion Menu using HTML, CSS & Javascript

Animated Accordion Menu using HTML, CSS & Javascript

In this article, I am going to show you how to create an Accordion Menu menu using HTML, CSS, and JavaScript code. Earlier I showed the design of many more types of Animated CSS accordion menus. Now it’s time to recreate it with JavaScript.

 The responsive accordion menu has an original heading. When you click on that heading, all the information related to that heading can be seen below.

Accordion Menu is a modern content structure where a large amount of information can be neatly arranged in one place. This type of structure is used on different types of websites. This type of design is mainly used in the FAQ section or question-answer section. 

This type of Accordion Menu is very important for arranging related questions and answers for different types of services. In addition, a large amount of text is arranged on different types of websites depending on the different headings.

Video Tutorial of Animated Accordion Menu

 If you do not understand what I am saying then you can watch the video tutorial below. This video tutorial will help you to know how I made this simple javascript accordion.

We hope you have learned how to make this design from the video tutorial above. 

I made a small box on a web page as you can see above. I used three headings in that box. I have given the background color to highlight those headings and made it a bit bigger in size. Then I added some amount of content under that heading. 

Here you can add any type of content. Under normal circumstances, information is hidden. When you click on that heading, the information under that heading can be seen below.

You can use the demo section below to get a live experience of this design. Here you will find the required source code which you can copy and use in your own work.

See the Pen
Accordions Menu HTML CSS by Foolish Developer (@fghty)
on CodePen.

Hopefully, the demo above has helped you to know how this javascript accordion works. 

How to Create Simple CSS Accordion Menu (more…)

Continue ReadingAnimated Accordion Menu using HTML, CSS & Javascript
Simple Analog Clock using javascript

Simple Analog Clock using javascript (For Beginners)

Simple Analog Clock using javascript

Simple Analog Clock javascript is a web element that helps show the exact time. You can easily create an analog clock with the help of JavaScript.

In this article, I am going to show you how to create a simple analog clock using JavaScript code. I have designed many more types of JavaScript analog and digital clocks before. This design will be of great help to those who want to learn how to design an analog clock for the first time.

 I made this design using simple HTML, CSS, and JavaScript code. Since I made it for Beginners, here I have tried to use the simplest code. Here is a complete explanation of what each code is used for. This will allow you to learn how to make it very easily.

 First I set the background color of the web page. Here I have used images to make numbers and symbols from 1 to 12. But you can make these numbers manually if you want. I have already made many more designs where I have shown you how to make these numbers manually. Then I made three hands in this watch using HTML and CSS code. I used JavaScript to make those hands work.

Simple Analog Clock Javascript [Live Demo]

 Below is a live demo so you can better understand how it works. Here you will find the necessary source code which you can copy and use in your own work.

See the Pen
simple analog clock 1 by Foolish Developer (@fghty)
on CodePen.

The time used here is not the time on any server. It basically uses time from your device using JavaScript’s new Date function.

 

Below the article, there is a download button with the help of which you can download the source code if needed. Hopefully, the live demo above has helped you fully understand how this analog clock works.

How to make a simple analog clock using JavaScript (more…)

Continue ReadingSimple Analog Clock using javascript (For Beginners)
Javascript Age Calculator | Calculate Age from Date of Birth
Javascript Age Calculator | Calculate Age from Date of Birth

Javascript Age Calculator | Calculate Age from Date of Birth

Javascript Age Calculator | Calculate Age from Date of Birth

JavaScript Age Calculator is a remarkable JavaScript application that will help to calculate a user’s age. Earlier I have shown many types of JavaScript projects like JavaScript Clock, Random Password Generator, Calculator, etc. 

This is the first time I am going to make such an age calculator. This type of design is used in many cases. Basically, there are different types of registration forms where the user needs to be 18 years of age or whatever. 

In that case, the system will calculate the age of the user as soon as the user inputs his date of birth. In this javascript Age Calculator, I have given three places to input age. Where the user can input the day, month, and year of his date of birth. 

Javascript Age Calculator 

The system will then automatically convert the distance of its date of birth from the current time to year months and days. Here I have designed this system using HTML and CSS code and implemented it using JavaScript. 

First I collected the current date from your device using JavaScript code (new Date). Then we subtract that with your input time and convert the subtraction to years, months and days.

As you can see above, I painted the background # 2782e3 of the web page and made a rectangular box in it. I used a title or heading on top of that box. Then I made three boxes to input using HTML’s input (<input>) function. 

The first, second, and third boxes are designed to input days, months, and years, respectively. Then there is a submit button below which the user can see his current age by clicking on it. I have arranged to show the result at the bottom of the box. 

Here’s how to transform your current age into years, months and days. If you want to know how it works and you want to use it live then use the demo section below. Here you will find the required source code which you can use for your own purposes. 

However, I would urge you to follow the tutorial below if you are a beginner and want to know how I made it (Age Calculator using javascript). 

See the Pen
Age calculator by Foolish Developer (@fghty)
on CodePen.

Hopefully, the demo above has helped you to know and enjoy its live demo.

Calculate Age from Date of Birth using Javascript

Now is the time to get to know it steps by step. I have shared the possible results after each step so that it is more convenient for you to understand. 

At the bottom of the article, I have given a download button with the help of which you can download the source code.

Step 1: Design the webpage and create a box (more…)

Continue ReadingJavascript Age Calculator | Calculate Age from Date of Birth