x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-04-11 01:27:50 +03:00 committed by GitHub
parent 50e8a2805d
commit 0954efce19
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 70 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
100_projects/49-test-notification-click/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Notifaction</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div id="container"></div>
<button id="btn">Click Here Please</button>
</body>
</html>

18
100_projects/49-test-notification-click/script.js Normal file
View File

@ -0,0 +1,18 @@
const btn = document.getElementById("btn");
const container = document.getElementById("container");
btn.addEventListener("click", () => {
createNotification();
});
function createNotification() {
const notification = document.createElement("div");
notification.classList.add("test");
notification.innerText = "Warning..";
container.appendChild(notification);
setTimeout(() => {
notification.remove();
}, 3000);
}

38
100_projects/49-test-notification-click/style.css Normal file
View File

@ -0,0 +1,38 @@
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background-color: #161622;
}
button {
background-color:#808080;
color: white;
font-size: 19px;
padding: 1rem;
border-radius: 5px;
border: none;
cursor: pointer;
transition: .5s;
}
button:hover{
background: white;
color: #161622;
}
#container {
position: fixed;
bottom: 10px;
right: 10px;
}
.test {
background-color: #F20A15;
border-radius: 5px;
color: white;
padding: 15px;
margin: 10px;
width: 100px;
}