Scribd Logo
Upload

Welcome to Scribd!

  • 2K views

    JavaScript Worklist Handson Solution Ievolve 57714

    Uploaded by

    pankaj pal
    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    JavaScript Worklist Handson Solution Ievolve 57714

    Uploaded by

    pankaj pal
    2K views3 pages
    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.

    Original Title

    JavaScript worklist handson solution ievolve 57714

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    2K views3 pages

    JavaScript Worklist Handson Solution Ievolve 57714

    Uploaded by

    pankaj pal
    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    of 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

    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