Express js, React js and Mongo DB

Syllabus

Exercise - 1: Express JS – Routing, HTTP Methods

1a. Write a program to define a route, Handling Routes, Route Parameters, Query Parameters and URL building.
const express = require('express'); const app = express(); // Middleware to parse JSON request bodies app.use(express.json()); // user data stored in memory const users = { 1: { id: 1201, name: 'DIET', email: '1201@diet.ac.in' }, 2: { id: 1202, name: 'IT DEPT', email: '1202@diet.ac.in' } }; // Home route app.get('/', (req, res) => { res.send('Welcome to the User API!'); }); // Get all users or filter by name using query parameter app.get('/users', (req, res) => { const name = req.query.name; let result = Object.values(users); //to convert the object to an array if (name) { result = result.filter(user => user.name.toLowerCase() === name.toLowerCase()); } res.json(result); }); // Get a specific user by route parameter (user ID) app.get('/users/:id', (req, res) => { const user = users[req.params.id]; if (user) { res.json(user); } else { res.status(404).send('User not found'); } }); // Build a sample URL for a user app.get('/build-url/:id', (req, res) => { const id = req.params.id; const fullUrl = `${req.protocol}://${req.get('host')}/users/${id}`; res.send(`User URL: ${fullUrl}`); }); // Start the server app.listen(3000, () => { console.log('Server is running on http://localhost:3000'); });
1b. Write a program to accept data, retrieve data and delete a specified resource using http methods.
// app.js const express = require('express'); const app = express(); const port = 3000; // Middleware to parse JSON from request bodies app.use(express.json()); // database to store users let users = { 1: { id: 1201, name: 'DIET', email: '1201@diet.ac.in' }, 2: { id: 1202, name: 'IT DEPT', email: '1202@diet.ac.in' } }; // Add a new user app.post('/users', (req, res) => { const { id, name, email } = req.body; if (!id || !name || !email) { return res.status(400).send('Please provide id, name, and email'); } if (users[id]) { return res.status(409).send('User already exists'); } users[id] = { id, name, email }; res.status(201).json(users[id]); }); // Get all users app.get('/users', (req, res) => { res.json(Object.values(users)); }); // Get user by ID app.get('/users/:id', (req, res) => { const id = req.params.id; const user = users[id]; if (!user) { return res.status(404).send('User not found'); } res.json(user); }); // Delete user by ID app.delete('/users/:id', (req, res) => { const id = req.params.id; if (!users[id]) { return res.status(404).send('User not found'); } delete users[id]; res.send(`User with ID ${id} deleted`); }); // Update Resource - update user by ID app.put('/users/:id', (req, res) => { const id = req.params.id; const { name, email } = req.body; // Check if user exists if (!users[id]) { return res.status(404).send('User not found'); } // Validate input if (!name || !email) { return res.status(400).send('Please provide both name and email'); } // Update user details users[id].name = name; users[id].email = email; res.send(` User with ID ${id} updated successfully`); }); // Start the server app.listen(port, () => { console.log(`Server running at http://localhost:${port}`); });

Exercise - 2: Express JS – Templating, Form Data

2a.Write a program using templating engine.
const express = require('express'); const bodyParser = require('body-parser'); const path = require('path'); const app = express(); // Set up EJS as the templating engine app.set('view engine', 'ejs'); // Use body-parser to parse incoming form data app.use(bodyParser.urlencoded({ extended: true })); // Serve static files (like CSS) from the "public" directory app.use(express.static(path.join(dirname, 'views'))); // Route to display the form app.get('/', (req, res) => { res.render('index'); // Render the "index.ejs" template }); // Route to handle form submission app.post('/submit', (req, res) => { const { name, email } = req.body; // Render the result page and pass the submitted data res.render('result', { name, email }); }); // Start the server app.listen(3000, () => { console.log('Server is running on http://localhost:3000'); });
2b.Write a program to work with form data.
//index.ejs in views folder <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Submit Your Information</title> </head> <body> <h1>Submit Your Information</h1> <form action="/submit" method="POST"> <label for="name">Name:</label> <input type="text" name="name" id="name" required> <br><br> <label for="email">Email:</label> <input type="email" name="email" id="email" required> <br><br> <button type="submit">Submit</button> </form> </body> </html> //result.ejs in views folder <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Result</title> </head> <body> <h1>Form Submitted Successfully!</h1> <p><b>Name: <%= name %></b> <p><b>Email: <%= email %></b> <br> <a href="/">Go Back</a> </body> </html>

Exercise - 3: Express JS – Cookies, Sessions, Authentication

3a. Write a program for session management using cookies and sessions
//npm install express express-session cookie-parser const express = require('express'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const app = express(); const PORT = 3000; app.use(cookieParser()); app.use(express.urlencoded({ extended: true })); // Configure session middleware app.use(session({ secret: 'mySecretKey', resave: false, saveUninitialized: true, cookie: { maxAge: 60000 } // 1 minute })); // Home route app.get('/', (req, res) => { if (req.session.username) { res.send(`Welcome back, ${req.session.username}! <a href="/logout">Logout</a>`); } else { res.send(`<form method="POST" action="/login"> <input name="username" placeholder="Enter your name" required /> <button type="submit">Login</button> </form>`); } }); // Login route app.post('/login', (req, res) => { const { username } = req.body; req.session.username = username; res.redirect('/'); }); // Logout route app.get('/logout', (req, res) => { req.session.destroy(); res.clearCookie('connect.sid'); res.send('Logged out successfully. <a href="/">Login again</a>'); }); // Start server app.listen(PORT, () => { console.log(`Server running at http://localhost:${PORT}`); });
3b. Write a program for user authentication.
//npm install express express-session body-parser const express = require('express'); const session = require('express-session'); const bodyParser = require('body-parser'); const app = express(); const PORT = 3000; // Dummy user data const USERS = { admin: { password: 'admin' }, user: { password: 'user@123' } }; app.use(bodyParser.urlencoded({ extended: true })); app.use(session({ secret: 'authSecret', resave: false, saveUninitialized: true })); // Login form app.get('/', (req, res) => { if (req.session.username) { res.send(`Welcome, ${req.session.username}! <a href="/logout">Logout</a>`); } else { res.send(`<form method="POST" action="/login"> <input name="username" placeholder="Username" required /> <input type="password" name="password" placeholder="Password" required /> <button type="submit">Login</button> </form>`); } }); // Login handler app.post('/login', (req, res) => { const { username, password } = req.body; const user = USERS[username]; if (user && user.password === password) { req.session.username = username; res.redirect('/'); } else { res.status(401).send('Invalid credentials. <a href="/">Try again</a>'); } }); // Logout handler app.get('/logout', (req, res) => { req.session.destroy(); res.send('Logged out. <a href="/">Login</a>'); }); // Protected route app.get('/dashboard', (req, res) => { if (req.session.username) { res.send(`Hello ${req.session.username}, welcome to your dashboard.`); } else { res.status(401).send('Unauthorized. <a href="/">Login</a>'); } }); app.listen(PORT, () => { console.log(`Auth server running on http://localhost:${PORT}`); });

Exercise-4: Express JS – Database, RESTful APIs

4a. Write a program to connect MongoDB database using Mangoose and perform CRUD operations.
//npm install express mongoose body-parser //https://www.mongodb.com/try/download/community //https://www.mongodb.com/try/download/shell //net start MongoDB //mongosh //net stop MongoDB const express = require('express'); const mongoose = require('mongoose'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); // Parse JSON requests // 1. Connect to MongoDB mongoose.connect('mongodb://127.0.0.1:27017/userdb', { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => console.log('Connected to MongoDB')) .catch(err => console.error('MongoDB connection error:', err)); // 2. Define Schema const userSchema = new mongoose.Schema({ name: String, email: String }); // 3. Create Model const User = mongoose.model('User', userSchema); // --- CRUD Routes --- // CREATE - POST /users app.post('/users', async (req, res) => { const { name, email } = req.body; const newUser = new User({ name, email }); await newUser.save(); res.status(201).json(newUser); }); // READ - GET /users app.get('/users', async (req, res) => { const users = await User.find(); res.json(users); }); // UPDATE - PUT /users/:id app.put('/users/:id', async (req, res) => { const updatedUser = await User.findByIdAndUpdate(req.params.id, req.body, { new: true }); res.json(updatedUser); }); // DELETE - DELETE /users/:id app.delete('/users/:id', async (req, res) => { await User.findByIdAndDelete(req.params.id); res.json({ message: 'User deleted' }); }); // Start server app.listen(3000, () => console.log('Server running on http://localhost:3000'));
4b.Write a program to develop a single page application using RESTful APIs.
// server.js const express = require('express'); const mongoose = require('mongoose'); const path = require('path'); const app = express(); const PORT = 3000; // ----- Replace with your MongoDB connection string if needed ----- const MONGO = 'mongodb://localhost:27017/mydb'; // --------------------------------------------------------------- app.use(express.json()); app.use(express.static(path.join(dirname, 'public'))); // Connect to MongoDB mongoose.connect(MONGO, { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => console.log(' MongoDB connected')) .catch(err => console.error(' MongoDB connect error:', err)); // Schema and Model const userSchema = new mongoose.Schema({ name: { type: String, required: true }, email: { type: String, required: true } }); const User = mongoose.model('User', userSchema); // RESTful API // Get all users app.get('/api/users', async (req, res) => { const users = await User.find().sort({ _id: -1 }); res.json(users); }); // Create user app.post('/api/users', async (req, res) => { try { const user = new User(req.body); await user.save(); res.status(201).json(user); // 201 Created } catch (err) { res.status(400).json({ error: err.message }); } }); // Update user app.put('/api/users/:id', async (req, res) => { try { const u = await User.findByIdAndUpdate(req.params.id, req.body, { new: true, runValidators: true }); if (!u) return res.status(404).json({ error: 'Not found' }); res.json(u); } catch (err) { res.status(400).json({ error: err.message }); } }); // Delete user app.delete('/api/users/:id', async (req, res) => { try { const u = await User.findByIdAndDelete(req.params.id); if (!u) return res.status(404).json({ error: 'Not found' }); res.json({ message: 'Deleted' }); } catch (err) { res.status(400).json({ error: err.message }); } }); // Serve SPA (index.html is in public/) app.get('/', (req, res) => { res.sendFile(path.join(__dirname, 'public', 'index.html')); }); app.listen(PORT, () => { console.log(` Server running at http://localhost:${PORT}`); }); // public/app.js const api = '/api/users'; const usersBody = document.getElementById('usersBody'); const form = document.getElementById('userForm'); const nameInput = document.getElementById('name'); const emailInput = document.getElementById('email'); const msg = document.getElementById('msg'); const cancelEdit = document.getElementById('cancelEdit'); let editId = null; async function fetchUsers() { const res = await fetch(api); const data = await res.json(); renderUsers(data); } function renderUsers(users) { usersBody.innerHTML = users.map(u => ` <tr data-id="${u._id}"> <td>${escapeHtml(u.name)}</td> <td>${escapeHtml(u.email)}</td> <td> <button onclick="onEdit('${u._id}', '${escapeJs(u.name)}', '${escapeJs(u.email)}')">Edit</button> <button onclick="onDelete('${u._id}')">Delete</button> </td> </tr> `).join(''); } function escapeHtml(str){ return String(str).replace(/[&<>"'`]/g, s=>'&#'+s.charCodeAt(0)+';'); } function escapeJs(str){ return encodeURIComponent(str); } // Form submit -> create or update form.addEventListener('submit', async e => { e.preventDefault(); const name = nameInput.value.trim(); const email = emailInput.value.trim(); if (!name || !email) return showMsg('Please fill name and email'); try { if (editId) { // update const res = await fetch(`${api}/${editId}`, { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ name, email }) }); if (!res.ok) throw await res.json(); showMsg('Updated successfully'); editId = null; cancelEdit.style.display = 'none'; } else { // create const res = await fetch(api, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ name, email }) }); if (res.status !== 201) throw await res.json(); showMsg('Added successfully'); } form.reset(); fetchUsers(); } catch (err) { showMsg(err.error || err.message || 'Error', true); } }); window.onEdit = (id, nameEnc, emailEnc) => { const name = decodeURIComponent(nameEnc); const email = decodeURIComponent(emailEnc); nameInput.value = name; emailInput.value = email; editId = id; cancelEdit.style.display = ''; showMsg('Editing mode - submit to save'); }; window.onDelete = async id => { if (!confirm('Delete this user?')) return; try { const res = await fetch(`${api}/${id}`, { method: 'DELETE' }); if (!res.ok) throw await res.json(); showMsg('Deleted'); fetchUsers(); } catch (err) { showMsg(err.error || 'Error deleting', true); } }; cancelEdit.addEventListener('click', () => { editId = null; form.reset(); cancelEdit.style.display = 'none'; showMsg(''); }); function showMsg(text, isError=false){ msg.textContent = text; msg.style.color = isError ? 'red' : 'green'; if (!text) msg.style.display = 'none'; else msg.style.display = ''; setTimeout(()=>{ if (!isError) msg.textContent = ''; }, 2500); } // initial load fetchUsers(); // public/index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Users SPA</title> <style> body{font-family: Arial; max-width:900px;margin:30px auto;padding:0 10px} input, button { padding:6px; margin:4px; } table { width:100%; border-collapse:collapse; margin-top:12px } th, td { border:1px solid #ddd; padding:8px; text-align:left } tr:nth-child(even){background:#f9f9f9} .small{font-size:0.9em;color:#666} </style> </head> <body> <h1>Users — Single Page App</h1> <form id="userForm"> <input id="name" placeholder="Name" required /> <input id="email" placeholder="Email" required /> <button type="submit">Add</button> <button type="button" id="cancelEdit" style="display:none">Cancel Edit</button> </form> <div id="msg" class="small"></div> <table> <thead><tr><th>Name</th><th>Email</th><th>Actions</th></tr></thead> <tbody id="usersBody"></tbody> </table> <script src="app.js"></script> </body> </html>

Exercise-5: React JS – Render HTML, JSX, Components – function and Class

5a.Write a program to render HTML to a web page
// index.js import React from "react"; import ReactDOM from "react-dom/client"; // Create root element const root = ReactDOM.createRoot(document.getElementById("root")); // Render plain HTML root.render( <h1>Hello, this is plain HTML rendered by React!</h1> );
5 b.Write a program for writing markup with JSX.
import React from "react"; import ReactDOM from "react-dom/client"; const name = "Sandeep"; const year = new Date().getFullYear(); ReactDOM.createRoot(document.getElementById("root")).render( <div> <h1>Welcome to JSX Example</h1> <p>Hello, {name}! The year is {year}.</p> </div> );
5 c.Write a program for creating and nesting components (function and class).
import React from "react"; import ReactDOM from "react-dom/client"; function WelcomeMessage() { return <h2>Welcome to React Components!</h2>; } class Footer extends React.Component { render() { return <p>© {new Date().getFullYear()} My Website</p>; } } function App() { return ( <div> <WelcomeMessage /> <p>This is the main content area.</p> <Footer /> </div> ); } ReactDOM.createRoot(document.getElementById("root")).render(<App />);

Exercise-6: React JS – Props and States, Styles, Respond to Events

6a.Write a program to work with props and states.
//Props means data passed from parent to child. //State means data inside a component that can change. import React, { useState } from "react"; import ReactDOM from "react-dom/client"; // Child component using props function Greeting(props) { return <h2>Hello, {props.name}!</h2>; } // Parent component using state //App uses useState to store count. //Button updates count → page re-renders automatically. function App() { const [count, setCount] = useState(0); // state: starts at 0 return ( <div> <Greeting name="Sandeep" /> {/* props example /} <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click Me</button> </div> ); } // Render parent const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);
6b.Write a program to add styles (CSS & Sass Styling) and display data.
import React from "react"; import ReactDOM from "react-dom/client"; function App() { const myStyle = { color: "blue", backgroundColor: "lightyellow", padding: "10px", borderRadius: "8px" }; const fruits = ["Apple", "Banana", "Mango", "Orange"]; return ( <div style={myStyle}> <h1>Fruit List</h1> <ul> {fruits.map((fruit, index) => ( <li key={index}>{fruit}</li> ))} </ul> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);
6c.Write a program for responding to events.
import React, { useState } from "react"; import ReactDOM from "react-dom/client"; function App() { const [message, setMessage] = useState("Click a button!"); function handleGreet() { setMessage("Hello from React Event!"); } function handleReset() { setMessage("Click a button!"); } return ( <div> <h1>{message}</h1> <button onClick={handleGreet}>Greet</button> <button onClick={handleReset}>Reset</button> <input type="text" placeholder="Type something" onChange={(e) => setMessage(e.target.value)} /> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);

Exercise-7: React JS – Conditional Rendering, Rendering Lists, React Forms

7a.Write a program for conditional rendering.
import React, { useState } from "react"; import ReactDOM from "react-dom/client"; function App() { const [isLoggedIn, setIsLoggedIn] = useState(false); return ( <div> <h1>Conditional Rendering Example</h1> {isLoggedIn ? ( <h2>Welcome Back, User!</h2> ) : ( <h2>Please Login to Continue</h2> )} <button onClick={() => setIsLoggedIn(!isLoggedIn)}> {isLoggedIn ? "Logout" : "Login"} </button> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);
7b.Write a program for rendering lists.
import React from "react"; import ReactDOM from "react-dom/client"; function App() { const students = ["Ravi", "Anu", "Priya", "Kiran", "Sita"]; return ( <div> <h1>Rendering Lists Example</h1> <ul> {students.map((student, index) => ( <li key={index}>{student}</li> ))} </ul> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);
7c.Write a program for working with different form fields using react forms.
import React, { useState } from "react"; import ReactDOM from "react-dom/client"; function App() { const [formData, setFormData] = useState({ name: "", email: "", gender: "", agree: false }); function handleChange(e) { const { name, value, type, checked } = e.target; setFormData({ ...formData, [name]: type === "checkbox" ? checked : value }); } function handleSubmit(e) { e.preventDefault(); alert(`Form Submitted!\n${JSON.stringify(formData, null, 2)}`); } return ( <div> <h1>React Forms Example</h1> <form onSubmit={handleSubmit}> <label> Name:{" "} <input type="text" name="name" value={formData.name} onChange={handleChange} /> </label> <br /><br /> <label> Email:{" "} <input type="email" name="email" value={formData.email} onChange={handleChange} /> </label> <br /><br /> <label> Gender:{" "} <select name="gender" value={formData.gender} onChange={handleChange} > <option value="">Select</option> <option value="male">Male</option> <option value="female">Female</option> </select> </label> <br /><br /> <label> <input type="checkbox" name="agree" checked={formData.agree} onChange={handleChange} />{" "} I agree to terms </label> <br /><br /> <button type="submit">Submit</button> </form> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);

Exercise-8: React JS – React Router, Updating the Screen

8a.Write a program for routing to different pages using react router.
//npm install react-router-dom import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; // Home Component function Home() { return <h2>Welcome to Home Page</h2>; } // About Component function About() { return <h2> This is the About Page</h2>; } // Contact Component function Contact() { return <h2>Contact us at: contact@example.com</h2>; } // Parent App function App() { return ( <BrowserRouter> <div> <h1>React Router Example</h1> {/ Navigation Links /} <nav> <Link to="/">Home</Link> |{" "} <Link to="/about">About</Link> |{" "} <Link to="/contact">Contact</Link>|{" "} <a href="https://kottesandeep.blogspot.com/" target="_blank"> My Blog </a> </nav> {/ Routes */} <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> </Routes> </div> </BrowserRouter> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />); //BrowserRouter → enables routing in React app. //Link → works like <a> but without page reload. //Routes + Route → decides which component to show based on URL.
8a.Write a program for routing to different pages using react router.
import React, { useState } from "react"; import ReactDOM from "react-dom/client"; function App() { const [message, setMessage] = useState("Welcome to React!"); function updateMessage() { setMessage("Screen Updated!"); } return ( <div> <h1>{message}</h1> <button onClick={updateMessage}>Click to Update Screen</button> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);

Exercise-9: React JS – Hooks, Sharing data between Components

9a.Write a program to understand the importance of using hooks.
import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom/client"; function App() { // useState Hook — to store and update counter value const [count, setCount] = useState(0); // useEffect Hook — runs when component renders or updates useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // runs again only when 'count' changes return ( <div> <h1>Understanding Hooks Example</h1> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click Me</button> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />); //useState(0) → creates a state variable count with initial value 0. //useEffect() → performs side effects (like updating document title). //When setCount() is called, React re-renders the component → the UI updates //automatically. //Without Hooks, you’d have to write a Class Component and use this.state and //componentDidMount(), which is longer and harder.
9b.Write a program for sharing data between components.
import React, { useState } from "react"; import ReactDOM from "react-dom/client"; // Child component that receives data (props) from parent function Child(props) { return ( <div> <h2>Child Component</h2> <p>Received Message: {props.message}</p> </div> ); } // Parent component function Parent() { const [message, setMessage] = useState("Hello from Parent!"); return ( <div> <h1>Sharing Data Between Components</h1> <Child message={message} /> <button onClick={() => setMessage("Message Updated from Parent!")}> Update Message </button> </div> ); } // Render Parent const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Parent />); //The Parent has a state variable message. //It passes this value to Child via props → <Child message={message} />. //When parent updates the state (using the button), the new message is //automatically passed to Child.

User Interface Design using Flutter

Exercise - 1: Flutter and Dart SDK

1b. Write a simple Dart program to understand the basic language.
// hello.dart void main() { print('Hello, Dart!'); // Variables String name = 'Alice'; int age = 25; double height = 5.6; bool isStudent = true; // Lists List hobbies = ['reading', 'coding', 'hiking']; // Function call greetUser(name); // Control flow if (age >= 18) { print('$name is an adult.'); } else { print('$name is a minor.'); } // Loop print('Hobbies:'); for (var hobby in hobbies) { print('- $hobby'); } } // Function definition void greetUser(String username) { print('Welcome, $username!'); }

Exercise - 2:

2. a) Explore various Flutter widgets (Text, Image, Container, etc.).
Text('Hello, World!',style: TextStyle(fontSize: 24, color: Colors.red),), Image.file(File('asset/images/Screenshot.png'), width: 200, height: 200,), Container( padding: EdgeInsets.all(16), color: Colors.green, child: Text('Inside a container'), )
2. b) Implement different layout structures using Row, Column, and Stack Widget.
mainAxisAlignment: MainAxisAlignment.center, children: < Widget >[ Text('Username'), SizedBox(height: 20), Text('Password'), SizedBox(height: 20), ElevatedButton( onPressed: () {}, child: Text('Click Me'), ), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Icon(Icons.home, size: 40), Icon(Icons.search, size: 40), Icon(Icons.settings, size: 40), ], ), Stack( alignment: Alignment.center, children: [ Container( width: 200, height: 200, color: Colors.blue, ), Container( width: 100, height: 100, color: Colors.red, ), Text( 'Center', style: TextStyle(color: Colors.white, fontSize: 20), ), ], )

Exercise - 3:

3 a) Design a responsive UI that adapts to different screen sizes.
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Responsive UI Demo', home: ResponsiveUI(), // <- This is your Scaffold-based widget ); } } class ResponsiveUI extends StatelessWidget { @override Widget build(BuildContext context) { final screenWidth = MediaQuery.of(context).size.width; return Scaffold( appBar: AppBar(title: Text("Responsive UI")), body: LayoutBuilder( builder: (context, constraints) { if (constraints.maxWidth > 600) { // Tablet/Desktop Layout return Row( children: [ Expanded(child: Container(color: Colors.blue, child: Center(child: Text("Sidebar")))), Expanded(flex: 2, child: Container(color: Colors.white, child: Center(child: Text("Main Content")))), ], ); } else { // Mobile Layout return Column( children: [ Container(height: 100, color: Colors.blue, child: Center(child: Text("Top Bar"))), Expanded(child: Container(color: Colors.white, child: Center(child: Text("Main Content")))), ], ); } }, ), ); } }
3 b) Implement media queries and breakpoints for responsiveness.
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } // Root widget class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Media Query Breakpoints Demo', home: ResponsiveLayout(), ); } } // Main responsive widget using breakpoints class ResponsiveLayout extends StatelessWidget { @override Widget build(BuildContext context) { double screenWidth = MediaQuery.of(context).size.width; if (screenWidth < 600) { // Small screen: Mobile return Scaffold( appBar: AppBar(title: Text("Mobile Layout")), body: Center(child: Text("This is a Mobile Layout", style: TextStyle(fontSize: 16))), ); } else if (screenWidth >= 600 && screenWidth < 1200) { // Medium screen: Tablet return Scaffold( appBar: AppBar(title: Text("Tablet Layout")), body: Center(child: Text("This is a Tablet Layout", style: TextStyle(fontSize: 20))), ); } else { // Large screen: Desktop return Scaffold( appBar: AppBar(title: Text("Desktop Layout")), body: Center(child: Text("This is a Desktop Layout", style: TextStyle(fontSize: 24))), ); } } }

