Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styles and classes #433

Merged
merged 2 commits into from
Jun 1, 2024
Merged

Styles and classes #433

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3650fe9
docs: translates `styles and classes` article
danilolmc May 7, 2024
d9ed66d
refactor: corrects syntax errors
jonnathan-ls Jun 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions 2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html
View 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>
<h2>A notificação está à direita</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 All @@ -32,14 +32,14 @@ <h2>Notification is on the right</h2>
setTimeout(() => notification.remove(), 1500);
}

// test it
// teste-a
let i = 1;
setInterval(() => {
showNotification({
top: 10,
right: 10,
html: 'Hello ' + i++,
className: "welcome"
html: 'Olá ' + i++,
className: "bem-vindo"
});
}, 2000);
</script>
Expand Down
10 changes: 5 additions & 5 deletions 2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html
View 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>
<h2>A notificação está è direita</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 All @@ -16,17 +16,17 @@ <h2>Notification is on the right</h2>

<script>
function showNotification({top = 0, right = 0, className, html}) {
/* your code */
/* seu código*/
}

// test it
// teste-a
let i = 1;
setInterval(() => {
showNotification({
top: 10,
right: 10,
html: 'Hello ' + i++,
className: "welcome"
html: 'Olá ' + i++,
className: "bem-vindo"
});
}, 2000);
</script>
Expand Down
19 changes: 9 additions & 10 deletions 2-ui/1-document/08-styles-and-classes/2-create-notification/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,22 @@ importance: 5

---

# Create a notification
# Crie uma notificação

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.
Escreva uma função `showNotification(options)` que cria uma notificação: `<div class="notification">` com o conteúdo especificado. A notificação deve desaparecer automaticamente depois de 1.5 segundos.

The options are:
As opções são:

```js
// shows an element with the text "Hello" near the right-top of the window
// mostra um elemento com o texto "Olá" próximo ao canto superior direito da janela
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)
top: 10, // 10px a partir do topo da janela (por padrão 0px)
right: 10, // 10px a partir da borda a direita da janela (por padrão 0px)
html: "Olá!", // o HTML da notificação
className: "bem-vindo" // uma classe adicional para a div (opcional)
});
```

[demo src="solution"]


Use CSS positioning to show the element at given top/right coordinates. The source document has the necessary styles.
Utilize posicionamento com CSS para mostrar o elemento nas coordenadas superiores/direitas especificadas. O documento fonte possui os estilos necessários.
Loading