Skip to content

Clean code s1e1 #159

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.

Sign up for GitHub

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

Open
irina-S123 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Clean code s1e1 #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
848aca9
docs: Update README.md
irina-S123 Oct 19, 2025
b0ae8c0
Add files via upload
irina-S123 Oct 19, 2025
83c2d37
Update README.md
irina-S123 Oct 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 1 addition & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1 @@
<img width="1199" alt="code-quality-task-screenshot" src="https://user-images.githubusercontent.com/8201843/113413843-4080fb80-93c4-11eb-9f20-15e4b4c1e430.png">

# Application Functionality :

- Adding a new item to the "TODO" tasks list.
- Editing an item in the "TODO" tasks list.
- Deleting an item from the "TODO" tasks list.
- Marking an item as "COMPLETED" and moving it to the corresponding list via the checkbox.
- Deleting an item from the "COMPLETED" list.
- Editing an item in the "COMPLETED" list.
- Marking an item as incomplete via the checkbox and moving it into the "TODO" tasks list.
- The appearance of the application has not been changed.
- Alternate text is present for all necessary images.
- The delete button animation works.
https://github.com/irina-S123/clean-code-s1e1/
80 changes: 62 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,63 @@
<html>
<HEAD><title>Todo App</title>
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css" MEDIA="screen" charset="utf-8">
</HEAD>
<body>
<div class="aaa"><img src="./eisenhower-matrix.jpg"><a class='more_inf' href="https://goal-life.com/page/method/matrix-eisenhower">Want more details&quest;</a></div>
<div class="centered-main-page-element"><p id='topSectionForAddingElementToList'><label for="new-task">Add Item</label><div class="task-row-wrapper"><input id='new-task'class="task" type="text"><button>Add</button></div>
</p><h3>Todo</h3>
<ul id='incompleteTasks'>
<li><input type='checkbox'><label class="task">Pay Bills</label><input type="text" class="task"><button class="edit">Edit</button><button class="delete"><img src="./remove.svg"></button></li>
<li class="editMode"><input type="checkbox"><label class="task">Go Shopping</label><input type="text" value="Go Shopping" class="task"><button class='edit'>Save</button><button class="delete"><img src="./remove.svg"></button></li>
</ul><h3>Completed</h3><ul id="completed-tasks"><li><input type="checkbox" checked><label class="task">See the Doctor</label><input type="text" class="task"><button class="edit">Edit</button><button class="delete"><img src="./remove.svg"></button>
</li>
</ul>
</div>
<script type="text/javascript" SRC="app.js"></script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Liashkevich Irina">
<meta name="discription" content="clean-code-s1e1">
<meta name="keywords" content="rsschool, html, css, js, todo">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App</title>
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css" MEDIA="screen" charset="utf-8">
</head>
<body>
<div class="first__container">
<img src="./eisenhower-matrix.jpg">
<a class="first__container_link" href="https://goal-life.com/page/method/matrix-eisenhower">
Want more details&quest;
</a>
</div>
<div class="second__container">
<p id="add__item__text">
<label for="item__label">
Add Item
</label>
<div class="add__item__wrapper">
<input id="item__label" class="label" type="text">
<button>Add</button>
</div>
</p><h3>Todo</h3>
<ul id="todo__list">
<li class="list__item">
<input id="todo__list__item" type="checkbox">
<label for="todo__list__item" class="label">Pay Bills</label>
<button class="edit__btn">Edit</button>
<button class="delete__btn">
<img src="./remove.svg">
</button>
</li>
<li class="list__item active__item">
<input id="todo_active__item" type="checkbox">
<label for="todo_active__item" class="label">Go Shopping</label>
<input id="todo_active__item__go__shopping" type="text" value="Go Shopping" class="label">
<button class="edit__btn">Save</button>
<button class="delete__btn">
<img src="./remove.svg">
</button>
</li>
</ul>
<h3>Completed</h3>
<ul id="completed__list">
<li>
<input id="completed__item" type="checkbox" checked>
<label for="completed__item" class="label">See the Doctor</label>
<button class="edit__btn">Edit</button>
<button class="delete__btn">
<img src="./remove.svg">
</button>
</li>
</ul>
</div>
<script type="text/javascript" SRC="app.js"></script>
</body>
</html>
295 changes: 148 additions & 147 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,148 +1,149 @@
/* Basic Style */
body {
background-color: #f8f8f8;
color: #333;
font-family: Lato, sans-serif;
}
.aaa {
width: 500px;
margin: 0 auto;
display: block;
text-align: right;
}
.aaa img {
width: 100%;
}
.aaa .more_inf {
font-family: fantasy, cursive;
}