Exercise - 4:

4 a) Set up navigation between different screens using Navigator.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

// Root widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigator Demo',
      home: FirstScreen(),
    );
  }
}

// First Screen
class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("First Screen")),
      body: Center(
        child: ElevatedButton(
          child: Text("Go to Second Screen"),
          onPressed: () {
            // Navigation using direct push
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

// Second Screen
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Second Screen")),
      body: Center(
        child: ElevatedButton(
          child: Text("Back to First Screen"),
          onPressed: () {
            Navigator.pop(context); // Go back
          },
        ),
      ),
    );
  }
}

4 b) Implement navigation with named routes.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

// Home Screen
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Home Screen")),
      body: Center(
        child: ElevatedButton(
          child: Text("Go to Second Screen"),
          onPressed: () {
            Navigator.pushNamed(context, '/second'); // Using named route
          },
        ),
      ),
    );
  }
}

// Second Screen
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Second Screen")),
      body: Center(
        child: ElevatedButton(
          child: Text("Back to Home"),
          onPressed: () {
            Navigator.pop(context); // Go back
          },
        ),
      ),
    );
  }
}

Exercise - 5:

5 a) Learn about stateful and stateless widgets.

 1. Stateless Widget
	A StatelessWidget is immutable: once it is built, it cannot change its state during runtime.
	Used when the UI does not depend on dynamic data (e.g., labels, static layouts). 
 2. Stateful Widget
	A StatefulWidget can change during runtime using setState(). 

StatelessWidget → UI never changes.

StatefulWidget → UI can change with setState().

5 b) Implement state management using set State and Provider.

//Add provider to pubspec.yaml:
//dependencies:
//  flutter:
//    sdk: flutter
//  provider: ^6.0.5

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// State Class
class CounterModel with ChangeNotifier {
  int _count = 0;

int get count => _count;

void increment() {
    _count++;
    notifyListeners(); // notifies all listening widgets
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => CounterModel(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: CounterScreen());
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var counter = Provider.of<CounterModel>(context);

return Scaffold(
      appBar: AppBar(title: Text("Provider Example")),
      body: Center(
        child: Text("Count: ${counter.count}", style: TextStyle(fontSize: 24)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

Exercise - 6:

6 a) Create custom widgets for specific UI elements.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Simple Avatar UI")),
        body: Center(
          child: CustomAvatar(
            imageUrl: "imageUrl",
            name: "Sandeep",
          ),
        ),
      ),
    );
  }
}

//  Custom Widget (Avatar)
class CustomAvatar extends StatelessWidget {
  final String imageUrl;
  final String name;

CustomAvatar({required this.imageUrl, required this.name});

@override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        CircleAvatar(
          radius: 50,
          backgroundImage: NetworkImage(imageUrl),
        ),
        SizedBox(height: 10),
        Text(
          name,
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
      ],
    );
  }
}

6 b) Apply styling using themes and custom styles.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Theming Example",

