DEV Community: Akash

Creating Quiz Application

Akash — Wed, 03 Jun 2026 09:11:54 +0000

Create Components

App.jsx
Home.jsx
Question.jsx
Result.jsx

=> In App.jsx

Create a global variable for use variable in all other components
Also Create BrowserRouter for nagivate from on component to another Component
Import essentials components where it needed to implement program
also import Question .json file here i import in assests in src folder

=> Home.jsx

=> Question.jsx

=>Result.jsx

Python Looping Mathematics

Akash — Sat, 30 May 2026 05:29:40 +0000

=> Python Looping Mathematics Helping Factors
1.Prime Numbers

Prime number is a number greater number that has exactly two Factors (e.g) 1,2,5,7,

2.Factors

A number that divides another number without leaving a remainder. (e.g) 1,2,3,4,6,12

3.Least Common Multiple

Smallest common multilple of two numbers

(e.g) 4 and 6
4->4,8,,12,16,20
6->6,12,18,24
here least common multiple is 12.

OUTPUT:

4.Greatest Common Factor

A largest number that divides both numbers

(e.g) 12 and 18
12->1,2,3,4,6,12
18->1,2,3,6,9,18
here common factors are 1,2,3,6

5.Perfect Number
Perfect number is equals to sum its factors

(e.g) 6
1,2,3,6 are factors of 6
1+2+3=6
so,6 is a perfect number

OUTPUT:

useContext and useNavigate

Akash — Fri, 29 May 2026 06:00:59 +0000

=>USECONTEXT

It is a React Hook used to share data between components without passing props manually at every level.
Used to solve Props Drilling

=> USENAVIGATE

useNavigate is a React Router hook that lets you navigate between pages using JavaScript code.

1.Login Scenario

OUTPUT:

2.Logout Scenario

OUTPUT:

3.Namesharing Scenario

OUTPUT:

4.ButtonNavigation Scenario

OUTPUT:

5.Back Navigation Scenario

OUTPUT:

Looping in python

Akash — Wed, 27 May 2026 08:39:47 +0000

A priest took flowers from his garden and he used half of flowers he had for prayer while he visiting 7 temples in a row after visiting 7 temples he went home with 1 flower.find how many flowers he plucked from his garden?

OUTPUT:

2.Tenali Raman said if you let me to see king he will definietly give me a reward and he offered securities if they let him in he give half of his rewards to them,after seeing tenali king gets angry and punish him with 512 beats if he give half of his beats to securities how many securities he passed to meet king?

OUTPUT:

3.Two Train were ready to start journey from chennai to kanyakumari covering 30 stations A train stops after 3 stations,B Train stops after 5 stations now in which number of station B train driver meet A train driver ?

OUTPUT:

Comparison of Real DOM and Virtual DOM

Akash — Mon, 18 May 2026 17:11:15 +0000

DOM - Document Object Model
When a webpage loads browser converts html page into tree like structure is Called Dom => COMPARISON OF REAL DOM VS VIRTUAL DOM

*1. Real Dom *

A DOM created by browser is called Real DOM
It directly uploads the webpage
- Actual Browser Dom
- Re Render full part
- Slow updates
- Manipulation is expensive
- Can update HTML directly

(e.g)

HTML
 <h1> welcome </h1>

JAVASCRIPT
document.query selector("h1").
 innerText="welcome";

DEMERITS OF REAL DOM

It's Expensive
Slower in process
It affects perfomance

2. Virtual Dom

It is nothing but a lightweight copy of Real dom
React plays a major role in virtual dom
React creates a virtual version in
Memory
- Copy of real dom
- Faster updates
- Updates only changed parts
- Compares changes first
- Manipulation is easy and Not expensive
- Can't update HTML directly

How virtual dom works

1.Render

When state change React creates a new Virtual DOM tree

2.Diffing

React compares the new Virtual DOM With old virtual DOM

3.Reconciliation

Only the parts that actually changed get updated in the Real DOM (TBD)

Why react using virtual dom ?

To improve performance of web application ,when app's state changes it create new representation of UI And virtual dom only compares with previous one by diffing .

1.Faster Re-render
2.Smoother UI
3.Efficient memory

Basic Learnings in REACT

Akash — Thu, 14 May 2026 17:00:42 +0000

*1. React Components
*

Components are the building blocks of react app
Reusable pieces of UI => components classifications
Class Components
old method and feels heavy syntax difficult to write or read a code
Function Components
modern method and easy method also highly recommended
Replacing class components and reducing a burden of heavy code they introduced function components
```
function Greeting({name}){
return <h1>Hello,{name}!<h1>;}
```

2. JSX rules

JSX is a syntax extension lets you write like HTML code in JS

-> Must return a single root element
(able to use only one tag)
-> All tags must be closed
(e.g)

-> Use camelcase for attributes
(e.g) onClick
-> Javascript expressions in curly braces{}
-> NO statement inside JSX
-> Inline style use objects

*3.Folder Structure of REACT
*

Folder structure is nothing but how we organize for our file looks clean and easy to manage

-> public/

single html page where our entire react app lives

-> src/

Every component,pages,image,style files goes in it
also it is heart of our project

-> pages/

Each pages has different purpose and different URL

->assets/

It stores Image,Icons and Fonts that we used for our app

-> styles/

