Skip to content

Clean code s1e1 #156

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
wants to merge 16 commits into
base: master
Choose a base branch
from
Open

Clean code s1e1 #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3877981
refactor:
zhenyka9696 Apr 22, 2023
65abb9a
refactor(basic-1.1): tabs removed, spacebars added
zhenyka9696 Apr 22, 2023
fb54062
fix:there was no;
zhenyka9696 Apr 22, 2023
b897c3d
refactor(basic-1.2):upper case changed to lower case
zhenyka9696 Apr 23, 2023
e5fd793
refactor(basic-1.2):upper case changed to lower case one more time
zhenyka9696 Apr 23, 2023
dabf3c0
refactor(basic-1.2):upper case changed to lower case one more time...…
zhenyka9696 Apr 23, 2023
d467941
refactor(basic-1.3):single quotes changed to double quotes
zhenyka9696 Apr 23, 2023
385b70b
refactor:(basic-2.1): line breaks added
zhenyka9696 Apr 23, 2023
b2d9068
fix:(basic-2.2): document type changed
zhenyka9696 Apr 24, 2023
debbe78
fix:(basic-2.3): changing mnemonic symbol according UTF-8
zhenyka9696 Apr 24, 2023
b3a7e44
refactor:(basic-2.4): style and script style changed
zhenyka9696 Apr 24, 2023
b50112c
refactor:(basic-3.2): changing 'aaa' div name
zhenyka9696 Apr 24, 2023
928123c
refactor:(basic-3.4): simplifing tag and classes
zhenyka9696 Apr 24, 2023
10f5830
refactor:(basic-3.6): adding spacebars after properties
zhenyka9696 Apr 24, 2023
e6d0691
refactor:(basic-3.8): selectores divided
zhenyka9696 Apr 24, 2023
2e935d0
fix:(advanced-1.2): alts for media added
zhenyka9696 Apr 24, 2023
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
50 changes: 37 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,43 @@
<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>
<!DOCTYPE html>
<head>
<title>Todo App</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<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>
<div class="eisenhower-matrix"><img src="./eisenhower-matrix.jpg" alt="eisenhower-matrix">
<a class="more_inf" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details?;</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" alt="remove">
</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" alt="remove"></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" alt="remove"></button>
</li>
</ul>
</div>
<script type="text/javascript" SRC="app.js"></script>
<script src="app.js"></script>
</body>
</html>
164 changes: 83 additions & 81 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,148 +1,150 @@
/* Basic Style */
body {
background-color: #f8f8f8;
color: #333;
font-family: Lato, sans-serif;
background-color: #f8f8f8;
color: #333;
font-family: Lato, sans-serif;
}
.aaa {
width: 500px;
margin: 0 auto;
display: block;
text-align: right;
.eisenhower-matrix {
width: 500px;
margin: 0 auto;
display: block;
text-align: right;
}
.aaa img {
width: 100%;
.eisenhower-matrix img {
width: 100%;
}
.aaa .more_inf {
font-family: fantasy, cursive;
.eisenhower-matrix .more_inf {
font-family: fantasy, cursive;
}

@media (max-width:768px) {
.aaa { text-align: center;
.eisenhower-matrix { text-align: center;
}
}
.centered-main-page-element {
display: block;
width: 500px;
margin: 0 auto 0;
display: block;
width: 500px;
margin: 0 auto 0;
}
.task {
width: 56%;
display: inline-block;
flex-grow: 1
width: 56%;
display: inline-block;
flex-grow: 1
}
.task-row-wrapper {
display: flex;
display: flex;
}
ul {
margin:0;
padding: 0px;
margin: 0;
padding: 0px;
}
li, h3 {
list-style:none;
li,
h3 {
list-style: none;
}
input,button{
outline:none;
input,
button{
outline: none;
}
button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
font-family: Lato, sans-serif;
cursor: pointer;
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
font-family: Lato, sans-serif;
cursor: pointer;
}
button:hover {
color: #3a3A3a;
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;
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;
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;
color: #333;
}

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

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

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

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

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

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

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

ul li.editMode label {
display:none;
.editMode label {
display: none;
}