// Global Theme
      theme: ThemeData(
        primarySwatch: Colors.teal,
        textTheme: TextTheme(
          bodyMedium: TextStyle(fontSize: 16, color: Colors.black87),
          titleLarge: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
      ),

home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Themes & Styles"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Uses global theme (titleLarge)
            Text(
              "Welcome to Flutter!",
              style: Theme.of(context).textTheme.titleLarge,
            ),
            SizedBox(height: 20),

// Custom Style applied locally
            Text(
              "This text has custom style",
              style: TextStyle(
                fontSize: 18,
                color: Colors.purple,
                fontWeight: FontWeight.w600,
                letterSpacing: 1.2,
              ),
            ),
            SizedBox(height: 20),

// Widget with custom background styling
            Container(
              padding: EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: Colors.teal.shade100,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Text(
                "Styled Container",
                style: TextStyle(fontSize: 16, color: Colors.teal.shade900),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Exercise - 7:

7 a) and b) Design a form with various input fields. Implement form validation and error handling

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Form Validation Example",
      home: FormScreen(),
    );
  }
}

class FormScreen extends StatelessWidget {
  final _formKey = GlobalKey<FormState>();

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Form with Validation")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              // Name Field
              TextFormField(
                decoration: InputDecoration(labelText: "Name"),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return "Name is required";
                  }
                  return null;
                },
              ),

// Email Field
              TextFormField(
                decoration: InputDecoration(labelText: "Email"),
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return "Email is required";
                  }
                  if (!value.contains("@")) {
                    return "Enter a valid email";
                  }
                  return null;
                },
              ),

// Password Field
              TextFormField(
                decoration: InputDecoration(labelText: "Password"),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.length < 6) {
                    return "Password must be at least 6 characters";
                  }
                  return null;
                },
              ),

// Age Field
              TextFormField(
                decoration: InputDecoration(labelText: "Age"),
                keyboardType: TextInputType.number,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return "Age is required";
                  }
                  if (int.tryParse(value) == null) {
                    return "Enter a valid number";
                  }
                  return null;
                },
              ),

SizedBox(height: 20),

ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text("Form Submitted Successfully!")),
                    );
                  }
                },
                child: Text("Submit"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Exercise - 8:

a) Add animations to UI elements using Flutter's animation framework.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimationExample(),
    );
  }
}

class AnimationExample extends StatefulWidget {
  @override
  _AnimationExampleState createState() => _AnimationExampleState();
}

class _AnimationExampleState extends State<AnimationExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

@override
  void initState() {
    super.initState();

_controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true); // Repeat animation back & forth

_animation = Tween<double>(begin: 100, end: 200).animate(_controller);
  }

@override
  void dispose() {
    _controller.dispose(); // free memory
    super.dispose();
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Basic Animation Example")),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Container(
              width: _animation.value,
              height: _animation.value,
              color: Colors.blue,
            );
          },
        ),
      ),
    );
  }
}

b) Experiment with different types of animations (fade, slide, etc.)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimationTypesDemo(),
    );
  }
}

class AnimationTypesDemo extends StatefulWidget {
  @override
  _AnimationTypesDemoState createState() => _AnimationTypesDemoState();
}

class _AnimationTypesDemoState extends State<AnimationTypesDemo> {
  bool _visible = true;
  bool _moved = false;

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Fade & Slide Animations")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Fade Animation
            AnimatedOpacity(
              opacity: _visible ? 1.0 : 0.0,
              duration: Duration(seconds: 2),
              child: Container(width: 100, height: 100, color: Colors.green),
            ),

SizedBox(height: 40),

// Slide Animation
            AnimatedSlide(
              offset: _moved ? Offset(1, 0) : Offset(0, 0),
              duration: Duration(seconds: 1),
              child: Container(width: 100, height: 100, color: Colors.orange),
            ),

SizedBox(height: 40),

ElevatedButton(
              onPressed: () {
                setState(() {
                  _visible = !_visible;
                  _moved = !_moved;
                });
              },
              child: Text("Animate!"),
            ),
          ],
        ),
      ),
    );
  }
}

FULL STACK DEVELOPMENT I

Syllabus

Exercise - 1:

1a. Write a HTML program, to explain the working of lists. Note: It should have an ordered list, unordered list, nested lists and ordered list in an unordered list and definition lists.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Lists</title>
</head>
<body>

<h1>Working of Lists in HTML</h1>

<h2>1. Ordered List</h2>
<p>An ordered list (numbered list) is created using the <code><ol></code> tag. Here is an example:</p>
<ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

<h2>2. Unordered List</h2>
<p>An unordered list (bulleted list) is created using the <code><ul></code> tag. Here is an example:</p>
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

<h2>3. Nested Lists</h2>
<p>A nested list is a list within another list. You can nest both ordered and unordered lists.</p>
<ol>
    <li>Fruits
        <ul>
            <li>Orange</li>
            <li>Grapes</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Carrot</li>
            <li>Spinach</li>
        </ul>
    </li>
</ol>

<h2>4. Ordered List Inside an Unordered List</h2>
<p>This is an example of an ordered list inside an unordered list:</p>
<ul>
    <li>Animals
        <ol>
            <li>Lion</li>
            <li>Tiger</li>
            <li>Elephant</li>
        </ol>
    </li>
    <li>Birds
        <ol>
            <li>Eagle</li>
            <li>Parrot</li>
        </ol>
    </li>
</ul>

<h2>5. Definition List</h2>
<p>A definition list is used to display a list of terms and their definitions. It is created using the <code><dl></code>, <code><dt></code>, and <code><dd></code> tags.</p>
<dl>
    <dt>HTML</dt>
    <dd>A markup language used to create web pages.</dd>
    <dt>CSS</dt>
    <dd>A stylesheet language used to describe the presentation of a document written in HTML.</dd>
    <dt>JavaScript</dt>
    <dd>A programming language used to create interactive effects within web browsers.</dd>
</dl>

</body>
</html>

1b. Write a HTML program, to explain the working of hyperlinks using tag and href, target Attributes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Hyperlinks</title>
</head>
<body>

<h1>Working of Hyperlinks in HTML</h1>

<p>Hyperlinks are created using the <code><a></code> tag. The <code>href</code> attribute defines the URL of the page the link goes to. You can also use the <code>target</code> attribute to specify where the link will open. Here are some examples:</p>

<h2>1. Basic Hyperlink</h2>
<a href="https://kottesandeep.blogspot.com/">Visit Blogspot</a>

<h2>2. Link to a Specific Section on the Same Page</h2>
<a href="#section1">Go to Section 1</a>

<h2>3. Hyperlink with target Attribute</h2>
<p>The <code>target="_blank"</code> attribute opens the link in a new tab:</p>
<a href="https://kottesandeep.blogspot.com/" target="_blank">Open Example.com in a new tab</a>

<h2>4. Hyperlink to an Email Address</h2>
<p>You can also create a link that opens the user's email client:</p>
<a href="mailto:someone@gmail.com">Send Email</a>

</body>
</html>

1c. Write a HTML program, in such a way that, rather than placing large images on a page, the preferred technique is to use thumbnails by setting the height and width parameters to something like to 100*100 pixels. Each thumbnail image is also a link to a full sized version of the image. Create an image gallery using this technique

Exercise - 2:

2 a&b. Write a HTML program, to explain the working of tables by preparing a timetable. (Note: Use tag to set the caption to the table and also use cell spacing, cell padding, border, rowspan, colspan etc.)..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timetable</title>
</head>
<body>

<h1>Weekly Timetable</h1>

