Компонент, показывающий сообщения пользователям при загрузке данных на сервер

@Whitecolor · Регистрация: 10.03.2012

Студворк — интернет-сервис помощи студентам

Необходимо реализовать компонент "NotificationMessage" цель которого показывать сообщения пользователям. Сообщения могут быть двух типов: "success" и "error" и будут отличаться визуально. К примеру, при успешной загрузке данных на сервер будет показано сообщений типа "success", при возникновении какой-либо ошибки пользователя можно будет предупредить с помощью сообщения типа "error". Также, данный компонент должен обладать функционалом, который скроет сообщение автоматически через некоторый промежуток времени.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<meta charset="UTF-8">
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<button id="btn1">Show simple message!</button>
<script type="module">
  import NotificationMessage from './index.js';
  btn1.addEventListener('click', () => {
    const notification = new NotificationMessage('Hello World', {
      duration: 2000,
      type: 'success'
    });
    notification.show();
  });
</script>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<meta charset="UTF-8">
<title>Notification</title>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
  <div style="position: fixed; top: 0; right: 0;">
    <button id="btn1">Show simple message!</button>
  </div>
  <div class="notification success" style="--value:20s">
    <div class="timer"></div>
    <div class="inner-wrapper">
      <div class="notification-header">success</div>
      <div class="notification-body">
        Hello world
      </div>
    </div>
  </div>
</body>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
body {
  font-family: 'Source Sans Pro', sans-serif;
}
 
:root {
  --blue: #109cf1;
  --dark-blue: #334d6e;
  --light-blue: #cfebfc;
  --middle-blue: #9fd7f9;
  --yellow: #ffb946;
  --red: #f7685b;
  --green: #2ed47a;
  --purple: #885af8;
  --black: #192a3e;
  --table-black: #323c47;
  --table-grey: #707683;
  --grey: #90a0b7;
  --grey-light: #c2cfe0;
  --grey-extra-light: #eff1f4;
  --grey-skeleton: #f5f6f8;
  --grey-middle: #e0e4eb;
  --white: #ffffff;
}
 
/* NotificationMessage styles */
.notification {
  width: 200px;
  margin: 10px 5px;
  font-size: 14px;
  box-shadow: 0 2px 4px 1px rgba(0, 0, 0, .5);
  border-radius: 2px;
  animation: calc(var(--value) * 0.1) ease-out calc(var(--value) * 0.9) fadeOut;
  z-index: 1000;
}
 
/* Success */
.notification.success {
  background: #cdfccd;
}
 
.notification.success .timer {
  background: #86aa86;
}
 
/* Error */
.notification.error {
  background: #ffe3e3;
}
 
.notification.error .timer {
  background: #c28585;
}
 
.inner-wrapper {
  padding: 5px;
}
 
.timer {
  width: 100%;
  height: 2px;
  animation: progress var(--value) linear;
}
 
.notification-header {
  text-transform: capitalize;
  font-size: 12px;
}
 
.notification-body {
  font-weight: bold;
}
 
@keyframes fadeOut {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 0;
  }
}
 
@keyframes progress {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}

@Splaisto · 13.04.2023, 13:16

вопрос в чем?

krvsa · 13.04.2023, 13:40

Не по теме:

Сообщение от Splaisto

вопрос в чем?

Это задание... ;)

@gogolik · 13.04.2023, 14:04

Не по теме:

Splaisto, не надоело в каждой теме спрашивать "в чём вопрос?" :D

@Splaisto · 13.04.2023, 14:13

Сообщение от gogolik

не надоело в каждой теме спрашивать "в чём вопрос?"

Не по теме:

ну, кто-то же должен это делать) и по другому писать ты мне сам запретил...:(
З.Ы.: у вас в оффтопе смайлы не отрисовывает

@Whitecolor · 20.04.2023, 11:00 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
class NotificationMessage {
  INITIAL_DURATION = 1000
  timerId;
  static activeNotification;
 
  constructor(message = '', {type = 'success', duration = this.INITIAL_DURATION} = {}) {
    this.message = message;
    this.type = type;
    this.duration = duration;
    this.render();
  }
 
  render() {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = `
      <div class="notification">
        <div class="timer"></div>
        <div class="inner-wrapper">
          <div class="notification-header">${this.type}</div>
          <div class="notification-body">
            ${this.message}
          </div>
        </div>
      </div>`;
    wrapper.firstElementChild.classList.add(this.type);
    wrapper.firstElementChild.style.setProperty('--value', `${this.duration / 1000}s`);
    this.element = wrapper.firstElementChild;
  }
 
  show(element) {
    if (NotificationMessage.activeNotification) {
      NotificationMessage.activeNotification.remove();
    }
    if (element) {
      this.element = element;
    }
    document.body.prepend(this.element);
    this.timerId = setTimeout(() => this.remove(), this.duration);
    NotificationMessage.activeNotification = this;
  }
 
  remove() {
    if (this.timerId) {
      clearTimeout(this.timerId);
    }
    this.element.remove();
  }
 
  destroy() {
    this.message = '';
    this.type = 'success';
    this.duration = this.INITIAL_DURATION;
    this.timerId = null;
    NotificationMessage.activeNotification = null;
    this.remove();
  }
}

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Splaisto 250 / 184 / 58 Регистрация: 12.03.2021 Сообщений: 1,043
	13.04.2023, 13:16
	вопрос в чем? 0

@gogolik
	13.04.2023, 14:04
	Не по теме: Splaisto, не надоело в каждой теме спрашивать "в чём вопрос?" :D 0