Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3K views

JavaScript Worklist Handson Solution Ievolve 57714

The document code defines an HTML and JavaScript for a to-do list application. The HTML contains the UI elements like input fields and buttons. The JavaScript contains functions for adding, updating, deleting tasks and changing the application mode.

Uploaded by

pankaj pal
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3K views

JavaScript Worklist Handson Solution Ievolve 57714

The document code defines an HTML and JavaScript for a to-do list application. The HTML contains the UI elements like input fields and buttons. The JavaScript contains functions for adding, updating, deleting tasks and changing the application mode.

Uploaded by

pankaj pal
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

index.html file code =<!

DOCTYPE html>
<html lang="en">

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

<body>
<div id="header">
<h1>Today's Worklist</h1>
<button id="clear" onclick="clearWorkList()">Clear The Worklist</button>
<div>
<input type="radio" id="addWork" name="mode" value="add"
onclick="changeMode()" checked />
<label for="addWork">Add Work</label>
<input type="radio" id="editTitle" name="mode" value="edit"
onclick="changeMode()" />
<label for="editTitle">Change Card Title</label>
<input type="radio" id="delete" name="mode" value="delete"
onclick="changeMode()" />
<label for="delete">Delete Work</label>
</div>
</div>
<hr />
<div id="add">
<input type="text" id="work" placeholder="Write Your Work To Do" />
<button id="btnAdd" onClick="addWork()">Add</button>
</div>
<div id="edit">
<input type="text" id="cardTitle" placeholder="Write your card title" />
<button id="btnUpdate" onClick="update()">Update</button>
</div>
<section>
<div class="card1" id="card1">
<input type="radio" id="card1Selected" name="cardSelected"
value="card1Selected" checked
onclick="selectCard('card1')" />
<h2>Home</h2>
<ul id="card1List"></ul>
</div>
<div class="card2" id="card2">
<input type="radio" id="card2Selected" name="cardSelected"
value="card2Selected" onclick="selectCard('card2')" />
<h2>Shopping</h2>
<ul id="card2List"></ul>
</div>
<div class="card3" id="card3">
<input type="radio" id="card3Selected" name="cardSelected"
value="card3Selected" onclick="selectCard('card3')" />
<h2>Office</h2>
<ul id="card3List"></ul>
</div>
</section>
<script src="./js/script.js"></script>
</body>

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

</html>
Script.js code=
var selectedCard = 'card1';
var work;
var editedCardTitle;
var filter = 'add';

function selectCard(card) {
selectedCard = card; // Fix: Assign the card parameter to selectedCard
changeMode();
}

function addWork() {
work = document.getElementById('work').value;
if (work.trim() !== '') { // Trim to handle spaces
var d1 = document.getElementById(selectedCard + 'List');
d1.insertAdjacentHTML('beforeend', `<li>${work}</li>`);
document.getElementById('work').value = '';
work = '';
}
}

function deleteWork(taskId) {
const del = document.getElementById(taskId);
del.parentElement.remove();
}

function update() {
editedCardTitle = document.getElementById('cardTitle').value;
if (editedCardTitle.trim() !== '') { // Trim to handle spaces
var outerDiv = document.getElementById(selectedCard);
outerDiv.getElementsByTagName("h2")[0].textContent = editedCardTitle;
filter = 'add';
document.getElementById('edit').style.display = 'none';
document.getElementById('add').style.display = 'block';
}
}

function clearWorkList() {
//code goes here to clear workList
document.getElementById('card1List').remove();
document.getElementById('card2List').remove();
document.getElementById('card3List').remove();
selectedCard = 'card1';
work = '';
editedCardTitle = '';
filter = 'add';

function changeMode() {
var modeRadio = document.querySelector('input[name="mode"]:checked');
if (modeRadio) {
filter = modeRadio.value;
}

if (filter === 'add') {


document.getElementById('edit').style.display = 'none';
document.getElementById('add').style.display = 'block';
} else if (filter === 'edit') {
document.getElementById('edit').style.display = 'block';
document.getElementById('add').style.display = 'none';
var outerDiv = document.getElementById(selectedCard);
var h2s = outerDiv.getElementsByTagName("h2")[0].textContent;
document.getElementById('cardTitle').value = h2s;
editedCardTitle = h2s;
} else if (filter === 'delete') {
document.getElementById('add').style.display = 'none';
document.getElementById('edit').style.display = 'none';
document.querySelectorAll('.deleteTask').forEach(e => e.remove());
var selector = '.' + selectedCard + ' ul li';
const ul1 = document.querySelectorAll(selector);
for (var i = 0; i < ul1.length; i++) {
ul1[i].insertAdjacentHTML('afterbegin', `<button
onClick="deleteWork('deleteBtn${i + 1}')" class="deleteTask" id="deleteBtn${i +
1}"></button>`);
}
}
}

You might also like