<table border="1" cellspacing="5" cellpadding="10">
    <caption>Student's Weekly Schedule</caption>
    <tr>
        <th>Day/Time</th>
        <th>9:00 to 9:50</th>
        <th>9:50 to 10:40</th>
        <th>10:40 to 10:50</th>
        <th>10:50 to 11:30</th>
        <th>11:30 to 12:20</th>
	<th>12:20 to 01:10</th>
    </tr>
    <tr>
        <td>Monday</td>
        <td>SE</td>
        <td>OS</td>
	<td rowspan="6">Break</td>
        <td>P&S</td>
        <td>OT</td>
        <td>PE</td>
    </tr>
    <tr>
        <td>Tuesday</td>
        <td>DBMS</td>
        <td>SE</td>
        <td>sports</td>
        <td>SE</td>
        <td>OS</td>
    </tr>
    <tr>
        <td>Wednesday</td>
        <td colspan="2">Break</td>
        <td colspan="3">Full Stack Lab</td>
    </tr>
    <tr>
        <td>Thursday</td>
        <td>Computer OS</td>
        <td>PE</td>
        <td>Music</td>
        <td>DBMS</td>
        <td>P&S</td>
    </tr>
    <tr>
        <td>Friday</td>
        <td>P&S</td>
        <td>OT</td>
        <td>OS</td>
        <td>DBMS</td>
        <td>sports</td>
    </tr>
<tr>
        <td>Saturday</td>
        <td>P&S</td>
        <td>OT</td>
        <td>OS</td>
        <td>DBMS</td>
        <td>sports</td>
    </tr>

</table>

</body>
</html>

2c. Write a HTML program, to explain the working of forms by designing Registration form. (Note: Include text field, password field, number field, date of birth field, checkboxes, radio buttons, list boxes using <select>&<option> tags, <text area> and two buttons ie: submit and reset. Use tables to provide a better view).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
</head>
<body>

<h1>Registration Form</h1>

<form action="#" method="POST">
    <table border="1" cellspacing="10" cellpadding="5">
        <tr>
            <td>Full Name:</td>
            <td><input type="text" name="fullname" required></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><input type="password" name="password" required></td>
        </tr>
        <tr>
            <td>Age:</td>
            <td><input type="number" name="age" required></td>
        </tr>
        <tr>
            <td>Date of Birth:</td>
            <td><input type="date" name="dob" required></td>
        </tr>
        <tr>
            <td>Gender:</td>
            <td>
                <input type="radio" name="gender" value="male"> Male
                <input type="radio" name="gender" value="female"> Female
            </td>
        </tr>
        <tr>
            <td>Interests:</td>
            <td>
                <input type="checkbox" name="interest" value="sports"> Sports<br>
                <input type="checkbox" name="interest" value="music"> Music<br>
                <input type="checkbox" name="interest" value="reading"> Reading
            </td>
        </tr>
        <tr>
            <td>Country:</td>
            <td>
                <select name="country">
                    <option value="USA">USA</option>
                    <option value="India">India</option>
                    <option value="UK">UK</option>
                    <option value="Australia">Australia</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Message:</td>
            <td><texarea name="message" rows="4" cols="50"></texarea></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="Submit">
                <input type="reset" value="Reset">
            </td>
        </tr>
    </table>
</form>

</body>
</html>

2d. Write a HTML program, to explain the working of frames, such that page is to be divided into 3 parts on either direction. (Note: first frame image, second frame paragraph, third frame, hyperlink. and also make sure of using "no frame " attribute such that frames to be fixed.)

Exercise - 3:

3 a) Write a HTML program, that makes use of article, aside, figure, figcaption, footer, header, main,nav, section, div, span tags..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Semantic Tags</title>
</head>
<body>

<header>
    <h1>Welcome to Our Website</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <h2>About Us</h2>
        <p>This section gives information about the website and our mission.</p>
    </section>

<article>
        <h2>Latest News</h2>
        <p>Stay tuned for the latest updates in the world of web development!</p>
        <figure>
            <img src="logo header.jpg" width=500 height=100 alt="News Image">
            <figcaption>Image showing the latest news update.</figcaption>
        </figure>
    </article>

<section>
        <h2>Contact Us</h2>
        <p>Feel free to reach out to us via the contact form below.</p>
    </section>

<aside>
        <h3>Quick Links</h3>
        <ul>
            <li><a href="#privacy-policy">Privacy Policy</a></li>
            <li><a href="#terms">Terms of Service</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>© 2024 My Website. All rights reserved.</p>
</footer>

<div>
    <p>This is a div element used for grouping content.</p>
</div>

<span>This is a span element used for styling small sections of text.</span>

</body>
</html>

3 b) Write a HTML program, to embed audio and video into HTML web page.

3 c) Write a program to apply different types (or levels of styles or style specification formats) inline, internal, external styles to HTML elements. (identify selector, property and value)..

Exercise - 4: Selector forms

4 a) Write a program to apply different types of selector forms
i. Simple selector (element, id, class, group, universal).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors Example</title>
    <style>
        /* Simple Selectors */
        /* Element Selector */
        h1 {
            color: blue;
        }

/* ID Selector */
        #main-header {
            background-color: lightgray;
        }

/* Class Selector */
        .highlight {
            font-weight: bold;
            color: red;
        }

/* Group Selector */
        h2, p {
            font-family: Arial, sans-serif;
        }

/* Universal Selector */
        * {
            margin: 0;
            padding: 0;
        }

</style>
</head>
<body>

<h1 id="main-header">Welcome to CSS Selectors!</h1>

<p>This is a sample text.</p>
    <p class="highlight">This paragraph has a class "highlight".</p>
    
    <div>
        <p>This is a paragraph inside a div.</p>
        <p>This is another paragraph inside the div.</p>
    </div>

<h2>Heading with Sibling</h2>
    <p>This paragraph is adjacent to the h2.</p>
    <p>This paragraph is a general sibling of the h2.</p>

</body>
</html>

4 b) Write a program to apply different types of selector forms
ii. Combinator selector (descendant, child, adjacent sibling, general sibling)
iii.Pseudo-class selector.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors Example</title>
    <style>
        
        /* Combinator Selectors */
        /* Descendant Selector */
        div, p {
            font-size: 18px;
        }

/* Child Selector */
        div > p {
            color: green;
        }

/* Adjacent Sibling Selector */
        h2 + p {
            font-size: 20px;
        }

/* General Sibling Selector */
        h2 ~ p {
            color: purple;
        }

/* Pseudo-class Selector */
        a:hover {
            color: green;
        }

</style>
</head>
<body>

<h1>Welcome to CSS Selectors!</h1>

<p>This is a sample text.</p>
    <p>This paragraph has a class "highlight".</p>
    
    <div>
        <p>This is a paragraph inside a div.</p>
        <p>This is another paragraph inside the div.</p>
    </div>

<h2>Heading with Sibling</h2>
    <p>This paragraph is adjacent to the h2.</p>
    <p>This paragraph is a general sibling of the h2.</p>

<a href="https://kottesandeep.blogspot.com">Visit Example</a><br>
    <a href="https://kottesandeep.blogspot.com">My Blog</a><br>
</body>
</html>

4 c) Write a program to apply different types of selector forms
iv. Pseudo-element selector
v. Attribute selector

Exercise - 5: CSS with Color, Background, Font, Text and CSS Box Model

