In this article, we are going to explore the conversion of required HTML content into a PDF file. Many a time we have to read and accept the Terms & Conditions, a better way is to download the PDF file read it in spare time, and then accept it. Therefore, for achieving this we can make use of converting the content into a PDF file.We also need some content to be stored in a PDF file to be used later on for various purposes. The most common use includes downloading chapters, texts, thesis, etc.The above conversion can be achieved in ... Read More

In this article, we are going to explore about the concept of computed properties in an object. We will learn how to declare an object with computed property name. Let’s know about JavaScript objects before actually moving on to computed properties.JavaScript Object − A JavaScript Object contains key-value pairs in which the key represents a property from which we can get and set the value of an object.Method IWe will use the square bracket expression i.e. [] to create the computed name property in the object. In ES6 it is possible to use an expression within the [] brackets.Example 1In ... Read More

In this article, we are going to explore and learn about Timeline Animations. Anime.js is a lightweight JavaScript library that has a small but powerful set of APIs. It works upon the DOM attributes, CSS properties, SVG, and JavaScript objects.We can build multiple and complex animations using the Anime.js. Anime’s built-in staggering system helps in making complex follow through and overlapping animations simple. It can also be used on both timings and properties.How to use Anime.js?We can import or use Anime.js in our code in the following two ways −We can either download the anime.min.js file and directly use it ... Read More

In this article, we are going to learn about parallax effects and how to create them using HTML, CSS, and JavaScript. We will be using the mouse-move event to show the parallax effect. During the parallax effect, two different images move in parallel to each other. Both the images will be working parallel and making the same transitions. The only difference will be they move in the opposite directions.Parallax effects are used for making the websites better in terms of User Experience and enhancing the interactivity level of the website. We can move the foreground and the background images at ... Read More

In this article, we are going to create a slider carousel using JavaScript. Along with using JS we will be also using HTML and CSS for representation and defining the basic layout.A carousel is basically a collection of images represented as a slideshow that is used for displaying the images, text, or both in a cyclic manner.A slider Carousel is a special type of carousel that is specifically used for displaying the slider on a website’s main page. This slideshow runs in a landscape mode. We can use the eventListener() provided by the JavaScript functions to record and display different ... Read More

In this article, we are going to explore how to create a JavaScript object from the desired key-value pairs. Let’s understand the steps involved as below−Steps:Step I − We are first going to create an Empty Object.let object = {}Step II − Once the object is initialized with the null values we can add the desired {key, value} pairs in the object.let firstKey = 0; let firstKeyValue = "TutorialsPoint"; object[firstKey] = firstKeyValue;Step III − The resultant object is the JSON object that holds all the key-value pairs.console.log(object);Example 1In this example, we are creating a simple application. In the script part, ... Read More

In this article, we will be creating a FAQ (Frequently asked questions) accordion using JavaScript. The accordion is used to display the questions and will open up on clicking to display the answers. We can see the FAQ section on every website where all the top questions are covered. Today we will learn how to make these FAQ sections.Steps for creating the AccordionStep I −Firstly, we will be creating a nested HTML div tag that will hold all questions and answers. These div tags will depend upon the number of QnA to be displayed.Step II − We will use CSS ... Read More

In this article, we are going to explore creating a function that will allow the user to change the font size of the complete webpage. We can generally see this type of feature on some of the government websites in the top right corner. This is basically to facilitate people using the website to enlarge the web content as required.In this article ,we will be applying the same function using JavaScript & JQueryExample #1In the below example, we have created a simple div program and created two buttons i.e. Increase and Decrease. We have used these 2 functions to increase ... Read More

In this article, we are going to build a dynamic report using the inputs entered by the user. The user will enter the marks (in this case) and we will be populating these marks to calculate the final percentage of the student.We have also implemented the fail/pass status that will render whether a student has passed or failed based upon the entries done by the user. We will be using HTML, CSS, and JavaScript for the implementation.StepsWe will be creating an HTML template with rows and columns for name and subject scores. These subject scores will be further divided into ... Read More

In this article, we will be creating a Coming Soon Page that will display a timer for the event that will occur on a specific date and time. The timer will go in the opposite direction and at the time of the actual event, it will basically show the event page if configured.A coming soon is similar to a webpage with some special specifications to show. The specifications define what is next to come to the website (Like a launch of a new Smartphone, Feature, TV, Software, Tool, etc.)ApproachWe will first set up a page to be displayed on the ... Read More