This folder holds our app css files to decide how our app looks
style includes app.jsx,app.css and index.js

-> node_modules

It contains third party library also packages app depends on
It usually large in size

-> package.json

It holds Important information about our project

*4.Difference between SPA and MPA
*
=> SPA (Single Page Application)

SPA loads only one page from server
React handles everything in browser
It doesn't reload
It just swaps content on screen (e.g) Gmail,Facebook

=> MPA (Multiple Page Application)

MPA loads new HTML page from server everytime you click link
Each page is a seprate file on server
Browser fully reloads everytime we click or navigate (e.g) Amazon

REACT IN JS

Akash — Thu, 14 May 2026 06:57:19 +0000

Today I learned about React,It is a open source javascript library formerly developed by Facebook now managing by (meta).
It Allow us to make reusable UI Components that manages its own state,more efficient and predictable .
React has HMR component,which updates changed modules instantly in browser .without reloading or refreshing a page
By react we develop a single page application
React runs in Node
MPA- Multiple Page Application
NPM- NODE Package Manager

Difference between Library and Framework

=> FRAMEWORK

Framework calls your code ,it's incharge for itself only thing we do is just plug our code in its structure
It calls the code whenever it wanted and when right time comes .

=> LIBRARY

Library is a code you call,In library you are in charge .we import our code and call by its function whenever we want
Also our code control id in flow

2.WHAT IS BUILT TOOL

Built tool it process our own code into Optimised file that browser can run ,Because browser doesn't understand JSX so built tool optimize it before it run .

=> BUILT TOOL IN REACT

VITE
Create react app/web pack (TBD)
Parcel (TBD)
Turbo pack (TBD)

1.VITE

Extremely fast
Currently it's popular among developers
Developer's go to for react projects
Also it has HMR (hot module replacement) Fixes changed modules in browsers instantly .

DOM Exercises

Akash — Tue, 28 Apr 2026 17:11:49 +0000

Changing Name

output:

2.Toggling Bulb

output:

3.Counter increment,decrement,reset

output:

Interview Questions about DOM in Javascript

Akash — Tue, 28 Apr 2026 06:01:48 +0000

1.What is Dom ?

DOM refers to Document Object Model,It allows javascript to modify,Access,delete elements dynamically.

2.How do you select an elements in DOM ?

For selecting id document.getElementById("id");
For selecting class document.getElementByClassName("classname");

Difference between getElementById and querySelector

getElementById simply selects id,if the document has many element it needs to specific element to pointout and select.
querySelector selects a first element of declared element.

4.Difference between innerHTML and innertext ?

innerHTML gets HTML contents with tags interpreted
e.g(it prints along with tag

happy birthday
)
innerText gets only text
(e.g) it prints only text happy birthday

5.How to create new DOM element ?

for creating element in dom use document.createElement (e.g) let element = document.createElement("p");

6.How to remove element in DOM ?

for removing element in DOM use document.getElementByTagName (e.g) document.getElementByTagName("p").remove();

How do change CSS style using DOM ?

By using style property we can access or change CSS style in DOM (e.g) document.getElementByTagName("h1").style.color="red"; document.getElementByTagName("h1").style.color="green";

8.What is Event Delegation and Event Bubbling in DOM ?(TBD)

Scenario Questions-variables,operators,functions,conditional statement.

Akash — Sat, 18 Apr 2026 15:57:32 +0000

11.Function to calculate total amount

output:

12.Function to greet user

output:

13.To convert Celsius to Fahrenheit

output:

14.Create a function that returns largest of two numbers

output:

Conditional statement

output:

17.Check if number is positive,negative or zero

output:

18.Check if a year is leap year

output:

19.Movie ticket pricing

output:

20.Print grade using condition

output:

Using function to calculate EMI for a loan(TBD)

Solving Scenario Questions-2

Akash — Fri, 17 Apr 2026 19:22:59 +0000

1.Storing variables and checking whether its filled

output:

2.Create variable to store product name,cost,stocks

OUTPUT:

3.Calculating Total

OUTPUT:

4.Swapping Two Numbers

OUTPUT:

5.Creating variable to store user logging

OUTPUT:

Checking a numb even or odd by operator

OUTPUT:

7.Comparing two passwords

OUTPUT:

8.Eligible to vote,write condition

OUTPUT:

9.Using logical AND operator

OUTPUT:

Solving Objects&Array Scenario Question

Akash — Thu, 16 Apr 2026 16:54:28 +0000

1.USER PROFILE UPDATE

By Using create update email and adding new property . OUTPUT:

2.SHOPPING CART TOTAL
*By using map() separating price values in another array and using reduce() to find total value

OUTPUT:

3.FIND SPECIFIC OBJECT

By Using filter() finding user whose name is Arun

OUTPUT:

4.ADD ITEMS TO ARRAY

by using push() adding another product dynamically and using filter() removing shoe and returning only items with price>1000.

OUTPUT:

DEV Community: Akash

Creating Quiz Application

Python Looping Mathematics

useContext and useNavigate

Looping in python

Comparison of Real DOM and Virtual DOM

Basic Learnings in REACT

REACT IN JS

DOM Exercises

Interview Questions about DOM in Javascript

happy birthday

Scenario Questions-variables,operators,functions,conditional statement.

Solving Scenario Questions-2

Solving Objects&Array Scenario Question