5 a) Write a program to demonstrate the various ways you can reference a color in CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Color References</title>
    <style>
        
        .box {
            width: 300px;
            height: 50px;
            margin: 10px;
            text-align: center;
            line-height: 50px;
            color: white;
            font-weight: bold;
        }
        .named { background-color: blue; }
        .hex { background-color: #ff5733; }
        .rgb { background-color: rgb(60, 179, 113); }
        .rgba { background-color: rgba(255, 165, 0, 0.7); }
        .hsl{ background-color: hsl(120, 100%, 25%); }
        .hsla { background-color: hsla(300, 100%, 50%, 0.5); }
    </style>
</head>
<body>
    <h2>Different Ways to Reference Colors in CSS</h2>
    <div class="box named">Named Color (Blue)</div>
    <div class="box hex">Hex Color (#ff5733)</div>
    <div class="box rgb">RGB Color (60, 179, 113)</div>
    <div class="box rgba">RGBA Color (255, 165, 0, 0.7)</div>
    <div class="box hsl">HSL Color (120, 100%, 25%)</div>
    <div class="box hsla">HSLA Color (300, 100%, 50%, 0.5)</div>
</body>
</html>

5 b) Write a CSS rule that places a background image halfway down the page, tilting it horizontally. The image should remain in place when the user scrolls up or down.

5 c) Write a program using the following terms related to CSS font and text:
i. font-size ii. font-weight iii. font-style
iv. text-decoration v. text-transformation vi. text-alignment

5 d) Write a program, to explain the importance of CSS Box model using
i. Content ii. Border iii. Margin iv. padding

Exercise - 6: Applying JavaScript - internal and external, I/O, Type Conversion

6 a)Write a program to embed internal and external JavaScript in a web page.

6 b)Write a program to explain the different ways for displaying output.

6 c)Write a program to explain the different ways for taking input.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JavaScript Output Methods</title>
</head>
<body>

<h2>JavaScript Input & Output Methods</h2>
    <p id="output"></p>
<br>
    <input type="text" id="userInput" placeholder="Enter something">
    <button onclick="getInput()">Submit</button>
    <script>
        
        // Prompt Input & Console Output
	let name = prompt("Enter your name:");
        console.log("Hello, " + name);

// Writing into an HTML element using innerHTML
        document.getElementById("output").innerHTML = "Entered name is "+name;
	document.write ("<br>");
        // Writing directly into the HTML document
        document.write("using document.write "+ name);

// Console Warning & Error
        console.warn("This is a warning message.");
        console.error("This is an error message.");

function getInput() {
            let input = document.getElementById("userInput").value;
            console.log("User entered: " + input);
        }
    
    </script>

</body>
</html>

6 d)Create a webpage which uses prompt dialogue box to ask a voter for his name and age. Display the information in table format along with either the voter can vote or not.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Voter Eligibility Check</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <script>
        function checkVoterEligibility() {
            let name = prompt("Enter your name:");
            let age = prompt("Enter your age:");
            
            if (name && age) {
                age = parseInt(age);
                let eligibility = age >= 18 ? "Eligible to Vote" : "Not Eligible to Vote";
                
                document.getElementById("voterTable").innerHTML = `
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Voting Eligibility</th>
                    </tr>
                    <tr>
                        <td>${name}</td>
                        <td>${age}</td>
                        <td>${eligibility}</td>
                    </tr>
                `;
            } else {
                alert("Please enter valid details.");
            }
        }
    </script>

<h2 style="text-align: center;">Voter Eligibility Checker</h2>
    <div style="text-align: center;">
        <button onclick="checkVoterEligibility()">Check Eligibility</button>
    </div>
    <table id="voterTable"></table>
</body>
</html>

Exercise - 7: Java Script Pre-defined and User-defined Objects

7 a)Write a program using window object properties and methods.

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Window Object Example</title>

</head>
<body>

<h1>Window Object Demonstration</h1>
    <button onclick="showAlert()">Show Alert</button>
    <button onclick="showPrompt()">Show Prompt</button>
    <button onclick="showConfirm()">Show Confirm</button>
    <button onclick="openNewWindow()">Open New Window</button>

// Demonstrates the use of window.prompt() method
        function showPrompt() {
            const userName = window.prompt("Please enter your name:");
            if (userName !== null) {
                window.alert("Hello, " + userName + "!");
            }
        }

// Demonstrates the use of window.confirm() method
        function showConfirm() {
            const userConfirmed = window.confirm("Do you want to proceed?");
            if (userConfirmed) {
                window.alert("You pressed OK!");
            } else {
                window.alert("You pressed Cancel!");
            }
        }

// Demonstrates the use of window.open() method
        let newWindow;
        function openNewWindow() {
            newWindow = window.open("https://www.kottesandeep.blogspot.com", "_blank", "width=500,height=500");
        }

</script>

</body>
</html>

7 b)Write a program using array object properties and methods.

7 c)Write a program using math object properties and methods.

7 d)Write a program using string object properties and methods.

7 e)Write a program using regex object properties and methods.

7 f)Write a program using date object properties and methods..

7 g)Write a program to explain user-defined object by using properties, methods, accessors,constructors and display.

<!DOCTYPE html>
<html lang="en">
<head>
       <title>constructor </title>
   </head>
<body>
<script>
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;

// Method to display car information
  this.displayInfo = function() {
    document.write(`Car: ${this.year} ${this.make} ${this.model}`);
  };
document.write("<br>");
  // Accessor method to get the car's year
  this.getYear = function() {
    return this.year;
  };

// Mutator method to set the car's year
  this.setYear = function(newYear) {
    this.year = newYear;
  };
}

// Creating an instance of Car
let myCar = new Car("Toyota", "Corolla", 2020);

// Accessing properties and calling methods
document.write("Car Make: " + myCar.make);
document.write("<br>");
myCar.displayInfo();
document.write("<br>");
// Using accessor and mutator methods
document.write("Current Year: " + myCar.getYear());
myCar.setYear(2023);
document.write("<br>");
document.write("Updated Year: " + myCar.getYear());
document.write("<br>");

</script>

</body>
</html>

Exercise - 8: Java Script Conditional Statements and Loops

8 a)Write a program which asks the user to enter three integers, obtains the numbers from the user and outputs HTML text that displays the larger number followed by the words “LARGER NUMBER” in an information message dialog. If the numbers are equal, output HTML text as “EQUAL NUMBERS”.

8 b)Write a program to display week days using switch case.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weekdays</title>
    <script>
        function showWeekday() {
            let day = parseInt(prompt("Enter a number between 1 and 7 to get the day of the week:"));

switch (day) {
                case 1:
                    alert("Sunday");
                    break;
                case 2:
                    alert("Monday");
                    break;
                case 3:
                    alert("Tuesday");
                    break;
                case 4:
                    alert("Wednesday");
                    break;
                case 5:
                    alert("Thursday");
                    break;
                case 6:
                    alert("Friday");
                    break;
                case 7:
                    alert("Saturday");
                    break;
                default:
                    alert("Invalid input! Please enter a number between 1 and 7.");
            }
        }
    </script>
</head>
<body>
    <button onclick="showWeekday()">Show Weekday</button>
</body>
</html>

