Skip to content

Commit 3e33cd6

Browse files
iliakaniliakan
committed
up
1 parent 7019d14 commit 3e33cd6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+997
-222
lines changed

‎2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.md‎

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.view/index.html‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎2-ui/1-document/14-styles-and-classes/1-round-button-javascript/source.view/index.html‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎2-ui/1-document/14-styles-and-classes/1-round-button-javascript/task.md‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
z-index: 1000;
44
padding: 5px;
55
border: 1px solid black;
6-
font: normal 20px Georgia;
6+
font-size: 20px;
77
background: white;
88
text-align: center;
99
}
1010

1111
.welcome {
12-
background: red;
12+
background: #b80000;
1313
color: yellow;
14-
}
14+
}

‎2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.html‎

Lines changed: 15 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
<!DOCTYPE HTML>
22
<html>
3-
43
<head>
5-
<meta charset="utf-8">
64
<link rel="stylesheet" href="index.css">
75
</head>
86

97
<body>
108

11-
<h2>Уведомление</h2>
9+
<h2>Notification is on the right</h2>
1210

1311
<p>
1412
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum
@@ -17,49 +15,35 @@ <h2>Уведомление</h2>
1715
</p>
1816

1917
<script>
20-
/**
21-
* Показывает уведомление, пропадающее через 1.5 сек
22-
*
23-
* @param options.top {number} вертикальный отступ, в px
24-
* @param options.right {number} правый отступ, в px
25-
* @param options.cssText {string} строка стиля
26-
* @param options.className {string} CSS-класс
27-
* @param options.html {string} HTML-текст для показа
28-
*/
29-
function showNotification(options) {
18+
function showNotification({top = 0, right = 0, className, html}) {
3019

31-
var notification = document.createElement('div');
20+
let notification = document.createElement('div');
3221
notification.className = "notification";
33-
if (options.cssText) {
34-
notification.style.cssText = options.cssText;
35-
}
36-
notification.style.top = (options.top || 0) + 'px'; // can use cssText
37-
notification.style.right = (options.right || 0) + 'px'; // can use cssText
38-
if (options.className) {
39-
notification.classList.add(options.className);
22+
if (className) {
23+
notification.classList.add(className);
4024
}
4125

26+
notification.style.top = top + 'px';
27+
notification.style.right = right + 'px';
28+
4229
notification.innerHTML = options.html;
43-
document.body.appendChild(notification); // over cover
30+
document.body.append(notification);
4431

45-
setTimeout(function() {
46-
document.body.removeChild(notification);
47-
}, 1500);
32+
setTimeout(() => notification.remove(), 1500);
4833
}
4934

50-
// тест работоспособности
51-
var i = 0;
52-
setInterval(function() {
35+
// test it
36+
let i = 1;
37+
setInterval(() => {
5338
showNotification({
5439
top: 10,
5540
right: 10,
56-
html: 'Привет ' + ++i,
41+
html: 'Hello ' + i++,
5742
className: "welcome"
5843
});
5944
}, 2000);
6045
</script>
6146

6247

6348
</body>
64-
65-
</html>
49+
</html>

‎2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
z-index: 1000;
44
padding: 5px;
55
border: 1px solid black;
6-
font: normal 20px Georgia;
6+
font-size: 20px;
77
background: white;
88
text-align: center;
99
}
1010

1111
.welcome {
12-
background: red;
12+
background: #b80000;
1313
color: yellow;
14-
}
14+
}

‎2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.html‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,36 @@
11
<!DOCTYPE HTML>
22
<html>
3-
43
<head>
5-
<meta charset="utf-8">
64
<link rel="stylesheet" href="index.css">
75
</head>
86

97
<body>
108

11-
<h2>Уведомление</h2>
9+
<h2>Notification is on the right</h2>
1210

1311
<p>
1412
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum
1513
magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta
1614
temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
1715
</p>
1816

19-
<p>В CSS есть готовый класс notification, который можно ставить уведомлению.</p>
20-
2117
<script>
22-
/**
23-
* Показывает уведомление, пропадающее через 1.5 сек
24-
*
25-
* @param options.top {number} вертикальный отступ, в px
26-
* @param options.right {number} правый отступ, в px
27-
* @param options.cssText {string} строка стиля
28-
* @param options.className {string} CSS-класс
29-
* @param options.html {string} HTML-текст для показа
30-
*/
31-
function showNotification(options) {
32-
// ваш код
18+
function showNotification({top = 0, right = 0, className, html}) {
19+
/* your code */
3320
}
3421

35-
// тест работоспособности
36-
var i = 0;
37-
setInterval(function() {
22+
// test it
23+
let i = 1;
24+
setInterval(() => {
3825
showNotification({
3926
top: 10,
4027
right: 10,
41-
html: 'Привет ' + ++i,
28+
html: 'Hello ' + i++,
4229
className: "welcome"
4330
});
4431
}, 2000);
4532
</script>
4633

4734

4835
</body>
49-
50-
</html>
36+
</html>

‎2-ui/1-document/14-styles-and-classes/2-create-notification/task.md‎

Lines changed: 9 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,23 @@ importance: 5
22

33
---
44

5-
# Создать уведомление
5+
# Create a notification
66

7-
Напишите функцию `showNotification(options)`, которая показывает уведомление, пропадающее через 1.5 сек.
7+
Write a function `showNotification(options)` that a notification: `<div class="notification">` with the given content. The notification should automatically disappear after 1.5 seconds.
88

9-
Описание функции:
9+
The options are:
1010

1111
```js
12-
/**
13-
* Показывает уведомление, пропадающее через 1.5 сек
14-
*
15-
* @param options.top {number} вертикальный отступ, в px
16-
* @param options.right {number} правый отступ, в px
17-
* @param options.cssText {string} строка стиля
18-
* @param options.className {string} CSS-класс
19-
* @param options.html {string} HTML-текст для показа
20-
*/
21-
function showNotification(options) {
22-
// ваш код
23-
}
24-
```
25-
26-
Пример использования:
27-
28-
```js
29-
// покажет элемент с текстом "Привет" и классом welcome справа-сверху окна
12+
// shows an element with the text "Hello" near the right-top of the window
3013
showNotification({
31-
top: 10,
32-
right: 10,
33-
html: "Привет",
34-
className: "welcome"
14+
top: 10, // 10px from the top of the window (by default 0px)
15+
right: 10, // 10px from the right edge of the window (by default 0px)
16+
html: "Hello!", // the HTML of notification
17+
className: "welcome" // an additional class for the div (optional)
3518
});
3619
```
3720

3821
[demo src="solution"]
3922

40-
Элемент уведомления должен иметь CSS-класс `notification`, к которому добавляется класс из `options.className`, если есть. Исходный документ содержит готовые стили.
4123

24+
Use CSS positioning to show the element at given top/right coordinates. The source document has the necessary styles.

‎2-ui/1-document/14-styles-and-classes/article.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,6 @@ To change the styles:
290290

291291
- The `style.cssText` property corresponds to the whole `"style"` attribute, the full string of styles.
292292

293-
To read the resolved styles (after all CSS is applied and final values are calculated):
293+
To read the resolved styles (with respect to all classes, after all CSS is applied and final values are calculated):
294294

295295
- The `getComputedStyles(elem[, pseudo])` returns the style-like object with them. Read-only.

0 commit comments

Comments
 (0)