How to Create Automatic Popup Window using HTML & CSS
An automatic popup window is a javascript project that uses different javascript functions and loads as soon as the website loads on the user's browsers this type of automatic pop-up…
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%;
}
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;
}
Step 2: Create a place to input using HTML
BMI Calculator using Javascript, HTML & CSS
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);
}
Step 2: Add a heading using HTML (more…)
Coin Flip Game using JavaScript & CSS
In this article, you will learn how to make Coin Flip Game using JavaScript. JavaScript Coin Toss Game is a great JavaScript project for beginners. This type of project will…
Random CSS Gradient Generator with JavaScript
Random Gradient Generator with JavaScript & CSS
In this article, you will learn how to build a Random Gradient Generator using JavaScript, HTML, and CSS. CSS Gradient Generator is basically a simple JavaScript project that will increase…
Create a Simple Stopwatch using JavaScript (Tutorial + Code)
In this article, I am going to show you how to make a simple javascript stopwatch. Many times this type of design is needed in different types of projects or websites.…