Scribd
Upload
2 views16 pages

Web Dev Practical File

This document is a practical file for a web technology course, showcasing a Todo List application built using HTML, CSS, and JavaScript. It includes code for creating a user interface for managing tasks, as well as functionality for adding, deleting, and filtering todos, along with local storage integration. Additionally, it features examples of XML handling with AJAX and RSS feed generation using Node.js.

Uploaded by

vinaykumarprof01
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
2 views16 pages

Web Dev Practical File

This document is a practical file for a web technology course, showcasing a Todo List application built using HTML, CSS, and JavaScript. It includes code for creating a user interface for managing tasks, as well as functionality for adding, deleting, and filtering todos, along with local storage integration. Additionally, it features examples of XML handling with AJAX and RSS feed generation using Node.js.

Uploaded by

vinaykumarprof01
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/ 16

WEB TECHNOLOGY

PAPER CODE: CBCPC04


PRACTICAL FILE

SUBMITTED BY: SUBMITTED TO:


VINAY KUMAR (2022UCB6032) MR. ARVIND KUMAR
BRANCH: CSDA

DEPARTMENT OF COMPUTER SCIENCE ENGINEERING


(BIG DATA ANALYTICS)
NETAJI SUBHAS UNIVERSITY OF TECHNOLOGY, EAST CAMPUS
GEETA COLONY, DELHI-110031
HTML
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="preconnect" href="https://fonts.googleapis.com" />

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link

href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"

rel="stylesheet"

/>

<link rel="stylesheet" href="css/style.css" />

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"

integrity="sha512-
iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="

crossorigin="anonymous"

referrerpolicy="no-referrer"

/>

<title>Todo_List</title>

</head>

<body>

<header>

<h1>Todo List</h1>

</header>

<form>

<input type="text" class="todo-input" required/>

<button class="todo-btn" type="submit">


<i class="fas fa-plus-square"></i>

</button>

<div class="select">

<select name="todos" class="filter-todo">

<option value="all">All</option>

<option value="completed">Completed</option>

<option value="uncompleted">Uncompleted</option>

</select>

</div>

</form>

<div class="todo-container">

<ul class="todo-list"></ul>

</div>

<script src="js/app.js"></script>

</body>

</html>
CSS
*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

