Scribd
Upload
28 views

Task Management Basic App Only Frontend

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

Uploaded by

sathwick
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views

Task Management Basic App Only Frontend

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

Uploaded by

sathwick
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 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/[email protected]/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=https%3a%2f%2ffanyv88.com%3a443%2fhttp%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