CSS Styling

Make a box with rounded corners:
	You can see that the box has a rounded corner, which we can do by using the CSS code below. In this case, "box" is the class name for the div. .box { height: 120px; width: 120px; background-color: #06d590; color: black; border-radius: 15px; }

Create a box with a shadow effect using only CSS:
	You can see that the box has a shadow effect, which we can do by using the CSS code below. In this case, "boxShadow" is the class name for the div. .boxShadow { height: 120px; width: 120px; background-color: #cf6a22; color: black; box-shadow: 10px 10px 18px 0px #808080; }
	Box shadows take five values and are applied to the outside portion of tags by default. first value for the X index, second value for the Y index, third value for the blur option, fourth value for the spread, and last value for the shadow's color
Create a box with a Linear Gradient using only CSS:
	You can see that the box has a linear background color, which we can do by using the CSS code below. In this case, "boxLinearGradient" is the class name for the div. .boxLinearGradient { height: 120px; width: 120px; background:linear-gradient(blue, #cf6a22,green);// Default it put color from top to bottom background:linear-gradient(to right,blue, #cf6a22,green);// This will start color from right background:linear-gradient(to left,blue, #cf6a22,green);// This will start color from left background:linear-gradient(45deg,blue, #cf6a22,green);// This will rotate the color with 45deg color: black; }
	Multiple colors are added to the background using a linear gradient. By default, the order is top to bottom. We are also able to adjust the order to "left," "right," and "60 degrees."

Using text shadow in CSS, create a text shadow:
Text shadow effect	You can see that the text shadow effect , which we can do by using the CSS code below. In this case, "Shadoweffect"is the class name for the div. .Shadoweffect color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

Using loader in CSS, create a loader:
	You can see the loader , which we can do by using the CSS code below. In this case, "loader"is the class name for the div. .loader { width: 50px; height: 50px; border-radius: 50%; border: 10px solid white; border-top: 10px solid blue; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Using filter: drop-shadow in CSS, create a image shadow:
	You can see that the image shadow , which we can do by using the CSS code below. In this case, "image"is the class name. .image{ width: 100px; filter: drop-shadow(10px 10px 2px #1a1a1a)!important; } .image>img{ width: 100%; border: none; background:none; }

Using this code to ensure that the image size will always fit within the div even if the div size changes.
	You can see the image that we were able to create with the CSS code below."Photo" is the class name in this instance. .photo{ height: 100px; width: 150px; display: flex; justify-content: center; align-items: center; } .photo>img{ width: 100%; height: 100%; background: none; border: none; }

What is State in React?

State of a component is an object that holds some information that may change over the lifetime of the component. The important point is whenever the state object changes, the component re-render

Lets take an example of User component with message state.
Here useState hook has been used to add state to the User component and it return array with current state and function to update it.

Declare state in the function component

  import React ,{useState} from "react";
  function User(){
  const [message,setMessage]=useState("welcome to React world");
  return(
  <h1>{message}<h1/>
  );
  }

Declare state in the class component

  import react from 'react';
  class User extends React component {
  constructor (props){
  supper(props);
  this state={
  message:"welcome to React world",
  };
  }
 render(){
  return(
  <h1>{this.state.message}<h1/>
 );
  }
  }

State is similar to props,but it is private and fully controlled by the component. It is not accessible to any other component till the owner component decides to pass it.

What is Props in React

Props are input to Component. It can be single value or objects, containing a set of values that are passed to components on creation, similar to HTML tag attributes.
The primary purpose of props in React is to provide following component functionality.

• Pass custom data to your component
• Trigger state changes
  

This reactProps(or whatever you come up with) attributes name then becomes a property attached to React's native "props" object which originally already exists on all components created using React library
//props.reactProps

Functional Component

import React from "react";
import ReactDom from "react-dom";
const ChildComponent =(props)=>{
return(
<div>
<p>{props.name}</p>
<p>{props.age}</p>
</div>
);
};

const ParentComponent =(props)=>{
return(
<div>
<ChildComponent name="jo" age="30"/>
<ChildComponent name="So" age="29"/>
</div>
);
};

Class Component

import React from "react";
import ReactDom from "react-dom";
class ChildComponent extends React.Component{
render(){
return(
<div>
<p>{this.props.name}</p>
<p>{this.props.age}</p>
</div>
);
}
}

React Tutorial

What is React?

React is an open-source front-end JavaScript library that's utilized for building component bassed client application

• React is especially used for Single page application
• It is used for handling View layer of Web Application and Mobile app.
• React Uses JSX syntax. JSX is as syntax extension of JS that allow developers to write HTML in their JS Code
• React uses Virtual Dom instead of Real DOM.
• Real DOM manipulation are expensive.
• React uses reusable UI Components to develop the view.

What is JSX?

JSX stands for JavaScript XML and it is an XML-Like extension to ECMA Script. Basically it provide the syntax for the Below Function.

React.createElement(type, props,... children)

In the below example the text inside <h1> tag is returned as JavaScript function to render function.

export default function App(){
return(
    <h1>{"Hello this is JSX code!"} </h1>
  );
 }

If you don't use JSX syntax then the respective JavaScript code should be written as below.

Functional Component

  import {createElement} from 'react';
  export default function App(){
     return createElement(
      'h1',
      {
     className:'greeting'},
      'Hello, This is a JSx Code'
    );
  }

Class Component

  class App extend React.Component{
     render(){
      return(
     <h1>"{Hello, This is a JSx Code}</h1>
    );
  }
 }

Read cookie using JavaScript Code

Read cookie using JavaScript Code

Today, we'll look at how to use JavaScript code to read cookies. The function readCookie, which is located below, accepts a cookie's name and returns its value.

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++)
    {
     var c = ca[i];
     while (c.charAt(0)==' ')
     {
      c = c.substring(1,c.length);
     }
    if (c.indexOf(nameEQ) == 0)
     return c.substring(nameEQ.length,c.length);
    }
  return null;
}

I will demonstrate how to generate cookies using JavaScript in the code below.

function cookieCheck(){
  var interval;
  if(readCookie("userlogTime") == null)
  {
   var cDateTime = new Date();
   var timeSet = cDateTime.getHours();
   document.cookie ="userlogTime="+timeSet;
   }
  }
The above code show how we can create cookie using javascript

Deferred in SharePoint JSON

How to use Deferred in SharePoint JSOM?

I'll demonstrate how to utilize Deferred in SharePoint Online today.
All functions in SharePoint operate asynchronously, however occasionally we must call a function after another has finished. Assuming we have two lists and must retrieve data sequentially from each, delayed is used in this scenario

Swap value of two variables without using 3rd variable

How to swap two variable without using 3rd variable?

Hi Friends.
Today we will see how we can swap value of two variable without using the third variable.
For that will perform the below steps.
Step 1. Declare both variables.
  var x=13;
  var y=21;
Step 2. Add both variable and assign to the first variable.
  x=x+y; //13+21, x =34

Step 3. Subtract second variable from first variable as it contains the sum of both variables and assign to the second variable. By doing this, second variable will hold the value of first variable value which was assign in the beginning.

  y=x-y; //34-21, y=13

Step 4. Now subtract second variable from first variable as it contains the sum of both variables and assign to the first variable. By doing this, first variable will hold the value of second variable value which was assign in the beginning.

   x=x-y; //34-13. x=21
Complete code:-
  var x=13;
  var y=21;
  x=x+y; //13+21, x =34
  y=x-y; //34-21, y=13
  x=x-y; //34-13. x=21

File upload and overwrite into the SharePoint library using JavaScript

 Hi Friends,

We will see how we can upload file into the SharPoint library and also overwrite, if the file is present into the library.

We can use the below code to upload the file into the SharePoint document library.

Also we can overwrite the file if already present into the Document library.

By default, it does not allow to overwrite the file but through the code we can set overwrite true.

set_overwrite(true);

  <script language="javascript" type="text/javascript">

        var fileInput;
        $(document).ready(function () {

                fileInput = $("#getFile");
                SP.SOD.executeFunc('sp.js', 'SP.ClientContext', registerClick);

            });

        function registerClick() {
            //Register File Upload Click Event   
            $("#addFileButton").click(readFile);
        }

        var arrayBuffer;

        function readFile() {

            //Get File Input Control and read the file name  
            var element = document.getElementById("getFile");
            var file = element.files[0];
            var parts = element.value.split("\\");
            var fileName = parts[parts.length - 1];

            //Read File contents using file reader  

            var reader = new FileReader();
            reader.onload = function (e) {
                uploadFile(e.target.result, fileName);
            }
            reader.onerror = function (e) {
                alert(e.target.error);
            }

            reader.readAsArrayBuffer(file);
        }

        var attachmentFiles;

        function uploadFile(arrayBuffer, fileName) {
            //Get Client Context,Web and List object.  
            var clientContext = new SP.ClientContext();
            var oWeb = clientContext.get_web();
            var oList = oWeb.get_lists().getByTitle('Documents');

            //Convert the file contents into base64 data  
            var bytes = new Uint8Array(arrayBuffer);
            var i, length, out = '';
            for (i = 0, length = bytes.length; i < length; i += 1) {
                out += String.fromCharCode(bytes[i]);
            }
            var base64 = btoa(out);

            //Create FileCreationInformation object using the read file data  
            var createInfo = new SP.FileCreationInformation();
            createInfo.set_content(base64);
            createInfo.set_overwrite(true);
            createInfo.set_url(fileName);

            //Add the file to the library  

            newFile = oList.get_rootFolder().get_files().add(createInfo);
            var myListItem = newFile.get_listItemAllFields();
            myListItem.set_item("PID", "33")

            //Load client context and execcute the batch  
            myListItem.update();
            clientContext.load(newFile);
            clientContext.executeQueryAsync(QuerySuccess, QueryFailure)
        }

        function QuerySuccess() {

            console.log('File Uploaded Successfully.');
            alert("File Uploaded Successfully.")
        }

        function QueryFailure(sender, args) {

            console.log('Request failed with error message - ' + args.get_message() + ' . Stack Trace - ' + args.get_stackTrace());
            alert("Request failed with error message - " + args.get_message() + " . Stack Trace - " + args.get_stackTrace());

        }

    </script>