0% found this document useful (0 votes)

36 views75 pages

Ai&ds HTML

The document discusses modules for the MEAN stack technologies course covering HTML5, JavaScript, Node.js, Express.js and TypeScript. It lists exercises for each module related to building features for an e-commerce application.

Uploaded by

Vennapusha Lakshmi Sai

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

36 views75 pages

Ai&ds HTML

Uploaded by

Vennapusha Lakshmi Sai

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 75

MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.

JS, AND TYPESCRIPT

DEPARTMENT OF
Computer Science And Engineering
Artificial Intelligence And Data Science

III B Tech II Sem

MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT,

NODE.JS,EXPRESS.JS, AND TYPESCRIPT
(Skill Oriented Course)

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

List of Exercises :
1. Course Name: HTML5 - The Language
a
Module Name: Case-insensitivity, Platform-independency, DOCTYPE Declaration, Types of
Elements, HTML Elements - Attributes, Metadata Element

Include the Metadata element in Homepage.html for providing description as "IEKart's is an

online shopping website that sells goods in retail. This company deals with various
categories like Electronics, Clothing, Accessories etc.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_28320667711144660000_shared?collectionId=lex_177397328348408100
00_shared&collectionType=Course

1 Course Name: HTML5 - The Language

.
b Module Name: Sectioning Elements
Enhance the Homepage.html of IEKart's Shopping Application by adding appropriate
sectioning elements.

https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_63722913471108
57000_shared?collectionId=lex_1773973283484081000 0_shared&collectionType=Course

1. Course Name: HTML5 - The Language

c
Module Name: Paragraph Element, Division and Span Elements, List Element

Make use of appropriate grouping elements such as list items to "About Us" page of IEKart's
Shopping Application

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_32785192040894940000_shared?collectionId=lex_177397328348408100
00_shared&collectionType=Course

1 Course Name: HTML5 - The Language

.
d Module Name: Link Element
Link "Login", "SignUp" and "Track order" to "Login.html", "SignUp.html" and

"Track.html" page respectively. Bookmark each category to its details of IEKart's Shopping

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

application.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_15515105953273338000_shared?collectionId=lex_177397328348408100
00_shared&collectionType=Course

1.e Course Name: HTML5 - The Language

Module Name: Character Entities

Add the © symbol in the Home page footer of IEKart's Shopping application.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_547667376938096260_shared?collectionId=lex_17739732834840810000
_shared&collectionType=Course

1.f Course Name: HTML5 - The Language

Module Name: HTML5 Global Attributes

Add the global attributes such as contenteditable, spellcheck, id etc. to enhance the
Signup Page functionality of IEKart's Shopping application.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_28723566050321920000_shared?collectionId=lex_177397328348408100
00_shared&collectionType=Course

2.a Course Name: HTML5 - The Language

Module Name: Creating Table Elements, Table Elements : Colspan/Rowspan

Attributes, border, cellspacing, cellpadding attributes

Enhance the details page of IEKart's Shopping application by adding a table element
to display the available mobile/any inventories.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_auth_013168035284033536113_shared?collectionId=lex_177397328348
40810000_shared&collectionType=Course

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

2.b Course Name: HTML5 - The Language

Module Name: Creating Form Elements, Color and Date Pickers, Select and Datalist
Elements

Using the form elements create Signup page for IEKart's Shopping application.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_13975270903118459000_shared?collectionId=lex_177397328348408100
00_shared&collectionType=Course

2.c Course Name: HTML5 - The Language

Module Name: Input Elements - Attributes

Enhance Signup page functionality of IEKart's Shopping application by adding

attributes to input elements.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_14048414537062347000_shared?collectionId=lex_177397328348408100
00_shared&collectionType=Course

2.d Course Name: HTML5 - The Language

Module Name: Media, Iframe

Add media content in a frame using audio, video, iframe elements to the Home page
of IEKart's Shopping application.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_30738402225794945000_shared?collectionId=lex_177397328348408100
00_shared&collectionType=Course

3.a Course Name: Javascript

Module Name: Type of Identifiers

Write a JavaScript program to find the area of a circle using radius (var and let -
reassign and observe the difference with var and let) and PI (const)

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_auth_013053264414818304732_shared?collectionId=lex_181096983663

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

32810000_shared&collectionType=Course

3.b Course Name: Javascript

Module Name: Primitive and Non Primitive Data Types

Write JavaScript code to display the movie details such as movie name, starring,
language, and ratings. Initialize the variables with values of appropriate types. Use
template literals wherever necessary.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_21528322245232402000_shared?collectionId=lex_181096983663328100
00_shared&collectionType=Course

3.c Course Name: Javascript

Module Name: Operators and Types of Operators

Write JavaScript code to book movie tickets online and calculate the total price,
considering the number of tickets and price per ticket as Rs. 150. Also, apply a festive
season discount of 10% and calculate the discounted amount.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_13808338384481720000_shared?collectionId=lex_181096983663328100
00_shared&collectionType=Course

3.d Course Name: Javascript

Module Name: Types of Statements, Non - Conditional Statements, Types of

Conditional Statements, if Statements, switch Statements

Write a JavaScript code to book movie tickets online and calculate the total price
based on the 3 conditions: (a) If seats to be booked are not more than 2, the cost per
ticket remains Rs. 150. (b) If seats are 6 or more, booking is not allowed. (c) If se

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_16257498471333610000_shared?collectionId=lex_181096983663328100
00_shared&collectionType=Course

3.e Course Name: Javascript

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

Module Name: Types of Loops

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_6238536888292970000_shared?collectionId=lex_1810969836633281000
0_shared&collectionType=Course

4.a Course Name: Javascript

Module Name: Types of Functions, Declaring and Invoking Function, Arrow Function,
Function Parameters, Nested Function, Built-in Functions, Variable Scope in
Functions

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_15455199570613326000_shared?collectionId=lex_181096983663328100
00_shared&collectionType=Course

4.b Course Name: Javascript

Module Name: Working With Classes, Creating and Inheriting Classes

Create an Employee class extending from a base class Person. Hints: (i) Create a class

Person with name and age as attributes. (ii) Add a constructor to initialize the values
(iii) Create a class Employee extending Person with additional attributes role

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_auth_012599811117760512458_shared?collectionId=lex_181096983663
32810000_shared&collectionType=Course

4.c Course Name: Javascript

Module Name: In-built Events and Handlers

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_4192188372573027000_shared?collectionId=lex_1810969836633281000
0_shared&collectionType=Course

4.d Course Name: Javascript

Module Name: Working with Objects, Types of Objects, Creating Objects,

Combining and cloning Objects using Spread operator, Destructuring Objects, Browser
Object Model, Document Object Model

If a user clicks on the given link, they should see an empty cone, a different heading,
and a different message and a different background color. If user clicks again, they
should see a re-filled cone, a different heading, a different message, and a diffe

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_13197025862804100000_shared?collectionId=lex_181096983663328100
00_shared&collectionType=Course

5.a Course Name: Javascript

Module Name: Creating Arrays, Destructuring Arrays, Accessing Arrays, Array

Methods

Create an array of objects having movie details. The object should include the movie
name, starring, language, and ratings. Render the details of movies on the page using
the array.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_auth_013053270191734784711_shared?collectionId=lex_181096983663
32810000_shared&collectionType=Course

5.b Course Name: Javascript

Module Name: Introduction to Asynchronous Programming, Callbacks, Promises,

Async and Await, Executing Network Requests using Fetch API

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

Simulate a periodic stock price change and display on the console. Hints: (i) Create a
method which returns a random number - use Math.random, floor and other
methods to return a rounded value. (ii) Invoke the method for every three seconds
and stop when

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_auth_012599811633905664460_shared?collectionId=lex_181096983663
32810000_shared&collectionType=Course

5.c Course Name: Javascript

Module Name: Creating Modules, Consuming Modules

Validate the user by creating a login module. Hints: (i) Create a file login.js with a User
class. (ii) Create a validate method with username and password as arguments.

(iii) If the username and password are equal it will return "Login Successful" else w

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_auth_013052857053585408667_shared?collectionId=lex_181096983663
32810000_shared&collectionType=Course

6.a Course Name: Node.js

Module Name: How to use Node.js

Verify how to execute different functions successfully in the Node.js platform.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_19002830632103186000_shared?collectionId=lex_324078356719467600
00_shared&collectionType=Course

6 Course Name: Node.js

.
b Module Name: Create a web server in Node.js
Write a program to show the workflow of JavaScript code executable by creating web server
in Node.js.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_28177338996267815000_shared?collectionId=lex_324078356719467600

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

00_shared&collectionType=Course

6. Course Name: Node.js

c
Module Name: Modular programming in Node.js

Write a Node.js module to show the workflow of Modularization of Node application.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_28865394191004004000_shared?collectionId=lex_324078356719467600
00_shared&collectionType=Course

6 Course Name: Node.js

.
d Module Name: Restarting Node Application
Write a program to show the workflow of restarting a Node application.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_9174073856000159000_shared?collectionId=lex_3240783567194676000
0_shared&collectionType=Course

6. Course Name: Node.js

e
Module Name: File Operations

Create a text file src.txt and add the following data to it. Mongo, Express, Angular, Node.

https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_33376440180246
100000_shared?collectionId=lex_324078356719467600 00_shared&collectionType=Course

7. Course Name: Express.js

a
Module Name: Defining a route, Handling Routes, Route Parameters, Query Parameters

Implement routing for the AdventureTrails application by embedding the necessary code in
the routes/route.js file.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_29394215542149950000_shared?collectionId=lex_324078356719467600
00_shared&collectionType=Course

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

7 Course Name: Express.js

.
b Module Name: How Middleware works, Chaining of Middlewares, Types of Middlewares

In myNotes application: (i) we want to handle POST submissions. (ii) display customized
error messages. (iii) perform logging.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_13930661312009580000_shared?collectionId=lex_324078356719467600
00_shared&collectionType=Course

7. Course Name: Express.js

c
Module Name: Connecting to MongoDB with Mongoose, Validation Types and

Defaults

Write a Mongoose schema to connect with MongoDB.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_auth_013035588775485440691_shared?collectionId=lex_324078356719
46760000_shared&collectionType=Course

7 Course Name: Express.js

.
d Module Name: Models
Write a program to wrap the Schema into a Model object.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_auth_013035593896869888662_shared?collectionId=lex_324078356719
46760000_shared&collectionType=Course

8. Course Name: Express.js

a
Module Name: CRUD Operations

Write a program to perform various CRUD (Create-Read-Update-Delete) operations using

Mongoose library functions.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_auth_013035684270129152696_shared?collectionId=lex_324078356719

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

46760000_shared&collectionType=Course

8 Course Name: Express.js

.
b Module Name: API Development
In the myNotes application, include APIs based on the requirements provided. (i) API should
fetch the details of the notes based on a notesID which is provided in the URL. Test URL -
http://localhost:3000/notes/7555 (ii) API should update the details bas

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_auth_013035745250975744755_shared?collectionId=lex_324078356719
46760000_shared&collectionType=Course

8. Course Name: Express.js

c
Module Name: Why Session management, Cookies

Write a program to explain session management using cookies.

https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_24299316914857
090000_shared?collectionId=lex_324078356719467600 00_shared&collectionType=Course

8 Course Name: Express.js

.
d Module Name: Sessions
Write a program to explain session management using sessions.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_905413034723449100_shared?collectionId=lex_32407835671946760000
_shared&collectionType=Course

8. Course Name: Express.js

e
Module Name: Why and What Security, Helmet Middleware

Implement security features in myNotes application

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_31677453061177940000_shared?collectionId=lex_324078356719467600
00_shared&collectionType=Course

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

9. Course Name: Typescript

a
Module Name: Basics of TypeScript

On the page, display the price of the mobile-based in three different colors. Instead of using
the number in our code, represent them by string values like GoldPlatinum, PinkGold,
SilverTitanium.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_28910354929502245000_shared?collectionId=lex_943623311651267800
0_shared&collectionType=Course

9. Course Name: Typescript

b
Module Name: Function

Define an arrow function inside the event handler to filter the product array with the
selected product object using the productId received by the function. Pass the selected
product object to the next screen.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_10783156469383723000_shared?collectionId=lex_943623311651267800
0_shared&collectionType=Course

9. Course Name: Typescript

c
Module Name: Parameter Types and Return Types

Consider that developer needs to declare a function - getMobileByVendor which accepts

string as input parameter and returns the list of mobiles.

https://infyspringboard.onwingspan.com/web/en/viewer/hands-

on/lex_auth_012712912427057152901_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

9. Course Name: Typescript

d
Module Name: Arrow Function

Consider that developer needs to declare a manufacturer's array holding 4 objects with id
and price as a parameter and needs to implement an arrow function - myfunction to
populate the id parameter of manufacturers array whose price is greater than or equ

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

https://infyspringboard.onwingspan.com/web/en/viewer/hands-

on/lex_auth_012712910875500544904_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

9. Course Name: Typescript

e
Module Name: Optional and Default Parameters

Declare a function - getMobileByManufacturer with two parameters namely manufacturer

and id, where manufacturer value should passed as Samsung and id parameter should be
optional while invoking the function, if id is passed as 101 then this function shoul

https://infyspringboard.onwingspan.com/web/en/viewer/handson/lex_auth_01271291494
0641280906_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

10 Course Name: Typescript

.a
Module Name: Rest Parameter

Implement business logic for adding multiple Product values into a cart variable which is
type of string array.

https://infyspringboard.onwingspan.com/web/en/viewer/hands-

on/lex_auth_012712921860915200909_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

10 Course Name: Typescript

.b
Module Name: Creating an Interface

Declare an interface named - Product with two properties like productId and productName
with a number and string datatype and need to implement logic to populate the Product
details.

https://infyspringboard.onwingspan.com/web/en/viewer/hands-

on/lex_auth_012712925244276736910_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

10.c Course Name: Typescript

Module Name: Duck Typing

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

Declare an interface named - Product with two properties like productId and
productName with the number and string datatype and need to implement logic to
populate the Product details.

https://infyspringboard.onwingspan.com/web/en/viewer/hands-

on/lex_auth_012712925995458560912_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

10.d Course Name: Typescript

Module Name: Function Types

Declare an interface with function type and access its value.

https://infyspringboard.onwingspan.com/web/en/viewer/hands-

on/lex_auth_012712948945346560918_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

11.a Course Name: Typescript

Module Name: Extending Interfaces

Declare a productList interface which extends properties from two other declared
interfaces like Category,Product as well as implementation to create a variable of this
interface type.

https://infyspringboard.onwingspan.com/web/en/viewer/hands-

on/lex_auth_012712951652139008920_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

11.b Course Name: Typescript

Module Name: Classes

Consider the Mobile Cart application, Create objects of the Product class and place
them into the productlist array.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_3705824317381604400_shared?collectionId=lex_9436233116512678000
_shared&collectionType=Course

11.c Course Name: Typescript

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

Module Name: Constructor

Declare a class named - Product with the below-mentioned declarations: (i) productId
as number property (ii) Constructor to initialize this value (iii) getProductId method to
return the message "Product id is <<id value>>".

https://infyspringboard.onwingspan.com/web/en/viewer/hands-

on/lex_auth_012712954616782848927_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

11.d Course Name: Typescript

Module Name: Access Modifiers

Create a Product class with 4 properties namely productId, productName,

productPrice, productCategory with private, public, static, and protected access
modifiers and accessing them through Gadget class and its methods.

https://infyspringboard.onwingspan.com/web/en/viewer/hands-

on/lex_auth_012712953517170688931_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

12.a Course Name: Typescript

Module Name: Properties and Methods

Create a Product class with 4 properties namely productId and methods to

setProductId() and getProductId().

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_9356738095572543000_shared?collectionId=lex_9436233116512678000
_shared&collectionType=Course

12.b Course Name: Typescript

Module Name: Creating and using Namespaces

Create a namespace called ProductUtility and place the Product class definition in it.
Import the Product class inside productlist file and use it.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_20787271128051925000_shared?collectionId=lex_943623311651267800

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

0_shared&collectionType=Course

12.c Course Name: Typescript

Module Name: Creating and using Modules

Consider the Mobile Cart application which is designed as part of the functions in a
module to calculate the total price of the product using the quantity and price values
and assign it to a totalPrice variable.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_24788158187785620000_shared?collectionId=lex_943623311651267800
0_shared&collectionType=Course

12.d Course Name: Typescript

Module Name: What is Generics, What are Type Parameters, Generic Functions,
Generic Constraints

Create a generic array and function to sort numbers as well as string values.

https://infyspringboard.onwingspan.com/web/en/viewer/web-

module/lex_446287045482942800_shared?collectionId=lex_9436233116512678000_
shared&collectionType=Course

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

1.a.Course Name: HTML5 - The Language Module Name: Case-insensitivity, Platform-independency,

DOCTYPE Declaration, Types of Elements, HTML Elements - Attributes, Metadata Element Include the
Metadata element in Homepage.html for providing description as "IEKart's is an online shopping
website that sells goods in retail. This company deals with various categories like Electronics, Clothing,
Accessories etc.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_28320667711144660000_sh
ared?collectionId=lex_177397328348408100 00_shared&collectionType=Course 1

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Your Page Title</title>

</head>

<body>

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

</body>

</html>

1.b.Course Name: HTML5 - The Language Module Name: Sectioning Elements Enhance the
Homepage.html of IEKart's Shopping Application by adding appropriate sectioning elements.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_6372291347110857000_shar
ed?collectionId=lex_1773973283484081000 0_shared&collectionType=Course

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>IEKart Shopping Application</title>

</head>

<body>

<h1>Welcome to IEKart</h1>

</header>

<nav>

<ul>

<li><a href="#">Products</a></li>

<li><a href="#">Categories</a></li>

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

</ul>

</nav>

<main>

<h2>Featured Products</h2>

</section>

<h2>Popular Categories</h2>

</section>

</main>

<p>© 2024 IEKart. All rights reserved.</p>

</footer>

</body>

</html>

1.c.Course Name: HTML5 - The Language Module Name: Paragraph Element, Division and Span
Elements, List Element Make use of appropriate grouping elements such as list items to "About Us" page
of IEKart's Shopping Application
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_32785192040894940000_sh
ared?collectionId=lex_177397328348408100 00_shared&collectionType=Course

<!DOCTYPE html>

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>About Us - IEKart Shopping Application</title>

</head>

<body>

<h1>About Us</h1>

</header>

<main>

<h2>Our Company</h2>

<p>Information about your company goes here...</p>

</section>

<ul>

<li>

<p>Position: CEO</p>

<p>Bio: Lorem ipsum dolor sit amet...</p>

</div>

</li>

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

</ul>

</section>

<h2>Contact Us</h2>

Address: 123 Main St, City, Country<br>

Phone: 123-456-7890<br>

Email: [email protected]

</address>

</section>

</main>

<p>© 2024 IEKart Shopping Application. All rights reserved.</p>

</footer>

</body>

</html>

1.d.Course Name: HTML5 - The Language Module Name: Link Element Link "Login", "SignUp" and
"Trackorder" to "Login.html", "SignUp.html" and "Track.html" page respectively. Bookmark each
category to its details of IEKart's Shopping application.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_15515105953273338000_sh
ared?collectionId=lex_177397328348408100 00_shared&collectionType=Course

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

