Vikk

Data Structures Implementation

class Node {
        int data;
        Node next;
        
        public Node(int data) {
            this.data = data;
            this.next = null;
        }
    }

Process & Implementation

This code implements a basic node structure for a linked list data structure. Each node contains two main components:

A data field to store the actual value
A reference to the next node in the sequence

Usage & Applications

This implementation is fundamental for:

Building linked lists
Creating queue and stack data structures
Managing dynamic memory allocation

Simple Task Scheduler

class TaskScheduler {
                    private Queue taskQueue;
                    private int maxTasks;

                    public TaskScheduler(int capacity) {
                        this.taskQueue = new LinkedList<>();
                        this.maxTasks = capacity;
                    }
                    
                    public boolean addTask(Task task) {
                        if (taskQueue.size() >= maxTasks) {
                            return false;
                        }
                        return taskQueue.offer(task);
                    }
                    
                    public Task executeNext() {
                        return taskQueue.poll();
                    }
                    
                    public boolean isEmpty() {
                        return taskQueue.isEmpty();
                    }
                }

Process & Implementation

This implementation demonstrates a basic task scheduler using a queue data structure. Key features include:

Fixed capacity task queue
FIFO (First-In-First-Out) execution order
Basic task management operations

Usage & Applications

This scheduler can be used for:

Background job processing
Task queuing systems
Resource management

Binary Search Tree Implementation

class BinarySearchTree {
                    private TreeNode root;
                    
                    private class TreeNode {
                        int value;
                        TreeNode left;
                        TreeNode right;
                        
                        TreeNode(int value) {
                            this.value = value;
                        }
                    }
                    
                    public void insert(int value) {
                        root = insertRec(root, value);
                    }
                    
                    private TreeNode insertRec(TreeNode node, int value) {
                        if (node == null) {
                            return new TreeNode(value);
                        }
                        
                        if (value < node.value) {
                            node.left = insertRec(node.left, value);
                        } else if (value > node.value) {
                            node.right = insertRec(node.right, value);
                        }
                        
                        return node;
                    }
                    
                    public boolean search(int value) {
                        return searchRec(root, value);
                    }
                    
                    private boolean searchRec(TreeNode node, int value) {
                        if (node == null || node.value == value) {
                            return node != null;
                        }
                        
                        if (value < node.value) {
                            return searchRec(node.left, value);
                        }
                        return searchRec(node.right, value);
                    }
                }

Process & Implementation

This code implements a Binary Search Tree (BST) data structure with basic operations. Features include:

Recursive insertion of nodes
Efficient search operations
Maintains BST properties

Usage & Applications

Binary Search Trees are used in:

Database indexing
File system organization
Symbol table implementation

Synchronized Lyrics Display Script


                import time
                import sys
                import threading

                import os
                import sys

                # Membersihkan terminal
                os.system('cls' if os.name == 'nt' else 'clear')

                # Menyembunyikan path di PowerShell
                sys.ps1 = ''
                sys.ps2 = ''

                def type_animated_text(text):
                    """Menampilkan teks dengan animasi per huruf"""
                    for char in text:
                        sys.stdout.write(char)
                        sys.stdout.flush()
                        time.sleep(0.10)  # Kecepatan animasi huruf
                    print()  # Pindah baris setelah lirik selesai

                def display_synchronized_lyrics(lyrics):
                    """Menampilkan lirik secara tersinkronisasi dengan animasi"""
                    start_time = time.time()
                    
                    for line in lyrics:
                        # Tunggu hingga waktu untuk lirik berikutnya
                        while time.time() - start_time < line["time"]:
                            time.sleep(0.1)
                        
                        # Tampilkan lirik dengan animasi
                        type_animated_text(line["text"])

                def main():
                    # Lirik dan timing dalam detik (waktu ketika lirik muncul)
                    lyrics = [
                        {"time": 55.0, "text": "Lirik Pertama"},
                        {"time": 59.0, "text": "Lirik Ke Dua"},
                        {"time": 64.5, "text": "Lirik Ke Tiga"},
                        {"time": 68.0, "text": "Lirik Ke Empat"}
                        # Tambahkan lirik yang lainnya disini seperti yang diatas
                    ]
                    
                    display_synchronized_lyrics(lyrics)

                if __name__ == "__main__":
                    main()

Process & Implementation

This Python script demonstrates:

Animated text display
Synchronized lyrics presentation
Terminal manipulation techniques
Time-based text rendering

Key Features

Character-by-character text animation
Precise timing for lyric display
Cross-platform terminal clearing
Flexible lyric synchronization

