Simple Image Hover Effects in HTML & CSS
In this article, you will learn how to create Image Hover Effects using only HTML and CSS. I have already shared an image hover tutorial using JavaScript. We use different…
How to Create a Custom Toggle Switch Using HTML CSS
If you want to create CSS Custom Toggle Switch then this article is for you. In this tutorial, you will learn step by step how to create Custom Toggle Switch…
Image to PDF Converter using JavaScript & CSS
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%;
}
This is a simple JavaScript project that can convert images to PDF files. Many times we want to convert a file to a PDF. In that case, you can use some kind of JavaScript Image to PDF Converter.
Image to pdf converter using javascript function that converts the images format to the pdf format for that we will be using the api for converting image to pdf file.
This design is a simple project where you can select any one image and convert it to a PDF file with just one click. However, no file other than email can be converted to PDF here. HTML, CSS, and JavaScript are used here. I have added different elements using HTML and created an input box to select the image.
We get different types of input from HTML. One of them is the file. File input will help you to select any file from your device. Here I used accept = “. Png, .jpg, .jpeg” to select only the image in the input. As a result, only certain images can be selected here.
Image to PDF Converter JavaScript
If you have difficulty understanding what I am saying, you can watch the demo below. Here you will find a live preview of this project.
See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.
As you can see, a box has been created on a gradient background. First of all this box has a small display. You can see the selected image in that box. This will let you know which image you are converting to PDF.
However, the problem here is that you cannot select multiple images at once. A PDF file will be created by an image.
How to Convert Image to pdf using JavaScript
This Image to PDF Converter JavaScript project has two buttons. One button to select the image, the other to convert and download to a PDF file.
When you click on the upload or select button, you can select any image from the device. When you click on the download button, your image will be converted to PDF and downloaded. It is very easy to build with very little HTML, CSS, and JavaScript.
Step 1: Basic structure of PDF Converter
The basic structure of the project has been created using the following HTML and CSS. First, a gradient background color has been added to the webpage. Then the box is created.
<div class=”container”>
</div>
*,
*:after,
*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: arial;
font-size: 16px;
margin: 0;
background: linear-gradient(133deg, #4abeb2, #3c57d2);
color: #000;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container{
background: white;
width: 450px;
padding: 30px;
border-radius: 5px;
}
Step 2: Image preview box
Now an area has been created in which to view the image. This means that the preview of the image that you will select to convert to PDF can be seen here. This box uses max-width: 400px and min-height: 200px.
<img id=”showImg” src=”images/img.png”>
#showImg{
display: block;
margin: 0 auto;
max-width: 400px;
min-height: 200px;
background: #174353;
border-radius: 5px;
}
Step 3: Button of Image to PDF Converter
How to Detect User Browser Using JavaScript (Free Code)
This is a simple JavaScript project that will detect user browsers. Many projects require the user to know the browser's information. In that case, you can use this kind of…
How to Create Animated Background using CSS
We see many kinds of background animations on the homepage of the website. If you want to create that kind of animated background using CSS then this tutorial is for…
Simple Weight Converter using JavaScript (Code + Demo)
In this article, I have shown you how to create a weight converter using JavaScript. JavaScript Weight Converter will help you to convert your weight to any other unit.
I have already shown you how to make a Height Converter. This project has been created with absolutely simple JavaScript. Here, if you input your weight in kg, it will be converted into pounds. Here I have arranged to convert from kg to pound. But you can convert any unit if you want. I have shown below how to do it.
There is an input box here. You can input weight in that box. There is a button, when you click on the button you will see the weight in pounds.
JavaScript Weight Converter
Although I made this JavaScript Weight Converter here in a pound unit. You can use any other unit here.
Here is a step-by-step tutorial, with the required source code and live preview. As a result, you will not have any difficulty. But yes you need to have some idea about HTML, CSS, and JavaScript.
For your convenience, I have given a preview below. This will help you to know how Weight Converter JavaScript works.
See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.
Hope you found out by looking at the preview above. First created a small box on the webpage. I used yellow as the background and added a white shadow all around.
First, there is a heading, then an input box. In the input box, you will input your weight in kg. Then there is a submit button. At the end of all, there is a display in which the result can be seen.
How to Create a Weight Converter in JavaScript
Now below I have shared a step-by-step tutorial. If you are a beginner, follow these steps. If you want source code, use the download button directly below.
Step 1: HTML code of Weight Converter
Javascript weight converter information has been added using the following HTML codes. Here’s all the HTML code I’ve put together.
First, a basic structure has been created. Then a heading, two input boxes, and a result viewing area.
<div class=”container”>
<form action=””>
<h1>Weight Convertor</h1>
<label for=”weight-converter”>KG : </label>
<input type=”text” step=”5″ placeholder=”Enter your weight in Kg”/>
<input type=”submit” id=”enter-btn” value=”Enter”>
<p>Your weight in POUNDS is : <span id=”convertedWeight”></span></p>
</form>
</div>
Step 2: Basic Design of Weight Converter
Using some of the CSS code below I designed the webpage and added a background color here. The dark blue color is used in the background.
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
text-align: center;
font-family: “Poppins”, sans-serif;
background: #0462a4;
}
Now the basic structure of this weight converter has been designed. This box is width: 400px, the background color is yellow and a white shadow is used all around.
.container {
background: #ede574;
border-radius: 7px;
width: 400px;
padding: 0.5rem 2rem 2rem 2rem;
box-shadow: 0px 0px 10px #bebebe;
}
Step 3: Design input boxes and buttons (more…)
Animated Eyes Follow Mouse Cursor in JavaScript
In this article, you will learn how to create Animated Eyes Follow Mouse. Simple HTML CSS JavaScript is used here. Animation plays an important role in making a webpage attractive. Javascript eyes follow mouse effect has been created here.
Earlier I shared a CSS follow mouse tutorial. But it is a bit different. Two eyes have been made here. Those two eyes will follow your mouse cursor. Here the eye will be in the same place but the eyepoint will change position.
JavaScript Eyes Follow Mouse Effect
To create this Eyes Follow Mouse Cursor design, some CSS and some JavaScript have been used. But to design it, you must have some idea about JavaScript. This type of animation can be used with any type of web element or logo.
I have given a demo below for your convenience. Here you will see a live preview of this Animated Eyes Follow. From here you can copy all the code directly.
See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.
Two circles have been drawn on the dense blue webpage. That circle is designed in such a way that it looks like an eye.
Small circles have been created in those circles which will act as eyeballs. This eyeball will follow your mouse cursor when you change the position of the mouse cursor.
Animated Eyes Follow Mouse Cursor in JavaScript
In this tutorial, I have shared step by step tutorial and source code. If you only want the source code, you can use the download button below the article. But if you are a beginner, you must follow the step-by-step tutorial below.
Step 1: Basic structure of Eyes Follow
I have created more structures and eyes for this project using the following HTML code.
<div class=”container”>
<div class=”eyes”></div>
<div class=”eyes”></div>
</div>
Now I have designed the web page using some amount of CSS. Here are some simple designs and use a deep blue background color on the web page.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: “Bebas Neue”, cursive;
background: #0c3b5a;
}
Step 2: Design the Eyes Follow Cursor (more…)
How to Create a Digital Clock in JavaScript
If you want to create a Simple Digital Clock using JavaScript then this tutorial is for you. There are many types of digital clock tutorials available on the Internet. However, this design is made in the easiest way.
I used only three lines of JavaScript to create this simple digital clock. I have already created many types of JavaScript clocks. If you want to create an advanced and stylish digital clock then you can search this blog.
However, there are many beginners who want a very simple design. This simple JavaScript digital clock tutorial would be perfect for them. Here I have given step by step tutorial and required source code.
JavaScript Digital Clock
If you want to know how Working Digital Clockworks then be sure to follow the demo section below. Here you will find the required preview and source code.
See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.
As you can see, I have created a box on top of a web page. In this box, first, you can see the time, then you can see a text. During this time you will see the time in hours, minutes, and seconds.
It has AM and PM options. I have already created a digital clock with the date. If you need to show the date with your time, you can see that design.
Create a digital clock using Javascript
Some HTML, some CSS, and 3-line JavaScript have been used for designing. The current time has been taken from your device using the newDate () method. newDate () is a JavaScript method that will take the current time from your device.
1: Basic structure of the clock
First, a box is created using the following HTML CSS. In this box, you can see all the information related to time.
<div class=”container”>
</div>
I designed the webpage with the code below and then designed the box. This box has no specific width height. This will determine the amount of content and the size of the padding.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
background-color: #08798c;
font-family: sans-serif;
}
.container {
border-radius: 10px;
background: #f7f9f7;
box-shadow: 0px 0px 20px #282d28;
padding: 2rem 3rem 3rem 3rem;
color: #191414;
cursor: default;
}
2: Create time viewing area (more…)
How to Zoom Image on Scroll using JavaScript
Zoom Image on scroll Effect You can easily create with JavaScript. When you scroll the wheel, the elements will zoom in and out.Zoom image on scroll is javascript effect in…
How to Get Day Name of the Week in JavaScript
I created a Get Day Name of the Week project using the getDay () method. getDay () is a JavaScript method that allows you to collect Day's information from your…