Posts

Showing posts with the label Javascript application

Install Angular 10 CLI and Create a New Example App with Routing

Image
 Hello everyone, today we will discuss the Environment Setup required for Angular 10. To install Angular 10, we require the following −  Nodejs  Npm  Angular CLI  IDE for writing your code Step 1:Install Node.js To check if node.js is installed on your system, type node -v in the terminal. This will help you see the version of node.js currently installed on your system. sibinmuhammed@ladmin-knf:~$ node -v v12.18.4 If it does not print anything, install node.js on your system. To install node.js, go to the homepage, https://nodejs.org/en/download/ of node.js, and install the package based on your OS. Based on your OS, install the required package. Once node.js is installed, npm will also get installed along with it. To check if npm is installed or not, type npm –v in the terminal as given below. It will display the version of the npm . sibinmuhammed@ladmin-knf:~$ npm -v 6.14.8 Step 2 — Installing Angular CLI 10 Head over to a new termi
Read more

Convert HTML Table data Into JSON With jQuery and Javascript.How?

Image
Congratulations you are a real explorer  Friends, I am going to show you how to Convert HTML Table data Into JSON With jQuery and Javascript. HTML table and it's converted JSON data is shown below Technologies used: HTML Bootstrap CSS Javascript HTML page - Source code   < !DOCTYPE html> <html> <head> <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>   <style> #knf-users {   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;   border-collapse: collapse;   width:
Read more

Develop Simple Responsive Sign In Form.How?

Image
Congratulations you are a real explorer  Friends, I am going to show you how to develop a simple responsive Sign-In form using bootstrap. Our Sign-In form UI is below Web View: Click here Technologies used: HTML Bootstrap CSS jQuery Source Code <html> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="css/login_style.css"> <style> body{ background: -webkit-linear-gradient(left,#800080,#8A2BE2 ); padding-top: 25vh; } form{ backgr
Read more

Develop Simple Responsive Sign Up Form.How?

Image
Congratulations you are a real explorer  Friends, I am going to show you how to develop a simple responsive Sign-Up form using bootstrap. Our Sign-Up form UI is below Web View :Click here Technologies used: HTML Bootstrap CSS jQuery   Source Code <!DOCTYPE html> <html lang="en"> <head>   <title>Knowledgefactory-Sign Up</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <style> .form-style {   background-image: linear-gradient(to right,#D3D3D3,white
Read more

XML to JSON Online Converter

XML to transform transform Transformed JSON
Read more

DataTable-Pagination example with Spring boot, jQuery and ajax

Image
In this secction, we will show you the DataTable-Pagination example with Spring boot, jQuery, and ajax. The following technologies stack being used: Spring Boot 2.5.5 Java 17 Datatable jQuery javascript Ajax Project Structure pom.xml POM stands for project object model. It's the fundamental unit of work in Maven. It is an XML file that contains information about the project and configuration details used to build the project. It downloads required libraries easily using POM XML tags. <?xml version = "1.0" encoding = "UTF-8" ?> <project xmlns = "http://maven.apache.org/POM/4.0.0" xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation = "http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd" > <modelVersion> 4.0.0 </modelVersion> <parent> <groupId> org.springframework.boot </groupId> <artif
Read more