Responsive Login Form


                <!DOCTYPE html>
                <html lang="id">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Form Login</title>
                    <style>
                        * {
                            margin: 0;
                            padding: 0;
                            box-sizing: border-box;
                        }

                        body {
                            font-family: Arial, sans-serif;
                            background-color: #f0f2f5;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            min-height: 100vh;
                        }

                        .login-container {
                            background-color: white;
                            padding: 2rem;
                            border-radius: 8px;
                            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                            width: 100%;
                            max-width: 400px;
                        }

                        .login-title {
                            text-align: center;
                            margin-bottom: 1.5rem;
                            color: #333;
                        }

                        .form-group {
                            margin-bottom: 1rem;
                        }

                        label {
                            display: block;
                            margin-bottom: 0.5rem;
                            color: #333;
                        }

                        input {
                            width: 100%;
                            padding: 0.75rem;
                            border: 1px solid #ddd;
                            border-radius: 4px;
                            font-size: 1rem;
                        }

                        input:focus {
                            outline: none;
                            border-color: #4CAF50;
                        }

                        .error-message {
                            color: #f44336;
                            font-size: 0.875rem;
                            margin-top: 0.25rem;
                            display: none;
                        }

                        button {
                            width: 100%;
                            padding: 0.75rem;
                            background-color: #4CAF50;
                            color: white;
                            border: none;
                            border-radius: 4px;
                            font-size: 1rem;
                            cursor: pointer;
                            transition: background-color 0.2s;
                        }

                        button:hover {
                            background-color: #45a049;
                        }
                    </style>
                </head>
                <body>
                    <div class="login-container">
                        <h2 class="login-title">Login</h2>
                        <form id="loginForm" onsubmit="return validateForm(event)">
                            <div class="form-group">
                                <label for="username">Username</label>
                                <input type="text" id="username" name="username" required>
                                <span class="error-message" id="usernameError">Username harus diisi</span>
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" id="password" name="password" required>
                                <span class="error-message" id="passwordError">Password harus diisi</span>
                            </div>
                            <button type="submit">Login</button>
                        </form>
                    </div>

                    <script>
                        function validateForm(event) {
                            event.preventDefault();
                            
                            const username = document.getElementById('username').value;
                            const password = document.getElementById('password').value;
                            const usernameError = document.getElementById('usernameError');
                            const passwordError = document.getElementById('passwordError');
                            
                            let isValid = true;

                            // Reset error messages
                            usernameError.style.display = 'none';
                            passwordError.style.display = 'none';

                            // Validate username
                            if (!username) {
                                usernameError.style.display = 'block';
                                isValid = false;
                            }

                            // Validate password
                            if (!password) {
                                passwordError.style.display = 'block';
                                isValid = false;
                            }

                            if (isValid) {
                                alert('Login berhasil!\nUsername: ' + username);
                                document.getElementById('loginForm').reset();
                            }

                            return isValid;
                        }
                    </script>
                </body>
                </html>

Process & Implementation

This code implements a responsive login form with:

Clean, modern UI design
Form validation
Error handling
Responsive layout

Key Features

Real-time form validation
Responsive design for all screen sizes
User-friendly error messages
Clean and modern styling

Interactive ToDo List Application


                <!DOCTYPE html>
                <html lang="id">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>To-Do List</title>
                    <style>
                        * {
                            margin: 0;
                            padding: 0;
                            box-sizing: border-box;
                        }

                        body {
                            font-family: Arial, sans-serif;
                            background-color: #f0f2f5;
                            padding: 20px;
                        }

                        .container {
                            max-width: 600px;
                            margin: 0 auto;
                            background-color: white;
                            padding: 20px;
                            border-radius: 10px;
                            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                        }

                        .input-container {
                            display: flex;
                            gap: 10px;
                            margin-bottom: 20px;
                        }

                        .todo-item {
                            display: flex;
                            align-items: center;
                            padding: 10px;
                            background-color: #f8f9fa;
                            margin-bottom: 10px;
                            border-radius: 5px;
                            transition: background-color 0.2s;
                        }

                        .todo-item.completed {
                            background-color: #e8f5e9;
                            text-decoration: line-through;
                            color: #666;
                        }

                        .filters {
                            display: flex;
                            gap: 10px;
                            margin-bottom: 20px;
                        }

                        .filter-btn {
                            background-color: #2196F3;
                            flex: 1;
                            padding: 10px;
                            border: none;
                            color: white;
                            border-radius: 5px;
                            cursor: pointer;
                        }
                    </style>
                </head>
                <body>
                    <div class="container">
                        <h1>To-Do List</h1>
                        
                        <div class="input-container">
                            <input type="text" id="todoInput" placeholder="Add new task...">
                            <button onclick="addTodo()">Add</button>
                        </div>

                        <div class="filters">
                            <button class="filter-btn active" onclick="filterTodos('all')">All</button>
                            <button class="filter-btn" onclick="filterTodos('active')">Active</button>
                            <button class="filter-btn" onclick="filterTodos('completed')">Completed</button>
                        </div>

                        <ul id="todoList"></ul>
                    </div>

                    <script>
                        let todos = [];
                        let currentFilter = 'all';
                        
                        function addTodo() {
                            const text = document.getElementById('todoInput').value.trim();
                            if (text) {
                                todos.push({
                                    id: Date.now(),
                                    text: text,
                                    completed: false
                                });
                                document.getElementById('todoInput').value = '';
                                updateTodoList();
                            }
                        }

                        function toggleTodo(id) {
                            const todo = todos.find(t => t.id === id);
                            if (todo) {
                                todo.completed = !todo.completed;
                                updateTodoList();
                            }
                        }

                        function deleteTodo(id) {
                            todos = todos.filter(t => t.id !== id);
                            updateTodoList();
                        }

                        function filterTodos(filter) {
                            currentFilter = filter;
                            updateTodoList();
                        }

                        function updateTodoList() {
                            const list = document.getElementById('todoList');
                            list.innerHTML = '';
                            
                            let filteredTodos = todos;
                            if (currentFilter === 'active') {
                                filteredTodos = todos.filter(t => !t.completed);
                            } else if (currentFilter === 'completed') {
                                filteredTodos = todos.filter(t => t.completed);
                            }
                            
                            filteredTodos.forEach(todo => {
                                const li = document.createElement('li');
                                li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
                                li.innerHTML = `
                                    <input type="checkbox" ${todo.completed ? 'checked' : ''} 
                                        onchange="toggleTodo(${todo.id})">
                                    <span>${todo.text}</span>
                                    <button onclick="deleteTodo(${todo.id})">Delete</button>
                                `;
                                list.appendChild(li);
                            });
                        }
                    </script>
                </body>
                </html>

