Skip to content

Commit 1f7c52e

Browse files
Prajwal0422Prajwal0422
authored
Add files via upload
1 parent 6283939 commit 1f7c52e

File tree

12 files changed

+773
-0
lines changed

12 files changed

+773
-0
lines changed

‎JavaScript-Project/Demo-ToDo-List/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Advanced To-Do List</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>📝 To-Do List</h1>
12+
13+
<div class="input-area">
14+
<input type="text" id="taskInput" placeholder="Enter a new task...">
15+
<input type="date" id="dueDate">
16+
<select id="priority">
17+
<option value="High">High 🔴</option>
18+
<option value="Medium">Medium 🟡</option>
19+
<option value="Low">Low 🟢</option>
20+
</select>
21+
<button onclick="addTask()">Add</button>
22+
</div>
23+
24+
<ul id="taskList"></ul>
25+
</div>
26+
27+
<script src="script.js"></script>
28+
</body>
29+
</html>

‎JavaScript-Project/Demo-ToDo-List/script.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
window.onload = function() {
2+
displayTasks();
3+
};
4+
5+
function getTasks() {
6+
let tasks = localStorage.getItem("tasks");
7+
return tasks ? JSON.parse(tasks) : [];
8+
}
9+
10+
function saveTasks(tasks) {
11+
localStorage.setItem("tasks", JSON.stringify(tasks));
12+
}
13+
14+
function addTask() {
15+
let input = document.getElementById("taskInput");
16+
let dueDate = document.getElementById("dueDate").value;
17+
let priority = document.getElementById("priority").value;
18+
19+
let task = input.value.trim();
20+
if (task === "") {
21+
alert("Please enter a task!");
22+
return;
23+
}
24+
25+
let tasks = getTasks();
26+
tasks.push({
27+
text: task,
28+
completed: false,
29+
dueDate: dueDate || "No date",
30+
priority: priority
31+
});
32+
33+
saveTasks(tasks);
34+
input.value = "";
35+
document.getElementById("dueDate").value = "";
36+
document.getElementById("priority").value = "Medium";
37+
displayTasks();
38+
}
39+
40+
function toggleTask(index) {
41+
let tasks = getTasks();
42+
tasks[index].completed = !tasks[index].completed;
43+
saveTasks(tasks);
44+
displayTasks();
45+
}
46+
47+
function deleteTask(index) {
48+
let tasks = getTasks();
49+
tasks.splice(index, 1);
50+
saveTasks(tasks);
51+
displayTasks();
52+
}
53+
54+
function sortTasks(tasks) {
55+
const priorityOrder = { "High": 1, "Medium": 2, "Low": 3 };
56+
return tasks.sort((a, b) => {
57+
if (a.completed !== b.completed) {
58+
return a.completed - b.completed; // completed goes last
59+
}
60+
if (priorityOrder[a.priority] !== priorityOrder[b.priority]) {
61+
return priorityOrder[a.priority] - priorityOrder[b.priority];
62+
}
63+
return new Date(a.dueDate) - new Date(b.dueDate);
64+
});
65+
}
66+
67+
function displayTasks() {
68+
let taskList = document.getElementById("taskList");
69+
taskList.innerHTML = "";
70+
71+
let tasks = getTasks();
72+
tasks = sortTasks(tasks);
73+
74+
tasks.forEach((task, index) => {
75+
let li = document.createElement("li");
76+
li.className = task.completed ? "completed" : "";
77+
li.classList.add(task.priority.toLowerCase());
78+
79+
li.innerHTML =
80+
<><div class="task-top">
81+
<span>${task.text}</span>
82+
<small>📅 ${task.dueDate}</small>
83+
</div><div class="task-actions">
84+
<button class="complete-btn" onclick="toggleTask(${index})">${task.completed ? "Undo" : "Complete"}</button>
85+
<button class="delete-btn" onclick="deleteTask(${index})">Delete</button>
86+
</div></>
87+
;
88+
89+
taskList.appendChild(li);
90+
});
91+
}