<title>IEKart Shopping</title>

</head>

<body>

<nav>

<ul>

<li><a href="Login.html">Login</a></li>

<li><a href="SignUp.html">SignUp</a></li>

<li><a href="Track.html">Track order</a></li>

</ul>

</nav>

</body>

</html>

1.e.Course Name: HTML5 - The Language Module Name: Character Entities Add the © symbol in the
Home page footer of IEKart's Shopping application.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_547667376938096260_share
d?collectionId=lex_17739732834840810000 _shared&collectionType=Course

<p>© IEKart Shopping</p>

</footer>

1.f.Course Name: HTML5 - The Language Module Name: HTML5 Global Attributes Add the global
attributes such as contenteditable, spellcheck, id etc. to enhance the Signup Page functionality of
IEKart's Shopping application.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_28723566050321920000_sh
ared?collectionId=lex_177397328348408100 00_shared&collectionType=Course

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Signup Page - IEKart Shopping</title>

</head>

<body>

<h1>Signup</h1>

<form action="/signup" method="POST">

<label for="username">Username:</label>

<input type="text" id="username" name="username" required spellcheck="true" autofocus>

<br>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required spellcheck="true">

<br>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

<br>

<label for="confirm_password">Confirm Password:</label>

<input type="password" id="confirm_password" name="confirm_password" required>

<br>

<label for="birthdate">Date of Birth:</label>

<input type="date" id="birthdate" name="birthdate">

<br>

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

<textarea id="bio" name="bio" rows="4" cols="50" contenteditable="true"></textarea>

<br>

<input type="submit" value="Signup">

</form>

</body>

</html>

2.a.Course Name: HTML5 - The Language Module Name: Creating Table Elements, Table Elements :
Colspan/Rowspan Attributes, border, cellspacing, cellpadding attributes Enhance the details page of
IEKart's Shopping application by adding a table element to display the available mobile/any inventories.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_auth_013168035284033536
113_shared?collectionId=lex_177397328348 40810000_shared&collectionType=Course

<table border="1" cellspacing="0" cellpadding="5">

<caption>Available Inventories</caption>

<thead>

<tr>

<th>Product</th>

<th>Brand</th>

<th>Price</th>

<th>Quantity</th>

</tr>

</thead>

<tbody>

<tr>

<td>Mobile Phone</td>

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

<td>Brand XYZ</td>

</tr>

</tbody>

</table>

2.b.Course Name: HTML5 - The Language Module Name: Creating Form Elements, Color and Date
Pickers, Select and Datalist Elements Using the form elements create Signup page for IEKart's Shopping
application.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_13975270903118459000_sh
ared?collectionId=lex_177397328348408100 00_shared&collectionType=Course

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>IEKart Signup</title>

<style>

/* Add your CSS styles here */

/* Example styles */

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 0;

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

