WT-External Lab Questions

1. Create a HTML page with basic Digital Marke ng website building blocks from Header to
Footer , which should consist of following requirements
i) Navbar with Logo
ii) Branding Cover Page
iii) 2-Layout Sec on with Content and Image
iv) 3-Layout Sec on which shows packages or pricing details
v) Iframes which shows your previous works
vi) Footer with your COMPANY Details and Social links.
2. Create a Payment Gateway page with HTML , where it should have at least two pages which
should also No fy/Alert User about Payment Status with JavaScript.
i) A Purchase item / Buy an order / Book a Ticket page
ii) Payment Page On Successful Payment it should give a Payment Status alert.
3. Create an Exam Applica on/Job Applica on Form Page , where it should consist of
i) Random OTP Genera on with JavaScript or Captcha
ii) Applica on form should possess all basic fields along with Image and
Signature Upload Bu on.
4. Develop a JavaScript applica on that calculates the total cost of items in a shopping cart. The
applica on should take the price and quan ty of three different items as input, compute the
subtotal for each item, calculate the total cost including a fixed sales tax rate, and display the
results.

Requirements:

i) Create input fields for the price and quan ty of three items.
ii) Implement JavaScript to capture the input values and store them in
variables.
iii) Perform arithme c opera ons to calculate the subtotal for each item (price
* quan ty).
iv) Calculate the total cost by summing the subtotals and adding a fixed sales
tax rate (e.g., 8%).
v) Display the subtotal for each item and the total cost including sales tax in a
readable format
5. Create a JavaScript applica on that performs mul ple tasks involving onclick and keypress
events, as well as basic arithme c opera ons. The applica on should:
 Handle the onclick event for a bu on. When the bu on is clicked, the text content of a
paragraph with the id "demo" should change to "Bu on Clicked!".
 Capture keyboard events to add items to a list. When the user presses the "Enter" key while
focused on a text input field, the content of the input field should be appended to a list
displayed below the input field.
 Implement a click event on each list item that allows the user to remove the item when it is
clicked.
 Perform a basic arithme c opera on: Calculate the total number of items added to the list
and display this count dynamically.
 Requirements:
i) A bu on element in your HTML with a unique ID.
ii) A paragraph element with the id "demo".
iii) A text input field for entering items.
iv) A list displayed below the input field to show the entered items.
v) JavaScript func ons to handle the onclick event for the bu on.
vi) JavaScript func ons to handle the Enter key press to add items to the list
and click events to remove items from the list.
vii) JavaScript func on to count and display the total number of items in the
list.
6. Create a PHP script that performs the following tasks:

Consider this - String = “Calculate a power b and b power a , store values in two variables and
perform arithme c opera ons”

Requirements:

i) Accept a string input from the user through the same HTML form.
ii) Perform the following string opera ons:
iii) Calculate and display the length of the string.
iv) Convert and display the string in uppercase.
v) Reverse and display the string.
vi) Count and display the number of vowels in the string.
vii) Consider string and perform arithme c opera ons
viii) Display the results of these opera ons in a HTML page.
7. Write a PHP Script to
Requirements :
i) connect Html page to Database and Print Connec on Status
ii) create registra on and login page and on successful login Navigate to a
Home Page of your business idea.

8. Write a PHP script and a HTML page

i) which consists a form to Upload Bu on where you can upload any file type of yours like resume ,
images and store them in a folder.

ii) and a er successful upload it should echo file uploaded successfully , now also write a PHP script
to download those available files.

9. Write an SQL for the following Scenario

Your e-commerce company has a database with the following tables:

 customers (customer_id, name, email)

 orders (order_id, customer_id, order_date, total_amount)
 order_items (order_item_id, order_id, product_id, quan ty, price_per_unit)
  products (product_id, product_name, category, price)

Write SQL queries to

i) Retrieve the total number of orders placed by each customer.

ii) Find the total sales amount for each product category.
iii) List the top 5 customers based on the total amount spent.
iv) Get the details of all orders placed in the last 30 days.
v) Find the most popular product (i.e., the product with the highest quan ty sold).

Requirements:

i) Use GROUP BY to aggregate data.

ii) Use JOIN to combine data from mul ple tables.
iii) Use filtering with WHERE and date func ons for me-based queries.