@media (max-width:768px) {
.aaa { text-align: center;
}
}
.centered-main-page-element {
display: block;
width: 500px;
margin: 0 auto 0;
}
.task {
width: 56%;
display: inline-block;
flex-grow: 1
}
.task-row-wrapper {
display: flex;
}
ul {
margin:0;
padding: 0px;
}
li, h3 {
list-style:none;
}
input,button{
outline:none;
}
button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
font-family: Lato, sans-serif;
cursor: pointer;
}
button:hover {
color: #3a3A3a;
}
/* Heading */
h3,
label[for='new-task'] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 0;
text-transform: uppercase;
}
input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 21px;
padding: 0 9px;
border: 1px solid #dDd;
background: #FFF;
border-radius: 6px;
font-family: Lato, sans-serif;
color: #888;
}
input[type="text"]:focus {
color: #333;
}

/* New Task */
label[for='new-task'] {
display: block;
margin: 0 0 20px;
}
input#new-task {
width: 318px;
}

/* Task list */
li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;

display: flex;
justify-content: space-between;
align-items: center;
}
li > * {
vertical-align: middle;
}

li > input[type="checkbox"] {
margin: 0 10px;
}
li > label {
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
width: 226px;
}
li > input[type="text"] {
width: 226px
}
button.delete img {
height: 2em;
transform: rotateZ(45deg);
transition: transform 200ms ease-in;
}
button.delete img:hover {
transform: rotateZ(0);
}

/* Completed */
ul#completed-tasks label {
text-decoration: line-through
color: #888;
}

/* Edit Task */
ul li input[type=text] {
display:none
}

ul li.editMode input[type=text] {
display:inline-block;
width:224px
}

ul li.editMode label {
display:none;
/* Basic Style */
body {
background-color: #f8f8f8;
color: #333;
font-family: Lato, sans-serif;
}
.first__container {
width: 500px;
margin: 0 auto;
display: block;
text-align: right;
}
.first__container img {
width: 100%;
}
.first__container .first__container_link {
font-family: fantasy, cursive;
}

@media (max-width:768px) {
.first__container {
text-align: center;
}
}
.second__container {
display: block;
width: 500px;
margin: 0 auto 0;
}
.label {
width: 56%;
display: inline-block;
flex-grow: 1;
}
.add__item__wrapper {
display: flex;
}
ul {
margin:0;
padding: 0px;
}
li,
h3 {
list-style:none;
}
input,
button{
outline:none;
}
button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
font-family: Lato, sans-serif;
cursor: pointer;
}
button:hover {
color: #3a3A3a;
}
/* Heading */
h3,
label[for="item__label"] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 0;
text-transform: uppercase;
}
input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 21px;
padding: 0 9px;
border: 1px solid #dDd;
background: #FFF;
border-radius: 6px;
font-family: Lato, sans-serif;
color: #888;
}
input[type="text"]:focus {
color: #333;
}

/* New Task */
label[for="item__label"] {
display: block;
margin: 0 0 20px;
}
input
#item__label {
width: 318px;
}

/* Task list */
li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
li > * {
vertical-align: middle;
}
li > input[type="checkbox"] {
margin: 0 10px;
}
li > label {
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
width: 226px;
}
li > input[type="text"] {
width: 226px;
}
button.delete__btn img {
height: 2em;
transform: rotateZ(45deg);
transition: transform 200ms ease-in;
}
button.delete__btn img:hover {
transform: rotateZ(0);
}

/* Completed */
ul#completed__list label {
text-decoration: line-through;
color: #888;
}

/* Edit Task */
ul li input[type="text"] {
display:none;
}

ul li.active__item input[type="text"] {
display:inline-block;
width:224px;
}
ul li.active__item label {
display:none;
}