background-image: linear-gradient(120deg, #dab847, #ce6e54);

color: white;

font-family: "poppins", sans-serif;

header {

font-size: 1.5rem;

header,

form {

min-height: 20vh;

display: flex;

justify-content: center;

align-items: center;

form input,

form button {

padding: 0.5rem;

font-size: 2rem;

border: none;

border-radius: 0.1rem;

background: white;

outline: none;

border: none;
}

form button {

color: #ce6e54;

background: white;

cursor: pointer;

transition: all 0.3s ease;

form button:hover {

background-color: #ce6e54;

color: white;

.todo-container {

display: flex;

justify-content: center;

align-items: center;

.todo-list {

min-width: 30%;

list-style: none;

.todo {

margin: 0.5rem;

background: white;

border-radius: 0.2rem;

color: black;

font-size: 1.5rem;

display: flex;

justify-content: space-between;

align-items: center;

transition: all 0.5s ease;

}
.todo li {

flex: 1;

.fall {

transform: translateY(8rem) rotateZ(20deg);

opacity: 0;

.trash-btn,

.complete-btn {

background: #ff6f47;

color: white;

border: none;

padding: 1rem;

cursor: pointer;

font-size: 1rem;

.complete-btn {

background: lightseagreen;

.fa-trash,

.fa-check {

pointer-events: none;

.completed {

text-decoration: line-through;

opacity: 0.5;

select {

-webkit-appearance: none;

-moz-appearance: none;
appearance: none;

outline: 0;

box-shadow: none;

border: 0 !important;

background-image: none;

.select {

margin: 1rem;

position: relative;

overflow: hidden;

select {

border-radius: 0.2rem;

color: #ff6f47;

width: 10rem;

cursor: pointer;

padding: 1rem;

.select::after {

content: "\25BC";

position: absolute;

background: #ff6f47;

top: 0;

right: 0;

padding: 1rem;

pointer-events: none;

cursor: pointer;

}
JAVA-SCRIPT
//Selectors:
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-btn");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");

//Event Listeners:
document.addEventListener("DOMContentLoaded", getTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("click", filterTodo);

//Functions:
function addTodo(event) {
//prevent form from submitting.
event.preventDefault();
//create div element
const todoDiv = document.createElement("div");
//add todo class to that div.
todoDiv.classList.add("todo");

const newTodo = document.createElement("li");


newTodo.classList.add("todo-item");
newTodo.innerText = todoInput.value;

//Append Child:
todoDiv.appendChild(newTodo);

//Add todo to local storage:


saveLocalTodos(todoInput.value);

//check button:
const completedButton = document.createElement("button");
completedButton.innerHTML = "<i class='fas fa-check'></i>";
completedButton.classList.add("complete-btn");

todoDiv.appendChild(completedButton);

//delete button:
const trashButton = document.createElement("button");
trashButton.innerHTML = "<i class='fas fa-trash'></i>";
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);

//Append to list:
todoList.appendChild(todoDiv);

//Clear todo input value:


todoInput.value = "";
}

function deleteCheck(e) {
const item = e.target;

//Delete todo:
if (item.classList[0] === "trash-btn") {
const todo = item.parentElement;
//Animation:
todo.classList.add("fall");
removeLocalTodos(todo);
todo.addEventListener("transitionend", function () {
todo.remove();
});
}

//Check mark:
if (item.classList[0] === "complete-btn") {
const todo = item.parentElement;
todo.classList.toggle("completed");
}
}

function filterTodo(e) {
const todos = todoList.childNodes;
todos.forEach(function (todo) {
switch (e.target.value) {
case "all":
todo.style.display = "flex";
break;
case "completed":
if (todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
case "uncompleted":
if (!todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
case "default":
break;
}
});
}

//Save locally:
function saveLocalTodos(todo) {
//Check if we already have something:
let todos;
if (localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}

todos.push(todo);
localStorage.setItem("todos", JSON.stringify(todos));
}

function getTodos() {
let todos;

if (localStorage.getItem("todos") === null) {


todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}

todos.forEach(function (todo) {
const todoDiv = document.createElement("div");
//add todo class to that div.
todoDiv.classList.add("todo");

const newTodo = document.createElement("li");


newTodo.innerText = todo;
newTodo.classList.add("todo-item");
//Append Child:
todoDiv.appendChild(newTodo);

//check button:
const completedButton = document.createElement("button");
completedButton.innerHTML = "<i class='fas fa-check'></i>";
completedButton.classList.add("complete-btn");

todoDiv.appendChild(completedButton);

//delete button:
const trashButton = document.createElement("button");
trashButton.innerHTML = "<i class='fas fa-trash'></i>";
trashButton.classList.add("trash-btn");

todoDiv.appendChild(trashButton);

//Append to list:
todoList.appendChild(todoDiv);
});
}

function removeLocalTodos(todo) {
let todos;

if (localStorage.getItem("todos") === null) {


todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}

const todoIndex = todo.children[0].innerText;


todos.splice(todos.indexOf(todoIndex), 1);
localStorage.setItem("todos", JSON.stringify(todos));
}
XML/JS USING AJAX
<?xml version="1.0" encoding="UTF-8"?>

<library>

<book>

<title>JavaScript: The Good Parts</title>

<author>Douglas Crockford</author>

<published>2008</published>

</book>

<book>

<title>Eloquent JavaScript</title>

<author>Marijn Haverbeke</author>

<published>2011</published>

</book>

<book>

<title>You Don't Know JS</title>

<author>Kyle Simpson</author>

<published>2014</published>

</book>

</library>

function fetchBooks() {

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

var xmlResponse = xhr.responseXML;

var books = xmlResponse.getElementsByTagName('book');

var output = '<ul>';

for (var i = 0; i < books.length; i++) {

var title = books[i].getElementsByTagName('title')[0].textContent;

var author = books[i].getElementsByTagName('author')[0].textContent;

var published = books[i].getElementsByTagName('published')[0].textContent;


output += '<li>' + title + ' by ' + author + ' (' + published + ')</li>';

output += '</ul>';

document.getElementById('books').innerHTML = output;

};

xhr.open('GET', 'books.xml', true);

xhr.send();

fetchBooks();

<div id="books"></div>
RSS
npm init

npm install rss

const RSS = require('rss');

const fs = require('fs');

const feed = new RSS({

title: 'My RSS Feed',

description: 'This is an example RSS feed.',

feed_url: 'https://example.com/rss',

site_url: 'https://example.com',

});

feed.item({

title: 'Item 1',

description: 'This is the first item in the RSS feed.',

url: 'https://example.com/item1',

date: new Date(),

});

feed.item({

title: 'Item 2',

description: 'This is the second item in the RSS feed.',

url: 'https://example.com/item2',

date: new Date(),

})

const xml = feed.xml();

fs.writeFileSync('rss.xml', xml);

console.log('RSS feed generated and saved as rss.xml');

node rss-generator.js
OUTPUT

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy