Responsive Sidebar Menu using HTML CSS and JavaScript

Responsive Sidebar Menu using HTML CSS and JavaScript

Responsive Sidebar Menu using HTML CSS and JavaScript

In this article, you will learn how to create a responsive sidebar menu bar using HTML CSS and JavaScript. Earlier I shared with you the design of many more types of responsive side navigation bars. I took the help of HTML CSS to create the basic structure of the Simple Sidebar. The menu buttons here help Javascript to work.

At first, I created a top bar but did not add any menu items. Just added a logo here and it has a menu button. I’ve added a number of menu items to the sidebar, each with an icon. Under normal circumstances, only icons can be seen and text cannot be seen.

Responsive Sidebar Menu in HTML CSS

Nowadays menu bar is a very important element for any website. Different websites use a top menu bar and some websites use top and side two types of menus. Undoubtedly the sidebar is much more attractive and attracts the attention of the user.

The width of the sidebar is 220px but in the normal case, its width will be 70px. When you click on the menu button here, you will see the icons with full text and the width of the sidebar will be 220px. In the case of small devices, this design (sidebar menu HTML CSS) can completely adapt itself.

Hopefully, the video above has helped you to know how it works. To build it you must have a basic idea of ​​HTML CSS and JavaScript.

Here is a step-by-step tutorial for beginners with a video where we have shared the complete tutorial. There is also a download button at the bottom of the article to download the source code.

Step 1: Sidebar’s basic code

Using the HTML and CSS code below, I have created the basic structure for this sidebar. All HTML code will be added to this HTML structure.

<div class=”wrapper hover_collapse”>
</div>
*{
font-family: ‘Baloo Paaji 2’, cursive;
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
body{
background: #f5f5f5;
}

Step 2: Basic structure of the top menu bar

I have created the top menu bar with the help of the following codes. Here I have used the width: 100% and height: 60px of the top navigation bar. The background color is black and ‘top: 0’ and ‘left: 0’ are used to place it on top of the web page.

<div class=”top_navbar”>
</div>
.top_navbar{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #323233;
box-shadow: 1px 0 2px rgba(0,0,0,0.125);
display: flex;
align-items: center;
}
Basic structure of the top menu bar

1. Create a logo using text

Now a logo has been added to this top bar. I have added this logo with the help of text. Background width of this logo: 250px and font-size: 25px.

<div class=”logo”>Foolish Dev</div>
.top_navbar .logo{
width: 250px;
font-size: 25px;
font-weight: 700;
padding: 0 25px;
color: white;
letter-spacing: 2px;
text-transform: uppercase;
border-right: 1px solid #f5f5f5;
}
Create a logo using text

2. Create menu button

(more…)

Continue ReadingResponsive Sidebar Menu using HTML CSS and JavaScript
Aspect Ratio Calculator Using HTML CSS And JavaScript

Aspect Ratio Calculator Using HTML, CSS, and JavaScript

Aspect Ratio Calculator Using HTML, CSS And JavaScript

In this article, you will learn how to create an Aspect Ratio Calculator using HTML CSS, and JavaScript. Aspect Ratio is basically the relationship between the width and height of an element.

Any element formed by four angles has a certain aspect ratio. Today in this article I have shown you how to create JavaScript Aspect Ratio Calculator very easily. You can calculate it manually but this will be much easier with programming. I used some basic JavaScript to create this project.

See the Pen
JavaScript Aspect Ratio Calculator by Code Media (@codemediaweb)
on CodePen.

There are two types of input fields. First, there are two input boxes to add the percentage of Aspect Ratio, that is, you have to input the percentage at which you want to calculate this. In place of the following two inputs, you can input width and height. 

For example, you want to make a box and you want to make that box on this 18: 9 ratio. In that case, you can easily know the other value by inputting any one of the lengths or heights here.

JavaScript Aspect Ratio Calculator

In this tutorial, we have shown how to create this CSS aspect ratio calculator program. That’s why you need to have an idea about basic JavaScript. First I designed the web page using some CSS code. 

Then I created a box using HTML code. I have added all the information to this box. Then I added some text that would serve as headings. Then I made two input boxes to input the ratio. Then there are two more input spaces where width and height can be input.

I did not use any external library or jQuery to create this project. I have made this Aspect Ratio Calculator using Pure JavaScript.

If you are a beginner, follow the step-by-step tutorial below. Below the article, you will find the source code needed to create it.

Step 1: Basic structure of Aspect Ratio calculator

I have created a box on the web page using the following HTML and CSS codes. First I designed the background of the webpage using some amount of CSS code.

 Here on that page, I used linear-gradient color at a 135-degree angle. The box here is width: 400px and the height depend on the padding.

<div class=”container”>
</div>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: “Poppins”, sans-serif;
}
body {
     height: 100vh;
     background: linear-gradient(
        135deg,
        #9cc0e0 50%,
        #1b72b2 50%
    );
}
.container {
    width: 400px;
    background-color: #ffffff;
    padding: 50px 30px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    box-shadow: 0 30px 45px rgba(18, 8, 39, 0.2);
}
Basic structure of Aspect Ratio calculator

