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.

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

Jump to bottom

Clean code S1E1 #145

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Clean code S1E1 #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
7c91c15
refactor: change formatting according to formatting rule 2.1 and 1.1 …
Telezhniy Apr 22, 2023
c43ac24
refactor: change formatting according to formatting rule 3.5 and 1.1
Telezhniy Apr 23, 2023
fe0c55b
refactor: change formatting according to formatting rule 3.6
Telezhniy Apr 23, 2023
ef78031
refactor: change formatting according to formatting rule 3.7
Telezhniy Apr 23, 2023
148a16e
refactor: change formatting according to formatting rule 3.8
Telezhniy Apr 23, 2023
ce0fc10
refactor: change formatting according to formatting rule 3.5
Telezhniy Apr 23, 2023
84f7c25
fix: change tags according to advance rule 1.1
Telezhniy Apr 24, 2023
0302c26
refactor: update HTML and CSS according to rule 1.3
Telezhniy Apr 24, 2023
e4bdc8c
fix: add Html DOCTYPE tag according to rule 2.2
Telezhniy Apr 24, 2023
3d30337
refactor: update html according to rule 1.2
Telezhniy Apr 24, 2023
a9c8130
refactor: update HTML according to rule 2.4
Telezhniy Apr 24, 2023
6695634
refactor: update HTML according to advanced rule 1.2
Telezhniy Apr 24, 2023
12ddfc1
refactor: update HTML according to BEM
Telezhniy Apr 24, 2023
4eb8509
refactor: update CSS and HTML according to rules 1.1 advanced, 3.3, 3…
Telezhniy 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
6 changes: 3 additions & 3 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
// Event handling, user interaction is what starts the code execution.

var taskInput=document.getElementById("new-task");//Add a new task.
var addButton=document.getElementsByTagName("button")[0];//first button
var incompleteTaskHolder=document.getElementById("incompleteTasks");//ul of #incompleteTasks
var addButton=document.getElementsByClassName("btn")[0];//first button
var incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incompleteTasks
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks


Expand Down Expand Up @@ -38,7 +38,7 @@ var createNewTaskElement=function(taskString){
//Each elements, needs appending
checkBox.type="checkbox";
editInput.type="text";
editInput.className="task";
editInput.className="text";

editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
editButton.className="edit";
Expand Down
71 changes: 54 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,56 @@
<!DOCTYPE html>
<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>
<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" MEDIA="screen" charset="utf-8">
</head>
<body class="body">
<section class="header">
<img class="header__img img" src="./eisenhower-matrix.jpg" alt="tasks plan">
<a class="header__link" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details&quest;</a>
</section>
<main class="main">
<article class="newTasks" id="addElement">
<label class="newTask--label task" for="newTask">Add Item</label>
<div class="newTask__wrapper">
<input id="new-task" class="newTask__input task input" type="text">
<button class="newTask__button btn" >Add</button>
</div>
</article>
<h3 class="title">Todo</h3>
<ul class="task__list" id="incomplete-tasks">
<li class="item task__item--incomplete">
<input class="incomplete__checkbox input outline" type="checkbox">
<label class="incomplete__task task outline">Pay Bills</label>
<input type="text" class="incomplete__task outline text input">
<button class="incomplete__edit btn">Edit</button>
<button class="incomplete__delete btn">
<img class="incomplete__img img" src="./remove.svg" alt="remove button"></button>
</li>
<li class="item task__item--edit">
<input class="edit__checkbox input outline" type="checkbox">
<label class="task edit__label">Go Shopping</label>
<input type="text" value="Go Shopping" class="edit__task text input outline">
<button class="edit__button btn">Save</button>
<button class="edit__delete btn">
<img class="edit__img img" src="./remove.svg" alt="remove button">
</button>
</li>
</ul>
<h3 class="title">Completed</h3>
<ul class="complete__list" id="completed-tasks">
<li class="item complete__item">
<input class="complete__checkbox input outline" type="checkbox" checked>
<label class="task complete__label">See the Doctor</label>
<input class="complete__text text input outline" type="text">
<button class="complete__edit btn">Edit</button>
<button class="complete__delete btn">
<img class="complete__img img" src="./remove.svg" alt="remove button">
</button>
</li>
</ul>
</main>
<script src="app.js"></script>
</body>
</html>
228 changes: 118 additions & 110 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,148 +1,156 @@
/* Basic Style */
body {
background-color: #f8f8f8;
color: #333;
font-family: Lato, sans-serif;
.body {
background-color: #f8f8f8;
color: #333;
font-family: Lato, sans-serif;
}
.aaa {
width: 500px;
margin: 0 auto;
display: block;
text-align: right;
.header {
width: 500px;
margin: 0 auto;
display: block;
text-align: right;
}
.aaa img {
width: 100%;
.header
.img {
width: 100%;
}
.aaa .more_inf {
font-family: fantasy, cursive;
.header
.more_inf {
font-family: fantasy, cursive;
}

@media (max-width:768px) {
.aaa { text-align: center;
@media (max-width: 768px) {

.header { text-align: center;
}

}
.centered-main-page-element {
display: block;
width: 500px;
margin: 0 auto 0;
.main {
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;
width: 56%;
display: inline-block;
flex-grow: 1;
}
.newTask__wrapper {
display: flex;
}
.task__list
.complete__list{
margin: 0;
padding: 0px;
}
.item
.title{
list-style: none;
}
.outline
.btn
{
outline: none;
}
.btn {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
font-family: Lato, sans-serif;
cursor: pointer;
}
.btn: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;
.title
.newTask {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 0;
text-transform: uppercase;
}
.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:focus {
color: #333;
}

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

/* Task list */
li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
.item {
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;
.item > * {
vertical-align: middle;
}

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

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

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

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

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