Create A Custom Video Player using JavaScript & HTML
In this article, you will learn how to create a custom video player using HTML CSS, and JavaScript. Many times it is necessary to use a video player on the…
Simple FAQ Section using HTML, CSS & JavaScript
In this article, I have shown you how to create a Simple FAQ Section using HTML CSS, and JavaScript. Earlier I shared with you the design of many more types of FAQ Accordion Section. This design has been created by Jquery.
Here HTML and CSS are used for design and JQuery for implementation. The jQuery used here is absolutely simple you will understand very easily. HTML FAQ Section We see on different websites.
We see this type of Accordion Section for many types of business, service, personal websites. Where some common questions and answers about the service or product are given in advance. So that it is not difficult to know the necessary information of the customer or user.
FAQ Accordion HTML CSS
The design I have used here is absolutely responsive and ready. You can use it directly on your website. It is made of finished color flowers which further enhances the beauty.
Four headings have been used here and information about it has been used. Which used HTML CSS to design and JQuery to implement. Below I have given a live preview that will help you to know how this FAQ Accordion Section works.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
As you can see above, this is a simple FAQ section that has four headings. There is a lot more information in those four headings. You can add many more headings of your choice here if you want.
The background color of the headings in blue. When you click on it, an area will be created below it where more information can be found.
How to Create FAQ Accordion Section
To create this JavaScript FAQ Section you need to have a basic idea about HTML CSS and JavaScript. First, you create an HTML and CSS file. Even if you don’t create a javascript file here. You can add those JavaScript directly to the HTML file.
I have not shared any tutorial here. I have already shared many such tutorials. So here I have just given the source code which you will copy and use in your work.
HTML Code ( index.html ):
The following code is the HTML code used to create this FAQ Section HTML CSS. Contains all types of text and information. You copy them directly and add them to your HTML file. Four headings and their information have been added here.
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>Document</title>
<link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>
<link href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” rel=“stylesheet”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js” charset=“utf-8”></script>
<!– CSS file –>
<link rel=“stylesheet” href=“style.css”>
</head>
<body>
<section id=“faq”>
<div class=“container faq”>
<div class=“container”>
<div class=“row”>
<div class=“col-sm-12”>
<div class=“accordions”>
<!– 1st accordion menu –>
<div class=“accordion-item”>
<div class=“accordion-title” data-tab=“item4”>
<h3>Free DDOS Protection <i class=“fa fa-chevron-down”></i></h3>
</div>
<div class=“accordion-content” id=“item4”>
<p>
Unlike other providers who charge extra for DDoS protection, All of our VPS
servers comes
</p>
</div>
</div>
<!– 2nd accordion menu –>
<div class=“accordion-item”>
<div class=“accordion-title” data-tab=“item2”>
<h3>What is Windows VPS? <i class=“fa fa-chevron-down”></i></h3>
</div>
<div class=“accordion-content” id=“item2”>
<p>
With a Windows VPS server, you will get a Remote Desktop connection within a few
minutes. You can run Windows applications such as IIS, SQL, Microsoft Exchange
or any software like Docking,
</p>
</div>
</div>
<!– 3rd accordion menu –>
<div class=“accordion-item”>
<div class=“accordion-title” data-tab=“item3”>
<h3>Payment Options <i class=“fa fa-chevron-down”></i></h3>
</div>
<div class=“accordion-content” id=“item3”>
<p>
Unlike most other providers you don’t have to pay with just Credit Card or
PayPal. You can also
</p>
</div>
</div>
<!– 4th accordion menu –>
<div class=“accordion-item”>
<div class=“accordion-title” data-tab=“item1”>
<h3>Why FutureRDP? <i class=“fa fa-chevron-down”></i></h3>
</div>
<div class=“accordion-content” id=“item1”>
<p>
Germany, Netherlands, and Canada. We have a range
of different solutions for different purposes such as SSD VPS and Storage
servers. All servers are equipped with RAID10 only SSD drives and FREE DDoS
Protection!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!– JavaScript–>
<!–
<script>
Add javascript code
</script>
–>
</body>
</html>
CSS Code ( style.css ):
The following codes are the CSS codes used to design it. Above we have added all the information using HTML code. Now all this information has been designed by CSS code.
You copy the code and add it to your CSS file. Rename your CSS file to style.css. I have already attached the CSS file to the HTML file.
30 Minutes Countdown Timer Using JavaScript
In this article, I have shown you how to create 30 Minutes Countdown Timer using JavaScript, HTML, and CSS. Earlier I shared many more types for countdown timer tutorials. But…
Responsive Automatic Image Slider in HTML
In this article, you will learn how to create a Responsive Automatic Image Slider using HTML and CSS. Earlier I shared with you the tutorial on different types of image…
How To Make RGB Color Generator Using JavaScript
In this article, I have shown you how to create RGB Color Generator using JavaScript. Earlier I shared with you how to make different types of random color generators, background-color generators, etc. In this tutorial, I have shown you how to create JavaScript RGB Color Generator. RGB is a color format. RGB (Red, Green, and Blue) is one of the colors we can use to express different formats.
In this project, you can create different colors by combining Red, Green, and Blue colors of your choice. A lot of times we can’t find the color we want to use for different projects. In that case, this kind of project will help you completely.
The three colors used here are red, green, and blue respectively. You can create any color you like by combining these colors.
RGB Color Generator Using JavaScript
Below is a demo that will help you to know how this RGB Color Generator works. Here you will find the required source code and live demo.
If you want, you can copy the source code and use it in your own work. However, for the source code, you can take the help of the download button below the article.
See the Pen
JavaScript RGB Color Generator by Raj Template (@RajTemplate)
on CodePen.
Hope you like the demo above. As you can see above, I used blue as the background color for the first web page. Then I made a small box. All information will be added to this box and its height will depend on the amount of content. First created a display in which the colors can be seen. Then I made three range slides.
I used HTML’s input function to create the slides. Three range riders have been used for the colors Red, Green, and Blue respectively. Below all is a small box in which the color code can be seen. You can copy that code and use it in your work.
How to Create JavaScript RGB Color Generator
RGB Color Generator is built with HTML CSS and JavaScript. First I designed the basics using HTML CSS. Then I implemented it using JavaScript. To make this RGB color generator you must have some basic idea about HTML CSS JavaScript.
If you only want the source code, you can use the download button at the bottom of the article. However, I request you to follow the tutorial below. This will allow you to know step by step how I made this.
Step 1: Basic structure of the generator (more…)
Background Color Switcher Using JavaScript & CSS
In this article, you will learn how to make a Background Color Switcher using JavaScript. JavaScript Background Color Switcher will help to change the background color choice of the webpage. If you want to know more about colors then you can follow Color Hex Map site. There you will know about RGB, hex etc formats well.
Earlier I shared with you the tutorial on how to create a random color generator and javascript background color generators. This design is basically to switch the color of the background.
This type of project is very important if you want to change the background color of any element or webpage. In this tutorial, I have shared the complete step-by-step tutorial, source code, and live demo. This will give you a complete idea of how to make a javascript change background color on click.
Here I have made many color boxes. You can select any one of those colors in the background. If you want you can change the colors of your choice here and add many more types of colors here.
JavaScript Background Color Switcher
First I created a small area on the web page. I have used white as the background color of that area. Under normal circumstances, the background color of the webpage is white. In that box, I first used a heading, and then I made 7 small round boxes.
I used different colors in each box. When you click on those colors, you can see that color in the background.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
We see the option to change this type of color text, text size, etc. on different types of websites. This type of design greatly enhances the quality of the website and user satisfaction.
Related Post:
1. Loan Calculator using JavaScript
2. Show and Hide Password Using jQuery
3. Save Text to a File using JavaScript
4. Simple Weather App using JavaScript
5. BMI Calculator using Javascript
6. Simple Stopwatch using JavaScript
Dark and light themes are now used on almost every website. In that case, only two background colors are used. But here you can use multiple background colors.
Step 1: Basic structure of Color Switcher
The basic structure of this project has been created using the following HTML and CSS codes. A box has been created with the help of the following codes and a heading has been used. Here the max-width of the box: 540px and here the background color of the box is white.
<div class=”canvas”>
<h1>Choose the Color</h1>
</div>
html {
margin: 0;
}
.canvas {
margin: 150px auto;
width: 80%;
max-width:540px;
padding: 20px;
text-align: center;
background:white;
}
h1{
margin-bottom:40px;
font-family: sans-serif;
}
Step 2: Create color select boxes (more…)
How to Make a Simple Tip Calculator in JavaScript
Simple Tip Calculator is a great JavaScript project for beginners. If you know Basic JavaScript then of course this type of Javascript Tip Calculator is important enough for you. Tip Calculator is basically an application that will help to do Tip Calculation.
For example, you and three of your friends went to eat at a hotel. And there’s a $ 100 bill. You have decided to give a 10% tip of the total bill to the waiter. And three of your friends will pay for that tip. In such a situation, there is no alternative to this type of project to calculate how much amount or how many dollars each person has to pay.
If you want to do this manually you have to work a lot harder. Since programming is to make our daily necessary work easier. So this kind of project will make your calculation much easier. Here you will only input information and it will automatically show the result.
Simple Tip Calculator in JavaScript
So if you are a beginner then you should definitely try this type of project. Here you will find complete source code and tutorial on how to create a Simple Tip Calculator using JavaScript. But yes, you need to have some basic idea about JavaScript. This is because some amount of JavaScript has been used to make this project work.
However, I have done a complete step-by-step explanation. Even if you don’t know JavaScript, you can understand it. If you want the source code, you can use the download button below the article.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
Hopefully, the demo above has helped you to know the live preview of the project (Tip Calculator in JavaScript). But if you can copy the source code from the demo section.
Related Post:
1. Loan Calculator using JavaScript
2. Show and Hide Password Using jQuery
3. Save Text to a File using JavaScript
4. Simple Weather App using JavaScript
5. BMI Calculator using Javascript
6. Simple Stopwatch using JavaScript
I would request you to follow the tutorial below. Because here you will know in full step by step how I made it. First, the background color of the webpage is blue. Then I made a box. At the beginning of this box, I used a heading which is basically to enhance the beauty of this project.
How to Make a Simple Tip Calculator in JavaScript
I created two input areas. In the first input box to input the amount of the bill and in the second input box to input the information of how many people will give this tip.
Then I created a range slider for the percentage of the tip. This means that you can determine what percentage of the total amount you want to give as a tip here. Below all there is a display in which the results can be seen. That is, after inputting the above information, the result of that calculation can be seen in the display below.
Step 1: Basic structure of Tip Calculator
We have created the basic structure of Simple Tip Calculator using the following HTML and CSS code. I have created a box here to tell the basic structure in which all the information can be found.
First I used the background color blue of the webpage and then I created this box. I used background color white and width: 80% and max-width: 350px.
<div id=”tip-calculator”>
</div>
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
width: 100%;
height: 100vh;
overflow: hidden;
display: grid;
place-items: center;
background: rgb(12, 141, 195);
font-family: “Lato”, sans-serif;
font-weight: 400;
line-height: 1.75;
}
#tip-calculator {
width: 80%;
max-width: 350px;
padding: 1rem;
background: white;
border-radius: 0.3rem;
}
Step 2: Add a heading using HTML (more…)
Simple Loan Calculator using JavaScript & CSS
In this article, you will learn how to create a Simple Loan Calculator using HTML CSS, and JavaScript. JavaScript Loan Calculator will help you to calculate the loan amount, interest rate, and information of monthly payment.
Before that, I used JavaScript to create many types of calculator projects like Age calculator, Height calculator, weight calculator, etc. Now I am going to show you how to make a simple loan calculator using JavaScript. We basically use the general formula to calculate the interest rate and monthly payment of a loan amount. However, JavaScript will help you to make this task more perfect and easy.
Computer programming makes our tasks much easier. Similarly, this EMI calculator will help you to calculate the monthly payment of your loan. Here I have used HTML CSS and JavaScript. HTML and CSS helped create and design the basic structure of this JavaScript loan calculator. Here JavaScript helps to make it work.
Loan Calculator using JavaScript
First I used a heading that basically helped to enhance the beauty. Then I made 3 input boxes. To input the loan amount in the first input box, interest rate in the second input box, and information input of the third input box month. Below all is a small display where the calculations can be seen.
This loan calculator will help you know how much money you have to pay each month with interest.
For example, if you want to buy a product, the total value of this product is X and there is a Y % interest rate. You want to repay that loan in 6 months. In this case, you can easily find out how much money you have to pay per month from this calculator.
If you want to do it manually, you have to work a little harder.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
How to create a Javascript loan calculator
Hopefully, the above demo has helped you to know how this interest rate calculator javascript works. If you only want to get the source code then you can copy the source code from the demo section above.
But keeping in mind the beginners, I have shared the complete step-by-step tutorial. If you want to know how to build this JavaScript loan calculator then you must follow our tutorials step by step.
Step 1: Basic structure of loan calculator (more…)
Automatic and Manual Image Slider in HTML CSS
You can learn how to make automatic and manual image sliders from this tutorial. Earlier I showed you how to create two types of image sliders, manual and automatic. However,…
Custom Range Slider using HTML CSS & JavaScript
You will learn how to build a Custom Range Slider using HTML CSS and JavaScript. Custom Range Slider We see it in different types of e-commerce websites or different types of business websites. This type of HTML range slider is used to select a specific value in the slider.
This is a kind of input function of HTML. HTML has many types of inputs like text, password, file, slider, etc. This type of Custom Range Slider has a minimum and maximum value. The user can select any one of those values.
This type of range slider with min and max values is very important for an eCommerce site. I have used animation in this Custom Range Slider. The button that changes the value is designed with CSS. Emojis are used instead of buttons.
How to Create Custom Range Slider with HTML CSS
The emoji in the slider can rotate 360 degrees. The emoji will be at 0 degrees at the slider minimum value. It will rotate when you change the position of the emoji. If you are a beginner then this project (Custom Range Slider using HTML CSS) is very important for you.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
First, we created the basic structure of the slider using HTML. Then JavaScript has been used to activate this Custom Range Slider.
This slider can be used in addition to JavaScript. However, JavaScript is important for activating the display. The value of the display will change when you change the position of the button on the slider.
To make this custom range slider HTML CSS you need to have a basic idea about HTML CSS. I have given a demo that will help you to know more about this custom range slider.