Scribd
Upload
17 views

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
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

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
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