jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Ilya Kantor 2017-02-28 12:54:48 +03:00
parent 4272b7bb13
commit 508969c13f
168 changed files with 340 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

0
2-ui/1-document/08-styles-and-classes/2-create-notification/solution.md Normal file
View file

14
2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.css Executable file
View file

@ -0,0 +1,14 @@
.notification {
position: fixed;
z-index: 1000;
padding: 5px;
border: 1px solid black;
font-size: 20px;
background: white;
text-align: center;
}
.welcome {
background: #b80000;
color: yellow;
}

49
2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html Executable file
View file

@ -0,0 +1,49 @@
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h2>Notification is on the right</h2>
<p>
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
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
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.
</p>
<script>
function showNotification({top = 0, right = 0, className, html}) {
let notification = document.createElement('div');
notification.className = "notification";
if (className) {
notification.classList.add(className);
}
notification.style.top = top + 'px';
notification.style.right = right + 'px';
notification.innerHTML = options.html;
document.body.append(notification);
setTimeout(() => notification.remove(), 1500);
}
// test it
let i = 1;
setInterval(() => {
showNotification({
top: 10,
right: 10,
html: 'Hello ' + i++,
className: "welcome"
});
}, 2000);
</script>
</body>
</html>

14
2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.css Executable file
View file

@ -0,0 +1,14 @@
.notification {
position: fixed;
z-index: 1000;
padding: 5px;
border: 1px solid black;
font-size: 20px;
background: white;
text-align: center;
}
.welcome {
background: #b80000;
color: yellow;
}

36
2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html Executable file
View file

@ -0,0 +1,36 @@
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h2>Notification is on the right</h2>
<p>
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
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
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.
</p>
<script>
function showNotification({top = 0, right = 0, className, html}) {
/* your code */
}
// test it
let i = 1;
setInterval(() => {
showNotification({
top: 10,
right: 10,
html: 'Hello ' + i++,
className: "welcome"
});
}, 2000);
</script>
</body>
</html>

24
2-ui/1-document/08-styles-and-classes/2-create-notification/task.md Normal file
View file

@ -0,0 +1,24 @@
importance: 5
---
# Create a notification
Write a function `showNotification(options)` that a notification: `<div class="notification">` with the given content. The notification should automatically disappear after 1.5 seconds.
The options are:
```js
// shows an element with the text "Hello" near the right-top of the window
showNotification({
top: 10, // 10px from the top of the window (by default 0px)
right: 10, // 10px from the right edge of the window (by default 0px)
html: "Hello!", // the HTML of notification
className: "welcome" // an additional class for the div (optional)
});
```
[demo src="solution"]
Use CSS positioning to show the element at given top/right coordinates. The source document has the necessary styles.