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%;
}

Image to PDF Converter using JavaScript

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;
}
Basic structure of PDF Converter

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;
}
Image preview box

Step 3: Button of Image to PDF Converter

(more…)

Continue ReadingImage to PDF Converter using JavaScript & CSS

Simple Weight Converter using JavaScript (Code + Demo)

Weight Converter using JavaScript

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;
}
HTML code of Weight Converter

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;
}
Basic Design of Weight Converter

Step 3: Design input boxes and buttons (more…)

Continue ReadingSimple Weight Converter using JavaScript (Code + Demo)

Animated Eyes Follow Mouse Cursor in JavaScript

JavaScript Eyes Follow Mouse Effect

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;  
 }
Basic structure of Eyes Follow

Step 2: Design the Eyes Follow Cursor (more…)

Continue ReadingAnimated Eyes Follow Mouse Cursor in JavaScript

How to Create a Digital Clock in JavaScript

JavaScript Digital Clock

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;
}
Basic structure of the clock

2: Create time viewing area (more…)

Continue ReadingHow to Create a Digital Clock in JavaScript