@ Welcome on my new webpage jkliment.cz

// Interactive target income calculator

>> What the Code Does

> UI Management: Renders a responsive, dark-mode single-page interface using plain HTML and CSS. Handles dynamic DOM manipulation, allowing users to seamlessly add, configure, and remove expense rows with category and frequency dropdowns.

> Financial Math & Logic: Normalizes expenses across different time frequencies (monthly, quarterly, bi-annually, annually) into a unified monthly baseline. Applies the 50/30/20 budgeting rule to reverse-engineer the ideal net and gross income. Calculates required hourly rates based on user-defined work hours.

> Tax Engine (CZ): Computes real-world Czech employee payroll deductions, including social security (7.1%), health insurance (4.5%), income tax (15%), and standard taxpayer discounts.

> Data Processing & Storage: Serializes application state into JSON for local export. Uses the FileReader API to parse and import external `.json` files, ensuring backward compatibility with legacy data structures by automatically assigning default categories.

> Comparative Analysis: Evaluates the calculated ideal baseline against the user's actual current income, mathematically determining financial surplus, deficit, and the real percentage load of essential expenses.

>> What the Outputs Are

> Visual: A clean, grid-based dashboard displaying categorized financial results. Utilizes color-coded typography (success/green, warning/yellow, danger/red) to instantly communicate financial health and highlight critical deficits.

> Text / Data: A comprehensive breakdown of required gross/net income, hourly rates, 50/30/20 distribution, tax deductions, and a grouped summary of expenses by category (Housing, Food, Transport, etc.).

> System Actions: Generates downloadable `.json` files directly in the browser via Blob URLs for offline data persistence, and reads local files dynamically without requiring any server-side processing or database.

// Interactive random picker and roulette with integrated state management

>> What the Code Does

> UI Management: Renders a responsive interface with a Matrix aesthetic, custom block cursor, and dynamic configuration panels. Intercepts and isolates specific keydown events (Space, R) to prevent accidental wheel spins while typing in input fields.

> Canvas Rendering & Math: Uses the HTML5 Canvas API to draw a dynamically scaled, segmented wheel with gradients, glowing borders, and adaptive typography. Applies modulo 2π angle normalization, trigonometry for slice calculation, and cubic easing (easeOutCubic) for realistic spin deceleration.

> State & Storage: Persists application state (item list, selected color theme, current rotation, and result history) directly in the browser's localStorage.

> Automatically handles the lifecycle of winning items (tagging them as used in history and removing them from the active pool after acknowledgment).

> Input Processing: Sanitizes raw multiline text input, stripping whitespace, ignoring empty lines, and capping the data pool at 200 distinct items. Adjusts animation duration and rotation count based on the system's prefers-reduced-motion settings.

>> What the Outputs Are

> Visual: An animated 2D canvas roulette with three toggleable color themes (classic, neon, pastel), smooth spin animations, and a frosted-glass overlay displaying the final result.

> Text / Data: A real-time chronological history log populated with drawn items and status badges (e.g., "Used"). Dynamically updates the raw text area string when a winning item is removed from the rotation.

> System Actions: Writes JSON-serialized session data to local storage and automatically recalculates canvas pixel density (devicePixelRatio) via ResizeObserver for crisp rendering across different displays.

// Web-based terminal emulator (Vertex Terminal) with integrated tools

>> What the Code Does

> UI Management: Handles keyboard input, renders command history into the DOM with a Matrix aesthetic, and auto-scrolls to the newest line.

> Manages responsiveness, virtual keyboard behavior, and focus retention across mobile and desktop devices.

> Command Parsing: Splits raw user input into a main command and arguments, executing specific logic blocks via a switch statement.

> Local Operations: Processes data directly in the client's browser—performing math calculations, hashing (SHA-256 via Crypto API), base conversions, Base64 encoding, text manipulation (Morse code, URL slugs, regex), and password generation/analysis.

> Network Communication: Asynchronously fetches data from external REST APIs (IP addresses, weather, GitHub profiles, crypto prices, dictionary definitions, and generic GET requests).

>> What the Outputs Are

> Visual: Color-formatted text lines appended to the HTML structure (e.g., red errors, green Matrix text, blue data results).

> Text: Processed raw data displayed on the screen (pretty-printed JSON, decoded URLs, binary strings, hashes, word count statistics).

> System Actions: Real-time global CSS variable updates (theme switching) and device hardware triggers (device vibration upon timer completion).

//New app for generating QR codes

>> What the Code Does

> UI Management: Switches between form tabs for different QR types and auto-fills demo data for testing.

