Skip to content

Commit af8484b

Browse files
alvar91alvar91
committed
done
0 parents  commit af8484b

File tree

3 files changed

+238
-0
lines changed

3 files changed

+238
-0
lines changed

‎bootstrap.min.css

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Модуль 10</title>
7+
<link rel="stylesheet" href="bootstrap.min.css">
8+
<script src="main.js" defer></script>
9+
</head>
10+
<style>
11+
.hide {
12+
display: none;
13+
}
14+
15+
.title {
16+
margin: 0 auto;
17+
}
18+
19+
.textblock {
20+
width: 100%;
21+
margin: 0 auto;
22+
outline: none;
23+
}
24+
25+
p {
26+
margin: 0;
27+
}
28+
29+
.history p:hover {
30+
cursor: pointer;
31+
}
32+
</style>
33+
34+
<body>
35+
<div class="container">
36+
<div class="row">
37+
<div class="col-12">
38+
<div class="title text-center">
39+
<h2>
40+
Редактирование текста
41+
</h2>
42+
</div>
43+
</div>
44+
</div>
45+
<div class="row">
46+
<div class="col-7">
47+
<div class="textblock">
48+
<p>
49+
Каждый идет своим путем. Но все дороги всё равно идут в никуда. Значит, весь смысл в самой дороге, как по
50+
ней идти… Если идешь с удовольствием, значит, это твоя дорога. Если тебе плохо – в любой момент можешь сойти
51+
с нее, как бы далеко ни зашел. И это будет правильно.
52+
</p>
53+
<br>
54+
<p>
55+
– Ты слишком серьезно себя принимаешь, – сказал он медленно. – ты слишком чертовски важен в своих
56+
собственных глазах. Это должно быть изменено! Ты так чертовски важен, что ты чувствуешь себя вправе
57+
раздражаться всем. Ты так чертовски важен, что ты можешь себе позволить уйти, если вещи не складываются так,
58+
как тебе бы хотелось. Я полагаю, ты думаешь, все это показывает, что ты имеешь характер. Это чепуха! Ты слаб
59+
и мнителен! Я попытался изобразить протест, но он не поддался. Он указал, что за всю мою жизнь я никогда
60+
ничего не закончил из-за чувства неуместной важности, которую я связал с самим собой.
61+
</p>
62+
</div>
63+
</div>
64+
<div class="col-5">
65+
<div class="history">
66+
<p>Вернуться к исходному тексту</p>
67+
</div>
68+
</div>
69+
</div>
70+
<div class="row">
71+
<div class="col-7 offset-5">
72+
<button class="cancel hide btn btn-primary">Отмена</button>
73+
<button class="save hide btn btn-primary">Сохранить</button>
74+
<button class="edit btn btn-primary">Изменить</button>
75+
</div>
76+
</div>
77+
</div>
78+
</body>
79+
80+
</html>

‎main.js