Step 2: Add a heading to the box (more…)

Continue ReadingAspect Ratio Calculator Using HTML, CSS, and JavaScript
How to Create JavaScript Copy to Clipboard

How to Create JavaScript Copy to Clipboard

How to Create JavaScript Copy to Clipboard

In this article, you will learn how to create Copy to Clipboard using HTML CSS, and JavaScript. JavaScript Copy to Clipboard is a simple project that helps to copy something. This type of structure is often used to copy a lot of content in a box or in a text area.

You can build it with the help of simple HTML CSS JavaScript. If you want to copy manually, you have to copy all those texts. But this project will help you to easily copy all the content with a single click.

JavaScript Copy to Clipboard

I have shared step by step tutorial for your convenience. First I made it more structured with the help of HTML CSS and then I implemented it using a small amount of JavaScript. First I created a box at the top of the web page and added a title to that box.

Then I created a box with the help of Textarea. In that box I have added a lot of text then there is a button. Clicking on that button will copy all the text. I have added some amount of hover in the structure so that after clicking on the button, border color, icon, etc. will change.

See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.

Hopefully, the live demo above has helped you to know how it works. Above you will find the required source code.

How to Copy to Clipboard in JavaScript

Now I have shown the complete tutorial step by step on how to make this JavaScript Copy to Clipboard. If you are a beginner, be sure to follow the tutorial below.

First, you create the HTML and CSS files. Here I have used the font awesome CDN link which will make the icon work. You must include that link in your HTML file. Below I have shown the code step by step. If you have difficulty connecting those codes together, you can use the download button below the article.

Step 1: Basic structure of the project

I have basically designed this copy to clipboard HTML using the following HTML and CSS codes.

<div class=”text-box”>
 
</div>

I have designed the webpage with the help of CSS below. Here I have used blue as the background color of the web page.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: “Poppins”, sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0486c2;
}

I use these codes in a box that will basically serve as the basic structure of this project. Its width is 750px and the background color is white.

.text-box{
  position: relative;
  background: #fff;
  width: 650px;
  margin: 10px;
  padding: 0 20px 20px 20px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgb(1 1 1 / 10%);
}
Basic structure of the project

Step 2: Add the title to the box (more…)

Continue ReadingHow to Create JavaScript Copy to Clipboard
todo list javascript

How to Make a Todo List using JavaScript

display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
word-wrap: break-word;

line-height: 2em;}

h3{text-align: left;
font-family: Open Sans,Arial,sans-serif;
line-height: 1.7em;
color:black;
color:#333131;
font-weight: 520;

-webkit-font-smoothing: antialiased;
}

h2{text-align: left;
font-family: Open Sans,Arial,sans-serif;
line-height: 1.7em;
color:black;

font-weight: 620;
-webkit-font-smoothing: antialiased;
}

.class {
background:#edf0f2;
font-family: Consolas,Monaco,Lucida Console,monospace;
line-height: 1.65;
word-wrap: break-word;
border-radius: 5px;
color:#001d8f;
font-size:17.1px;
padding-left:10px;
white-space: pre-wrap;}

button.last-btn{
padding:14px 29px;
font-size:17px;
background-color:#0e87f0;
border-radius:6px;
color:white;
font-family: Open Sans,Arial,sans-serif;
border:none;
margin-left:35%;

}

@media only screen and (max-width: 400px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 300px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 600px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 800px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}

@media only screen and (max-width: 400px) {
.copyButton {
width: 45%;
}

How to Make a Todo List using JavaScript

In this article, you will learn how to create Todo List using JavaScript. Todo List JavaScript is a wonderful project that will help beginners to increase their knowledge about JavaScript.

This type of JavaScript Todo List is mainly used to organize any of your information. Here you can create a list of many texts that you want to do later. Once you’ve done that, you can delete them. It can basically serve as a daily routine.

Todo List JavaScript

I have shown here complete information and tutorial on how to create a Todo List HTML using JavaScript. I took the help of HTML and CSS to design it. Implemented with the help of JavaScript.

Scientific Calculator in Java (Step by Step)

First I created an input space here. Here you can input any text. Then there is an ‘Add’ button which can be found in a list after clicking on it. 

See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.

Next to each task or routine, there is a delete button which if clicked on the text will be deleted. Undoubtedly todo list HTML CSS is a great project.

How to Make a Todo List JavaScript

Below I have shared the complete tutorial on how I created this todo list HTML. That’s why you must have a basic idea about JavaScript. First I designed a web page then I made a box. Then I created a place to input using the input of HTML.

Now you create an HTML and CSS file. Then follow the complete information and tutorials below step by step.

Step 1: Basic structure of the project

I created a box on the webpage using the HTML and CSS code below. This is basically the basic structure of todo list.

 <div class=”container”>
 
 </div>

Using the CSS below, I first added blue color to the background color of the webpage. I have used a min-width of 450 px and a min-height of 100px for this box.

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: #066acd;
}
.container{
    width: 40%;
    min-width: 450px;
    position: absolute;
    min-height: 100px;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    background: white;
    border-radius: 10px;
}
Basic structure of the project

