Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Mini Project

    Hochgeladen von

    Amit Patil
    20 Ansichten5 Seiten
    mini project on computer graphics

    Originaltitel

    mini project

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    mini project on computer graphics

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    20 Ansichten5 Seiten

    Mini Project

    Hochgeladen von

    Amit Patil
    mini project on computer graphics

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 5

    Source code:-

    Amit.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>Shopping Grocery List</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div class="container">
    <h1>Shopping Grocery List</h1>
    <div class="lists">
    <div class="list">
    <h2>Available at Home</h2>
    <ul id="home-list"></ul>
    <div class="input-section">
    <input type="text" id="home-item" placeholder="Add
    item">
    <button id="home-add">Add</button><br>
    </div>
    </div>
    <div class="list">
    <h2>Available in Market</h2>
    <ul id="market-list">
    </ul>
    <div class="input-section">
    <input type="text" id="market-item"
    placeholder="Add item">
    <button id="market-add">Add</button>
    </div>
    </div>
    </div>
    </div>
    <script src="script.js"></script>
    </body>
    </html>
    Style.css
    body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
    sans-serif;
    font-size: larger;
    }

    .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    }

    h1 {
    text-align: center;
    color: rgb(238, 121, 12);
    background-color: silver;
    }

    .lists {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
    }

    .list {
    flex-basis: 45%;
    }

    h2 {
    margin-top: 0;
    }

    ul {
    list-style-type: none;
    padding: 0;
    }

    li {
    margin-bottom: 10px;
    }

    .checkbox-label {
    display: inline-block;
    margin-right: 10px;
    }

    .input-section {
    margin-top: 500px;
    display: contents;
    }

    input[type="text"] {
    flex-grow: 4;
    }

    button {
    margin-left: 10px;
    color: red;
    }

    Script.js
    const homeList = document.getElementById("home-list");
    const marketList = document.getElementById("market-list");
    const homeItemInput = document.getElementById("home-item");
    const marketItemInput = document.getElementById("market-item");
    const homeAddButton = document.getElementById("home-add");
    const marketAddButton = document.getElementById("market-add");

    homeAddButton.addEventListener("click", addItemToHomeList);
    marketAddButton.addEventListener("click", addItemToMarketList);

    function addItemToHomeList() {
    const item = homeItemInput.value.trim();
    if (item !== "") {
    const listItem = createListItem(item);
    const checkbox = createCheckbox();
    listItem.insertBefore(checkbox, listItem.firstChild);
    homeList.appendChild(listItem);
    homeItemInput.value = "";
    }
    }

    function addItemToMarketList() {
    const item = marketItemInput.value.trim();
    if (item !== "") {
    const listItem = createListItem(item);
    const checkbox = createCheckbox();
    listItem.insertBefore(checkbox, listItem.firstChild);
    marketList.appendChild(listItem);
    marketItemInput.value = "";
    }
    }

    function createListItem(item) {
    const listItem = document.createElement("li");
    const label = document.createElement("label");
    label.textContent = item;
    listItem.appendChild(label);
    return listItem;
    }

    function createCheckbox() {
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.addEventListener("click", moveItem);
    const label = document.createElement("span");
    label
    label.className = "checkbox-label";
    label.textContent = "Move to market list";
    checkbox.appendChild(label);
    return checkbox;
    }

    function moveItem() {
    const listItem = this.parentNode;
    const list = listItem.parentNode;
    const checkbox = listItem.firstChild;
    if (list === homeList) {
    marketList.appendChild(listItem);
    checkbox.removeEventListener("click", moveItem);
    checkbox.checked = false;
    const label = checkbox.firstChild;
    label.textContent = "Move to home list";
    checkbox.addEventListener("click", moveItem);
    } else if (list === marketList) {
    homeList.appendChild(listItem);
    checkbox.removeEventListener("click", moveItem);
    checkbox.checked = false;
    const label = checkbox.firstChild;
    label.textContent = "Move to market list";
    checkbox.addEventListener("click", moveItem);
    }
    }

    OUTPUT:-

    Das könnte Ihnen auch gefallen