.gif&w=256&q=75)
HireTalentt.com is a platform, built by InfoMover Technologies.
2022 © Copyright Infomover. All Rights Reserved
Privacy Notice2022 © Copyright Infomover. All Rights Reserved
In modern web development, understanding the distinction between client-side and server-side operations is crucial for building efficient and secure applications. Let's dive deep into both aspects and understand how they work together to create seamless web experiences.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Technologies Demo</title>
<style>
/* CSS Styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
color: #555;
}
.form-group input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #45a049;
}
.task-list {
margin-top: 20px;
}
.task-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f9f9f9;
margin-bottom: 5px;
border-radius: 4px;
}
.task-item.completed {
background-color: #e8f5e9;
text-decoration: line-through;
}
.delete-btn {
background-color: #ff4444;
color: white;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<!-- HTML Structure -->
<div class="header">
<h1>Task Manager</h1>
<p>Add and manage your daily tasks</p>
</div>
<div class="form-group">
<label for="taskInput">New Task:</label>
<input type="text" id="taskInput" placeholder="Enter a new task">
</div>
<button class="button" onclick="addTask()">Add Task</button>
<div id="taskList" class="task-list">
<!-- Tasks will be added here dynamically -->
</div>
</div>
<script>
// JavaScript Functionality
let tasks = [];
function addTask() {
const taskInput = document.getElementById('taskInput');
const taskText = taskInput.value.trim();
if (taskText !== '') {
// Create task object
const task = {
id: Date.now(),
text: taskText,
completed: false
};
// Add to tasks array
tasks.push(task);
// Clear input
taskInput.value = '';
// Refresh task list display
renderTasks();
}
}
function toggleTask(taskId) {
// Find and toggle task completion status
const task = tasks.find(t => t.id === taskId);
if (task) {
task.completed = !task.completed;
renderTasks();
}
}
function deleteTask(taskId) {
// Remove task from array
tasks = tasks.filter(t => t.id !== taskId);
renderTasks();
}
function renderTasks() {
const taskList = document.getElementById('taskList');
taskList.innerHTML = '';
tasks.forEach(task => {
const taskElement = document.createElement('div');
taskElement.className = `task-item ${task.completed ? 'completed' : ''}`;
taskElement.innerHTML = `
<span onclick="toggleTask(${task.id})" style="cursor: pointer">
${task.text}
</span>
<button class="delete-btn" onclick="deleteTask(${task.id})">
Delete
</button>
`;
taskList.appendChild(taskElement);
});
}
// Add event listener for Enter key
document.getElementById('taskInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addTask();
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Client-Side Features Demo</title>
<style>
/* ... Previous CSS styles ... */
.feedback-message {
padding: 10px;
margin: 10px 0;
border-radius: 4px;
display: none;
}
.success {
background-color: #dff0d8;
color: #3c763d;
border: 1px solid #d6e9c6;
}
.error {
background-color: #f2dede;
color: #a94442;
border: 1px solid #ebccd1;
}
.validation-error {
border-color: #ff0000;
}
.loading {
display: inline-block;
margin-left: 10px;
animation: spin 1s infinite linear;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Enhanced Task Manager</h1>
<p>With client-side features</p>
</div>
<div id="feedbackMessage" class="feedback-message"></div>
<div class="form-group">
<label for="taskInput">New Task:</label>
<input type="text" id="taskInput" placeholder="Enter a new task (min 3 characters)">
<span id="validationMessage" style="color: red; font-size: 12px;"></span>
</div>
<button class="button" onclick="addTask()">Add Task</button>
<button class="button" onclick="loadSavedTasks()">Load Saved Tasks</button>
<div id="taskList" class="task-list"></div>
</div>
<script>
let tasks = [];
// Client-side validation
function validateTask(taskText) {
const validationMessage = document.getElementById('validationMessage');
const taskInput = document.getElementById('taskInput');
if (taskText.length < 3) {
validationMessage.textContent = 'Task must be at least 3 characters long';
taskInput.classList.add('validation-error');
return false;
}
if (taskText.length > 50) {
validationMessage.textContent = 'Task must not exceed 50 characters';
taskInput.classList.add('validation-error');
return false;
}
validationMessage.textContent = '';
taskInput.classList.remove('validation-error');
return true;
}
// Immediate feedback
function showFeedback(message, type) {
const feedbackElement = document.getElementById('feedbackMessage');
feedbackElement.textContent = message;
feedbackElement.className = `feedback-message ${type}`;
feedbackElement.style.display = 'block';
setTimeout(() => {
feedbackElement.style.display = 'none';
}, 3000);
}
// Local storage management
function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
showFeedback('Tasks saved successfully!', 'success');
}
function loadSavedTasks() {
const savedTasks = localStorage.getItem('tasks');
if (savedTasks) {
tasks = JSON.parse(savedTasks);
renderTasks();
showFeedback('Tasks loaded from storage', 'success');
} else {
showFeedback('No saved tasks found', 'error');
}
}
// Enhanced addTask with validation and feedback
function addTask() {
const taskInput = document.getElementById('taskInput');
const taskText = taskInput.value.trim();
if (!validateTask(taskText)) {
return;
}
const task = {
id: Date.now(),
text: taskText,
completed: false,
created: new Date().toISOString()
};
tasks.push(task);
taskInput.value = '';
showFeedback('Task added successfully!', 'success');
saveTasks();
renderTasks();
}
// Enhanced UI interaction
function toggleTask(taskId) {
const task = tasks.find(t => t.id === taskId);
if (task) {
task.completed = !task.completed;
showFeedback(
task.completed ? 'Task completed!' : 'Task reopened!',
'success'
);
saveTasks();
renderTasks();
}
}
function deleteTask(taskId) {
tasks = tasks.filter(t => t.id !== taskId);
showFeedback('Task deleted', 'success');
saveTasks();
renderTasks();
}
function renderTasks() {
const taskList = document.getElementById('taskList');
taskList.innerHTML = '';
tasks.forEach(task => {
const taskElement = document.createElement('div');
taskElement.className = `task-item ${task.completed ? 'completed' : ''}`;
taskElement.innerHTML = `
<span onclick="toggleTask(${task.id})" style="cursor: pointer">
${task.text}
<small style="color: #666;">
(Created: ${new Date(task.created).toLocaleDateString()})
</small>
</span>
<button class="delete-btn" onclick="deleteTask(${task.id})">
Delete
</button>
`;
taskList.appendChild(taskElement);
});
}
// Event listeners for enhanced interaction
document.getElementById('taskInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addTask();
}
});
document.getElementById('taskInput').addEventListener('input', function(e) {
validateTask(e.target.value.trim());
});
// Load saved tasks on page load
document.addEventListener('DOMContentLoaded', function() {
loadSavedTasks();
});
</script>
</body>
</html>
I’m currently working with InfoMover Technologies, gaining hands-on experience in programming languages such as Java and Python . I am diving into web development with Python. I have also gained practical experience in Python, JavaScript, and the Django Rest Framework, working on web applications and building APIs. At InfoMover, I...