+151
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
"use strict";
2+
3+
var btns = document.body.getElementsByTagName("button");
4+
// 0 - отменить, 1 - сохранить, 2 - изменить
5+
var textBlock = document.querySelector(".textblock");
6+
7+
//создаем объект для localStorage
8+
var d = new Date();
9+
var obj = {
10+
id: 0,
11+
text: textBlock.innerHTML,
12+
date: formatDate(d),
13+
};
14+
15+
var log = document.querySelector(".history");
16+
17+
var serialObj = JSON.stringify(obj);
18+
19+
// если длина localStorage < 1, добавляем в него первоначальный текст,
20+
// если больше тогда добавляем все имеющиеся записи в localStorage
21+
if (localStorage.length < 1) {
22+
localStorage.setItem("firstText", serialObj);
23+
} else {
24+
for (var i = 1; i < localStorage.length; i++) {
25+
var addLog = document.createElement("p");
26+
var logdate = JSON.parse(localStorage["text " + i]);
27+
addLog.innerHTML = "text " + i + " - " + logdate.date;
28+
log.appendChild(addLog);
29+
}
30+
}
31+
32+
//создаем обработчик для логов
33+
log.onclick = function (e) {
34+
var index = [].slice.call(this.children).indexOf(e.target);
35+
if (index > 0) {
36+
var post = JSON.parse(localStorage["text " + index]);
37+
textBlock.innerHTML = post.text;
38+
}
39+
};
40+
41+
// код кнопки "изменить"
42+
btns[2].onclick = function () {
43+
textBlock.setAttribute("contenteditable", true);
44+
this.classList.add("hide");
45+
btns[1].classList.remove("hide");
46+
btns[0].classList.remove("hide");
47+
};
48+
49+
//код кнопки "отменить"
50+
btns[0].onclick = function () {
51+
//убирает кнопки и редактируемость
52+
textBlock.setAttribute("contenteditable", false);
53+
this.classList.add("hide");
54+
btns[1].classList.add("hide");
55+
btns[2].classList.remove("hide");
56+
// код для возвращения последней версии из localStorage
57+
var lastBlock = Math.max(localStorage.length) - 1;
58+
let post = JSON.parse(localStorage["text " + lastBlock]);
59+
textBlock.innerHTML = post.text;
60+
};
61+
62+
//код кнопки "сохранить"
63+
btns[1].onclick = function () {
64+
//сохраняет новую версию в localStorage
65+
var length = localStorage.length;
66+
let d = new Date();
67+
for (var i = 0; i <= length; i++) {
68+
obj.id = i;
69+
obj.text = textBlock.innerHTML;
70+
obj.date = formatDate(d);
71+
if (i == length) {
72+
var addLog = document.createElement("p");
73+
log.appendChild(addLog);
74+
addLog.innerHTML = "text " + i + " - " + obj.date;
75+
localStorage["text " + i] = JSON.stringify(obj);
76+
}
77+
}
78+
//убирает кнопки и редактируемость
79+
textBlock.setAttribute("contenteditable", false);
80+
this.classList.add("hide");
81+
btns[0].classList.add("hide");
82+
btns[2].classList.remove("hide");
83+
};
84+
85+
//код для возврата к изначальному тексту
86+
var baseText = document.querySelector(".history p");
87+
88+
baseText.onclick = function () {
89+
var post = JSON.parse(localStorage["firstText"]);
90+
textBlock.innerHTML = post.text;
91+
};
92+
93+
//формат даты
94+
function formatDate(date) {
95+
var getMonthsName = function () {
96+
var months = [
97+
"января",
98+
"февраля",
99+
"марта",
100+
"апреля",
101+
"мая",
102+
"июня",
103+
"июля",
104+
"августа",
105+
"сентября",
106+
"октября",
107+
"ноября",
108+
"декабря",
109+
];
110+
return months[date.getMonth()];
111+
};
112+
113+
var getDaysName = function () {
114+
var days = [
115+
"воскресенье",
116+
"понедельник",
117+
"вторник",
118+
"среда",
119+
"четверг",
120+
"пятница",
121+
"суббота",
122+
];
123+
return days[date.getDay()];
124+
};
125+
126+
function declOfNum(number, titles) {
127+
var cases = [2, 0, 1, 1, 1, 2];
128+
return titles[
129+
number % 100 > 4 && number % 100 < 20
130+
? 2
131+
: cases[number % 10 < 5 ? number % 10 : 5]
132+
];
133+
}
134+
135+
return (
136+
" " +
137+
date.getDate() +
138+
" " +
139+
getMonthsName() +
140+
" " +
141+
date.getFullYear() +
142+
" года, " +
143+
getDaysName() +
144+
", " +
145+
date.getHours() +
146+
":" +
147+
date.getMinutes() +
148+
":" +
149+
date.getSeconds()
150+
);
151+
}

0 commit comments

Comments
 (0)