Мне нужно создать тост-уведомление, используя HTML / CSS / JAVACRIPT (в основном ES6 js). Когда я ввожу текст в поле и нажимаю на одну из 3 кнопок, на нем должно отображаться уведомление о тосте с моим сообщением (изменение цвета для различения, другое уведомление).
Они также должны наращиваться при многократном нажатии. пример: https://codeseven.github.io/toastr/demo.html
Я знаю, что я тестировал с предупреждением в своем коде, но это не то, что я хочу, я действительно хочу, чтобы уведомление скользило откуда-то.
Так что я в некотором роде заблудился, как сделать так, кто-нибудь может помочь?
Огромное спасибо, спасибо!
HTML:
</html>
<head>
<meta charset="utf-8" />
<title>Toast Notification</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="text" placeholder="Grille pain" id="myInput">
<button type="button" value="Error">Error</button>
<button type="button" value="Success">Success</button>
<button type="button" value="Info">info</button>
<div id="toast">
</div>
<script src="toast.js"></script>
</body>
CSS (НЕТ ДА)
JAVASCRIPT:
const button = document.querySelector('button');
toast = () =>{
const inputVal = document.getElementById("myInput").value;
alert(inputVal);
}
button.addEventListener('click', toast);