10 . Crea ng and Modifying Tables

Write SQL statements to perform the following tasks and What are prepared statements in SQL
explain with examples

Requirements:

i) Create a table called students with columns student_id (integer, primary key), name
(varchar, 50), age (integer), and major (varchar, 50).
ii) Insert at least three records into the students table.
iii) Add a new column email (varchar, 100) to the students table.
iv) Update the email of the student with student_id = 1 to "[email protected]".
v) Delete the student record with student_id = 2.

SQL statements for crea ng, inser ng, altering, upda ng, and dele ng records in a table.

11 . Create different JQuery func ons

Requirements :

i) where you can Select any 4 HTML Elements and Add Effects , Events , String
Manipula ons ,and CSS to them.
ii) Must select each element with different Jquery Selectors.
iii) Effects can be clubbed with Events or can be wri en Individually.

12. Crea ng a Simple JQuery Plugin , and Using Exis ng Jquery Plugin:

i) Write a simple jQuery plugin called highlight that changes the background color of the
selected elements to yellow. Demonstrate how to use this plugin on all <p> elements.
 ii) Use the jQuery Validation plugin to validate a form with fields for name, email,
and phone number. Ensure that all fields are required and that the email and phone
number fields contain valid entries. Write the jQuery code to initialize and
configure the validation.
iii) Integrate the jQuery UI Datepicker plugin into a text input with the ID datepickerInput.
Write the necessary jQuery code to ini alize the datepicker when the page loads.

13 . You are designing a product lis ng page for an online store using HTML and CSS. The client
wants a modern and visually appealing layout that showcases products effec vely.

Requirements:

i) Display a grid of product cards with product images, tles, prices, and a "Add to Cart"
bu on.
ii) Use CSS to style the product cards with the following specifica ons:
iii) Card width: 300px, margin 20px, and rounded corners.
iv) Product image: Centered within the card with a maximum width of 100% and a subtle
box-shadow effect.
v) Title: Font size 18px, bold, centered.
vi) Price: Font size 16px, color #007bff, and centered below the tle.
vii) Bu on: Background color #28a745, text color white, padding 10px, and rounded corners.
viii) Implement hover effects on product cards:
ix) Scale up the product image slightly.
x) Change the bu on background color to #007bff and text color to white.
xi) Ensure the product grid layout adjusts dynamically based on the number of products and
screen size using CSS grid or flexbox.
xii) Implement a s cky footer at the bo om of the page with naviga on links and social
media icons.
xiii) Write 10 Unique Color Codes or their names you have Ever used while doing CSS.

14 . You are tasked with crea ng a responsive naviga on bar for a corporate website using
Bootstrap. The client requires a clean and user-friendly design that includes dropdown menus for
addi onal naviga on op ons.

Requirements:

Implement a Bootstrap navbar with the following components:

i) Logo or brand name on the le .

ii) Naviga on links aligned to the right: Home, About Us, Services, Por olio, Contact.
iii) Dropdown menus for Services and Por olio, each containing at least two sub-items.
iv) Ensure the navbar collapses into a hamburger menu icon on smaller screens (mobile and
tablet viewports) using Bootstrap's responsive classes.
v) Use custom CSS to style the navbar with the following specifica ons:
vi) Background color: #343a40
vii) Text color: #ffffff
viii) Hover effect: Change text color to #007bff and add a subtle underline effect.
ix) Ensure the navbar remains s cky at the top of the page when scrolling down
15. You are developing a web applica on where users can ini ate a process that triggers a page
loader, displays a modal, and shows a popover with specific messages using Bootstrap
components.

Requirements:

i) Implement a bu on labeled "Ini ate Process" that, when clicked, displays a Bootstrap
page loader indica ng that a process is in progress. The page loader should appear for 3
seconds before automa cally disappearing.
ii) A er the page loader stops, display a modal with the tle "Process Complete" and the
message "The process has finished successfully." Include a "Close" bu on to dismiss the
modal.
iii) Implement a second bu on labeled "Info" that, when clicked, triggers a Bootstrap
popover showing the message "Clicking this bu on will display a toast no fica on."
iv) When the "Info" bu on is clicked, simulate a toast no fica on that displays the message
"Loaders Stopped because the page has loaded successfully."