We use cookies to enhance your experience on the site

Project: Interactive NOVA LAB Hologram Panel

Time for the final project! In the NOVA LAB Hologram Workshop you'll combine all the Vue template techniques you've learned in this module. You'll build a fully interactive hologram management panel for the space station - from displaying data, through filtering and styling, to event handling and direct DOM manipulation.

Module Summary

In this module you learned:

Interpolation
{{ }}
- displaying reactive data and JavaScript expressions in templates. Remember the limitations: only expressions, not statements.
v-bind (
:
) - dynamic HTML attribute binding:
```
:src
```
,
```
:class
```
,
```
:style
```
,
```
:disabled
```
. The shorthand syntax
```
:
```
is the standard.
v-on (
@
) - handling user events:
```
@click
```
,
```
@submit
```
,
```
@keyup
```
. Modifiers like
```
.prevent
```
,
```
.stop
```
,
```
.once
```
simplify common operations.
Class and style binding - object syntax (
```
:class="{ active: isActive }"
```
), array syntax (
```
:class="[classA, classB]"
```
) and inline style binding.
v-if / v-else-if / v-else / v-show - conditional rendering.
```
v-if
```
adds/removes from DOM,
```
v-show
```
only toggles
```
display
```
.
v-for - list rendering with
```
:key
```
, iteration over arrays and objects, avoiding
```
v-for
```
with
```
v-if
```
on the same element.
Template Refs - direct DOM element access through
```
ref
```
, function refs, refs on components with
```
defineExpose
```
.
v-html - rendering raw HTML (beware of XSS!).

Project Requirements

Build a Hologram Control Panel that includes:

1. Hologram list with v-for

Display a list of station holograms. Each hologram has a name, type (e.g., "navigation", "diagnostic", "communication") and status (active/inactive). Use

:key

with a unique ID.

2. Filtering with v-if

Add three filter buttons: "All", "Active", "Inactive". Based on the selected filter, show the appropriate holograms. Use a computed property to filter the list.

3. Dynamic classes and styles

Use

:class

so that active holograms have a green border (

border-color: #00ff88

), and inactive ones have a red border (

border-color: #ff4444

). Add a neon glow effect (

box-shadow

) for active elements.

4. Event handling

Clicking a hologram toggles its status (active/inactive)
An "Add hologram" button adds a new element to the list with a random name
A "Remove last" button removes the last element from the list
Display a counter: "X active out of Y total"

5. Template Ref

Use

ref

to automatically scroll the list container to the bottom after adding a new hologram, so the new element is visible.

Expand the starter below with all the required features!

Go to CodeWorlds→