Skip to content

Instantly share code, notes, and snippets.

@Colo-Codes

Colo-Codes/index.html

Last active August 18, 2021 08:42
Show Gist options
  • Save Colo-Codes/52b642d271ed43495139c1614612bf1d to your computer and use it in GitHub Desktop.
Save Colo-Codes/52b642d271ed43495139c1614612bf1d to your computer and use it in GitHub Desktop.
Download ZIP
To-Do app - HTML
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>Mini-Project - ToDo app</title>
</head>
<body class="background">
<div id="time-of-day">
<div class="time-of-day--option">
<input
type="radio"
id="morning"
name="time-of-day--background"
value="morning"
checked
/>
<label for="morning">Morning</label>
</div>
<div class="time-of-day--option">
<input
type="radio"
id="afternoon"
name="time-of-day--background"
value="afternoon"
/>
<label for="afternoon">Afternoon</label>
</div>
<div class="time-of-day--option">
<input
type="radio"
id="night"
name="time-of-day--background"
value="night"
/>
<label for="night">Night</label>
</div>
</div>
<main class="todo">
<section id="todo--header">
<header>
<h1 id="todo--header--today">Saturday</h1>
<p id="todo--header--date">3 June, 2021</p>
</header>
</section>
<section id="todo--tasks-list">
<ul id="todo--tasks-list--items-list">
<li class="todo--tasks-list--item">
<div class="todo--tasks-list--item--checkbox"></div>
<div class="todo--tasks-list--item--description">
Item 1
</div>
<div class="todo--tasks-list--item--due-date">
<div class="due-date-bubble" style="padding: 2px">
11/11/2021
</div>
</div>
<div class="delete-task">
<img
src="./images/remove.png"
alt=""
width="16px"
height="16px"
/><span class="delete-text">Delete</span>
</div>
</li>
<li class="todo--tasks-list--item">
<div class="todo--tasks-list--item--checkbox"></div>
<div class="todo--tasks-list--item--description">
Item 2
</div>
<div class="todo--tasks-list--item--due-date">
<div class="due-date-bubble" style="padding: 2px">
11/11/2021
</div>
</div>
<div class="delete-task">
<img
src="./images/remove.png"
alt=""
width="16px"
height="16px"
/><span class="delete-text">Delete</span>
</div>
</li>
<li class="todo--tasks-list--item">
<div class="todo--tasks-list--item--checkbox"></div>
<div class="todo--tasks-list--item--description">
Item 3
</div>
<div class="todo--tasks-list--item--due-date">
<div class="due-date-bubble" style="padding: 2px">
11/11/2021
</div>
</div>
<div class="delete-task">
<img
src="./images/remove.png"
alt=""
width="16px"
height="16px"
/><span class="delete-text">Delete</span>
</div>
</li>
</ul>
</section>
<div id="sheet-1-3d">
<section id="todo--footer">
<div id="add-task">
<img
src="./images/plus.png"
alt="Add a new task"
width="44px"
height="44px"
/>
</div>
</section>
</div>
<div id="sheet-2-3d"></div>
<div id="sheet-3-3d"></div>
<div id="sheet-4-3d"></div>
<footer>
<p>
HTML, CSS, and JavaScript code by
<a href="mailto:[email protected]" target="blank"
>Damian Demasi</a
>
</p>
<p>
<a
href="https://github.com/Colo-Codes/mini-projects/tree/main/todo-app"
target="blank"
>
<img
src="./images/GitHub-Mark-Light-32px.png"
alt="GitHub logo link"
/></a>
</p>
<p>
Graphic design inspired on a
<a
href="https://dribbble.com/shots/2417288-Todo-List-Day-42-dailyui"
target="blank"
>
work
</a>
by
<a
href="https://dribbble.com/sergiu-radu/about"
target="blank"
>Sergiu Radu</a
>
</p>
</footer>
</main>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<input
id="input-task"
type="text"
placeholder="Your new task here"
/>
<div class="due-date--container">
<button id="btn-add-task">Add</button>
<p id="due-date">Due date:</p>
<input type="date" id="due-date--input" />
</div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment