PenPocketNote: June 2019

Wednesday, 19 June 2019

NODE JS

Node.js is a platform built on Chrome's JavaScript run time for easily building fast and scalable network applications.

We can run javascript code on the server.

Why Node Js?
Node.js operates on a single-thread, using non-blocking I/O calls, allowing it to support tens of thousands of connections held in the event loop. and it also memory efficient.

Node Js Module
Module in Node.js is a simple or complex functionality organized in single or multiple JavaScript files which can be reused throughout the Node.js application.

Type of module:
3 types module
a:File based module : we have export the file module like module.export and import that file module using required function.
b:Core module:Built in module ( its already in built)
c:External node module: node package manager (API) using npm commmand

Node REPL
REPL stands for Read-Eval-Print-Loop. It is a quick and easy way to test simple Node.js/JavaScript code.

# How to write hello world in node

How to exit node repl ?

=> Press 2 times Ctrl +C

How to install node js

Step 1 : Create a folder in drive using cmd promt

in that folder install node js , using cmd ==> npm init

After Complete open folder in sublime text editor => package.json

Create index.js file then create Hello World

Run the Program in cmd just write node and file name

# demo 1
How to calculate area and perimeter

out put

# demo2 Find area and perimeter using File Based Module

step1 : create new file square.js ==> pest the code using exports

step2 : import the file in index.js so we are using require

step3: output ==> go to cmd and type node index

Tuesday, 11 June 2019

Hosting Website in Git hub

Step 1: Sign in Git hub ACCOUNT

Step2 : join Github

Step3: Choose your Subscription plan

Step4 :Verify mail id

Step5: Update Your Profile

Step 6 :Create a new repository

Step 7 : Down lode Git hub Desktop and sign in your git hub account .after that clone repository then you got your file .

Step 8 : Click Show in Explorer CTRL + Shift + Fthen Copy your file and Paste in new open file. then add summery and description and then commit master

Step 9 : Publish branch

Step 10 : Then go to Git hub page > Setting > github page > Master Branch

Then Your Link ready and check in Browser. your website ready .

Monday, 10 June 2019

Responsive Web page

Create Responsive web page Using Bootstrap

<!Doctype html>
<html>
<head>
<title>Section </title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
}

.logo h1{
font-family: 'Anton', sans-serif;
color:#fff;
}
ul >li:hover{
color:red;
cursor:pointer;
}
.main-content{
position:absolute;
top:0;
width:100%;
z-index:-1;
}
.left_side{
background-image:linear-gradient(to left,rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url('bg.jpg');
width:100%;
height:100vh;
background-repeat:no-repeat;
background-size:cover;
}
.right_side{
background-color:#000;
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="row py-4">
<div class="col-lg-6 col-md-6 col-12 ">
<div class="logo">
<h1> INTERIOR DESIGN </h1>
</div>
</div>
<div class="col-lg-6 col-md-6 col-12 ">
<ul class="d-flex justify-content-around align-items-center list-unstyled text-uppercase text-white">
<li>Home</li>
<li>About</li>
<li>Contact </li>
</ul>
</div>
</nav>
<div class ="row main-content text-white">
<div class="col-md-6 col-12 left_side">
</div>
<div class="col-md-6 col-12 right_side d-flex justify-content-center align-items-center">
<div class="right-content w-50">
<h1>Best Living Room Decoration For Modern House</h1>
<p>The family room is a place where love is poured out, a comfortable and beautiful family room will make residents feel at home. From a comfortable family room there will be love for all family members.</p>
<button class="btn btn-warning"> Read more</button>
<div>
</div>
</div>

</div>
</body>

</html>

OUT PUT

404 page create

Create 404 Error Page Design

<!Doctype html>
<html>
<head>
<title>404 page</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.main_body{
width:100%;
height:100vh;
background-image:url("bg.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
display:flex;
justify-content:center;
align-item:center;
}
.center_body{
width:55%;
height:60%;
background-image:url("bg.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
display:flex;
flex-direction :column;
justify-content:center;
align-items:center;
margin-top:5%;
transition:all 0.5s linear;
}
.center_body h1{
font-size:200px;
color:#fff;
text-shadow:10px 9px 3px #74b9ff;
font-weight:700px;
letter-spacing:5px;
transition:all 0.2s linear;

}
.center_body h3{
font-size:25px;
color:#fff;
font-weight:700px;
letter-spacing:5px;
}
.center_body p{
font-size:25px;
color:#fff;
font-weight:400px;

}
.center_body a{
font-size:20px;
text-decoration:none;
display:inline-box;
background:#fff;
color:green;
text-transform:uppercase;
padding: 13px ;
border-radius:20px;
margin-top:5px;
}
.center_body:hover a{
color:red;
transition:all 0.5s linear;

}

.center_body:hover h1{
text-shadow:9px 6px 3px #b2bec3;
}

</style>
</head>
<body>
<div class="main_body">
<div class="center_body">
<h1>404</h1>
<h3>PAGE NOT FOUND</h3>
<p>Page not Found !! Go to Home page</p>
<a href="https://rajashreetri.github.io/rajshreeweb.github.io/" target="_blank"> Go to Homepage</a>
</div>
</div>
</body>
</html>

Out put

Sunday, 9 June 2019

What is !important Declaration in CSS

Important declaration are defined as that declaration which is having more importance then the normal declarationex: color: green !important;

In css Selector Priority Rules:

inline >id > class > internal css > External css.

<!Doctype html>
<html>
<head>
<title> Css Important </title>
<style>
.cs{
color: red;
}
</style>
</head>
<body>
<h2 class="cs"> Rajashree Tripathy</h2>
</body>

</html>

Out Put

Use ID in html code

<!Doctype html>

<html>

<head>

<title> Css Important </title>

<style>

.cs{

color: red;

}

#cd{

color:blue;

}

</style>

</head>

<body>

<h2 class="cs" id="cd"> Rajashree Tripathy</h2>

</body>

</html>

Out put

Use Important