DEV Community: Vishnu Priya S

DOM

Vishnu Priya S — Sat, 24 Oct 2026 20:10:04 +0000

DOM
-> Document Object Model is a programming interface that represents an HTML document as a tree of objects.

events:
onClick()
dblclick()

function changeTxt(){
const ele = document.getElementById("title").innerText="hello"

the innerText helps to changes your text.

document.createElement -> here you can create an element like document.createElement(div) , document.createElement(h1)

localStorage

localStorage -> built in web storage object in js that allows you to save key-value pairs

eg: localStorage.setItem('theme', 'dark');
localStorage.getItem('theme');

JSON.stringify() -> converts a JavaScript object, array, or primitive value into a JSON string.

eg: const user = {
"name": "Alex",
"age": "28"

JSON.parse() ->JSON string and converts it into a JavaScript object or array.

// A text string formatted as JSON
const jsonString = '{"name":"Alex","age":28}';

// Convert the string into a live JavaScript object
const userObj = JSON.parse(jsonString);

console.log(userObj.name); // Output: "Alex"
console.log(userObj.age); // Output: 28
console.log(typeof userObj); // Output: "object"

Synchronous -> One by one execution

Asynchronous -> Simultaneously execution

React

Vishnu Priya S — Sat, 24 Oct 2026 20:00:33 +0000

-> React is a popular open-source JavaScript library developed by Meta (Facebook) used for building interactive user interfaces (UIs), specifically for single-page applications.

-> React has rule of self closing tag.

Components: The building blocks of a React application. They are self-contained, reusable pieces of UI code (eg: )

JSX (JavaScript XML): A syntax extension that allows you to write HTML structures directly inside your JavaScript code.

VirtualDOM: React takes the copy of Original DOM to Virtual DOM when changes occurs to update the changes only to the specific parts of the webpage that changed instead of refreshing the entire page.

State: When state updates, React automatically re-renders the component to refresh the UI

syntax: import { useState } from 'react';

const [state, setState] = useState(initialValue);

state - current value
setState- function use to update the variable
initialValue- The starting value (can be a number, string, boolean, array, or object)

XML - Exsentible Markup Language
a flexible, W3C- World Wide Web Consortium-standardized text format designed to store, transport, and structurally organize data across different hardware and software platforms.

Meta tags

Vishnu Priya S — Sat, 24 Oct 2026 19:20:41 +0000

-> data about the data , provides metadata about an html doc
-> It reads the browser but it won't display in the screen.

--> almost all characters & symbols

these all the meta tags
name, viewport, keywords, name, author

API, Promise

Vishnu Priya S — Sat, 24 Oct 2026 19:15:53 +0000

API - Application Programming Interface which is used to communicate between two software over the internet.

API Calling

        fetch(url)
            .then((res) => res.json())
            .then((data)

here the fetch is fetching API url and convert the data into json

->JSON(Javascript Object Notation) - transmitting data between a server and a web application, text based and human readable format.

PROMISE

It act as an asynchronous result operations like success, rejected.
-> if the condition is success(.then)
-> if the cond is rejected(.catch)

Closure

Vishnu Priya S — Wed, 21 Oct 2026 19:18:25 +0000

Data privacy & Encapulsation

-> It creates a private variable that cannot be accessed or modified directly from outside.

-> It gives a inner function access to the outer function and after that the outer function has finished executing.

eg:
function bank(){
let count = 0;
return function(){
count++;
};}
const counter = bank();
console.log(counter()); // 1

Basic Array methods.

Vishnu Priya S — Fri, 09 Oct 2026 19:17:15 +0000

toString() -- elements in a single value with the help of comma separated string.

at() -- returns an indexed element from an array, returns the same as []

length() -- set the length size and return the length.

join() -- works like toString you can specify the separator (symbols)

push() -- adds new element at the end

pop() -- removes the last element from the array.

shift() -- removes the 1st element and all other elements goes in the lower index.

unshift() -- adding the values in the 1st.

delete() -- leaves and provides as undefined.

concat() -- creates a new array by merging the exisiting array.

flat() -- acts as an multiple array make them into single array.

slice()-- create new array , doesn't remove any elements from the src array.

splice() -- add new items to an array

for...of() -- The for...of statements hands you the array values.

forEach()-- calls a function (a callback function) for each array element.

map() -- Note that the function takes 3 arguments:

-> The item value
-> The item index
-> The array itself
When a callback function uses only the value parameter, the index and array parameters can be omitted

filter() -- it checks the condition is true or false , if you return values it never gonna execute.

spread()-- (...) operator expands an array into individual elements.

rest() -- collect the leftovers(...rest)

JS variables , Functions &Objects

Vishnu Priya S — Tue, 29 Sep 2026 18:04:27 +0000

Variables

let-- a keyword used to declare re-assignable, block-scoped local variables.
var-- re- declaring the values.
const-- you can't change the values.

Complier -- debug your whole program and translate to the machine

Intrepreter -- line by line debug and translates them to the machine.

Function

The function name should starts with lowercase, declaring the function and calling it (invoking) a reusable block of code designed to perform a specific task.

eg: function subj(tam, eng, math, sci, ss){
let add= (tam+ eng+ math+ sci+ ss);
console.log(add);
result add;
}
subj(80,50,90,40,54);

here the function name is subj and it has a arguments of tam, eng..
it stores the values into the variable called add. again calling the function to execute the code.

return

return is a keyword it returns the value not the variable
eg:The return keyword passes back the value (314), not the variable name (add).

objects

objects used to group and store all the variable with the help of obj name, in obj you can create another obj

const laptop={
brand: "hp",
price: "20000",
camera:{
back:50;
front:20;
}
}

console.log(laptop.camera.back) // o/p: 50

here the laptop is obj name and i'm calling the other obj name with the help of (.) and calling the var and that fetches the actual value.

constructor function

when the obj is created the constructor called automatically.
constructor name should starts with uppercase(Student)
used to initialize object specific value.

const laptop1 = new Laptop("hp", 20000);

here new is a keyowrd storing the values into Laptop.

function Laptop(i, j){
this.brand= i;
this.price=j;

const laptop1 = new Laptop("hp", 20000);

console.log(laptop1.brand); // o/p:hp

the line new Laptop("hp", 20000) is the act of calling the function.

1.A Normal Function: You call it using just its name and parentheses:
subj(80, 50, 90);
2.A Constructor Function:You call it by putting the word new right in front of it:
new Laptop("hp", 20000);

JavaScript

Vishnu Priya S — Tue, 29 Sep 2026 07:03:13 +0000

java datatypes have 2 types

primitive(7 types) -->

*number *- carries number , whole no, float, decimal
*string *- sequence of information
*boolean *- true or false
*bigint *- large number
*null *- intentional absence of any obj value
*undefined *- declared variable but not yet given a value
*symbol *- handles unique code

non-primitive --> object (fixed things)

Grid concept

Vishnu Priya S — Tue, 22 Sep 2026 16:23:54 +0000

display:grid;
grid-template-areas:
"header header"
"menu content"
"footer footer"

before that you should assign name for each child and call them in
grid-area:header; in the grid-template-areas

Day 3 of Payilagam

Vishnu Priya S — Fri, 18 Sep 2026 18:22:49 +0000

Position property in CSS defines how an element is placed on a web page. (top, bottom, left, and right)
5 types of position

static- default behaviour offsets(top/left) do not work.
relative- It owns the original position and move your position where it used to be.
absolute- It checks the parent class if it is non- static it works accordingly.
fixed- An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. (eg: E-commerce website of header, footer)
sticky- behaves like normal element until the user reach the specific point. It sticks and acts like it is fixed(only within its parent container).

Day 2 of Payilagam

Vishnu Priya S — Thu, 17 Sep 2026 17:50:32 +0000

Today we have learnt about how to use the
input type="text" id= "name"
Label for ="name" (Here you're mentioning the label name)
eg: name: Vishnu
along with that we learned how to separate the parent class and child class by using html,css tags.

In css we have used media queries to create a responsive layout.

The attributes are performed only in the respective tags
Eg: input type= radio button.
(Here the type is an attribute that only performs on this tag.)

Website

Font awesome is a website where they have n numbers icons .

Flexbox froggy - understand the flexbox concept

Css scan- have a n number of box shadows

Day 1 in Payilagam

Vishnu Priya S — Tue, 15 Sep 2026 18:09:19 +0000

This is my first day of Payilagam where i learnt the new thing called *table *
thead -- carries heading , we can have multiple head too.
tbody -- row value
tr-- stands for table row
th-- thead the browser understands it "Semantics", also it BOLD your text
td-- table data it display in a row format.

eg:

Attendance
Vishnu

In CSS:

text-transform -- where you can captialize or lowercase your content.
border-collapse: collapse; -- the two column table sharing the one border.

@media query -- used for responsive website
@media (min-width:768px;) -- when you minimize your screen in 768px the inner changes will appear.