Process & Implementation

This code implements an interactive ToDo List application with the following features:

Task addition with input validation
Task completion toggling
Task deletion
Filter system for All/Active/Completed tasks

Key Features

Responsive design
Clean and modern UI
Real-time task filtering
Local state management
CSS transitions for smooth interactions

Ticket Booking System

View Code on GitHub

Process & Implementation

This code implements a comprehensive ticket booking system with the following features:

Responsive form design with modern UI elements
Real-time price calculation and order summary
Form validation with error handling
Interactive ticket type selection

Key Features

Dynamic pricing system with multiple ticket types
Real-time order summary updates
Form validation with user feedback
Responsive design for all screen sizes

Guess The Number

View Code on GitHub

Process & Implementation

This code implements a fun and interactive number guessing game with the following features:

Random number generation between 1 and 100
Hint system providing "Too High" or "Too Low" feedback
Scoring system tracking attempts and best score
Guess history display with hints for each previous attempt

Key Features

Real-time feedback for each guess
Best score storage using localStorage
Clear and user-friendly input validation
Responsive design for all devices

Portfolio Website

View Code on GitHub

Process & Implementation

This code implements a modern and responsive portfolio website with the following features:

Header with profile picture and tagline
Sticky navigation with smooth scrolling
"About Me" section for personal description
Interactive skill cards in the "Skills" section
Portfolio section showcasing projects
Contact form for direct communication
Footer with social media links

Key Features

Gradient overlay effect in the header
Hover animations on portfolio cards
Responsive grid layout for better adaptability
Sticky navigation for easy access
Smooth scrolling for better user experience
Modern design with shadows and rounded corners

QR Code Generator

View Code on GitHub

Process & Implementation

This code implements a real-time QR Code Generator with the following features:

Textarea input for text or URL
Options for QR code size (100x100 to 400x400)
Color selection for QR code (Black, Blue, Green, Red, Purple)
Real-time QR code generation
Download QR code as a PNG file
Supports Enter key to generate
Input validation to ensure proper format
Clears previous QR code before generating a new one

Key Features

Responsive design for all screen sizes
Instant visual feedback when generating QR code
Download button appears after QR code generation
Live QR code preview before downloading

Creative Developer

Vikri Ardiansyah

Personal Info

Education

Skills

Academic Programming Projects

Data Structures Implementation

Process & Implementation

Usage & Applications

Simple Task Scheduler

Process & Implementation

Usage & Applications

Binary Search Tree Implementation

Process & Implementation

Usage & Applications

Synchronized Lyrics Display Script

Process & Implementation

Key Features

Responsive Login Form

Process & Implementation

Key Features

Interactive ToDo List Application

Process & Implementation

Key Features

Ticket Booking System

Process & Implementation

Key Features

Guess The Number

Process & Implementation

Key Features

Portfolio Website

Process & Implementation

Key Features

QR Code Generator

Process & Implementation

Key Features

Dukung Website Ini! 🌟

Creative Developer

Vikri Ardiansyah

Personal Info

Education

Skills

Academic Programming Projects

Data Structures Implementation

Process & Implementation

Usage & Applications

Simple Task Scheduler

Process & Implementation

Usage & Applications

Binary Search Tree Implementation

Process & Implementation

Usage & Applications

Synchronized Lyrics Display Script

Process & Implementation

Key Features

Responsive Login Form

Process & Implementation

Key Features

Interactive ToDo List Application

Process & Implementation

Key Features

Ticket Booking System

Process & Implementation

Key Features

Guess The Number

Process & Implementation

Key Features

Portfolio Website

Process & Implementation

Key Features

QR Code Generator

Process & Implementation

Key Features

Connect With Me