Scribd Logo
Upload

Welcome to Scribd!

  • Task Management Basic App Only Frontend

    Uploaded by

    sathwick
    3 views9 pages
    This is just a reference for creating a simple Task Management web application. Feel free to upgrade or edit any part of the code.

    Original Title

    Task Management Basic App only frontend

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This is just a reference for creating a simple Task Management web application. Feel free to upgrade or edit any part of the code.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views9 pages

    Task Management Basic App Only Frontend

    Uploaded by

    sathwick
    This is just a reference for creating a simple Task Management web application. Feel free to upgrade or edit any part of the code.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 9

    Task Management Basic App (Frontend only)

    HTML File: -

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-
    9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
    crossorigin="anonymous"
    />
    <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"
    />
    <style>
    body {
    background-color: #e3f2fd;
    }
    #navbar-text {
    color: #e3f2fd;
    font-size: 20px;
    margin: 0px 16px 8px 0px;
    padding: 5px 0px;
    }
    #navbar-text:hover {
    color: #fff;
    }
    #btn-grey {
    background-color: #e3f2fd;
    color: #212529;
    }
    #btn-grey:hover {
    background-color: #fff;
    color: #212529;
    }
    #nav-home {
    color: #e3f2fd;
    padding: 8px;
    }
    #nav-home:hover {
    color: #fff;
    }
    .btn-color {
    background-color: #212529;
    color: #e3f2fd;
    }
    #btn-color:hover {
    background-color: #000;
    color: #fff;
    }
    </style>
    <title>JavaScript Intro</title>
    </head>
    <body>
    <div
    class="modal fade"
    id="newTask"
    tabindex="-1"
    aria-labelledby="newTaskLabel"
    aria-hidden="true"
    >
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <h1 class="modal-title fs-5" id="newTaskLabel">Modal title</h1>
    <button
    type="button"
    class="btn-close"
    data-bs-dismiss="modal"
    aria-label="Close"
    ></button>
    </div>
    <div class="modal-body">
    <div class="mb-3">
    <label for="imageURL" class="form-label">Image URL</label>
    <input
    type="url"
    class="form-control"
    id="imageURL"
    placeholder="http://image.com/image.jpg"
    />
    </div>
    <div class="mb-3">
    <label for="taskTitle" class="form-label">Task Title</label>
    <input
    type="text"
    class="form-control"
    id="taskTitle"
    placeholder="web development"
    />
    </div>
    <div class="mb-3">
    <label for="taskType" class="form-label">Task Type</label>
    <input
    type="text"
    class="form-control"
    id="taskType"
    placeholder="practice"
    />
    </div>
    <div class="mb-3">
    <label for="taskDescription" class="form-label"
    >Task Description</label
    >
    <textarea
    id="taskDescription"
    class="form-control"
    rows="3"
    placeholder="This is DOM Manipulation class"
    ></textarea>
    </div>
    </div>
    <div class="modal-footer">
    <button
    type="button"
    class="btn btn-secondary"
    data-bs-dismiss="modal"
    >
    Close
    </button>
    <button type="button" class="btn" id="btn=grey">
    Save changes
    </button>
    </div>
    </div>
    </div>
    </div>

    <nav
    class="navbar navbar-expand-lg bg-dark border-bottom border-bottom-dark"
    data-bs-theme="dark"
    style="padding: 8px 0px;"
    >
    <div class="container-fluid">
    <a class="navbar-brand fw-bold" href="#" id="navbar-text">Tasks</a>
    <button
    class="navbar-toggler"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent"
    aria-expanded="false"
    aria-label="Toggle navigation"
    >
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
    <a
    class="nav-link active fw-bold"
    aria-current="page"
    href="#"
    id="nav-home"
    >Home</a
    >
    </li>
    </ul>
    <form class="d-flex" role="search">
    <button
    type="button"
    class="btn"
    id="btn-grey"
    data-bs-toggle="modal"
    data-bs-target="#exampleModal"
    >
    <i class="fa-solid fa-plus"></i> Add New
    </button>
    </form>
    </div>
    </div>
    </nav>
    <div class="container">
    <div class="row mt-5">
    <div class="col"></div>

    <div class="col-sm-12 col-md-6 col-lg-4">


    <div class="input-group mb-3 shadow">
    <input
    type="text"
    class="form-control"
    placeholder="Search Here"
    aria-label="Search Here"
    aria-describedby="basic-addon2"
    />
    <span class="input-group-text" id="basic-addon2"
    ><i class="fa-sharp fa-solid fa-magnifying-glass"></i>
    </span>
    </div>
    </div>

    <div class="col"></div>
    </div>
    <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4">
    <div class="card">
    <div class="card-header d-flex justify-content-end gap-2">
    <button type="button" class="btn btn-outline-success">
    <i class="fas fa-pencil-alt"></i>
    </button>
    <button type="button" class="btn btn-outline-danger">
    <i class="fas fa-trash-alt"></i>
    </button>
    </div>
    <div class="card-body">
    <img
    src="https://th.bing.com/th/id/R.2543e6a0c48edbb91023bd6ceeb9575b?
    rik=ooZkdohp6nEP6g&riu=http%3a%2f%2fwww.thebluediamondgallery.com%2fhandwriting
    %2fimages%2fassignment.jpg&ehk=vXlM2dvQbfxcqwF%2buUTSq3umdpBTYXnl0F
    %2f143ASnOE%3d&risl=&pid=ImgRaw&r=0"
    class="card-img-top"
    alt="..."
    />
    <h5 class="card-title mt-3">Assignment Submission</h5>
    <p class="card-text">
    Tomorrow is the assignment submission deadline.
    </p>
    <a href="#" class="btn btn-color" id="btn-color">Go Somewhere</a>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    You might also like