/Web_Lab

Primary LanguageJavaScript

Web Lab Programs List

B1

i. Create a table to show your class time-table (CSS and HTML)

  • Description: Include course name, instructors, days of the week, and time slots. Ensure the table is properly formatted with appropriate table headers, rows, and cells.
  • Details: At least 5 courses should be included.
  • Table

B2

i. Write an HTML page that contains a selection box with a list of 5 countries

ii. When the user selects a country, its capital should be printed next to the list

iii. Add CSS to customize the properties of the font of the capital (color, bold, and font size)

  • country

B3

i. Write a JavaScript to design a simple calculator to perform the following operations: sum, product, difference, and quotient (JavaScript)

ii. Build your own Button component and render it three times. On user click, it should alert which button was clicked (React JS)

iii. Use the useState React hook to track how many times a button is clicked, and display the number

  • calculator

B4

Create a custom component that displays each item from ['dog', 'cat', 'chicken', 'cow', 'sheep', 'horse']

  • Description: Instead of using the <ul> and <li> HTML tags, create a custom component that accepts a list as its prop, and renders it accordingly.
  • custom_component

B5

Build a form that accepts a first name and a last name

  • Description: Instead of a boring "Submit" button, make a button that says "Greet Me" that when clicked, will alert "Hello [first name] [last name]!".
  • form

B6

Create a custom component for rendering each joke present in an array

  • Description: Using the map function, map through each object in the array. Use the custom component to render each object.
  • joke

C1

Create an HTTP server listening on port 1337, which sends "Hello, World!" to the browser using Express.

  • express-hello-world

C3

Implement a Node.js and MongoDB application using the Express framework and Mongoose ORM that supports pagination for retrieving and displaying posts from the database.

  • demo

C4

Create a Tic Tac Toe game using React JS.

  • tic-tak-toe