Scribd
Upload
21 views24 pages

WCN Assignment - 2

Uploaded by

vencymr
Copyright
© © All Rights Reserved
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
21 views24 pages

WCN Assignment - 2

Uploaded by

vencymr
Copyright
© © All Rights Reserved
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/ 24

Academic Year: 2024-25 Semester: V

Class/Branch: TE/DS Subject: WCN

ASSIGNMENT NO. 2
Lab Outcome (LO):

LO1 Identify and apply the appropriate HTML tags to develop a webpage
LO2 Identify and apply the appropriate CSS tags to format data on webpage
LO3 Construct responsive websites using Bootstrap
LO4 Use JavaScript to develop interactive web pages.
LO5 Construct front end applications using React and back end using Node.js/express
LO6 Use simulator for CISCO packet tracer/GNS3

Q.1 Develop a web-based quiz application using HTML, CSS, and JavaScript where: [LO4, L3]
a) Users are presented with multiple-choice questions. (at least 5)
b) Users select an answer and receive immediate feedback (correct or incorrect).
c) At the end of the quiz, a score is displayed along with the correct answers for the
questions they missed.

Program: HTML
JS:
CSS:
Output:
Q.2 Develop a web-based number guessing game using JavaScript, where: [LO4, L3]
a) The user is asked to guess a number between 1 and 100.
b) Each time the user submits a guess, the program provides feedback:
i. "Too high!" if the guess is greater than the number.
ii. "Too low!" if the guess is less than the number.
iii. "Congratulations! You've guessed the number!" if the guess is correct.
c) Track the number of attempts and display the total count when the user wins.

Program: Html

JS:
CSS:
Output:
Q.3 Construct a Simple Contact Management System, where users can add, view, and delete
contacts in which [LO5,L3]
a) Provides a UI for users to enter, view, and delete contacts.
b) Uses React components for rendering the front-end interface.
c) Uses a Node.js server with Express to handle back-end API requests.
d) Persists data using an in-memory storage (e.g., JavaScript object) for simplicity.

Program:
Creating the Backend Server (index.js)
Run the server: node index.js

Your server is now running on http://localhost:5000 and ready to accept API requests.
Front-end React Setup: App.js(Main Component)
App.css:
Start the React Front-end: npm start

The React app will open at http://localhost:3000


Output:

Q.4. Construct a Task Manager Application with the following features: [LO5,L3]
Frontend (React):
a) Display a list of tasks.
b) Provide a form to add new tasks.
c) Allow users to edit and delete tasks.
d) Update the UI dynamically based on user interactions.
Backend (Node.js/Express):
a) Implement a RESTful API for managing tasks (GET, POST, PUT, and DELETE endpoints).
b) Use a simple in-memory array or a file-based storage to simulate a database.
c) Serve the React front end and handle CORS.

Program:
Creating the back end(index.js)
Frontend React (App.js):
App.css:
Output:

Q.5. Build a network topology in Cisco Packet Tracer Three Network Segments connected
through routers and switches. Implement Static Routing to enable communication between
different network segments. [LO6, L3]

Solution:

You might also like