Step 2: Create a place to input using HTML

(more…)

Continue ReadingHow to Make a Todo List using JavaScript
BMI Calculator using Javascript, HTML & CSS

BMI Calculator using Javascript, HTML & CSS

bmi calculator source code

In this article, you will learn how to create BMI Calculator using HTML CSS, and JavaScript. BMI stands for Body Mass Index. It basically helps to determine how much mass is in our body. 

According to science, a healthy and normal person should have a BMI between 18.5 and 25. If its value is less than 18 then it is underweight which is unhealthy. If its value is more than 25 then it is called fat or overweight.

There are specific formulas for manually calculating BMI. However, you can do this manual work much easier through programming. That’s why in this article you will know how to make BMI Calculator using Javascript.

For this type of project, there will be two input boxes where weight and height have to be input. Then this project will automatically calculate your BMI. Here you can see a text with the result of the calculation.

BMI Calculator Javascript [Live Demo]

 First I created a box at the top of the web page. I first added another title to that box. Then there is a small display. The results can be seen by calculation in that display. I used HTML’s range slider to input. As a result, minimum and maximum values ​​are set here. 

The first of the two sliders is for weight and the second is for hiding input. Then it will calculate and show how much BMI you have in that display. It will show a message where your BMI status can be known.

See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.

Hopefully, the demo above has helped you get this project live experience. You can copy the source code needed to create it from above. Also, the download button at the bottom of the article will help.

How to calculate BMI in JavaScript

Below I have shared the complete step-by-step tutorial. If you are a beginner then follow the tutorial below to make it (BMI Calculator with Source Code).

Here is the formula for manually calculating BMI

BMI = (weight) / (height * height)

weight = the weight of your body
height = height of your body

For this, you need to have an idea about HTML and CSS. First, create an HTML and CSS file then follow the steps below.

Step 1: Create the basic structure of the calculator

I have created a box using the following code which is basically its basic structure.

<div class=”container”>
</div>

The following CSS has helped to design that webpage. Here I have used blue as the background color of the web page.

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: #046db9;
}

I designed the box with the following codes. The background color of the box uses white and the width: 400px.

.container{
    background-color: #ffffff;
    padding: 30px 30px;
    width: 50%;
    min-width: 400px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 5px;
    font-family: ‘Poppins’,sans-serif;
    box-shadow: 25px 25px 30px rgba(0,0,0,0.15);
}
Create the basic structure of the calculator

Step 2: Add a heading using HTML (more…)

Continue ReadingBMI Calculator using Javascript, HTML & CSS
ranch slider html css

How To Create JavaScript Range Slider with min and max

How To Create JavaScript Range Slider with min and max

In this article, you will learn how to build JavaScript Range Slider with minimum and maximum value. We use sliders for various purposes. Basically to create a range or area of ​​value, quantity, etc. of something.

We use such designs (javascript range slider min-max) on different types of e-commerce websites. This price range project you can easily create with the help of HTML and CSS. Here I have used the input function of HTML.

JavaScript Range Slider 

We get many types of input from HTML including e-mail, password, file, text, etc. In the same way, I got a slider called Range (<input type=”range”>). Where we can add a minimum and maximum values.

Below I have given a live demo that will help you to know how it works (multi-range slider javascript).

See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.

First I made a box. I have created a slider with the help of input in that box. I have used a minimum value of 5 and a maximum value of 100 in this range. We have created a display where you can see the selected value. 

This value is associated with the button in the range with the help of Tooltip. Changing the position of the slider button will also change the Tooltip.

How To Create Range Slider using JavaScript

Below I have given a complete step-by-step tutorial to create JavaScript Range Slider with min and max. For this, you need to have a basic idea about HTML and CSS. 

First, you create an HTML and CSS file. Then follow the step-by-step procedures below. You will find the download button below the article.

Step 1: Create the basic structure of the slider

I have created a box on the web page using the following HTML and CSS codes. Its width is 380px and height is 80px. Its background color is white and the box-shadow has helped to make it beautiful and attractive.

<div class=”range”>
</div>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: ‘Poppins’, sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  text-align: center;
  place-items: center;
  background: #0492f1;
}
.range{
  height: 80px;
  width: 380px;
  margin: 150px auto;
  background: #fff;
  border-radius: 10px;
  padding: 0 65px 0 45px;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.1);
}
Create the basic structure of the slider

Step 2: Create Range Slider with Input

 Now I have created a slide using the range input of HTML. Here I have used a minimum value of 5 and a maximum value of 100. You can increase or decrease the amount you want.

(more…)

Continue ReadingHow To Create JavaScript Range Slider with min and max