> Data Formatting: Converts user inputs into standardized text formats required for QR codes (e.g., WIFI:..., mailto:..., BEGIN:VCARD...)

> Rendering: Generates the visual QR code using a local JavaScript library on an HTML canvas. If the library is blocked (e.g., by AdBlock), it safely falls back to fetching an image from an external API.

> Exporting: Handles button clicks to download, copy, or natively share the final QR code.

>> What the Outputs Are

> Visual: The QR code displayed on the screen (Canvas or Image).

> Text: The raw, formatted data string shown in a preview box.

> Files: Downloadable .png or .svg files of the QR code.

> System Actions: Text copied to the clipboard or images sent to the device's native sharing menu.

//New app for counting words, characters, paragraphs and spaces

>> What the Code Does

> Real-Time Analysis: Instantly processes text as the user types, calculating multiple metrics simultaneously without needing to click a "calculate" button.

> Smart Parsing: Uses regular expressions (RegEx) to accurately distinguish and count complex elements like paragraphs (separated by empty lines) and sentences (ending in ., !, or ?).

> Customizable Counting: Allows users to toggle specific rules, such as trimming extra spaces or ignoring newlines, which adjusts how the word count is calculated.

> Auto-Save / Memory: Automatically saves the typed text to the browser's localStorage with every keystroke, ensuring the user doesn't lose their text if they accidentally refresh or close the page.

>> What the Outputs Are

> Statistical Metrics: Six live numerical outputs displayed on the screen: Total Characters, Characters (no spaces), Words, Lines, Sentences, and Paragraphs

> System Actions: Copies the text to the user's clipboard (with a fallback method for older browsers) and triggers a brief visual "toast" notification (e.g., "Copied").

> Saved Data: The raw text content is continuously written to the browser's local storage to persist between sessions.

//New app for generating passwords

>> What the Code Does

> Secure Generation: Creates highly secure passwords using the browser's built-in cryptography API (crypto.getRandomValues), ensuring the randomness cannot be easily predicted.

> Customization Rules: Lets users tailor the password by choosing length and character sets (lowercase, uppercase, numbers, symbols, spaces). It includes advanced rules like forcing at least one character from each selected set, or removing lookalike characters (e.g., "O" and "0", "l" and "1").

> Strength Calculation: Mathematically estimates the password's entropy (in bits) and translates it into a human-readable strength rating (from "Weak" to "Extremely strong").

> Memory & Shortcuts: Saves the user's exact configuration to localStorage and supports quick keyboard shortcuts (Enter to generate, C to copy).

>> What the Outputs Are

> Text/Visual: Displays the generated password on the screen alongside a dynamic progress bar and a text snippet explaining how secure the password actually is.

> System Actions: Securely copies the final password text to the device's clipboard for easy pasting.

> Saved Data: Writes the user's slider and checkbox preferences to the browser's local storage so they persist on the next visit.

//New app for online dice playing for board games

>> What the Code Does

> Rolling Simulation: Animates a virtual dice roll by rapidly cycling through random numbers before landing on a final result.

> Customization: Allows users to switch between a 6-sided (D6) and 20-sided (D20) die, and change the die's color.

> Memory / Storage: Automatically saves the user's settings (color, dice type) and a history of the last 12 rolls to the browser's localStorage, so they remain even after refreshing the page.

> Keyboard Shortcuts: Lets users roll the die quickly by pressing the Spacebar or the R key.

>> What the Outputs Are

> Visual/UI: Displays the final randomized number on the die and updates the on-screen history log with the latest rolls.

> Animation: Toggles CSS classes (rolling) to trigger visual shaking/rolling effects.

> Saved Data: Writes the configuration and history array locally to the user's browser storage.

//New app for merge PDF's documents

>> What the Code Does

> Client-Side Merging: Combines multiple PDF files entirely within the user's browser using the pdf-lib library. No files are uploaded to a server, ensuring 100% privacy.

> File Management: Provides a drag-and-drop interface where users can add, reorder (by dragging), and remove PDF files. It enforces safety limits (maximum 20 files and 200 MB total).

> Selective Extraction: Allows users to input custom page ranges (e.g., "1-3, 5") so they can merge only specific pages from a document rather than the whole file.

> Validation & Feedback: Checks for invalid file types or incorrect page ranges before starting, and provides real-time progress updates while processing.

>> What the Outputs Are

> File Output: A dynamically generated, single combined .pdf file ready for immediate download.

> Visual/UI: A live progress bar during the merge, and a final summary showing the total number of pages and the final file size in MB.

> Alerts: On-screen error lists if the user exceeds size limits, uploads wrong file types, or types invalid page ranges.