Posts

VIVA Questions

 NODE.JS What is Node.js? Node.js is a runtime environment that allows JavaScript to run on the server side. Is Node.js single-threaded? Yes, but it uses an event loop for handling multiple requests asynchronously. What is npm? Node Package Manager used to install libraries and dependencies. What is a module in Node.js? A reusable block of code (file) that can be imported. Difference between require and import? require is CommonJS, import is ES6 module syntax. What is package.json? It contains project metadata and dependencies. What is event-driven programming? Execution based on events like clicks, requests, etc. What is the event loop? It handles asynchronous operations in Node.js. What is callback function? A function passed as argument and executed later. What is middleware? Functions that process requests before response. What is REPL? Read-Eval-Print Loop for executing JS code interactively. What is fs module? File system module for file op...
Post a Comment
Read more

Experiment 16: MongoDB CRUD Operations Experiment 17: B MongoDB Queries

Write MongoDB queries to perform CRUD operations on document using insert(), find(), update(), remove() Write MongoDB queries to work with records using find(), limit(), sort(), createIndex(), aggregate()  use AIDS_B  command creates AIDS_B database. In AIDS_B database to create collection names "register"  db.register.insertOne({Name:'abc',RegdNo:10001,Year:4,Semester:1,branch:'AIDS'})   it is implicit way test> use AIDS_B switched to db AIDS_B AIDS_B> db.register.insertOne({Name:'abc',RegdNo:10001,Year:4,Semester:1,branch:'AIDS'}) {   acknowledged: true,   insertedId: ObjectId('690588f3b25c5cb31d63b112') } AIDS_B> db.register.insertOne({Name:'def',RegdNo:10002,Year:4,Semester:1,branch:'AIDS'}) {   acknowledged: true,   insertedId: ObjectId('6905891eb25c5cb31d63b113') } AIDS_B> db.register.insertOne({Name:'ghi',RegdNo:10003,Year:4,Semester:1,branch:'AIDS'}) {   acknowledged: true,   i...
Post a Comment
Read more

Experiment 15: ReactJS Applications – To-do list and Quiz

 Design to-do list application App.js import React, { useState } from "react"; import "./App.css"; function App() {   const [task, setTask] = useState("");   const [tasks, setTasks] = useState([]);   // Add Task   const addTask = () => {     if (task.trim() === "") return;     const newTask = {       id: Date.now(),       text: task,       completed: false     };     setTasks([...tasks, newTask]);     setTask("");   };   // Delete Task   const deleteTask = (id) => {     setTasks(tasks.filter((t) => t.id !== id));   };   // Toggle Complete   const toggleComplete = (id) => {     setTasks(       tasks.map((t) =>         t.id === id ? { ...t, completed: !t.completed } : t       )     );   };   return (     <div className="conta...
Post a Comment
Read more

What is Hook in React?

 A Hook lets you use state inside a function component . Before Hooks, only class components could store state. Now we use useState . Simple Counter Example import React, { useState } from "react"; function Counter() {   const [number, setNumber] = useState(0);   return (     <div>       <h2>Counter: {number}</h2>       <button onClick={() => setNumber(number + 1)}>         Increase       </button>     </div>   ); } export default Counter; When button is clicked: setNumber(number + 1) runs React updates state Component re-renders automatically
Post a Comment
Read more

Experiment 12: ReactJS – Conditional Rendering, Rendering Lists, React Forms

Write a program for conditional rendering.   App.js import React, { useState } from "react"; function App() {   const [isLoggedIn, setIsLoggedIn] = useState(false);   return (     <div style={{ padding: "20px", fontFamily: "Arial" }}>       <h2>Conditional Rendering Example</h2>       {isLoggedIn ? (         <h3>Welcome back, User! 😊</h3>       ) : (         <h3>Please login to continue.</h3>       )}       <button onClick={() => setIsLoggedIn(!isLoggedIn)}>         {isLoggedIn ? "Logout" : "Login"}       </button>     </div>   ); } export default App; UI/UX based: import React, { useState } from "react"; function App() {   const [isLoggedIn, setIsLoggedIn] = useState(false);   return (     <div style={styles....
Post a Comment
Read more

11.C. Write a program for responding to events.

Introduction to Events Events in React.js are how user interactions—like clicks, typing, form submissions, and mouse movements—are handled in a React application. React uses a synthetic event system, which wraps native browser events to provide a consistent behavior across different browsers. Event names are written in camelCase (e.g., onClick , onChange ), and instead of passing a string, you pass a function as the event handler. This makes event handling more predictable and easier to manage within components. Handling events in React is tightly connected to component state and re-rendering. When an event occurs, you typically update the component’s state using hooks like useState , and React efficiently updates only the parts of the UI that need to change. This approach encourages clean separation between UI and logic, improves maintainability, and enables building interactive, responsive user interfaces with minimal direct manipulation of the DOM. Write a program for responding to ...
Post a Comment
Read more

Experiment 11: ReactJS – Props and States, Styles, Respond to Events

Write a program to work with props and states Files Used public/index.html src/index.js src/App.js index.html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Props and State Example</title> </head> <body>   <div id="root"></div> </body> </html> index.js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />); App.js import React from "react"; /* ---------- Function Component (Props) ---------- */ function User(props) {   return (     <div>       <h3>User Component</h3>       <p>Name : {props.name}</p>       <p>Age : {props.age}</p>     </div>   ); } /* ---------- Class Component (State + Props) ---------- */ class Counter exte...
Post a Comment
Read more