Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Project 1 list structure #1

Merged
merged 16 commits into from
Feb 15, 2022
53 changes: 53 additions & 0 deletions src/index.html
@@ -0,0 +1,53 @@
<!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" />
<title>To Do List</title>
</head>
<body>
<main id="todo-wrapper">
<div class="todo-header">
<h4>Title</h4>
Copy link

@Kingstalux Kingstalux Feb 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • (OPTIONAL) Consider replacing Title here with Today's To Do as it is more explicit and it also follows the design 👍

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

<a href="#">
<svg
class="icon"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
></path>
</svg>
</a>
</div>
<form id="todo-form">
<input type="text" name="todo-title" placeholder="Add todo..." />
<button type="submit">
<svg
class="icon"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
</button>
</form>
<ul id="todo-list"></ul>
<button type="button" id="clear-all">Clear all</button>
</main>
</body>
</html>
1 change: 1 addition & 0 deletions src/index.js
@@ -0,0 +1 @@
import('./style.css');
100 changes: 100 additions & 0 deletions src/style.css
@@ -0,0 +1,100 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

:root {
--color-primary: #333;
--color-gray: #777;
}

a {
color: var(--color-primary);
text-transform: none;
}

.icon {
width: 1.25rem;
height: 1.25rem;
}

button {
cursor: pointer;
}

html {
scroll-behavior: smooth;
}

body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #eee;
font-family: sans-serif;
color: #333;
}

#todo-wrapper {
background-color: white;
margin: 1rem;
box-shadow: 0 0.2rem 0.5rem #0003;
width: 100%;
max-width: 500px;
border-radius: 0.5rem;
overflow: hidden;
}

.todo-header {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1rem 0.5rem;
border-bottom: 1px solid #eee;
}

.todo-header a {
color: var(--color-gray);
}

.todo-header a:hover {
color: var(--color-primary);
}

#todo-form {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.5rem 1rem;
border-bottom: 1px solid #eee;
}

#todo-form input {
border: none;
flex-grow: 1;
padding: 0.5rem;
}

#todo-form button {
border: none;
background: none;
flex-grow: 0;
color: var(--color-gray);
}

#todo-form button:hover {
color: var(--color-primary);
}

#todo-list li {
padding: 1rem;
}

#clear-all {
width: 100%;
background-color: #eee;
border: 0;
padding: 1rem;
}