8 c)Write a program to print 1 to 10 numbers using for, while and do-while loops.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Loops</title>
    <script>
        function printNumbers() {
            // For Loop
            let output = "Using for loop: ";
            for (let i = 1; i <= 10; i++) {
                output += i + " ";
            }
		document.getElementById("for").innerHTML = output;

// While Loop
            output1 = "<br>Using while loop: ";
            let i = 1;
            while (i <= 10) {
                output1 += i + " ";
                i++;
            }
	document.getElementById("while").innerHTML = output1;
            // Do-While Loop
            output2 = "<br>Using do-while loop: ";
            i = 1;
            do {
                output2 += i + " ";
                i++;
            } while (i <= 10);

document.getElementById("dow").innerHTML = output2;
        }
    </script>
</head>
<body>
    <button onclick="printNumbers()">Print Numbers 1 to 10</button>
    <div id="for"></div>
	<div id="while"></div>
<div id="dow"></div>
</body>
</html>

8 d)Write a program to print data in object using for-in, for-each and for-of loops

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Object Looping</title>
    <script>
        function loopThroughObject() {
            let person = {
                name: "DIET",
                age: 16,
                city: "Vijayawada"
            };

let output = "Using for-in loop: <br>";
            for (let key in person) {
                output += key + ": " + person[key] + "<br>";
            }

output += "<br>Using forEach loop (iterating over object properties): <br>";
            Object.entries(person).forEach(([key, value]) => {
                output += key + ": " + value + "<br>";
            });

output += "<br>Using for-of loop (iterating over object entries): <br>";
            for (const [key, value] of Object.entries(person)) {
                output += key + ": " + value + "<br>";
            }

document.getElementById("output").innerHTML = output;
        }
    </script>
</head>
<body>
    <button onclick="loopThroughObject()">Loop Through Object</button>
    <div id="output"></div>
</body>
</html>

8 e)Develop a program to determine whether a given number is an ‘ARMSTRONG NUMBER’ or not. [Eg: 153 is an Armstrong number, since sum of the cube of the digits is equal to the number i.e.,13 + 53+ 33 = 153]

8 f). Write a program to display the denomination of the amount deposited in the bank in terms of 100’s, 50’s, 20’s, 10’s, 5’s, 2’s & 1’s. (Eg: If deposited amount is Rs.163, the output should be 1-100’s, 1-50’s, 1- 10’s, 1-2’s & 1-1’s)

Exercise - 9: Java Script Functions and Events

9 a)Design a HTML having a text box and four buttons named Factorial, Fibonacci, Prime, and Palindrome. When a button is pressed an appropriate function should be called to display
```
i. Factorial of that number 
ii. Fibonacci series up to that number 
iii. Prime numbers up to that number 
iv. Is it palindrome or not
```

<!DOCTYPE html>
<html lang="en">
<head>
      <title>Number Operations</title>
  
</head>
<body>

<div>
    <h2>Number Operations</h2>
    <input type="number" id="numberInput" placeholder="Enter a number">
    <button onclick="Factorial()">Factorial</button>
    <button onclick="Fibonacci()">Fibonacci</button>
    <button onclick="PrimeNum()">Prime Numbers</button>
    <button onclick="Palindrome()">Palindrome</button>
    
    <div id="result"></div>
</div>

// Fibonacci Series
    function Fibonacci() {
        let num = document.getElementById('numberInput').value;
        num = parseInt(num);
        if (isNaN(num) || num <= 0) {
            document.getElementById('result').innerHTML = "Please enter a positive integer.";
            return;
        }
        let fib = [0, 1];
        for (let i = 2; i < num; i++) {
            fib.push(fib[i - 1] + fib[i - 2]);
        }
        document.getElementById('result').innerHTML = `Fibonacci series up to ${num}: ${fib.join(', ')}`;
    }

// Prime Numbers
    function PrimeNum() {
        let num = document.getElementById('numberInput').value;
        num = parseInt(num);
        if (isNaN(num) || num < 2) {
            document.getElementById('result').innerHTML = "Please enter a number greater than or equal to 2.";
            return;
        }
        let primes = [];
        for (let i = 2; i <= num; i++) {
            let isPrime = true;
            for (let j = 2; j <= Math.sqrt(i); j++) {
                if (i % j === 0) {
                    isPrime = false;
                    break;
                }
            }
            if (isPrime) {
                primes.push(i);
            }
        }
        document.getElementById('result').innerHTML = `Prime numbers up to ${num}: ${primes.join(', ')}`;
    }

// Palindrome 
    function Palindrome() {
        let num = document.getElementById('numberInput').value;
        if (isNaN(num)) {
            document.getElementById('result').innerHTML = "Please enter a valid number.";
            return;
        }
        let strNum = num.toString();
        let reversed = strNum.split('').reverse().join('');
        if (strNum === reversed) {
            document.getElementById('result').innerHTML = `${num} is a palindrome.`;
        } else {
            document.getElementById('result').innerHTML = `${num} is not a palindrome.`;
        }
    }
</script>

</body>
</html>

9 b). Write a program to validate the following fields in a registration page

i.Name (start with alphabet and followed by alphanumeric and the length should 
not be less than 6 characters) 
ii. Mobile (only numbers and length 10 digits) 
iii. E-mail (should contain format like xxxxxxx@xxxxxx.xxx)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Registration Form</title>
</head>
<body>

<div>
    <h2>Registration Form</h2>
    <form id="registrationForm">
        <input type="text" id="name" placeholder="Enter your name" required><br>
        <input type="text" id="mobile" placeholder="Enter your mobile number" required><br>
        <input type="email" id="email" placeholder="Enter your email" required><br>
        <button type="submit">Submit</button>
    </form>
    <div id="errorMessages"></div>
</div>

// Function to validate mobile number
    function validateMobile(mobile) {
        const mobileRegex = /^\d{10}$/; // Only numbers and exactly 10 digits
        return mobileRegex.test(mobile);
    }

// Function to validate email
    function validateEmail(email) {
        const emailRegex = /^[a-zA-Z0-9._]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/; // Basic email format validation 
        return emailRegex.test(email);
    }

// Handle form submission and validation
    document.getElementById('registrationForm').addEventListener('submit', function(event) {
        event.preventDefault();

const name = document.getElementById('name').value;
        const mobile = document.getElementById('mobile').value;
        const email = document.getElementById('email').value;
        let errorMessages = '';

// Validate Name
        if (!validateName(name)) {
            errorMessages += 'Name should start with an alphabet, followed by alphanumeric characters and be at least 6 characters long.<br>';
        }

// Validate Mobile
        if (!validateMobile(mobile)) {
            errorMessages += 'Mobile number should contain exactly 10 digits.<br>';
        }

// Validate Email
        if (!validateEmail(email)) {
            errorMessages += 'Email should be in the correct format (e.g., xxxxx@xxxxx.xxx).<br>';
        }

// Display error messages if any
        if (errorMessages) {
            document.getElementById('errorMessages').innerHTML = errorMessages;
        } else {
            document.getElementById('errorMessages').innerHTML = 'Registration successful!';
        }
    });
</script>

</body>
</html>

Dr. K. Sandeep

Menu

Express js, React js and Mongo DB

Syllabus

User Interface Design using Flutter

FULL STACK DEVELOPMENT I

Syllabus