Scribd
Upload
23 views5 pages

WT - Lab Cat

The document provides code for creating different web applications - a greeting card upload form, CRUD operations for a database, displaying fruits and colors, and a to-do list application that persists data. HTML, CSS and JavaScript code is given to implement each task.

Uploaded by

Suriya Suresh Karthikeyan
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
23 views5 pages

WT - Lab Cat

The document provides code for creating different web applications - a greeting card upload form, CRUD operations for a database, displaying fruits and colors, and a to-do list application that persists data. HTML, CSS and JavaScript code is given to implement each task.

Uploaded by

Suriya Suresh Karthikeyan
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/ 5

LAB CAT

Q1 - Design a web page for uploading a "Greeting card" file, you can create a form with the following conditions:

1. File Type Restriction: Allow only specific file types, such as images or PDFs, that are commonly used for
greeting cards.

2. File Size Limit: Limit the size of the uploaded file to prevent large files from being uploaded.

3. Validation: Ensure that the user has selected a file before submitting the form.

4. User-Friendly Interface: Provide clear instructions and feedback to the user during the file upload process.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Greeting Card Upload</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="box">
<h3>Greeting Card Upload</h3>
<form id="upload" enctype="multipart/form-data">
<input
type="file"
id="'fileinput"
accept=".jpg, .jpeg, .png, .pdf"
required
/>
<button type="submit">Upload</button>
<p id="errorText" class="errormsg"></p>
</form>
</div>
<script src="scripts.js"></script>
</body>
</html>

body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color: azure;
}

#box {
justify-self: center;
justify-content: center;
max-width: 400px;
margin: 50px auto;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.errormsg {
color: red;
}

LAB CAT 1
document.getElementById("upload").addEventListener("submit", function (event) {
var fileinput = document.getElementById("fileinput");
var errormsg = document.getElementById("errorText");
if (fileinput.files.length === 0) {
errormsg.textContent = "Please select a file";
event.preventDefault();
} else {
var file = fileinput.files[0];
var filesize = file.size / 1024;
if (filesize > 1024) {
errormsg.textContent = "File size exceeds limit (1 MB)!";
event.preventDefault();
}
}
});

Q2 - To create an HTML page for adding, updating, and displaying employee, student, or book information, you can
use a form along with JavaScript to handle the submission and interaction with the MongoDB database

Q3 - Write javascript/s to perform the following tasks.

1. To store 5 fruits and their colors, display the fruit names as unordered list in the html document and a button
click event handler showing the fruit names along with their colors.

2. Show the output page when the above javascript/s are used in html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruits and Colors</title>
</head>
<body>
<h1>Fruits</h1>
<ul id="fruitsList"></ul>
<button id="showColorsBtn">Show Fruit Colors</button>
<div id="output"></div>

<script src="script.js"></script>
</body>
</html>

const fruits = [
{name:"Apple", color:"red"},
{name:"Banana", color:"yellow"},
{name:"Blueberry", color:"blue"},
{name:"Orange", color:"orange"},
{name:"Grapes", color:"purple"}
];

function display()
{
const ul = document.getElementById("fruitsList");
ul.innerHTML='';
fruits.forEach(fruit => {
const li = document.createElement("li");

LAB CAT 2
li.textContent=fruit.name;
ul.appendChild(li);
});
}

function showColors()
{
const output = document.getElementById('output');
output.innerHTML='';
fruits.forEach(fruit =>{
const p = document.createElement('p');
p.textContent = `${fruit.name} - ${fruit.color}`;
output.appendChild(p);
});
}

document.getElementById('showColorsBtn').addEventListener('click', showColors);

Q4 - You have been tasked with creating a simple to-do list application. Users should be able to add tasks, mark
them as completed, and delete them. Additionally, tasks should persist even after the page is refreshed.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To-Do List</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<form id="taskForm">
<input type="text" id="taskInput" placeholder="Add new task" required />
<button type="submit">Add Task</button>
</form>
<ul id="taskList"></ul>
</div>

<script src="script.js"></script>
</body>
</html>

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

LAB CAT 3
h1 {
text-align: center;
}

form {
margin-bottom: 20px;
}

input[type="text"] {
width: 70%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
}

button {
padding: 8px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

.completed {
text-decoration: line-through;
}

.delete {
background-color: #ff3333;
color: #fff;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}

let tasks = JSON.parse(localStorage.getItem("tasks")) || [];


function renderTasks() {
const taskList = document.getElementById("taskList");
taskList.innerHTML = "";
tasks.forEach((task, index) => {
const li = document.createElement("li");
li.innerHTML = `
<input type="checkbox" id="task${index}" ${
task.completed ? "checked" : ""
}>

LAB CAT 4
<label for="task${index}" class="${
task.completed ? "completed" : ""
}">${task.name}</label>
<button class="delete" onclick="deleteTask(${index})">Delete</button>
`;
taskList.appendChild(li);
});
}

function addTask(event) {
event.preventDefault();
const taskInput = document.getElementById("taskInput");
const newTask = { name: taskInput.value, completed: false };
tasks.push(newTask);
localStorage.setItem("tasks", JSON.stringify(tasks));
taskInput.value = "";
renderTasks();
}

function toggleTask(index) {
tasks[index].completed = !tasks[index].completed;
localStorage.setItem("tasks", JSON.stringify(tasks));
renderTasks();
}

function deleteTask(index) {
tasks.splice(index, 1);
localStorage.setItem("tasks", JSON.stringify(tasks));
renderTasks();
}

document.getElementById("taskForm").addEventListener("submit", addTask);
renderTasks();

LAB CAT 5

You might also like