‎JavaScript-Project/Demo-ToDo-List/style.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background: #f0f2f5;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
height: 100vh;
8+
}
9+
10+
.container {
11+
background: white;
12+
padding: 20px;
13+
border-radius: 12px;
14+
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
15+
width: 420px;
16+
}
17+
18+
h1 {
19+
text-align: center;
20+
margin-bottom: 20px;
21+
color: #333;
22+
}
23+
24+
.input-area {
25+
display: flex;
26+
flex-wrap: wrap;
27+
gap: 10px;
28+
}
29+
30+
input, select, button {
31+
padding: 8px;
32+
border-radius: 8px;
33+
border: 1px solid #ccc;
34+
}
35+
36+
input[type="text"] {
37+
flex: 1;
38+
}
39+
40+
button {
41+
background: #28a745;
42+
color: white;
43+
border: none;
44+
cursor: pointer;
45+
}
46+
47+
button:hover {
48+
background: #218838;
49+
}
50+
51+
ul {
52+
list-style: none;
53+
padding: 0;
54+
margin-top: 20px;
55+
max-height: 300px;
56+
overflow-y: auto;
57+
}
58+
59+
li {
60+
background: #f9f9f9;
61+
padding: 12px;
62+
margin-bottom: 8px;
63+
border-radius: 8px;
64+
display: flex;
65+
flex-direction: column;
66+
border-left: 5px solid #ccc;
67+
}
68+
69+
li.high { border-left-color: red; }
70+
li.medium { border-left-color: orange; }
71+
li.low { border-left-color: green; }
72+
73+
li.completed {
74+
text-decoration: line-through;
75+
color: gray;
76+
}
77+
78+
.task-top {
79+
display: flex;
80+
justify-content: space-between;
81+
align-items: center;
82+
}
83+
84+
.task-actions {
85+
margin-top: 5px;
86+
}
87+
88+
.task-actions button {
89+
margin-right: 5px;
90+
padding: 5px 8px;
91+
border-radius: 6px;
92+
border: none;
93+
cursor: pointer;
94+
}
95+
96+
.complete-btn {
97+
background: #007bff;
98+
color: white;
99+
}
100+
101+
.delete-btn {
102+
background: #dc3545;
103+
color: white;
104+
}
105+
106+
.complete-btn:hover { background: #0056b3; }
107+
.delete-btn:hover { background: #c82333; }

‎JavaScript-Project/E-Commerce-Page/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Demo E-Commerce</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<header>
11+
<h1>🛒 My Demo Shop</h1>
12+
<div class="cart">
13+
<span id="cart-count">0</span> items | ₹<span id="cart-total">0</span>
14+
</div>
15+
</header>
16+
17+
<main>
18+
<div class="product-grid" id="product-list">
19+
<!-- Products will load from JS -->
20+
</div>
21+
</main>
22+
23+
<section class="cart-section">
24+
<h2>Your Cart</h2>
25+
<ul id="cart-items"></ul>
26+
<p><b>Total: ₹<span id="final-total">0</span></b></p>
27+
</section>
28+
29+
<script src="script.js"></script>
30+
</body>
31+
</html>

‎JavaScript-Project/E-Commerce-Page/script.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
const products = [
2+
{ id: 1, name: "Bronze Statue", price: 1200, img: "https://via.placeholder.com/200" },
3+
{ id: 2, name: "Antique Vase", price: 850, img: "https://via.placeholder.com/200" },
4+
{ id: 3, name: "Handmade Lamp", price: 1500, img: "https://via.placeholder.com/200" },
5+
{ id: 4, name: "Classic Clock", price: 999, img: "https://via.placeholder.com/200" }
6+
];
7+
8+
let cart = JSON.parse(localStorage.getItem("cart")) || [];
9+
10+
function saveCart() {
11+
localStorage.setItem("cart", JSON.stringify(cart));
12+
}
13+
14+
function updateCart() {
15+
let cartCount = document.getElementById("cart-count");
16+
let cartTotal = document.getElementById("cart-total");
17+
let finalTotal = document.getElementById("final-total");
18+
let cartItems = document.getElementById("cart-items");
19+
20+
cartCount.textContent = cart.length;
21+
cartTotal.textContent = cart.reduce((sum, item) => sum + item.price, 0);
22+
finalTotal.textContent = cart.reduce((sum, item) => sum + item.price, 0);
23+
24+
cartItems.innerHTML = "";
25+
cart.forEach((item, index) => {
26+
let li = document.createElement("li");
27+
li.textContent = $async (params) => {
28+
{
29+
}item.name} - ₹${item.price};
30+
let removeBtn = document.createElement("button");
31+
removeBtn.textContent = "Remove";
32+
removeBtn.onclick = () => removeFromCart(index);
33+
li.appendChild(removeBtn);
34+
cartItems.appendChild(li);
35+
});
36+
}
37+
38+
function removeFromCart(index) {
39+
cart.splice(index, 1);
40+
saveCart();
41+
updateCart();
42+
}
43+
44+
function addToCart(id) {
45+
let product = products.find(p => p.id === id);
46+
cart.push(product);
47+
saveCart();
48+
updateCart();
49+
}
50+
51+
function loadProducts() {
52+
let productList = document.getElementById("product-list");
53+
products.forEach(product => {
54+
let div = document.createElement("div");
55+
div.classList.add("product");
56+
div.innerHTML =
57+
<img src="${product.img}" alt="${product.name}">
58+
<h3>${product.name}</h3>
59+
<p>₹${product.price}</p>
60+
<button onclick="addToCart(${product.id})">Add to Cart</button>
61+
;
62+
productList.appendChild(div);
63+
{"}"});
64+
{"}"}
65+
66+
window.onload = () ={">"} {
67+
loadProducts();
68+
updateCart();
69+
{"}"};

‎JavaScript-Project/E-Commerce-Page/style.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 0;
4+
background: #f8f9fa;
5+
}
6+
7+
header {
8+
background: #007bff;
9+
color: white;
10+
padding: 15px;
11+
display: flex;
12+
justify-content: space-between;
13+
align-items: center;
14+
}
15+
16+
.product-grid {
17+
display: grid;
18+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
19+
gap: 15px;
20+
padding: 20px;
21+
}
22+
23+
.product {
24+
background: white;
25+
padding: 15px;
26+
border-radius: 10px;
27+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
28+
text-align: center;
29+
}
30+
31+
.product img {
32+
width: 100%;
33+
border-radius: 8px;
34+
margin-bottom: 10px;
35+
}
36+
37+
button {
38+
padding: 8px 12px;
39+
border: none;
40+
background: #28a745;
41+
color: white;
42+
border-radius: 6px;
43+
cursor: pointer;
44+
}
45+
46+
button:hover {
47+
background: #218838;
48+
}
49+
50+
.cart-section {
51+
background: white;
52+
padding: 15px;
53+
margin: 20px;
54+
border-radius: 10px;
55+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
56+
}

0 commit comments

Comments
 (0)