couldntfindabetterusername
4 years ago
parent
6265acc064
commit
18b0851332
@ -0,0 +1,24 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>27 toast notification</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<span class="msg" id="button">Show Notification</span>
|
||||||
|
|
||||||
|
<div id="wrapper">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
const button = document.getElementById("button");
|
||||||
|
const wrapper = document.getElementById("wrapper");
|
||||||
|
|
||||||
|
let variable = 0;
|
||||||
|
|
||||||
|
button.addEventListener("click", () => {
|
||||||
|
const number = Math.ceil(Math.random() * 4);
|
||||||
|
|
||||||
|
const span = document.createElement("span");
|
||||||
|
span.classList.add("msg");
|
||||||
|
|
||||||
|
let text = "";
|
||||||
|
let color = "";
|
||||||
|
|
||||||
|
switch (number) {
|
||||||
|
case 1:
|
||||||
|
text = "Message One";
|
||||||
|
color = "blue";
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 2:
|
||||||
|
text = "Message two";
|
||||||
|
color = "green";
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 3:
|
||||||
|
text = "Message Three";
|
||||||
|
color = "red";
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
text = "Message Four";
|
||||||
|
color = "yellow";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.append(document.createTextNode(text));
|
||||||
|
span.style.color = color;
|
||||||
|
span.style.fontWeight = "500";
|
||||||
|
|
||||||
|
wrapper.append(span);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
span.remove();
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: violet;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.msg {
|
||||||
|
padding: 30px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#button {
|
||||||
|
color: violet;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wrapper {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
bottom: 20px;
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 20px;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue