Posts

Node JS - Make HTML page

index3.js -    const express = require ( 'express' ); const path = require ( 'path' ); const app = express (); const publicPath = path . join ( __dirname , 'public' ); console . log ( publicPath ); app . use ( express . static ( publicPath )); app . listen ( 5000 ); -------------------------------------- index.html (under public folder) <!DOCTYPE html > <html lang = "en" > <head>     <title> Home Page </title> </head> <body>     <h1> Home Page Node JS </h1> </body> </html> ------------------------------------ about.html (under public folder) <!DOCTYPE html > <html lang = "en" > <head>         <title> About Us Page </title> </head> <body>     <h2> About Us Page </h2>     <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor fugit tenetur ex doloremque quis expedita dignissimos tempore officia! Volu

Express JS - Render HTML and JSON

  const express = require ( 'express' ); const app = express (); app . get ( '' , ( req , resp ) => {     // console.log("Data sent by Browser =>", req.query.name)     // resp.send('Hello, this is a home page');     resp . send ( `     <h1>Jai Sri Krishna</h1>     <a href="/about">Go to About Page</a>     ` ); }); app . get ( '/about' , ( req , resp ) => {     // resp.send('Hello, this is a about page');     resp . send ( `     [         {             name:'krishan',             email:'krishan@gmail.com'         },         {             name:'Radhe',             email:'radhe@gmail.com'         }             ]     <a href="/">Go to Home Page</a>     ` ); }); app . listen ( 5000 );

Express JS Example

  const express = require ( 'express' ); const app = express (); app . get ( '' , ( req , resp ) => {     resp . send ( 'Hello, this is a home page' ); }); app . get ( '/about' , ( req , resp ) => {     resp . send ( 'Hello, this is a about page' ); }); app . listen ( 5000 );

Node.js CRUD with File System

  const fs = require ( 'fs' ); const path = require ( 'path' ); const dirPath = path . join ( __dirname , 'crud' ); const filePath = ` ${ dirPath } /apple.txt` ; // fs.writeFileSync(filePath, 'this is a apple.txt file'); // fs.readFile(filePath,'utf8', (err, item)=>{ //     console.log(item) // }) // fs.appendFile(filePath, 'I am updating apple.txt file', (err)=>{ //     if(!err){ //         console.log("file is updated") //     } // }) // fs.rename(filePath, `${dirPath}/fruit.txt`, (err)=>{ //     if(!err){ //         console.log("File name has been renamed") //     } // }) fs . unlinkSync ( ` ${ dirPath } /fruit.txt` )

Node Js API Tutorial 2022

Image
 First Static API: -  api1.js -  const http = require ( 'http' ); const data = require ( './data' ); http . createServer (( req , resp ) => {     resp . writeHead ( 200 , { 'Content-Type' : 'application \j son' });     resp . write ( JSON . stringify ( data ));     resp . end (); }). listen ( 5000 ); -------------------------------------------- data.js : - const data =[     { name : 'krishan Dev' , email : 'krishandev.0102@gmail.com' },     { name : 'Raj Dev' , email : 'rajdev.0102@gmail.com' },     { name : 'Brijesh Dev' , email : 'brijeshdev.0102@gmail.com' },     { name : 'Bhavesh Dev' , email : 'bhaveshdev.0102@gmail.com' } ] module . exports = data ; Output:

Angular Website Template

Image
 HTML -  <div id = "header" >     <div class = "container" >         <div class = "row" >             <div class = "col-md-4" >                 <h2> Company Name </h2>             </div>             <div class = "col-sm-8" >             <ul id = "menu" class = "float-md-right" >                 <a href = "" ><li> Home </li></a>                 <a href = "" ><li> About </li></a>                 <a href = "" ><li> Services </li></a>                 <a href = "" ><li> Contact </li></a>                 <a href = "" ><li> Blog </li></a>             </ul>             </div>         </div>     </div> </div> <!-- Banner --> <div id = "banner"

Bootstrap CSS Horizontal Alignment Example

Image
 HTML: <div class = "container-fluid" >     <div class = "row" >         <h2> Bootstrap CSS Horizontal Alignment </h2>         <div class = "col-sm-3" ><h2> Col 1 </h2> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto! </div>         <div class = "col-sm-3" ><h2> Col 2 </h2> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto! </div>         <div class = "col-sm-3" ><h2> Col 3 </h2> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto! </div>     </div>     <!-- justify-content-end Class -->     <div class = "row justify-content-end" >         <h2> justify-content-end Class </h2>         <div class = "col-sm-3" ><h2> Col 1 </h2> Lorem ipsum dolor sit amet consectetur adipisicing elit.

Bootstrap CSS Nesting Example

Image
 HTML: <div class = "container-fluid" >     <div class = "row" >         <div class = "col-md-8" >             <div class = "row" >                 <h2> Bootstrap CSS Nesting </h2>                 <div class = "col-md-6" ><h3> First Column </h3> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, saepe veniam ea adipisci at quibusdam magni quas facere, ratione iste dolorum iusto mollitia. Libero voluptatum repellat nesciunt impedit illo pariatur doloremque hic similique dolores dicta! Ratione facere officia quam id molestiae eveniet quos veritatis non, voluptatum porro ullam pariatur veniam! </div>                 <div class = "col-md-6" > <h3> Second Column </h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quas assumenda voluptas ad, expedita dolor sint totam autem ab excepturi odio labore odit at animi eius

Bootstrap CSS Order Class Example

Image
 HTML: <div class = "container-fluid" >     <div class = "row" >         <h2> Bootstrap CSS Order Class </h2>         <div class = "col order-sm-2 col1" > Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt animi obcaecati nam nihil suscipit consequuntur numquam est, ipsam cumque sed quisquam! Incidunt illum fugit alias delectus! Sed eum iusto, aspernatur veniam corporis nisi temporibus aliquid nihil atque a aliquam necessitatibus consequuntur quidem ipsa commodi, ex ipsam eveniet eos quaerat. Tenetur corrupti dolore dolor neque consequatur placeat facere nisi id repellat sapiente quam quisquam similique quod labore magni consectetur corporis, illo tempora molestias quia animi laborum. Consequuntur sunt necessitatibus quae doloremque ab officia quasi. Consequatur, totam tenetur repudiandae dicta laborum, ea laboriosam porro, quasi asperiores ullam quaerat obcaecati fugiat dolor nihil. </div>         <

Offset Bootstrap Class Example

Image
  Component.html: <div class = "container-fluid" >     <div class = "row" >         <h2> OffSet Tutorial </h2>         <div class = "col-md-5 offset-md-1" >             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet qui, officia sunt ducimus obcaecati cumque delectus repellendus velit maxime quibusdam. Placeat ex pariatur quos repellendus deserunt? Sed dolorem eligendi, deleniti esse voluptatibus dolores! Sapiente, saepe! Molestiae recusandae eveniet eos quidem veniam cum sit mollitia maxime. Pariatur optio dolor reiciendis fugit.         </div>         <div class = "col-md-3 offset-md-1" >             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos reiciendis vel tempora numquam voluptatum omnis, consequatur atque sequi tenetur, blanditiis placeat temporibus velit, repellendus ea!         </div>         <div class = "col-md-1 offset-md-1" >

Grid System Example in Bootstrap 5

Image
 component.html: <div class = "container-fluid" >     <!-- row 1 or header -->     <div class = "row" >         <div class = "col-12" >             <h1> Website Header </h1>         </div>     </div>     <!-- Row 2 or sub-header -->     <div class = "row" >         <div class = "col-12 secondRow" >             <h2> Sub-Header </h2>         </div>     </div>     <!-- Row 3 or content part -->     <div class = "row" >         <div class = "col-9" > Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam ab atque quas? Labore totam cumque molestias facere optio odio nam atque dolores excepturi voluptate nostrum autem eligendi hic laboriosam illo, accusamus expedita inventore possimus. Numquam consequatur aut at magnam corporis error labore odit enim ex harum quis debitis, qui, commodi, fugit quas il