form {

max-width: 400px;

margin: 20px auto;

background: #fff;

padding: 20px;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

input[type="text"], input[type="email"], input[type="password"] {

width: 100%;

padding: 10px;

margin: 5px 0;

border: 1px solid #ccc;

border-radius: 3px;

box-sizing: border-box;

input[type="submit"] {

width: 100%;

background-color: #4CAF50;

color: white;

padding: 14px 20px;

margin: 8px 0;

border: none;

border-radius: 4px;

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

cursor: pointer;

input[type="submit"]:hover {

background-color: #45a049;

</style>

</head>

<body>

<form action="submit_signup.php" method="POST">

<h2>Signup for IEKart</h2>

<label for="fullname">Full Name:</label>

<input type="text" id="fullname" name="fullname" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

<label for="address">Address:</label>

<textarea id="address" name="address" rows="4"></textarea>

<input type="submit" value="Signup">

</form>

</body>

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

</html>

2.c.Course Name: HTML5 - The Language Module Name: Input Elements - Attributes Enhance Signup
page functionality of IEKart's Shopping application by adding attributes to input elements.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_14048414537062347000_sh
ared?collectionId=lex_177397328348408100 00_shared&collectionType=Course

<input type="text" id="username" name="username" placeholder="Enter your username" required

autocomplete="username">

<input type="email" id="email" name="email" placeholder="Enter your email" required

autocomplete="email">

<input type="password" id="password" name="password" placeholder="Enter your password"

required>

<input type="password" id="confirm_password" name="confirm_password" placeholder="Confirm your

password" required>

2.d.Course Name: HTML5 - The Language Module Name: Media, Iframe Add media content in a frame
using audio, video, iframe elements to the Home page of IEKart's Shopping application.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_30738402225794945000_sh
ared?collectionId=lex_177397328348408100 00_shared&collectionType=Course

<source src="audio-file.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

<video width="320" height="240" controls>

<source src="video-file.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

<iframe src="https://example.com" width="600" height="400"></iframe>

3.a.Course Name: Javascript Module Name: Type of Identifiers Write a JavaScript program to find the
area of a circle using radius (var and let - reassign and observe the difference with var and let) and PI
(const)https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_auth_0130532644148
18304732_shared?collectionId=lex_181096983663 32810000_shared&collectionType=Course

// Using var, let, and const to find the area of a circle

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

// Declaring and initializing variables

var radius = 5; // var can be reassigned

let newRadius = 7; // let can also be reassigned

// Constants

const PI = 3.14159;

// Calculating area using var

var areaVar = PI * radius * radius;

console.log("Area of the circle with radius", radius, "using var:", areaVar);

// Reassigning radius using var

radius = 10;

// Recalculating area using var after reassignment

areaVar = PI * radius * radius;

console.log("Area of the circle with new radius", radius, "using var:", areaVar);

// Calculating area using let

let areaLet = PI * newRadius * newRadius;

console.log("Area of the circle with radius", newRadius, "using let:", areaLet);

// Reassigning newRadius using let

newRadius = 9;

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

// Recalculating area using let after reassignment

areaLet = PI * newRadius * newRadius;

console.log("Area of the circle with new radius", newRadius, "using let:", areaLet);

3.b.Course Name: Javascript Module Name: Primitive and Non Primitive Data Types Write JavaScript
code to display the movie details such as movie name, starring, language, and ratings. Initialize the
variables with values of appropriate types. Use template literals wherever necessary.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_21528322245232402000_sh
ared?collectionId=lex_181096983663328100 00_shared&collectionType=Course

// Movie details

let movieName = "Inception";

let starring = ["Leonardo DiCaprio", "Joseph Gordon-Levitt", "Ellen Page"];

let language = "English";

let ratings = {

imdb: 8.8,

rottenTomatoes: 87,

metacritic: 74

};

// Constructing the output string using template literals

let movieDetails = `

Movie Name: ${movieName}

Starring: ${starring.join(', ')}

Language: ${language}

Ratings:

- IMDB: ${ratings.imdb}

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

- Rotten Tomatoes: ${ratings.rottenTomatoes}%

- Metacritic: ${ratings.metacritic}

// Displaying movie details

console.log(movieDetails);

Movie Name: Inception

Starring: Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page

Language: English

Ratings:

- IMDB: 8.8

- Rotten Tomatoes: 87%

- Metacritic: 74

3.c.Course Name: Javascript Module Name: Primitive and Non Primitive Data Types Write JavaScript
code to display the movie details such as movie name, starring, language, and ratings. Initialize the
variables with values of appropriate types. Use template literals wherever necessary.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_21528322245232402000_sh
ared?collectionId=lex_181096983663328100 00_shared&collectionType=Course

// Movie details

const movieName = "Inception";

const starring = ["Leonardo DiCaprio", "Joseph Gordon-Levitt", "Ellen Page"];

const language = "English";

const ratings = {

imdb: 8.8,

rottenTomatoes: 87,

metacritic: 74

};

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

// Display movie details

console.log(`Movie Name: ${movieName}`);

console.log(`Starring: ${starring.join(", ")}`);

console.log(`Language: ${language}`);

console.log(`Ratings:`);

console.log(`- IMDb: ${ratings.imdb}`);

console.log(`- Rotten Tomatoes: ${ratings.rottenTomatoes}%`);

console.log(`- Metacritic: ${ratings.metacritic}`);

Movie Name: Inception

Starring: Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page

Language: English

Ratings:

- IMDb: 8.8

- Rotten Tomatoes: 87%

- Metacritic: 74

3.d.Course Name: Javascript Module Name: Operators and Types of Operators Write JavaScript code to
book movie tickets online and calculate the total price, considering the number of tickets and price per
ticket as Rs. 150. Also, apply a festive season discount of 10% and calculate the discounted amount.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_13808338384481720000_sh
ared?collectionId=lex_181096983663328100 00_shared&collectionType=Course

// Function to calculate the total price

function calculateTotalPrice(numTickets, pricePerTicket) {

const totalPrice = numTickets * pricePerTicket;

return totalPrice;

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

// Function to apply festive season discount

function applyDiscount(totalPrice, discountPercentage) {

const discountedAmount = totalPrice * (discountPercentage / 100);

return discountedAmount;

// Main function to book movie tickets

function bookMovieTickets(numTickets, pricePerTicket) {

const totalPrice = calculateTotalPrice(numTickets, pricePerTicket);

const discountPercentage = 10; // 10% festive season discount

const discountedAmount = applyDiscount(totalPrice, discountPercentage);

const finalPrice = totalPrice - discountedAmount;

console.log(`Total Price: Rs. ${totalPrice}`);

console.log(`Festive Season Discount (${discountPercentage}%): Rs. ${discountedAmount}`);

console.log(`Final Price after discount: Rs. ${finalPrice}`);

// Example usage

const numTickets = 5; // Number of tickets

const pricePerTicket = 150; // Price per ticket

bookMovieTickets(numTickets, pricePerTicket);

3.e.Course Name: Javascript Module Name: Types of Statements, Non - Conditional Statements, Types
of Conditional Statements, if Statements, switch Statements Write a JavaScript code to book movie
tickets online and calculate the total price based on the 3 conditions: (a) If seats to be booked are not
more than 2, the cost per ticket remains Rs. 150. (b) If seats are 6 or more, booking is not allowed. (c) If

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

sehttps://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_16257498471333610000_
shared?collectionId=lex_181096983663328100 00_shared&collectionType=Course

function bookMovieTickets(numSeats) {

if (numSeats <= 0) {

return "Invalid number of seats.";

} else if (numSeats <= 2) {

return "Total price: Rs. " + (numSeats * 150);

} else if (numSeats >= 6) {

return "Booking not allowed for 6 or more seats.";

} else {

// For more than 2 but less than 6 seats

return "Total price: Rs. " + (numSeats * 200);

// Example usage:

console.log(bookMovieTickets(1)); // Output: Total price: Rs. 150

console.log(bookMovieTickets(3)); // Output: Total price: Rs. 600

console.log(bookMovieTickets(6)); // Output: Booking not allowed for 6 or more seats.

Course Name: Javascript Module Name: Types of Loops Write a JavaScript code to book movie tickets
online and calculate the total price based on the 3 conditions: (a) If seats to be booked are not more
than 2, the cost per ticket remains Rs. 150. (b) If seats are 6 or more, booking is not allowed. (c) If
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_6238536888292970000_shar
ed?collectionId=lex_1810969836633281000 0_shared&collectionType=Course

4.a.Course Name: Javascript Module Name: Types of Functions, Declaring and Invoking Function, Arrow
Function, Function Parameters, Nested Function, Built-in Functions, Variable Scope in Functions Write a
JavaScript code to book movie tickets online and calculate the total price based on the 3 conditions: (a)
If seats to be booked are not more than 2, the cost per ticket remains Rs. 150. (b) If seats are 6 or more,
booking is not allowed. (c) If

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_15455199570613326000_sh
ared?collectionId=lex_181096983663328100 00_shared&collectionType=Course

function bookMovieTickets(numSeats) {

const ticketPrice = 150;

let totalPrice = 0;

if (numSeats <= 2) {

totalPrice = numSeats * ticketPrice;

} else if (numSeats >= 6) {

console.log("Booking not allowed for 6 or more seats.");

return;

} else {

console.log("Please enter a valid number of seats.");

return;

console.log("Total Price for " + numSeats + " seats: Rs. " + totalPrice);

// Example usage:

bookMovieTickets(2); // Output: Total Price for 2 seats: Rs. 300

bookMovieTickets(5); // Output: Total Price for 5 seats: Rs. 750

bookMovieTickets(7); // Output: Booking not allowed for 6 or more seats.

bookMovieTickets(-1); // Output: Please enter a valid number of seats.

4.b.Course Name: Javascript Module Name: Working With Classes, Creating and Inheriting Classes
Create an Employee class extending from a base class Person. Hints: (i) Create a class Person with name
and age as attributes. (ii) Add a constructor to initialize the values (iii) Create a class Employee

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

extending Person with additional attributes role

https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_auth_012599811117760512
458_shared?collectionId=lex_181096983663 32810000_shared&collectionType=Course

// Define the Person class

class Person {

constructor(name, age) {

this.name = name;

this.age = age;

// Define the Employee class extending Person

class Employee extends Person {

constructor(name, age, role) {

super(name, age);

this.role = role;

// Example usage:

const person1 = new Person("John", 30);

console.log(person1); // Output: Person { name: 'John', age: 30 }

const employee1 = new Employee("Alice", 25, "Manager");

console.log(employee1); // Output: Employee { name: 'Alice', age: 25, role: 'Manager' }

4.c.Course Name: Javascript Module Name: In-built Events and Handlers Write a JavaScript code to book
movie tickets online and calculate the total price based on the 3 conditions: (a) If seats to be booked are

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

not more than 2, the cost per ticket remains Rs. 150. (b) If seats are 6 or more, booking is not allowed.
(c) If se
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_4192188372573027000_shar
ed?collectionId=lex_1810969836633281000 0_shared&collectionType=Course

function bookTickets(seats) {

var ticketPrice = 150;

var totalPrice;

if (seats <= 2) {

totalPrice = seats * ticketPrice;

} else if (seats >= 6) {

console.log("Booking not allowed for more than 5 seats.");

return;

} else {

console.log("Booking not allowed for 3 to 5 seats.");

return;

console.log("Total Price for " + seats + " seats: Rs. " + totalPrice);

// Example usage:

bookTickets(2); // Output: Total Price for 2 seats: Rs. 300

bookTickets(6); // Output: Booking not allowed for more than 5 seats.

bookTickets(4); // Output: Booking not allowed for 3 to 5 seats.

4.d.Course Name: Javascript Module Name: Working with Objects, Types of Objects, Creating
Objects,Combining and cloning Objects using Spread operator, Destructuring Objects, Browser Object
Model,

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

Document Object Model If a user clicks on the given link, they should see an empty cone, a different
heading, and a different message and a different background color. If user clicks again, they should see a
re-filled cone, a different heading, a different message, and a diffe
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_13197025862804100000_sh
ared?collectionId=lex_181096983663328100 00_shared&collectionType=Course

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Dynamic Content Example</title>

<style>

/* Define CSS styles for different states */

.empty {

background-color: #fff; /* white background for empty cone */

.filled {

background-color: #f00; /* red background for filled cone */

</style>

</head>

<body>

<a href="#" id="changeContentLink">Click here to change content</a>

<div id="cone" class="empty">Empty Cone</div>

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

<h1 id="heading">Original Heading</h1>

<p id="message">Original Message</p>

document.getElementById('changeContentLink').addEventListener('click', function(event) {

event.preventDefault(); // Prevent the default link behavior

// Toggle between different states

var cone = document.getElementById('cone');

var heading = document.getElementById('heading');

var message = document.getElementById('message');

if (cone.classList.contains('empty')) {

// Change to filled state

cone.textContent = 'Filled Cone';

cone.classList.remove('empty');

cone.classList.add('filled');

heading.textContent = 'New Heading';

message.textContent = 'New Message';

} else {

// Change to empty state

cone.textContent = 'Empty Cone';

cone.classList.remove('filled');

cone.classList.add('empty');

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

heading.textContent = 'Original Heading';

message.textContent = 'Original Message';

});

</script>

</body>

</html>

5.a.Course Name: Javascript Module Name: Creating Arrays, Destructuring Arrays, Accessing Arrays,
Array Methods Create an array of objects having movie details. The object should include the movie
name, starring, language, and ratings. Render the details of movies on the page using the array.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_auth_013053270191734784
711_shared?collectionId=lex_181096983663 32810000_shared&collectionType=Course

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Movie Details</title>

</head>

<body>

// Array of movie objects

const movies = [

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

name: "The Shawshank Redemption",

starring: "Tim Robbins, Morgan Freeman",

language: "English",

ratings: 9.3

name: "The Godfather",

starring: "Marlon Brando, Al Pacino",

language: "English",

ratings: 9.2

name: "The Dark Knight",

starring: "Christian Bale, Heath Ledger",

language: "English",

ratings: 9.0

];

// Function to render movie details

function renderMovieDetails() {

const movieDetailsContainer = document.getElementById('movieDetails');

movies.forEach(movie => {

const movieElement = document.createElement('div');

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

movieElement.innerHTML = `

<h2>${movie.name}</h2>

<p><strong>Starring:</strong> ${movie.starring}</p>

<p><strong>Language:</strong> ${movie.language}</p>

<p><strong>Ratings:</strong> ${movie.ratings}</p>

<hr>

movieDetailsContainer.appendChild(movieElement);

});

// Call the function to render movie details

renderMovieDetails();

</script>

</body>

</html>

5.b.Course Name: Javascript Module Name: Introduction to Asynchronous Programming, Callbacks,

Promises, Async and Await, Executing Network Requests using Fetch API Simulate a periodic stock price
change and display on the console. Hints: (i) Create a method which returns a random number - use
Math.random, floor and other methods to return a rounded value. (ii) Invoke the method for every
three seconds and stop when
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_auth_012599811633905664
460_shared?collectionId=lex_181096983663 32810000_shared&collectionType=Course

// Function to generate a random stock price

function generateRandomStockPrice() {

// Generating a random number between 0 and 1

const randomChange = (Math.random() * 20) - 10; // Adjust range according to your preference

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

// Get current timestamp

const timestamp = new Date().toLocaleTimeString();

// Generating a random stock price change

const currentPrice = 100; // Initial stock price

const newPrice = currentPrice + randomChange;

// Return timestamp and new price

return { timestamp, price: newPrice.toFixed(2) };

// Function to display stock price changes

function displayStockPrice() {

const stockPrice = generateRandomStockPrice();

console.log(`Timestamp: ${stockPrice.timestamp}, Price: $${stockPrice.price}`);

// Interval to display stock price every 3 seconds

const intervalId = setInterval(displayStockPrice, 3000);

// Stop interval after visiting the specified URL

// Replace
'https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_auth_012599811633905664
460_shared?collectionId=lex_18109698366332810000_shared&collectionType=Course' with your URL

if (window.location.href ===
'https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_auth_012599811633905664
460_shared?collectionId=lex_18109698366332810000_shared&collectionType=Course') {

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

clearInterval(intervalId);

5.c.Course Name: Javascript Module Name: Creating Modules, Consuming Modules Validate the user by
creating a login module. Hints: (i) Create a file login.js with a User class. (ii) Create a validate method
with username and password as arguments. (iii) If the username and password are equal it will return
"Login Successful" else w
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_auth_013052857053585408
667_shared?collectionId=lex_181096983663 32810000_shared&collectionType=Course

// login.js

class User {

constructor(username, password) {

this.username = username;

this.password = password;

validate(inputUsername, inputPassword) {

if (this.username === inputUsername && this.password === inputPassword) {

return "Login Successful";

} else {

return "Login Failed: Incorrect username or password";

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

module.exports = User; // Export the User class

// app.js

const User = require('./login'); // Import the User class from login.js

// Create a user object

const user = new User("example_username", "example_password");

// Validate the user's credentials

const result = user.validate("example_username", "example_password");

console.log(result); // Output the result of validation

6.a.Course Name: Node.js Module Name: How to use Node.js Verify how to execute different functions
successfully in the Node.js platform.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_19002830632103186000_sh
ared?collectionId=lex_324078356719467600 00_shared&collectionType=Course

// functions.js

function greet(name) {

return `Hello, ${name}!`;

function add(a, b) {

return a + b;

module.exports = {

greet,

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

add

};

// index.js

const { greet, add } = require('./functions');

console.log(greet('Alice')); // Output: Hello, Alice!

console.log(add(3, 5)); // Output: 8

6.b.Course Name: Node.js Module Name: Create a web server in Node.js Write a program to show the
workflow of JavaScript code executable by creating web server in Node.js.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_28177338996267815000_sh
ared?collectionId=lex_324078356719467600 00_shared&collectionType=Course

// Import the HTTP module

const http = require('http');

// Define the hostname and port number

const hostname = '127.0.0.1';

const port = 3000;

// Create the server

const server = http.createServer((req, res) => {

// Set the response HTTP header with HTTP status and Content type

res.statusCode = 200;

res.setHeader('Content-Type', 'text/plain');

// Send the response body "Hello World"

res.end('Hello World\n');

});

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

// Start the server

server.listen(port, hostname, () => {

console.log(`Server running at http://${hostname}:${port}/`);

});

6.c.Course Name: Node.js Module Name: Modular programming in Node.js Write a Node.js module to
show the workflow of Modularization of Node application.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_28865394191004004000_sh
ared?collectionId=lex_324078356719467600 00_shared&collectionType=Course

1.Create a folder for your project and navigate into it:

mkdir nodejs-modular-example

cd nodejs-modular-example

2.Initialize a Node.js project:

npm init –y

3. Create a main.js file, which will be the entry point of your application:

// main.js

const { greet } = require('./greetings');

greet('John');

4. Create a greetings.js file inside the same directory:

// greetings.js

function greet(name) {

console.log(Hello, ${name}!);

5.Run your application:

node main.js

6.d.Course Name: Node.js Module Name: Restarting Node Application Write a program to show the
workflow of restarting a Node application.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_9174073856000159000_shar
ed?collectionId=lex_3240783567194676000 0_shared&collectionType=Course

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

# First, install nodemon globally (if not already installed)

npm install -g nodemon

# Then, run your Node.js application using nodemon

nodemon your_app.js

const fs = require('fs');

const { spawn } = require('child_process');

const watchFiles = ['app.js', 'routes/*.js']; // Files to watch for changes

const restartApp = () => {

console.log('Restarting application...');

// Replace 'node' with the command to start your Node.js application

const child = spawn('node', ['your_app.js'], {

detached: true,

stdio: 'inherit'

});

child.unref();

process.exit();

};

watchFiles.forEach(file => {

fs.watch(file, (event, filename) => {

console.log(`${filename} has changed. Restarting application...`);

restartApp();

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

});

console.log('Watching for file changes...');

6.e.Course Name: Node.js Module Name: File Operations Create a text file src.txt and add the following
data to it. Mongo, Express, Angular, Node.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_33376440180246100000_sh
ared?collectionId=lex_324078356719467600 00_shared&collectionType=Course

const fs = require('fs');

// Data to be added to the text file

const data = 'Mongo, Express, Angular, Node.\n';

// File path

const filePath = 'src.txt';

// Write data to the file

fs.writeFile(filePath, data, { flag: 'w' }, (err) => {

if (err) {

console.error('Error writing to file:', err);

} else {

console.log('Data has been written to src.txt');

});

7.a.Course Name: Express.js Module Name: Defining a route, Handling Routes, Route Parameters,
QueryParameters Implement routing for the AdventureTrails application by embedding the necessary
code in

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

the routes/route.js file.

https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_29394215542149950000_sh
ared?collectionId=lex_324078356719467600 00_shared&collectionType=Course

1. Defining Routes: Start by requiring Express and creating an instance of the Router:

const express = require('express');

const router = express.Router();

2. Handling Routes: Define route handlers for different endpoints. For example:

// Handle GET request to the home page

router.get('/', (req, res) => {

// Your logic here

res.send('Welcome to AdventureTrails!');

});

// Handle GET request to /trails endpoint

router.get('/trails', (req, res) => {

// Your logic here

res.send('Displaying all trails');

});

3. Route Parameters: Define routes with parameters. For example:

// Handle GET request to /trails/:id endpoint

router.get('/trails/:id', (req, res) => {

const trailId = req.params.id;

// Your logic here to fetch trail with given ID

res.send(`Displaying trail with ID ${trailId}`);

});

4. Query Parameters: Access query parameters from the request object. For example:

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

// Handle GET request to /search endpoint with query parameters

router.get('/search', (req, res) => {

const searchTerm = req.query.q;

// Your logic here to perform search

res.send(`Searching for ${searchTerm}`);

});

5. Export the Router: Finally, export the router so it can be used by the main application
file:module.exports = router;

In your main application file (e.g., app.js), you would then require the routes.js file and use the
router:const express = require('express');

const app = express();

// Require the routes

const routes = require('./routes/routes');

// Use the routes

app.use('/', routes);

// Start the server

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {

console.log(`Server is running on port ${PORT}`);

});

7.b.Course Name: Express.js Module Name: How Middleware works, Chaining of Middlewares, Types of
Middlewares In myNotes application: (i) we want to handle POST submissions. (ii) display customized
error messages. (iii) perform logging.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_13930661312009580000_sh
ared?collectionId=lex_324078356719467600 00_shared&collectionType=Course

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

const express = require('express');

const app = express();

// Middleware to handle POST submissions

app.use(express.urlencoded({ extended: true }));

// Middleware for logging

app.use((req, res, next) => {

console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);

next();

});

// Middleware for displaying customized error messages

app.use((err, req, res, next) => {

console.error(err.stack);

res.status(500).send('Something broke!');

});

// Route handler for handling POST submissions

app.post('/submit', (req, res) => {

// Process the submitted data

// For example, save it to a database

res.send('Data submitted successfully');

});

// Start the server

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {

console.log(`Server is listening on port ${PORT}`);

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

});

7.c.Course Name: Express.js Module Name: Connecting to MongoDB with Mongoose, Validation Types
and Defaults Write a Mongoose schema to connect with MongoDB.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_auth_013035588775485440
691_shared?collectionId=lex_324078356719 46760000_shared&collectionType=Course const
mongoose = require('mongoose');

// Step 2: Set up connection

mongoose.connect('mongodb://localhost:27017/your-database-name', {

useNewUrlParser: true,

useUnifiedTopology: true,

});

// Step 3: Define Schema

const Schema = mongoose.Schema;

const userSchema = new Schema({

username: {

type: String,

required: true,

unique: true,

minlength: 3,

maxlength: 20,

email: {

type: String,

required: true,

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

unique: true,

match: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,

age: {

type: Number,

default: 18,

min: 18,

createdAt: {

type: Date,

default: Date.now,

});

// Step 4: Create Model

const User = mongoose.model('User', userSchema);

module.exports = User; // Export the model for use in other parts of your application

7.d.Course Name: Express.js Module Name: Models Write a program to wrap the Schema into a Model
object.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_auth_013035593896869888
662_shared?collectionId=lex_324078356719 46760000_shared&collectionType=Course

// Importing necessary libraries

const mongoose = require('mongoose');

// Defining the schema

const userSchema = new mongoose.Schema({

email: String,

age: Number

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

});

// Creating a model from the schema

const User = mongoose.model('User', userSchema);

// Example usage:

// Creating a new user document

const newUser = new User({

name: 'John Doe',

email: '[email protected]',

age: 30

});

// Saving the user to the database

newUser.save()

.then(() => {

console.log('User saved successfully');

})

.catch((err) => {

console.error('Error saving user:', err);

});

8.a.Course Name: Express.js Module Name: CRUD Operations Write a program to perform various CRUD
(Create-Read-Update-Delete) operations using Mongoose library functions.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_auth_013035684270129152
696_shared?collectionId=lex_324078356719 46760000_shared&collectionType=Course

// Importing required modules

const express = require('express');

const mongoose = require('mongoose');

// Setting up Express.js

const app = express();

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

app.use(express.json());

// Connecting to MongoDB using Mongoose

mongoose.connect('mongodb://localhost:27017/my_database', {

useNewUrlParser: true,

useUnifiedTopology: true,

});

// Defining a Mongoose schema for the data model

const userSchema = new mongoose.Schema({

age: Number,

});

// Creating a Mongoose model

const User = mongoose.model('User', userSchema);

// CRUD operations

// Create operation

app.post('/users', async (req, res) => {

try {

const user = new User(req.body);

await user.save();

res.status(201).send(user);

} catch (error) {

res.status(400).send(error);

});

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

// Read operation (Get all users)

app.get('/users', async (req, res) => {

try {

const users = await User.find();

res.send(users);

} catch (error) {

res.status(500).send(error);

});

// Read operation (Get user by ID)

app.get('/users/:id', async (req, res) => {

try {

const user = await User.findById(req.params.id);

if (!user) {

return res.status(404).send();

res.send(user);

} catch (error) {

res.status(500).send(error);

});

// Update operation

app.patch('/users/:id', async (req, res) => {

const updates = Object.keys(req.body);

const allowedUpdates = ['name', 'age'];

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

const isValidOperation = updates.every(update =>

allowedUpdates.includes(update)

);

if (!isValidOperation) {

return res.status(400).send({ error: 'Invalid updates!' });

try {

const user = await User.findByIdAndUpdate(req.params.id, req.body, {

new: true,

runValidators: true,

});

if (!user) {

return res.status(404).send();

res.send(user);

} catch (error) {

res.status(400).send(error);

});

// Delete operation

app.delete('/users/:id', async (req, res) => {

try {

const user = await User.findByIdAndDelete(req.params.id);

if (!user) {

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

return res.status(404).send();

res.send(user);

} catch (error) {

res.status(500).send(error);

});

// Starting the server

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {

console.log(`Server is running on port ${PORT}`);

});

8.b.Course Name: Express.js Module Name: API Development In the myNotes application, include APIs
based on the requirements provided. (i) API should fetch the details of the notes based on a notesID
which is provided in the URL. Test URL - http://localhost:3000/notes/7555 (ii) API should update the
details bas
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_auth_013035745250975744
755_shared?collectionId=lex_324078356719 46760000_shared&collectionType=Course

const express = require('express');

const bodyParser = require('body-parser');

const app = express();

const port = 3000;

// Sample data for notes (you'll replace this with your actual data source)

let notes = [

{ id: 1, title: 'Note 1', content: 'Content of Note 1' },

{ id: 2, title: 'Note 2', content: 'Content of Note 2' },

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

{ id: 3, title: 'Note 3', content: 'Content of Note 3' }

];

// Middleware to parse JSON bodies

app.use(bodyParser.json());

// API to fetch details of a note based on noteID

app.get('/notes/:noteID', (req, res) => {

const noteID = parseInt(req.params.noteID);

const note = notes.find(note => note.id === noteID);

if (!note) {

return res.status(404).json({ message: 'Note not found' });

res.json(note);

});

// API to update the details of a note based on noteID

app.put('/notes/:noteID', (req, res) => {

const noteID = parseInt(req.params.noteID);

const { title, content } = req.body;

const index = notes.findIndex(note => note.id === noteID);

if (index === -1) {

return res.status(404).json({ message: 'Note not found' });

notes[index] = { id: noteID, title, content };

res.json({ message: 'Note updated successfully', note: notes[index] });

});

app.listen(port, () => {

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

console.log(`Server is listening on port ${port}`);

});

8.c.Course Name: Express.js Module Name: Why Session management, Cookies Write a program to
explain session management using cookies.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_24299316914857090000_sh
ared?collectionId=lex_324078356719467600 00_shared&collectionType=Course

// Import required modules

const express = require('express');

const cookieParser = require('cookie-parser');

// Create Express application

const app = express();

// Use cookie parser middleware

app.use(cookieParser());

// Define a middleware to manage sessions

app.use((req, res, next) => {

// Check if session cookie exists

if (!req.cookies.session) {

// If session cookie doesn't exist, create a new session

res.cookie('session', { visits: 1 }, { maxAge: 900000, httpOnly: true }); // maxAge is in milliseconds (15
minutes)

req.visits = 1;

} else {

// If session cookie exists, increment visit count

const session = JSON.parse(req.cookies.session);

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

session.visits++;

res.cookie('session', session, { maxAge: 900000, httpOnly: true });

req.visits = session.visits;

next();

});

// Define route handlers

app.get('/', (req, res) => {

res.send(`You have visited this page ${req.visits} times.`);

});

// Start the server

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {

console.log(`Server is running on port ${PORT}`);

});

8.d.Course Name: Express.js Module Name: Sessions Write a program to explain session management
using sessions.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_905413034723449100_share
d?collectionId=lex_32407835671946760000 _shared&collectionType=Course

const express = require('express');

const session = require('express-session');

const app = express();

// Configure session middleware

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

app.use(session({

secret: 'your-secret-key', // Change this to a random string

resave: false,

saveUninitialized: true

}));

// Routes

app.get('/', (req, res) => {

// Access session data

if (req.session.views) {

req.session.views++;

res.send(`You have visited this page ${req.session.views} times`);

} else {

req.session.views = 1;

res.send('Welcome to the session example. Refresh the page!');

});

// Start server

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {

console.log(`Server is running on port ${PORT}`);

});

8.e.Course Name: Express.js Module Name: Why and What Security, Helmet Middleware Implement
security features in myNotes application
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_31677453061177940000_sh
ared?collectionId=lex_324078356719467600 00_shared&collectionType=Course

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

Understand Security Risks: Before implementing security features, it's crucial to understand common security risks in
web applications. This module likely covers topics such as cross-site scripting (XSS), cross-site request forgery (CSRF),
HTTP headers, and other vulnerabilities.

Install Helmet Middleware: Helmet is a collection of middleware functions for securing Express.js applications by
setting various HTTP headers. Install it using npm:

npm install helmet

Integrate Helmet Middleware: In your Express.js application, integrate Helmet middleware by requiring it and using
it as follows:

const express = require('express');

const helmet = require('helmet');

const app = express();

// Use Helmet middleware

app.use(helmet());

Customize Helmet Middleware: Helmet provides various middleware functions to set specific HTTP headers for
different security purposes. You can customize which headers you want to set based on your application's
requirements. For example:

app.use(helmet.contentSecurityPolicy({

directives: {

defaultSrc: ["'self'"],

scriptSrc: ["'self'", 'trusted-cdn.com']

}));

9.a.Course Name: Typescript Module Name: Basics of TypeScript On the page, display the price of the
mobile- based in three different colors. Instead of using the number in our code, represent them by
string valueslike GoldPlatinum, PinkGold, SilverTitanium.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_28910354929502245000_sh
ared?collectionId=lex_943623311651267800 0_shared&collectionType=Course

<!DOCTYPE html>

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Mobile Prices</title>

<style>

.gold { color: gold; }

.pink { color: pink; }

.silver { color: silver; }

</style>

</head>

<body>

<h1>Mobile Prices</h1>

<div id="price1" class="gold"></div>

<div id="price2" class="pink"></div>

<div id="price3" class="silver"></div>

// Define price strings

const GoldPlatinum = "1000";

const PinkGold = "800";

const SilverTitanium = "600";

// Display prices

document.getElementById("price1").innerText = `Gold Platinum Price: $${GoldPlatinum}`;

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

document.getElementById("price2").innerText = `Pink Gold Price: $${PinkGold}`;

document.getElementById("price3").innerText = `Silver Titanium Price: $${SilverTitanium}`;

</script>

</body>

</html>

9.b.Course Name: Typescript Module Name: Function Define an arrow function inside the event handler
to filter the product array with the selected product object using the productId received by the function.
Pass the selected product object to the next screen.
https://infyspringboard.onwingspan.com/web/en/viewer/webmodule/lex_10783156469383723000_sh
ared?collectionId=lex_943623311651267800 0_shared&collectionType=Course

// Assuming you have a product array and a function to navigate to the next screen

const products: Product[] = [...]; // Assuming Product is a type representing your product object

// Define your event handler

const handleProductSelection = (productId: string) => {

// Use Array.prototype.find() to find the product with the matching productId

const selectedProduct = products.find(product => product.productId === productId);

// Assuming you have a function to navigate to the next screen

navigateToNextScreen(selectedProduct);

};

// Define your arrow function inside the event handler

const handleButtonClick = (productId: string) => {

const filterProductAndNavigate = () => {

const selectedProduct = products.find(product => product.productId === productId);

navigateToNextScreen(selectedProduct);

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

};

// Call your arrow function

filterProductAndNavigate();

};

9.c.Course Name: Typescript Module Name: Parameter Types and Return Types Consider that developer
needs to declare a function - getMobileByVendor which accepts string as input parameter and returns
the list of mobiles.
https://infyspringboard.onwingspan.com/web/en/viewer/handson/lex_auth_012712912427057152901
_shared?collectionId=lex_9436233116512678 000_shared&collectionType=Course

// Define a type for the structure of a mobile

type Mobile = {

vendor: string;

// Add other properties as needed

};

// Define the function getMobileByVendor

function getMobileByVendor(vendor: string): Mobile[] {

// Assuming there is a list of mobiles somewhere, you can filter them based on the vendor

const mobiles: Mobile[] = [

{ name: "Mobile1", vendor: "VendorA" },

{ name: "Mobile2", vendor: "VendorB" },

// Add more mobiles as needed

];

// Filter the list of mobiles based on the provided vendor

const filteredMobiles = mobiles.filter(mobile => mobile.vendor === vendor);

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

return filteredMobiles;

// Example usage

const mobilesByVendor = getMobileByVendor("VendorA");

console.log(mobilesByVendor); // This will log an array of Mobile objects with vendor "VendorA"

9.d.Course Name: Typescript Module Name: Arrow Function Consider that developer needs to declare a
manufacturer's array holding 4 objects with id and price as a parameter and needs to implement an
arrow function - myfunction to populate the id parameter of manufacturers array whose price is greater
than or equ
https://infyspringboard.onwingspan.com/web/en/viewer/handson/lex_auth_012712910875500544904
_shared?collectionId=lex_9436233116512678 000_shared&collectionType=Course

// Define the array of manufacturers with id and price properties

const manufacturers: { id: number, price: number }[] = [

{ id: 1, price: 100 },

{ id: 2, price: 200 },

{ id: 3, price: 300 },

{ id: 4, price: 400 }

];

// Define the arrow function to filter manufacturers based on price and populate the id parameter

const myFunction = (manufacturers: { id: number, price: number }[], priceThreshold: number): number[]
=> {

// Filter manufacturers based on price greater than or equal to priceThreshold

const filteredManufacturers = manufacturers.filter(manufacturer => manufacturer.price >=

priceThreshold);

// Extract and return the ids of filtered manufacturers

PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

return filteredManufacturers.map(manufacturer => manufacturer.id);

// Usage example:

const priceThreshold = 250; // Define the price threshold

const resultIds = myFunction(manufacturers, priceThreshold);

console.log("Manufacturer IDs with price greater than or equal to", priceThreshold, ":", resultIds);

9.e Course Name: Typescript Module Name: Optional and Default Parameters Declare a function -
getMobileByManufacturer with two parameters namely manufacturer and id, where manufacturer value
should passed as Samsung and id parameter should be optional while invoking the function, if id is passed
as 101 then this function shoul https://infyspringboard.onwingspan.com/web/en/viewer/hands
on/lex_auth_012712914940641280906_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

function getMobileByManufacturer(manufacturer: string, id?: number): void {

if (id === 101) {
// Implement your logic here for when id is passed as 101
console.log(`Manufacturer: ${manufacturer}, ID: ${id}`);
} else {
console.log(`Manufacturer: ${manufacturer}, ID: ${id}`);
}
}

// Example of invoking the function with different parameters

getMobileByManufacturer('Samsung'); // Invoking without id parameter
getMobileByManufacturer('Samsung', 101); // Invoking with id parameter as 101

10.a Course Name: Typescript Module Name: Rest Parameter Implement business logic for adding
multiple Product values into a cart variable which is type of string array.
https://infyspringboard.onwingspan.com/web/en/viewer/hands
on/lex_auth_012712921860915200909_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

// Define a Product type

type Product = {
name: string;
price: number;
};
// Define the cart variable as an empty array of strings
let cart: string[] = [];
// Function to add products to the cart
function addToCart(...products: Product[]) {
products.forEach(product => {
PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

// Add each product's name to the cart

cart.push(product.name);
});
}
// Example products
const product1: Product = { name: "Product 1", price: 10 };
const product2: Product = { name: "Product 2", price: 20 };
const product3: Product = { name: "Product 3", price: 30 };
// Add products to the cart
addToCart(product1, product2, product3);
// Display the contents of the cart
console.log("Cart contents:", cart);

10.b Course Name: Typescript Module Name: Creating an Interface Declare an interface named - Product
with two properties like productId and productName with a number and string datatype and need to
implement logic to populate the Product details.
https://infyspringboard.onwingspan.com/web/en/viewer/hands
on/lex_auth_012712925244276736910_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

interface Product {
productId: number;
productName: string;
}

// Implement logic to populate Product details

let product: Product = {
productId: 1,
productName: "Example Product"
};

console.log(product); // Output: { productId: 1, productName: 'Example Product' }

10.c Course Name: Typescript Module Name: Duck Typing Declare an interface named - Product with two
properties like productId and productName with the number and string datatype and need to implement
logic to populate the Product details. https://infyspringboard.onwingspan.com/web/en/viewer/hands
on/lex_auth_012712925995458560912_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

// Define the interface Product

interface Product {
productId: number;
productName: string;
}

// Implement logic to populate Product details

class ProductDetails implements Product {
productId: number;
productName: string;
PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

constructor(productId: number, productName: string) {

this.productId = productId;
this.productName = productName;
}
}

// Example of how to use the ProductDetails class

const product1: Product = new ProductDetails(1, "Product A");
console.log(product1); // Output: { productId: 1, productName: 'Product A' }

const product2: Product = new ProductDetails(2, "Product B");

console.log(product2); // Output: { productId: 2, productName: 'Product B' }

10.d Course Name: Typescript Module Name: Function Types Declare an interface with function type and
access its value. https://infyspringboard.onwingspan.com/web/en/viewer/hands
on/lex_auth_012712948945346560918_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

// Step 1: Define an interface with a function type

interface MyFunction {
(x: number, y: number): number;
}

// Step 2: Implement the interface

const myFunctionImplementation: MyFunction = (x, y) => {
return x + y;
};

// Step 3: Access the function value

console.log(myFunctionImplementation(3, 5)); // Output: 8

11.a Course Name: Typescript Module Name: Extending Interfaces Declare a productList interface which
extends properties from two other declared interfaces like Category,Product as well as implementation to
create a variable of this interface type. https://infyspringboard.onwingspan.com/web/en/viewer/hands
on/lex_auth_012712951652139008920_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

// Declare the Category interface

interface Category {
categoryID: number;
categoryName: string;
}

// Declare the Product interface

interface Product {
productID: number;
productName: string;
productPrice: number;
PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

// Declare the productList interface extending Category and Product

interface ProductList extends Category, Product {}

// Implementation: Creating a variable of type ProductList

const myProduct: ProductList = {
categoryID: 1,
categoryName: "Electronics",
productID: 101,
productName: "Laptop",
productPrice: 999.99
};

// Example usage
console.log(myProduct);

11.b Course Name: Typescript Module Name: Classes Consider the Mobile Cart application, Create objects
of the Product class and place them into the productlist array.
https://infyspringboard.onwingspan.com/web/en/viewer/web
module/lex_3705824317381604400_shared?collectionId=lex_9436233116512678000
_shared&collectionType=Course

class Product {
constructor(public name: string, public price: number) {}
}

// Creating some product objects

const product1 = new Product("Phone", 500);
const product2 = new Product("Laptop", 1000);
const product3 = new Product("Tablet", 300);

// Placing them into an array

const productList: Product[] = [product1, product2, product3];

console.log(productList); // Output the array of products

11.c Course Name: Typescript Module Name: Constructor Declare a class named - Product with the below-
mentioned declarations: (i) productId as number property (ii) Constructor to initialize this value (iii)
getProductId method to return the message "Product id is <>".
https://infyspringboard.onwingspan.com/web/en/viewer/hands
on/lex_auth_012712954616782848927_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

class Product {
private productId: number;

constructor(productId: number) {
PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

this.productId = productId;
}

getProductId(): string {
return `Product id is ${this.productId}`;
}
}

// Example usage:
const product = new Product(1001);
console.log(product.getProductId()); // Output: Product id is 1001

11.d Course Name: Typescript Module Name: Access Modifiers Create a Product class with 4 properties
namely productId, productName, productPrice, productCategory with private, public, static, and
protected access modifiers and accessing them through Gadget class and its methods.
https://infyspringboard.onwingspan.com/web/en/viewer/hands
on/lex_auth_012712953517170688931_shared?collectionId=lex_9436233116512678
000_shared&collectionType=Course

class Product {
private productId: number;
public productName: string;
static productPrice: number;
protected productCategory: string;

constructor(productId: number, productName: string, productCategory: string) {

this.productId = productId;
this.productName = productName;
this.productCategory = productCategory;
}

display(): void {
console.log(`Product ID: ${this.productId}`);
console.log(`Product Name: ${this.productName}`);
console.log(`Product Price: ${Product.productPrice}`);
console.log(`Product Category: ${this.productCategory}`);
}
}

class Gadget {
static displayProductDetails(product: Product): void {
// Accessing public property
console.log(`Product Name: ${product.productName}`);
// Accessing static property
console.log(`Product Price: ${Product.productPrice}`);
// Accessing protected property indirectly
console.log(`Product Category: ${product['productCategory']}`);
// Accessing private property indirectly
console.log(`Product ID: ${product['productId']}`);
}
PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

// Usage
Product.productPrice = 100; // Assigning value to static property
const product1 = new Product(1, 'Laptop', 'Electronics');
Gadget.displayProductDetails(product1);

12.a Course Name: Typescript Module Name: Properties and Methods Create a Product class with 4
properties namely productId and methods to setProductId() and getProductId().
https://infyspringboard.onwingspan.com/web/en/viewer/web
module/lex_9356738095572543000_shared?collectionId=lex_9436233116512678000
_shared&collectionType=Course

class Product {
private productId: string;

constructor(productId: string) {
this.productId = productId;
}

// Method to set productId

setProductId(productId: string): void {
this.productId = productId;
}

// Method to get productId

getProductId(): string {
return this.productId;
}
}

// Example usage
const product = new Product("ABC123");
console.log(product.getProductId()); // Output: ABC123
product.setProductId("XYZ789");
console.log(product.getProductId()); // Output: XYZ789

12.b Course Name: Typescript Module Name: Creating and using Namespaces Create a namespace called
ProductUtility and place the Product class definition in it. Import the Product class inside productlist file
and use it. https://infyspringboard.onwingspan.com/web/en/viewer/web
module/lex_20787271128051925000_shared?collectionId=lex_943623311651267800
0_shared&collectionType=Course

product.ts (Define Product class in a namespace):

namespace ProductUtility {
export class Product {
constructor(public name: string, public price: number) {}
display(): void {
console.log(`Product: ${this.name}, Price: ${this.price}`);
PITM Dept.CSE
MEAN STACK TECHNOLOGIES-MODULE I- HTML 5, JAVASCRIPT, NODE.JS,EXPRESS.JS, AND TYPESCRIPT

}
}
}

productlist.ts (Import and use the Product class):

// Import the Product class
import { ProductUtility } from './product';

// Create instances of Product and use it

let product1 = new ProductUtility.Product('Laptop', 999.99);
product1.display();

12.c Course Name: Typescript Module Name: Creating and using Modules Consider the Mobile Cart
application which is designed as part of the functions in a module to calculate the total price of the
product using the quantity and price values and assign it to a totalPrice variable.
https://infyspringboard.onwingspan.com/web/en/viewer/web
module/lex_24788158187785620000_shared?collectionId=lex_943623311651267800
0_shared&collectionType=Course

// mobileCart.ts
export interface Product {
quantity: number;
price: number;
}

export function calculateTotalPrice(product: Product): number {

return product.quantity * product.price;
}

// main.ts
import { Product, calculateTotalPrice } from './mobileCart';

const myProduct: Product = {

quantity: 3,
price: 10,
};

const totalPrice: number = calculateTotalPrice(myProduct);

console.log('Total Price:', totalPrice);

12.d Course Name: Typescript Module Name: What is Generics, What are Type Parameters, Generic
Functions, Generic Constraints Create a generic array and function to sort numbers as well as string
values. https://infyspringboard.onwingspan.com/web/en/viewer/web
module/lex_446287045482942800_shared?collectionId=lex_9436233116512678000_
shared&collectionType=Course

PITM Dept.CSE

MEAN STACK TECHNOLOGIES Lab Manual
No ratings yet
MEAN STACK TECHNOLOGIES Lab Manual
102 pages
Mean Stack Technologies Lab Record
No ratings yet
Mean Stack Technologies Lab Record
49 pages
Mean Stack Technologies Lab Manual (Full)
No ratings yet
Mean Stack Technologies Lab Manual (Full)
104 pages
III B.Tech CSE: II Semester: Laboratory Manual For
No ratings yet
III B.Tech CSE: II Semester: Laboratory Manual For
71 pages
Mean Stack Technologies Lab Manual
No ratings yet
Mean Stack Technologies Lab Manual
236 pages
21B65A4502 MeanStack Lab Full Manual
No ratings yet
21B65A4502 MeanStack Lab Full Manual
158 pages
MEAN STACK TECHNOLOGIES Lab Manual
No ratings yet
MEAN STACK TECHNOLOGIES Lab Manual
117 pages
Unit 3 Study Materials
No ratings yet
Unit 3 Study Materials
7 pages
Studocu Unit-1
No ratings yet
Studocu Unit-1
71 pages
Web Development Project Report
No ratings yet
Web Development Project Report
38 pages
MSD Unit-1
No ratings yet
MSD Unit-1
69 pages
Meanstacklabmanual 11
No ratings yet
Meanstacklabmanual 11
81 pages
Mean Stack
No ratings yet
Mean Stack
80 pages
20480B Programming in HTML5 With JavaScript and CSS3
No ratings yet
20480B Programming in HTML5 With JavaScript and CSS3
11 pages
Mean Stack 22Q71A4206
No ratings yet
Mean Stack 22Q71A4206
118 pages
MSD Unit 1 Mean Stack Development of The Course
No ratings yet
MSD Unit 1 Mean Stack Development of The Course
71 pages
MST Lab Manual Full
No ratings yet
MST Lab Manual Full
98 pages
Harvard Cs50 Web Dev Worksheet
No ratings yet
Harvard Cs50 Web Dev Worksheet
6 pages
HTML Unit-1 - 1
No ratings yet
HTML Unit-1 - 1
50 pages
Gujarat Technological University: Masters in Computer Application Year - I (Semester - I) (W.E.F. JULY 2017)
No ratings yet
Gujarat Technological University: Masters in Computer Application Year - I (Semester - I) (W.E.F. JULY 2017)
3 pages
Intro To HTML
No ratings yet
Intro To HTML
26 pages
Lab 7
No ratings yet
Lab 7
12 pages
School of Computing Department of Computer Science & Engineering Sita3004 User Interface Design & Implementation
No ratings yet
School of Computing Department of Computer Science & Engineering Sita3004 User Interface Design & Implementation
218 pages
Rahul Shetty
No ratings yet
Rahul Shetty
6 pages
Web Technology Syllabus
No ratings yet
Web Technology Syllabus
3 pages
Mod 1 PDF
No ratings yet
Mod 1 PDF
4 pages
20480C - Programming in HTML5 With JavaScript and CSS3 - 11122018102942AM
No ratings yet
20480C - Programming in HTML5 With JavaScript and CSS3 - 11122018102942AM
8 pages
Presentation of Intership
No ratings yet
Presentation of Intership
14 pages
B.01 Introduction To The Web - HTML5
No ratings yet
B.01 Introduction To The Web - HTML5
31 pages
20cs4104 Ip Unit I
No ratings yet
20cs4104 Ip Unit I
119 pages
Complete Web Development Study Guide
No ratings yet
Complete Web Development Study Guide
12 pages
U22B3WD2 WD Question Bank
No ratings yet
U22B3WD2 WD Question Bank
2 pages
Report 01
No ratings yet
Report 01
35 pages
WP Ut - 1
No ratings yet
WP Ut - 1
122 pages
Vijay Report
No ratings yet
Vijay Report
12 pages
Mean Stack Development Semester Important
No ratings yet
Mean Stack Development Semester Important
2 pages
Intro To HTML 5
No ratings yet
Intro To HTML 5
24 pages
HTML 5
No ratings yet
HTML 5
25 pages
Lab Manual Full
No ratings yet
Lab Manual Full
98 pages
Sdoc 03 20 Si
No ratings yet
Sdoc 03 20 Si
61 pages
R20-3-2-Mean Stack Lab Manual
100% (1)
R20-3-2-Mean Stack Lab Manual
239 pages
Wa Html5 PDF
No ratings yet
Wa Html5 PDF
33 pages
Wa Html5 PDF
No ratings yet
Wa Html5 PDF
33 pages
Engr. Muhammad Raees: Spring 2019
No ratings yet
Engr. Muhammad Raees: Spring 2019
19 pages
Wa Html5 PDF
No ratings yet
Wa Html5 PDF
33 pages
Wa Html5 PDF
No ratings yet
Wa Html5 PDF
33 pages
Wa Html5 PDF
No ratings yet
Wa Html5 PDF
33 pages
Adhil Proposal
No ratings yet
Adhil Proposal
12 pages
Web Development IMP Answers
No ratings yet
Web Development IMP Answers
65 pages
Msturce
No ratings yet
Msturce
62 pages
Unit1 0
No ratings yet
Unit1 0
39 pages
HTML and Css Assignment
No ratings yet
HTML and Css Assignment
39 pages
6 - HTML
No ratings yet
6 - HTML
45 pages
Full Stack-UNIT 1
No ratings yet
Full Stack-UNIT 1
17 pages
B1. Introduction To The HTML5
No ratings yet
B1. Introduction To The HTML5
19 pages
Frontend Dev Roadmap Guide
No ratings yet
Frontend Dev Roadmap Guide
37 pages
MERN Stack Roadmap
No ratings yet
MERN Stack Roadmap
13 pages
IITG Credit Linked DS
No ratings yet
IITG Credit Linked DS
10 pages
CQF Brochure
No ratings yet
CQF Brochure
24 pages
The Bengal Records Manual 1943
No ratings yet
The Bengal Records Manual 1943
249 pages
64167USERASSIST
No ratings yet
64167USERASSIST
10 pages
Sata SSD 2.5 Inch
No ratings yet
Sata SSD 2.5 Inch
2 pages
Operating Instructions s700 Series Extractive Gas Analyzers en Im0011408
No ratings yet
Operating Instructions s700 Series Extractive Gas Analyzers en Im0011408
232 pages
Software Engineering: UNIT-2
No ratings yet
Software Engineering: UNIT-2
53 pages
Panel Options LCD Samsung PDF
No ratings yet
Panel Options LCD Samsung PDF
11 pages
Log
No ratings yet
Log
119 pages
Blog - Are Smartphone Rentals Value Fo... - Mobile World Live
No ratings yet
Blog - Are Smartphone Rentals Value Fo... - Mobile World Live
8 pages
Numpy-Guide-1 11 0
No ratings yet
Numpy-Guide-1 11 0
135 pages
Unit 1 - ADT
No ratings yet
Unit 1 - ADT
26 pages
Ashwani Kumar Yadav Chief Mechanic
No ratings yet
Ashwani Kumar Yadav Chief Mechanic
5 pages
Bib Sepport System
No ratings yet
Bib Sepport System
17 pages
Smart Port: Design and Perspectives
No ratings yet
Smart Port: Design and Perspectives
6 pages
SCADA System of NLDC
100% (1)
SCADA System of NLDC
38 pages
DP-200 Dump
No ratings yet
DP-200 Dump
164 pages
1 MODERN TECHNOLOGY AS INSTRUCTIONAL DEVICES M Tesis Menzy 02-25-16 4 PM
No ratings yet
1 MODERN TECHNOLOGY AS INSTRUCTIONAL DEVICES M Tesis Menzy 02-25-16 4 PM
91 pages
Business Technology
No ratings yet
Business Technology
4 pages
ER04242
No ratings yet
ER04242
5 pages
Electric Circuits Webquest
No ratings yet
Electric Circuits Webquest
4 pages
GW1000-ABEIP: Datalink Ethernet IP To DH+ Datalink AB Ethernet To DH+
No ratings yet
GW1000-ABEIP: Datalink Ethernet IP To DH+ Datalink AB Ethernet To DH+
25 pages
Assignment - 01 Install and Uninstall Software
No ratings yet
Assignment - 01 Install and Uninstall Software
4 pages
An Analysis of QSAR Research Based On Machine Learning Concepts
No ratings yet
An Analysis of QSAR Research Based On Machine Learning Concepts
15 pages
DS+ICT Final Setup - Colour (128-135) .
No ratings yet
DS+ICT Final Setup - Colour (128-135) .
8 pages
Omron Servo 1S Startup Guide
No ratings yet
Omron Servo 1S Startup Guide
59 pages
Assignment: Citibank: Performance Evaluation
No ratings yet
Assignment: Citibank: Performance Evaluation
17 pages
Soal
No ratings yet
Soal
14 pages
Accessioning Best Practices v.1.0.2 2025
No ratings yet
Accessioning Best Practices v.1.0.2 2025
103 pages
Forced Perspective Photography
100% (1)
Forced Perspective Photography
3 pages