Advance Web Assignment 1 To 8

LAB PRACTICAL 1 TO 8
ADVANCE WEB TECHNOLOGY BY ROSHANI

MALI MAM.
NAME: NAFIS PARWEZ

ENROLL NO: A710145023050
SUBJECT: ADVANCE WEB TECHNOLOGIES
COURSE: MASTERS OF COMPUTER APPLICATIONS
SESSION: 2023-2025
1.Installation and Simple Programs.
<html>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Add submission
2.Single page applications and use React Router to design

single page applications.
import React from 'react';

import { BrowserRouter as Router, Link, Route, Switch } from 'react-
router-dom';
import Home from './components/Home';
import About from './components/About';
import Products from './components/Products';
import Contact from './components/Contact';
const App: React.FC = () => {

return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/products">Products</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav> <Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/products" component={Products} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
};export default App;
import React from 'react';const Home: React.FC = () => {
return (
<div>
<h1>Home</h1>
<p>Welcome to our website!</p>
</div>
);
};export default Home;
3.Use various React features including components and

forms.
class NameForm extends React.Component {

constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) { this.setState({value: event.target.value}); }

handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}> <label>
Name:
<input type="text" value={this.state.value}
onChange={this.handleChange} /> </label>
<input type="submit" value="Submit" />
</form>
);
}
}
4.Implement a functional front-end web application using

React.
function modulo(x) {
return function(value) {
return value % x
console.log(modulo(3)(5)) // 2
const isOdd = modulo(2)
console.log(isOdd(4)) // 0 (false)
console.log(isOdd(5)) // 1 (true)
5.Create a Dropdown Button Filter.
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput"
onkeyup="filterFunction()">
<a href="#about">About</a>
<a href="#base">Base</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
<a href="#custom">Custom</a>
<a href="#support">Support</a>
<a href="#tools">Tools</a>
</div>
</div>
6.Create Basics Interactive examples using ReactJS.
class ShoppingList extends React.Component {

render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
return React.createElement('div', {className: 'shopping-list'},

React.createElement('h1', /* ... h1 children ... */),
React.createElement('ul', /* ... ul children ... */)
);
class Board extends React.Component {

renderSquare(i) {
return <Square value={i} />; }
}
class Square extends React.Component {

render() {
return (
<button className="square">
{this.props.value} </button>
);
}
}
7.Demonstrate Function Components and Class Components

in reactJS.
Functional Components Class Components
Functional components are simple A class component extends from

JavaScript functions that take props as React.Component and the render
arguments and return JSX. function return the React element.
It is known as a stateless component A class component can also be referred

since it does not have any state to as a stateful component
A functional component does not Lifecycle events can be handled by

respond to a lifecycle event class components
A constructor is not supported by Provide a constructor for storing state

functional components before passing props to the parent class
React provides useState()Hook for It's a bit different for class components.
handling state functional components. The this keyword is required, along with
the setState() function and a
constructor.
Comparatively, functional components A class component is more complex: it

perform better than class components is an instance of React.Component with
a constructor.
8.Handling user events in React.
class Toggle extends React.Component {

constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback

this.handleClick = this.handleClick.bind(this); }
handleClick() { this.setState(prevState => ({ isToggleOn: !

prevState.isToggleOn })); }
render() {
return (
<button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON'
: 'OFF'}
</button>
);
}
}

Advance Web Assignment 1 To 8

Uploaded by

Copyright:

Available Formats

Advance Web Assignment 1 To 8

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Advance Web Assignment 1 To 8

Uploaded by

Copyright:

Available Formats

LAB PRACTICAL 1 TO 8

ADVANCE WEB TECHNOLOGY BY ROSHANI

NAME: NAFIS PARWEZ

<h1>My First Heading</h1>

2.Single page applications and use React Router to design

import React from 'react';

const App: React.FC = () => {

3.Use various React features including components and

class NameForm extends React.Component {

handleChange(event) { this.setState({value: event.target.value}); }

4.Implement a functional front-end web application using

const isOdd = modulo(2)

5.Create a Dropdown Button Filter.

6.Create Basics Interactive examples using ReactJS.

class ShoppingList extends React.Component {

return React.createElement('div', {className: 'shopping-list'},

class Board extends React.Component {

class Square extends React.Component {

7.Demonstrate Function Components and Class Components

Functional Components Class Components

Functional components are simple A class component extends from

It is known as a stateless component A class component can also be referred

A functional component does not Lifecycle events can be handled by

A constructor is not supported by Provide a constructor for storing state

Comparatively, functional components A class component is more complex: it

8.Handling user events in React.

class Toggle extends React.Component {

// This binding is necessary to make `this` work in the callback

handleClick() { this.setState(prevState => ({ isToggleOn: !

You might also like