◐ Shell
reader mode source ↗
Skip to content
Merged

Styles and classes #296

Hide file tree
Changes from all commits
File filter
Conversations
Jump to
Diff view
Apply and reload
Show whitespace
Diff view
Apply and reload
2 changes: 1 addition & 1 deletion 2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html
View file Edit file Delete file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<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
Expand Down
2 changes: 1 addition & 1 deletion 2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html
View file Edit file Delete file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<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
Expand Down
18 changes: 9 additions & 9 deletions 2-ui/1-document/08-styles-and-classes/2-create-notification/task.md
View file Edit file Delete file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@ importance: 5

---

# Create a notification

Write a function `showNotification(options)` that creates 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.
Loading
Toggle all file notes Toggle all file annotations