Skip to content

Exoshiva/js-caesar-cipher-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Caesar Cipher Tool - UI/UX Refactoring

HTML5 CSS3 JavaScript Security

Ein klassisches Verschlüsselungs-Tool, das im Rahmen meiner Umschulung zum Fachinformatiker für Anwendungsentwicklung (FIAE) entstanden ist.

Dieses Projekt demonstriert nicht nur die logische Implementierung des Caesar-Algorithmus in JavaScript, sondern vor allem meine Initiative im Bereich Frontend-Design und Usability.


Motivation & Hintergrund

Die ursprüngliche Aufgabenstellung verlangte lediglich eine funktionale Umsetzung. Das vorgegebene Design entsprach jedoch nicht meinen Ansprüchen an Barrierefreiheit (Accessibility) und modernes UI-Design.

Aus Eigeninitiative habe ich das Frontend komplett überarbeitet (Refactoring), um eine bessere User Experience (UX) zu schaffen.

Visual Comparison (Vorher / Nachher)

Original (Schul-Standard) Mein Refactoring (Glassmorphism)
Schlechter Kontrast, unklare Führung Klarer Fokus, Modern CSS, Intuitive Bedienung

Tech Stack & Features

  • HTML5: Semantische Struktur.
  • CSS3 (Modern): * Glassmorphism: Nutzung von backdrop-filter: blur() und halbtransparenten Farben für einen modernen Cyber-Look.
    • Flexbox: Für responsive Zentrierung und Layout.
    • Variables: Konsistentes Farbschema.
  • JavaScript (Vanilla): * Modulare Funktionen für Verschlüsselung/Entschlüsselung.
    • Event-Handling für Interaktionen.
    • Dynamische DOM-Manipulation.

Key Learnings

  • UI/UX Design: Wie stark Farben und Abstände (Whitespace) die Bedienbarkeit beeinflussen.
  • CSS Specificity: Gezieltes Überschreiben von Standard-Browser-Styles.
  • Best Practices: Trennung von Logik (JS) und Design (CSS).

Sicherheitshinweis

Der Caesar-Chiffre ist eine symmetrische Verschlüsselung, die nicht sicher ist und sehr leicht geknackt werden kann. Dieses Tool dient rein zu Bildungszwecken, um grundlegende kryptographische Konzepte zu verstehen.


Kontakt

Lars (Exoshiva) Fachinformatiker Anwendungsentwicklung in Ausbildung GitHub Profil

About

No description or website provided.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors