Thursday, December 28, 2023

JavaScript interview questions and answers

 1. What is JavaScript?

JavaScript is a dynamic programming language that's used for web development, web applications, game development, and lots more. It allows to implementation of dynamic features on web pages that cannot be done with only HTML and CSS.

or

JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, that supports various types of programming styles such as object-oriented, imperative, and functional programming.

2. What are the data types in JavaScript?

Primitive Data Types:
Number:
Represents numeric values.
Example: let num = 42;

String:
Represents a sequence of characters.
Example: let str = 'Hello, World!';

Boolean:
Represents a logical value (true or false).
Example: let isTrue = true;

Undefined:
Represents a variable that has been declared but not assigned a value.
Example: let undefinedVar;

Null:
Represents the intentional absence of any object value.
Example: let nullVar = null;

Symbol (introduced in ECMAScript 6):
Represents a unique identifier.
Example: let sym = Symbol('unique');

BigInt (introduced in ECMAScript 2020):
Represents integers of arbitrary precision.
Example: let bigIntVar = 9007199254740991n;

Non-Primitive (Object) Data Types:
Object:
Represents a collection of key-value pairs.
Example: let obj = { key: 'value' };

Array:
Represents an ordered list of values.
Example: let arr = [1, 2, 3];

Function:
Represents a reusable block of code.
Example: function sayHello() { console.log('Hello!'); }

4. What is the DOM in JavaScript?

The Document Object Model (DOM) is a programming interface that represents the structure of HTML and XML documents. It allows JavaScript to access and manipulate


Wednesday, October 25, 2023

Basic setup of react router

 1st react router setup

npm create vite@latest name-of-your-project -- --template react

npm install react-router-dom localforage match-sorter sort-by

2nd tailwind  setup

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

3rd daisy ui

npm i -D daisyui@latest 

4th open code .

5th add tailwind extra settings

Go to tailwind.config.js and add this code

content: [

"./index.html",

"./src/**/*.{js,ts,jsx,tsx}",

],

2nd index.css add this code

@tailwind base;

@tailwind components;

@tailwind utilities;

6th: daisy ui extra settings

Go to tailwind.config.js and add this code

7th: fix that plugins: [require("daisyui")],

Go to .eslintrc.cjs file and add 


8th routers setup

1st create one folder Routes > file Routes and setup routes 

2nd in main.jsx












Sunday, August 6, 2023

Array.prototype

1. Array.prototype.includes()

The includes() the method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

2. Array.prototype.indexOf()

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

3. Array.isArray()

The Array.isArray() static method determines whether the passed value is an Array.

Saturday, July 29, 2023

Friday, July 21, 2023

Wednesday, July 19, 2023

CSS case

 1. If you make one block element style margin: 100%; that will take the full width. But if we add any border or any other spacing that will make a horizontal scrolling.


Output:

2. if we make that block element width: auto; that type of scroll will not come and that is the default value of the block element width.

see no horizontal scroll bar.




Tuesday, July 18, 2023

Width and flex

  1. Width:

  • auto
  • 100%
  • max-content
  • min-content
  • fit-content
  • vw

Width auto: It will fit the element in available space including margin, border, and padding. That means margin, border, and padding include in that full width.

Width 100%: It will make content width 100%. margin, border, and padding will be added to this width and the element will overflow if any of these are added. That means margin, border, and padding are not included in that full width.

Max-content: Expands to fit the element's maximum content size.

Min-content: Collapses to fit the element's minimum content size.

Fix-content: Sizes the element based on its content's preferred size within the available space, combining aspects of both max-content and min-content.

vw: viewport wide. vw is a CSS unit that represents a percentage of the viewport's width.

Flex:

If flex-direction: row;

default value:
  • row is the default value of flex-direction.
  • start is the default value of justify-content.
  • stretch is the default value of align-items. (y-axis full height will take).
  • justify-content will work (x-axis or horizontal) 
  • align-items will work (y-axis or vertical)

If flex-direction: column;

default value:
  • justify-content will work (y-axis or vertical)
  • align-items will work (x-axis or horizontal) 



Thursday, July 13, 2023