Startup Name Generator

Aufgabenstellung

Erstelle eine Applikation, die auf Knopfdruck Namen für dein zukünftiges Startup generiert.

Die möglichen Startup-Namen setzen sich immer aus zwei zufällig generierten Teilen zusammen (Präfix + Suffix), also zum Beispiel [Digi][tec].

Lösungsschritte

Template erstellen

• Erstelle im Vue Playground das HTML und CSS für die Applikation wie im Screenshot oben aufgezeigt. Lege nicht zu viel Wert auf die Gestaltung. Hauptsache ist, die dargestellten Elemente (Überschrift, ??? Platzhalter und der Name generieren Button) sind vorhanden.

name Variable erstellen

• Erstelle eine neue name Variable im <script setup> Teil deiner Applikation. Gib ihr den Wert ??? und ersetze den Platzhalter im <template> Teil mit der Variable.

generate() Funktion erstellen

Beim Klick auf den Button soll eine generate() Funktion aufgerufen werden, die den Wert deiner name Variable mit einem Startup-Namen ersetzt.

• Erstelle diese Funktion und sorge dafür, dass sie beim Klick auf den Button aufgerufen wird.

Du kannst in der generate Funktion vorerst den Wert der name Variable einfach auf einen beliebigen Text abändern um zu überprüfen, ob alles funktioniert.

generate() Funktion implementieren

Die generate() Funktion soll wie folgt funktionieren:

1. Aus einem prefixes Array soll ein zufälliges Element ausgewählt werden.

2. Aus einem suffixes Array soll ein zufälliges Element ausgewählt werden.

3. Die beiden ausgewählten Elemente ergeben aneinandergesetzt dein Startup-Namen. Setze diesen als neuen Wert der name Variable.

Du kannst die folgenden beiden prefixes und suffixes Arrays in deine Applikation kopieren.

• Die generate Funktion musst du selber implementieren. Nutze eine Suchmaschine um herauszufinden, wie man ein zufälliges Element aus einem Array auswählt.

const prefixes = [
  'Hype',
  'Biz',
  'Lolz',
  'Rofl',
  'Galaxy',
  'Biz',
  'Fan',
  'Buzz',
  'Real',
  'Solid',
  'Inter',
  'Active',
  'Swoosh',
]

const suffixes = [
  'park',
  'span',
  'cloud',
  'loop',
  'verse',
  'layer',
  'er',
  'r',
  'dot',
  'dock',
  'space',
  'yard',
  'scale',
  'signal',
  'press',
  'ware',
  'port',
]