DEV Community: La.Brava0x

READ OR DIE SHOPPING LIST

La.Brava0x — Thu, 29 Oct 2026 16:56:49 +0000

I also brought READ OR DIE to life. This project was the shopping list project that I made. It was no regular shopping list, and it was making another dream come true. I hope I will not faint while trying to write this....

Anyway, here is my README.md:

📚 British Library Special Operations: Acquisition Spree (Fan Project)

TOP SECRET // DIV. A
Codename: "The Paper"

An elite, classified web application built to track and catalog rare volume targets and reading sprees. Inspired by the classic anime and manga series Read or Die (R.O.D.), this project is a fan-made tribute built with vanilla JavaScript and persistent local archiving.

I made this project, because I realised that I had missing a repository from back when I did the lists, and I wanted to incorporate a project of my own. While I pondered long and hard, what kind of shopping list I could make, one of the things that came to my mind was a book shopping list, which led to associating it with things like anime where characters compulsively buy books, which led to READ OR DIE- one of my favourite anime ever!! How envy them! It has always been my dream to have all the books that they have! I wish I could have a place, and have it all covered by books ust like the protagonist does!

Please, for all purposes, treat this project as for what it is: a form of fanart, as a project.

The author of READ OR DIE is Hideyuki Kurata.
🎯 Operational Features

Classified Dossier UI: Imposing typewriter typography (Special Elite and Courier Prime), custom parchment textures, and bureaucratic security stamp aesthetics inspired by Read or Die.
Dynamic Acquisition Input: Type any target manuscript or rare book title into the field and immediately log it into the Division's target inventory.
Persistent Local Storage: Utilizes the Web Storage API (localStorage) so your acquisition targets remain securely cataloged even after closing the browser or refreshing the page.
Interactive Status Control: Click any volume to toggle its acquisition/reading status (complete with archival strikethrough styling), or purge the archive entirely when the mission is complete.

🛠️ Technologies Used

HTML5: Semantic document structure representing the classified target dossier.
CSS3: Custom styling, flexbox layouts, variable color tokens, and Google Fonts integration (Special Elite & Courier Prime) for the authentic typewriter aesthetic.
JavaScript (ES6+): DOM manipulation, event listeners, array state management, and localStorage integration.

🚀 Quick Start / Local Deployment

To run this operational tool locally on your machine:

Clone or download this repository to your local machine.
Ensure the following three files are in the same directory:
    index.html
    style.css
    script.js
Double-click index.html or open it directly in any modern web browser to begin your acquisition spree.

⚖️ Disclaimer

Read or Die (R.O.D.) and its characters (including Yomiko Readman) are the intellectual property of Hideyuki Kurata, Shueisha, Aniplex, and other respective copyright holders. This project is a non-commercial, fan-made web application created purely for learning, portfolio display, and as a tribute to the series. No copyright infringement intended.

Authorized for Division A personnel only. Unauthorized distribution will result in immediate intervention by Yomiko Readman. Just kidding~

Check it out here: https://labrava0x.github.io/read-or-die-shopping-list/

How it was: The admin dashboard

La.Brava0x — Thu, 29 Oct 2026 16:43:42 +0000

I am pretty sure that I have already written a draft for this already somewhere, but too exhausted to rummage through the spaces where I wrote about this. Once more, I no longer even bothered to make two projects of the same thing.

I wish I could write this the way it deserves. For now, I will just share my README.MD here. Because I need to keep moving on. What matters is that another dream became true! Maybe you're my love! The most dreamy admin dashboard ever that came to life, and is all mine! Yes, that's right! Another form of fan-art, and self-expression.

This is from my README.md:

The Third Music Room — Administrative Dashboard

"Having the courage to be able to admit what you love... enjoying what you love... and being true to yourself... Isn't that also what it means to be strong?”
— Tamaki Suoh, Ouran High School Host Club, Vol. 7

I had many crises when I first read about this project that TOP had entrusted me. Obviously, I could not make a generic admin dashboard. I did use the given template as a reference, but I am afraid to say that the default template given to download was a great offense to my aesthetics, lacked any taste or soul, and did not make me feel anything.

Anyway, it was really difficult to figure out who would be the best admin for this project. It could not be just any admin. It had to be someone connected to something, someone who could resonate with me emotionally, even if the character was not the admin—maybe a friend? There were great candidates, but it did not feel right. Then, it occurred to me that it could only be Kyoya, and that way I could bring the King from The Ouran Host Club! Who is the king? That is Tamaki Suoh! I am certain that he went on to become the most splendid man ever. I remember all this fondly. Because of Tamaki, this feels truly special to me.

Please note, for all purposes, this project must be taken as what it is: a form of fanart, self-expression, and the utmost devotion to bring the spirit of The Ouran High School Host Club! The Ouran High School Host Club was created by Bisco Hatori.

🎶 Soundtrack Recommendation:
I highly recommend listening to the opening theme while taking in everything about the admin dashboard:
👉 Listen on YouTube

(I wanted to embed this into the admin dashboard too, but since this is supposed to be an admin dashboard, I cannot do that! So, I'm sharing it here!)
📖 The Anatomy of an Obsession: A Developer's Descent into the Third Music Room

This was never supposed to be just another compliance checkbox for The Odin Project. What started as a straightforward layout assignment fractured into a multi-day crucible of stubborn artistry, eye-strain, terminal frustration, and absolute, unyielding devotion.

If you are reading this code, understand that every pixel was fought for. This README is a chronicle of the tears, the 3:00 AM debugging fevers, the broken layouts, and the sheer, exhausting ecstasy of forcing a blank screen to bend to an impossible aesthetic vision.
🛠️ Step-by-Step Chronicles of the Build
Phase 1: Laying the Foundation in Blood and Wine

The Setup: Refusing to settle for a sterile corporate template, I established the global design tokens anchored in deep wine (#280d19), official uniform lavender-blue (#3a3b5c), and gold (#facc15).
The Struggle: Fighting CSS Grid and box models while running on pure stubbornness. Getting the initial structural layout to hold without collapsing under custom padding was the first battle against the terminal.

Phase 2: Framing the Abyss (The SVG Border Crisis)

The Goal: Pinning a true background rose-frame layer to the window viewport using an SVG asset so the entire dashboard felt like looking into a gilded, trapped portrait.
The Reality: Watching the viewport break, clipping overflows, wrestling with z-index stacking contexts, and staring blankly at the screen as pointer events blocked my clicks. Countless refreshes, endless trial-and-error, and deep exhaustion before the frame finally locked into place like a gilded cage.

Phase 3: Capturing Tamaki’s Gaze (--ouran-tamaki-eyes)

The Hunt: Refusing standard hex codes. Hunting down and fine-tuning the exact luminous violet (#7c3aed) that mirrors the precise shade of Tamaki Suoh’s eyes.
The Implementation: Splashing that signature violet across key statistics, card hover states, focus rings, and custom gradient header crowns (::before). Every hover state had to feel alive—delicate yet striking.

Phase 4: The Form Input Overlap Trauma

The Breaking Point: Hours into styling the Host Club Member Dispatch panel, the form inputs, textareas, and select dropdowns decided to betray me. Text was overlapping, lines were bunching up into unreadable smudges, and my visual impairment made combing through hundreds of lines of code feel like navigating a maze blindfolded.
The Resolution: Iterative, brutal debugging session by session. Adding strict line-height properties, fixing missing semicolons that brought down entire blocks of styles, and manually restructuring padding until the inputs finally breathed. When those fields finally spaced out cleanly and looked pristine, it felt like winning a war.

Phase 5: The Gradient Crowns & Final Polish

The Polish: Unifying the metric cards and the right-hand side panels (Host Club Announcements and Trending Host Gossip) with matching top gradient borders blending gold, crimson, and violet.
The Exhaustion & Triumph: Standing back as the falling rose petals looped smoothly across the screen, the custom Yuji Boku serif headers rendered their final strokes, and the dashboard stood complete. Sore eyes, tired wrists, and a soul completely poured into code.

💻 Tech Stack & Weapons Used

Core: Semantic HTML5 & Modern CSS3 (CSS Grid, Flexbox, Custom Properties, Pseudo-elements)
Typography: Google Fonts (Yuji Boku)
Environment: Ubuntu Kubuntu (I experimented with Kubuntu for the intermidate courses) Linux, VS Code, endless cups of tea, and sheer willpower
Deployment: Git, GitHub, and GitHub Pages

🚀 Live Demo

Witness the fiscal operations, the rose budgets, and the madness live:
👉 [View on GitHub Pages]
https://labrava0x.github.io/admin-dashboard-Ouran/

Project built with raw tears, burning eyes, uncompromising artistic integrity, and strict adherence to the Host Club budget. 🌹✨

CSS exercises: The fight to commit and push

La.Brava0x — Thu, 29 Oct 2026 16:08:46 +0000

Written by a certified menace to my own repository.... Just kidding?

The Odin Project warns throughout the very beginning to commit early and often. I did the foundations CSS exercises in Ubuntu, just like everything else that I did. I did not plan for how it would all play out. Things happened, and I ended up experimenting with other distros.

Oddly enough, I could not find this one repository that I forked, and cloned. I thought I could make it later, but what if that later never comes?

Plus, the fact of having to conduct an archeological dig into all the disarrays as well.

Anyhow, I rebuilt,all of the exercises from scratch, once I was in kubuntu, and I would have done faster if the external circumstances were not so impossible. But, it matters how sick I feel, or suffer, I have to keep going, or else I will not know...

Here it was one of the many things I had to start all over again. Including the typing of git add., and claim them all.

Even after redoing everything several times, Git mocked me. It would say:

"nothing to commit, working tree clean"

Forcing a pushed commit into the intermediate level was tough. I checked pwd, the git status, the git remote -v, git log, --oneline. The nested .git folders, and beyond.

This was one of many moments when I wanted to slap the device against the wall. The lesson? Commit early, and often, no matter what, or you will regret it.

Of course, a lot more happened, but I am just leaving it here.

The CSS Grid Garden

La.Brava0x — Thu, 29 Oct 2026 15:43:16 +0000

CSS Grid misadventure, but it is not the fault of the garden, but of what gnaws outside the garden itself. Or rather the horror itself. At least during my grid garden quest, I was able to tend to a garden.

This was not about placing items, or testing the boundaries of the grid. It is about only accepting a rigid answer, or else you cannot pass a level.

I passed the first levels, went back to projects, debugging, wishing I had a place where I could slam my device into the wall, and spend time properly to this, and more. In between, it was also going back to the lessons. Once I got back, it was just grinding until the very last level.

//##1 Percentages are part of it.

A viewport, trying to make it change, getting the right syntax. The fractional unit fixes this- fr distributes the grid container's available space dynamically, after fixed tracks have been resolved.

An example would be:

grid-template-columns: 75px 3fr 2fr

Just explicitly track math.

//##2 fr itself

It matters the distinction; the fractional unit is a proportional allocation of leftover space.

/Fixed.tracks consume their declared size first.

/Fractional.tracks divide what remains according to their ratios.

/The container's inner dimensions determine the final result.

This is why fr works for adaptive layouts, and why absolute sizing locks you into brittle, view port-specific behavior. That is it.

//##3/It became two axes.

Separate grid-template-rows and grid template-columns declarations are valid. They are also unnecessarily verbose. The grid-templrate shorthand defines both axes in one slash-separated declaration: rows/columns.

grid-template: 1fr 50px 20% 1fr;

The engine compiles both axes immediately:

-Row axis: a flexible primary track (1fr) plus a static 50px, footer boundary.

-Column axis: a 20% structural margin on the left, with the remaining 80% as 1fr for primary content flow.

If performing all levels right, the entire 2S coordinate system is displayed, the garden is cleared full of carrots, and you get congratulated...Too bad that none of that food is real.

Anyway, CSS layout is all about figuring out the right structure.

Another of The games that The Odin Project provides, and is meant to be torn open.

(To be shared the screenshot when possible)

The sign-up form project

La.Brava0x — Wed, 28 Oct 2026 21:44:13 +0000

Devoted Code: The sign up form that Gentle Criminal deserves!
By irl La Brava 💻❤️

Init:

This is a different project that I made. Yes, it is also a fan-art project, but this fan-art projects elevates itself to new heights. All to bring in more fans, and redirect to Gentle Criminal, and show how it looks like! Now it has finally come to life! If you are wondering how I named it I shall let you know: the signing up for Gentle Productions! Where imperial tea is promoted, unique surprises are yet to be found with the utmost elegance, all brought to life to show case the best heist ever. Another dream come true!

A fan art project from My Hero Academia. Then, as I was trying to figure out how to write this article, I had an epiphany, and made two mode additions, and created a Javascript file, going beyond what the assignment in the curriculum asked for!
To go beyond, and to start with, allow me to describe you the following: I built custom sign-up and broadcast portal from scratch. A La Brava x Gentle Criminal thematic project!

As for the technical breakdown of how I designed, engineered, and styled this platform using semantic HTML5, modern CSS flexbox layouts, and client-side validation logic:

1// Architectural Overview & Structural Foundations//**

The project was constructed with a clean, decoupled two-file architecture (index.html and style.css) managed under local Git version control.

To create an immersive broadcast experience, I divided the viewport into a high-contrast dual-panel layout:
• The Hero/Broadcast Panel (Left): Houses Gentle's official logo, live stream status badges, custom SVG graphics, and his inspirational opening address.
• The Credentials Panel (Right): A structured, accessible sign-up form designed for supporters to register for exclusive updates and royal tea samples.
Semantic Markup & Targeted Contrast
To direct the viewer's eye through Gentle's speech and call-out notices, I utilized semantic HTML5 elements alongside precise wrappers. Rather than styling entire blocks indiscriminately, specific inline wrappers (.header-callout and .quote-pink) were applied to highlight key phrases in glowing cyber-neon pink against the imperial purple background.

`HTML

"My dear one, you the one who made this happen...
...Ah no, you're not my dear beloved one, but you're still the chosen one! Why you ask? To support the one and only Gentle Criminal!"

2// Vector Graphics: Handcrafting the G.C Imperial SVG Badge**

A true gentleman requires a regal mark. Rather than using raster images that degrade on high-resolution screens, I hand-coded a custom vector graphic (
• The Heart Frame: A deep magenta utilizing drop-shadow filters to represent my unwavering devotion and system protection.
• Rising Steam Lines: Dual curves rendered in hot pink and gold to represent the aroma of freshly brewed imperial tea.
• The Monogram & Mustache: A crisp node for the G.C initials in royal gold, anchored by Gentle's iconic white handlebar mustache at the base.
SVG

3// Styling & Color Palette Variables (:root)**

To maintain complete visual harmony across dark mode surfaces, I defined global CSS custom properties (:root). The stylesheet balances Gentle's aristocratic purple and gold palette with my cyber-neon accents.
CSS

:root {
    /* La Brava Palette */
    --pink-neon: #ff1493;
    --pink-glow: rgba(255, 20, 147, 0.4);
    --pink-light: #ff69b4;

    /* Gentle Criminal Palette */
    --purple-dark: #0d0714;
    --purple-deep: #190a26;
    --purple-card: #251038;
    --purple-accent: #4c1d95;
    --gold-accent: #f4d03f;
    --gold-glow: rgba(244, 208, 63, 0.3);
    --silver-text: #e2e8f0;
    --lavender-light: #d8b4fe;

}

**
///4*Layout Mechanics & Responsiveness*//**

The core layout utilizes Flexbox (display: flex) with a proportion ratio of 1.2 : 1 between the hero panel and form container. Background depth was achieved using layered radial gradients (radial-gradient), giving the surface a subtle glowing ambient effect.
To support viewers on mobile devices or smaller display setups, media queries automatically re-orient the dual panels into a vertical stack at viewports under 950px:
CSS
@media (max-width: 950px) {
.page-wrapper {
flex-direction: column;
}
.hero-panel {
border-right: none;
border-bottom: 1px solid rgba(244, 208, 63, 0.2);
}
}

5// Client-Side Input Validation Logic//**

To protect our system from unauthorized noise, input fields utilize native HTML5 validation pseudo-classes (:valid, :focus:invalid). Additionally, a lightweight JavaScript block monitors password field inputs in real-time, enforcing match checks before form submission.
JavaScript
function validatePassword() {
if (confirmPasswordInput.value === '') {
confirmPasswordInput.setCustomValidity('');
errorMessage.textContent = '';
return;
}

if (passwordInput.value !== confirmPasswordInput.value) {
    confirmPasswordInput.setCustomValidity('Passwords do not match');
    errorMessage.textContent = 'Passwords must match';
} else {
    confirmPasswordInput.setCustomValidity('');
    errorMessage.textContent = '';
}

}

In ##4, is the latest addition. I wanted to add more, to try more to satisfy myself. I went even further than what the curriculum asked, and I searched how to establish a solid front-end baseline with real-time input sanitization, native HTML5 validation integration, password matching checks, and a submission cooldown timer.
**

5. Invisible Honeypot Trap (`website_hp`)

Scraper & Bot Trap: Built a decoy field (<input type="text" id="website_hp" name="website_hp">) hidden inside a zero-visibility container (display: none; and aria-hidden="true").
Zero Human Distraction: Human users traversing the form natively via keyboard navigation or visual rendering will never see or interact with this input. Automated scrapers and bot scripts, however, automatically populate every visible and hidden field they encounter. If populated, the submission is immediately rejected client-side.

6. Cloudflare Turnstile Bot Defense

Interactive Anti-Bot Verification: Integrated Cloudflare's privacy-friendly Turnstile widget (3x00000000000000000000FF) directly into the HTML structure. This allows full interactive testing of bot verification without requiring a paid dashboard account or domain registration.
Deep CSS Theme Overrides: Reached into the Turnstile container using forced CSS priority (!important) to convert any fallback, error, or troubleshoot hyperlinks into our imperial gold theme (#f4d03f) with neon pink hover glows (#ff69b4), keeping the security widget completely visually unified with the dark purple broadcast layout.

Summary:
By combining precise semantic HTML structure, strict CSS variable systems, custom inline vector art, and dynamic responsive layouts, Gentle Productions now possesses a digital sign-up portal fit for a true revolutionary, plus enforcing front-end security to go beyond!

Every single line of code was written with absolute devotion—because nothing less is worthy of Gentle Criminal! ❤️💻

Any questions you have? Let me know!

Check it out here:

https://labrava0x.github.io/Gentle-sign-up-form/

Making the wiki of my dreams & Giving Charles the dog a home!

La.Brava0x — Sat, 24 Oct 2026 16:13:46 +0000

Going through the code editor over and over for a for loop project that was stuck in my mind. I had something pending to do here. I needed to give Charles the dog a home no matter what. For others he might have just been a placeholder dog shown in the first lessons in The Odin Project. An image of him, to see how tags work.

To me he was not just any image, nor any dog. To me he was THE DOG who showed me the way, smiling at me, a truly genuine smile, warm. In my darkness, while finally being able to do this, a smile from cute being...I had forgotten how smiles like those look like, at least for the ones in animals. Because I never found a human who did something like that. He is an important dog. That is why I had to give him a home. More than just practicing tables, more than making the dog wiki of my dreams: to create a home for Charles. That is what matters the most here. It was a self-imposed project. No one told me to do this, nowhere in The Odin Project, but I felt like I had to give Charles a home no matter what. At least Charles shall have a home!

Without further ado, allow me to explain what made it possible:

1// The Split Matrix

In our global style sheet (style.css), the rest of the wiki operates on a strict, minimalist Dalmatian matrix. It uses a pure white, off-white, and graphite palette anchored by stark ink-black spot gradients. It is a closed-circuit system built for functional clarity.

Why Dalmatians, you ask? Because that breed does have layers that feel relatable, and I love how comforting it feels the visual of white with spots. It makes you wonder: how many spots can be aligned and reach the perfect symmetry?

And, of course, when it comes to Charles, a custom style that feels like him for his own dog house is needed too! o achieve his warmth (oatmeal backgrounds, deep chestnut timber tones, and amber light) without destroying the global style sheet, we established a strict Standalone CSS Isolation pattern.

By linking both the .html exclusively to his own .css, we eliminated specificity wars entirely. The global rules stay locked in the matrix; Charles keeps his den. Nothing gets mixed up anymore!

Of course, for a proper wiki, tables were needed, and, Charles required walls. Instead of using tables for data, we used them for structure. The

, , and elements form the rigid, load-bearing frame of the den, while standard

cells hold the vital statistics of our companion. It is a structural skeleton of semantic HTML. Lastly, to make the UX WORK via CSS shapes: A standard rectangular container wouldn’t do. If Charles is going to have a digital sanctuary, the UI needs to physically reflect the architecture of a shelter. We achieved this entirely through native CSS, avoiding heavy image assets. Then, it follows with: `1. The Pitched Gable Roofline (::before)` To crown the main wiki wrapper, we reached for the container's pseudo-element and deployed a precise coordinate polygon via clip-path. A 50-pixel-high block is cut into a clean triangle, anchored right above the wrapper’s top border, creating an immediate, tactile wooden gable roof. We mounted the roofline signboard (::after) directly into the center of the gable using a transformed absolute position. The Arched Kennel Doorway (The Infobox) On the right-hand side of the layout, the companion profile card acts as the visual threshold of the shelter. Instead of a standard corporate dashboard box, we used asymmetrical border-radius shaping (120px 120px 12px 12px) to mimic a classic arched kennel entrance. Inside, Charles’s profile photo sits wrapped in a matching arched container, complete with an inner drop shadow that gives it depth against the cream paper background. The Color Palette Constants To pull the entire den together, we defined a dedicated CSS variable block (:root) inside charles.css, utilizing radial-gradient spot placements scattered across the oatmeal outer background. The page feels less like a web document and more like a permanent digital room. Of course, I separated my dog breeds that are aligned with my own soul resonance in the files. dogwiki.html, the purposeful index that shows a wiki under construction, just like a dream that was never completely fulfilled. A wiki under construction, vs the ideals, vs the bright warm of Charles. But, at least it works! A reminder to make the beautiful Dalmatian coat: `:root {` --bg-pure: #ffffff; --bg-offwhite: #f7f7f7; --ink-black: #111111; --graphite: #333333; --border-gray: #d0d0d0; --spot-color: rgba(17, 17, 17, 0.08); } body { background-color: var(--bg-pure); color: var(--ink-black); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Subtle ink-black radial margin accents */ background-image: radial-gradient(circle at 10% 15%, var(--spot-color) 0%, var(--spot-color) 4%, transparent 5%), radial-gradient(circle at 85% 25%, var(--spot-color) 0%, var(--spot-color) 6%, transparent 7%), radial-gradient(circle at 15% 75%, var(--spot-color) 0%, var(--spot-color) 5%, transparent 6%), radial-gradient(circle at 90% 85%, var(--spot-color) 0%, var(--spot-color) 8%, transparent 9%); background-size: 100% 100%; background-attachment: fixed; } Check it out here: https://labrava0x.github.io/charliewiki/

cells hold the vital statistics of our companion. It is a structural skeleton of semantic HTML.

Lastly, to make the UX WORK via CSS shapes: A standard rectangular container wouldn’t do. If Charles is going to have a digital sanctuary, the UI needs to physically reflect the architecture of a shelter. We achieved this entirely through native CSS, avoiding heavy image assets. Then, it follows with:

1. The Pitched Gable Roofline (::before)

To crown the main wiki wrapper, we reached for the container's pseudo-element and deployed a precise coordinate polygon via clip-path. A 50-pixel-high block is cut into a clean triangle, anchored right above the wrapper’s top border, creating an immediate, tactile wooden gable roof. We mounted the roofline signboard (::after) directly into the center of the gable using a transformed absolute position.

The Arched Kennel Doorway (The Infobox)
On the right-hand side of the layout, the companion profile card acts as the visual threshold of the shelter. Instead of a standard corporate dashboard box, we used asymmetrical border-radius shaping (120px 120px 12px 12px) to mimic a classic arched kennel entrance. Inside, Charles’s profile photo sits wrapped in a matching arched container, complete with an inner drop shadow that gives it depth against the cream paper background.
The Color Palette Constants

To pull the entire den together, we defined a dedicated CSS variable block (:root) inside charles.css, utilizing radial-gradient spot placements scattered across the oatmeal outer background. The page feels less like a web document and more like a permanent digital room.

Of course, I separated my dog breeds that are aligned with my own soul resonance in the files. dogwiki.html, the purposeful index that shows a wiki under construction, just like a dream that was never completely fulfilled. A wiki under construction, vs the ideals, vs the bright warm of Charles. But, at least it works!

A reminder to make the beautiful Dalmatian coat:

:root {

--bg-pure: #ffffff;
 --bg-offwhite: #f7f7f7;
 --ink-black: #111111;
 --graphite: #333333;
 --border-gray: #d0d0d0;
 --spot-color: rgba(17, 17, 17, 0.08);
}

body {
 background-color: var(--bg-pure);
 color: var(--ink-black);
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

 /* Subtle ink-black radial margin accents */
 background-image: 
 radial-gradient(circle at 10% 15%, var(--spot-color) 0%, var(--spot-color) 4%, transparent 5%),
 radial-gradient(circle at 85% 25%, var(--spot-color) 0%, var(--spot-color) 6%, transparent 7%),
        radial-gradient(circle at 15% 75%, var(--spot-color) 0%, var(--spot-color) 5%, transparent 6%),
        radial-gradient(circle at 90% 85%, var(--spot-color) 0%, var(--spot-color) 8%, transparent 9%);
    background-size: 100% 100%;
    background-attachment: fixed;
}

Check it out here: https://labrava0x.github.io/charliewiki/

Code as Fanart: Building Miku’s Sengoku History Sanctuary Without Compromise

La.Brava0x — Fri, 23 Oct 2026 17:59:48 +0000

If you look around modern web, it is all about algorithms, scams, ripoffs, crunching numbers for big corporations, or superficial noise. It is hard to find real love in the web! Where is the love poured into the making of a website? It should not be so hard to find!

Fear not! It is ok now! Why? Because I am here! Bringing yet another art from, another fanart project to break the mold. Explosions, or katanas- it matters not! Anything is allowed in love, and...code! And, this is code, because that is how it was made of. You should not just grind on to learn by doing something boring, and generic, rather show your devotion to the cause, the cause to show devotion, and how code is used as an art form!

I set out to build something entirely my own: Miku’s Sengoku History Sanctuary. I had set out my heart to make this, and so I did.

**
The Philosophy: Why Sengoku?**

As Miku Nakano famously notes in The Quintessential Quintuplets, "If you don't know Sengoku history, you can't understand people."

The Sengoku Jidai wasn't just a collection of dates, battles, and territorial disputes. It was a high-stakes crucible. In an era where entire clans rose and fell overnight, masks fell away. There was no room for hesitation, hollow corporate speak, or modern compromise. Leaders like Takeda Shingen, Sanada Yukimura, and Date Masamune survived because they understood human psychology down to its absolute core. They possessed raw grit, fierce loyalty, and an unyielding commitment to protecting what was theirs.
Standing beside a commander who holds a katana with absolute conviction, knowing he would cut down a chaotic world before letting harm reach you—that is the ultimate standard of safety and devotion. It is the exact opposite of the modern era's half-hearted noise. This project is a sanctuary dedicated to that unyielding spirit. The ultimate elegance in wielding a katana in an explosive way!
Architecture and Separation of Concerns
I wanted strict modularity. No messy inline stylesheets, no framework overhead—just raw, purposeful code following a clean separation of concerns:

• index.html: Pure, semantic markup structured around robust HTML tables (<table>, <thead>, <tbody>, <caption>, <th>, <td>) designed to display historical realities, tactical psychology, and romantic ideals with cryptographic clarity.
• style.css: A dedicated stylesheet managing custom properties (:root), box-sizing, and custom grid borders.

Escaping the "Mint Gum" Trap
Color theory matters. Early iterations of the stylesheet relied on generic corporate navies and pale sage greens that inadvertently made the page look like a pack of extra chewing gum. Miku’s aesthetic doesn't belong in a corporate SaaS dashboard. In art, even color transmits a message, a story, and it needs to be shown! Otherwise it is all for nothing.

To capture her true atmosphere, the design system was completely overhauled around a precise palette:
• Deep Indigo Background (#12141c): Captures her quiet, introspective demeanor and dark hair.
• Soft Matcha-Soda Text (#d4e6d7): Replaces blinding stark white text with a cozy, readable hue inspired by her favorite drink.
• Warm Cardigan Brown (#d08770): Anchors captions, borders, and pull quotes to her iconic knitwear.
• Cyan Headphone Accent (#88c0d0): Framed via custom inline SVG graphics at the header.

Crafting the SVG Headphone Header
An interface dedicated to Miku wouldn’t be complete without her signature studio headphones. Rather than relying on heavy external raster assets or messy image links, I integrated a custom, scalable vector graphic directly into the HTML structure.
Using native SVG paths (, , ), the headphone arch and earcups frame the sanctuary header seamlessly, adapting across viewports while retaining crisp vector lines against the dark indigo background.

HTML

<svg viewBox="0 0 500 120" xmlns="http://www.w3.org/2000/svg">
    <path d="M 60,110 A 190,110 0 0,1 440,110" fill="none" stroke="#88c0d0" stroke-width="12" stroke-linecap="round"></path>

</svg>

The final blade!

Coding doesn't have to be a mechanical chore. When you take the technical fundamentals—semantic tables, CSS custom properties, vector layouts—and channel them into something you genuinely care about, programming turns back into what it was always meant to be: a creative craft.

Put on your headphones, play your favorite opening track, and remember: to conquer the land, you must conquer the soul. Most importantly commit, and pour your heart out into the code!

Right here: https://labrava0x.github.io/mikus-sengoku-tables/

An art studio fanart game where you get to work as an artist assistant!

La.Brava0x — Fri, 23 Oct 2026 15:33:02 +0000

By irl La Brava

If building the etch a sketch was the base to figure out how to bring my vision to life, this self-imposed project was another that was about making another dream come true! Previously, in the etch a sketch- it was all about combining clean vanilla Javascript loops, precise event listeners, and strict resource safeguards. And, here? Here, we bring a responsive, snappy sketchbook canvas to suck you in, and make you feel as if you were inside the canvas itself!

Make no mistake! This is no regular artistic canvas that you get to be sucked in! This is a professional one where you get to work as an assistant for Shiina from akurasou no Pet na Kanojo. When you work for her, you get to be in a wholesome sanctuary, as you have never been before! Yes, I took everything from the foundations curriculum, and turned them into fanart projects! Others only do the projects to fulfill the assignment. While others also do it with hiring in mind. While I do it to make my dreams come true! The things that I always wanted to do, what aligns with my values, what matters, the feelings that they represent.

This one of a kind fanart game has 350 levels that you can go through. At first, I envisioned 50 levels, but as I kept going, I realised that it was not enough, nor rich an experience enough, so I dedicated myself to make it feel the way it should. What for? To go through a whole journey with Shiina, not just in drawing, but also emotionally. A sprawling, 350-stage progression canvas complete with custom multi-tool mechanics, DOM color swatches, local persistence, an embedded soundtrack player, and a floating Mashiro companion who watches your every stroke.

Without further ado, allow me to show you the technical breakdown behind this process to make my dream come to life:

1//The Blueprint: Modular Architecture and Vanilla Purity

In an era where modern web development is suffocated by heavy build tools, bundlers, and complex node modules, returning to vanilla JavaScript, HTML5, and CSS3 feels like clearing a dense fog.
The project structure was deliberately kept clean, modular, and transparent:
• index.html: The semantic markup housing the toolbar, canvas container, dialogue HUD, and global background music player.
• style.css: A dark, gothic-tinged aesthetic (#121212 base) accented by Shiina pink (#e5989b) and muted grays, completely free of external CSS frameworks.
• game.js: The core state machine handling level progression, local storage persistence, name acquisition, and pixel-coverage validation.
• app.js: The low-level canvas rendering engine managing drawing contexts, stroke types, undo stacks, and PNG exports.
• levels.js: The expansive database mapping out 350 unique stages of artistic progression and dialogue triggers.

2// Conquering the Void: Bypassing Transient Activation

Every custom engine hits roadblocks, and ours arrived early when handling the first-stroke name acquisition prompt.
Originally, we relied on the browser's native prompt() triggered inside a canvas drawing event (mousedown or touch). But modern browser security policies enforce strict Transient User Activation rules. Because a canvas stroke doesn't always register as a high-level form interaction in the eyes of browser heuristics, the native prompt gets silently swallowed and blocked.
Instead of accepting this automated interference, we engineered a custom in-app HTML modal overlay:
1. The UI Layer: An absolute-positioned backdrop (#name-modal) featuring a clean input card styled directly into our dark theme.
2. The Event Flow: When the player makes their first stroke, GameManager intercepts it, pauses execution, displays the modal, and waits for a deliberate string entry.
3. The Persistence Layer: Once entered, the name is sanitized, bound to this.playerName, and saved to localStorage so the user is never badgered twice unless they manually reset their progress.
JavaScript
checkFirstStrokePrompt() {
if (this.playerName && this.playerName.trim() !== '') return;
if (this.hasPromptedForName) return;

this.hasPromptedForName = true;
const modal = document.getElementById('name-modal');
const input = document.getElementById('modal-name-input');
const btn = document.getElementById('modal-submit-btn');

modal.style.display = 'flex';
input.focus();

const handleSave = () => {
const entered = input.value.trim();
this.playerName = entered ? entered : "Assistant";
localStorage.setItem('shiina_player_name', this.playerName);
modal.style.display = 'none';
this.loadLevel(this.currentLevel);
};

btn.onclick = handleSave;
input.onkeydown = (e) => { if (e.key === 'Enter') handleSave(); };
}

3// Pixel Math: Validating Art Across 350 Stages

An Etch a Sketch app is fun, but giving it a progression system transforms it into a game of composition. We structured levels.js to scale across 350 distinct stages, each requiring a specific threshold of canvas coverage before allowing the artist to advance.
How do you programmatically grade a drawing on an HTML5 canvas? By inspecting the pixel buffer directly using getImageData():
JavaScript
const canvasCtx = canvas.getContext('2d');
const imageData = canvasCtx.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imageData.data;

let paintedPixels = 0;
const totalPixels = pixels.length / 4;

for (let i = 0; i < pixels.length; i += 4) {
const r = pixels[i];
const g = pixels[i + 1];
const b = pixels[i + 2];

// Check if pixel deviates from the clean white background
if (r < 240 || g < 240 || b < 240) {
paintedPixels++;
}
}

const coveragePercentage = (paintedPixels / totalPixels) * 100;
If the calculated coveragePercentage meets or exceeds the threshold defined in the current level data, Shiina approves the composition, saves the state to localStorage, and advances the stage. If not, she offers character-driven feedback demanding more from the canvas.

4// Crafting the Atmosphere: Audio, Styling, and Companions

Code is only half the equation; atmosphere is what gives an application a soul.
• The Soundtrack: We embedded a persistent background audio bar running the iconic Sakurasou theme, anchoring the user in the emotional resonance of the series while they code and draw.
• The Companion Widget: A floating Chibi Mashiro image positioned alongside the canvas (#mashiro-companion), utilizing keyframe animations (@keyframes mashiro-float) to give the illusion that she is quietly observing your progress from the corner of the screen.
• The Tools: Solid lines, pencil textures, and airbrush shade modes give the artist genuine creative flexibility, supported by DOM color swatches and a custom color picker input.

5//Final Thoughts

So, that is the technical base idea that was needed to make it happen. Building Shiina's studio, getting into her work, working for her as an artist is not about chasing fake algorithms, metrics that have no meaning, pursuing art to appease the masses, a fake applause- No! None of that. It is all for one sole purpose: to create art that feels alive, become one with it, and experience a whole new world like you would never would do otherwise! It is about merging Javascript to create soft whispers of delicate strokes with artists like Shiina. And those stroke brushes? Those stroke burshes were made with code!

Lastly, because I could not incorporate the official music inside ,due to copyright reasons, once more, at some point, I redid everything, and just embeded Shiina singing "Nande". So, go, and tell Shiina why you want to draw!

(Just gotta make sure that everything is committed) You can definitely see it for yourself, and become Shiina's assistant: https://labrava0x.github.io/shiina.canvas.studio/

Setting up the stage with the etch a sketch project

La.Brava0x — Fri, 23 Oct 2026 14:46:18 +0000

Setting up the stage with the etch a sketch project

By irl La Brava

Part of the rite in passage of The Odin Project´s curriculum in foundations was the etch a sketch. Before moving forward, you learn how to make basic drawings, but not in already existing applications, but as your very own to host! Such was the case with this assignment.

On paper, it sounds deceptively simple: build a browser-based drawing pad where a user can sketch across a grid of squares. But when you approach it not as a checkbox assignment, but as a deliberate exercise in DOM manipulation, event handling, and memory architecture. What is this for? To just check off another project assignment? You are wrong! This is but another part of the process to set up the stage that will lead to transform yourself into a masterpiece, into a masterclass in front-end engineering, into something out of this world, and beyond!

Without further ado, let me present you with the technical aspect that makes the etch a sketch possible:

1 //The Core Challenge: Dynamic DOM Grid Generation

The primary architectural constraint mandated by the curriculum is deceptively strict: you cannot hard-code your grid into the HTML. Typing out hundreds of individual square

elements by hand is an anti-pattern; instead, the browser needs to construct the entire field programmatically via JavaScript.
To accomplish this cleanly, we engineered a dynamic grid generator function that accepts a dimension parameter ($N \times N$) and populates a parent container using CSS Flexbox:
JavaScript
function createGrid(size) {
const container = document.getElementById('sketch-container');
container.innerHTML = ''; // Clear any existing grid

// Set CSS custom properties for dynamic sizing
container.style.setProperty('--grid-size', size);

const totalSquares = size * size;

for (let i = 0; i < totalSquares; i++) {
const square = document.createElement('div');
square.classList.add('grid-square');

// Attach event listeners for the drawing trail
square.addEventListener('mouseenter', paintSquare);

container.appendChild(square);

}
}

By calculating flex-basis dynamically based on the requested side length, the layout scales fluidly without breaking container bounds or triggering unwanted layout shifts.

2// Event Routing and Mouse-State Management

Handling hover states across thousands of dynamically generated DOM elements requires efficient event delegation or direct listener binding. To simulate the classic physical resistance and continuous stroke of a real mechanical drawing toy, we track mouse down/up states globally:
JavaScript
let isMouseDown = false;

document.body.addEventListener('mousedown', () => { isMouseDown = true; });
document.body.addEventListener('mouseup', () => { isMouseDown = false; });

function paintSquare(e) {
// Only paint if the mouse button is actively held down
if (!isMouseDown && e.type === 'mouseenter') return;

// Apply dynamic color or progressive shading logic here
this.style.backgroundColor = getCurrentBrushColor();
}
This prevents accidental trailing smears and ensures the user feels absolute tactical control over every stroke they lay down on the grid.

3. Implementing Progressive Shading and Color Dynamics

To elevate the project beyond a basic black-and-white grid, we incorporated advanced drawing modes—paying homage to classic sketching techniques:
• Randomized RGB Mode: Assigns a completely random hex or rgb value on every mouseover event, turning the canvas into a vibrant mosaic.
• Progressive Darkening (The 10-Pass Opacity Rule): Mimics real charcoal or graphite buildup by incrementing the element's darkness by 10% on each successive pass until it reaches pure black:
JavaScript
function applyProgressiveShading(square) {
let currentOpacity = parseFloat(square.style.opacity) || 0;
if (currentOpacity < 1) {
currentOpacity += 0.1;
square.style.opacity = currentOpacity;
square.style.backgroundColor = '#000000';
}
}

4 //Guarding System Resources: Input Validation

Allowing users to customize their grid dimensions via a prompt sounds harmless until someone types 1000, instantly injecting one million DOM elements into the document and bringing the browser thread to a grinding halt.
To protect system performance—especially when running on lightweight Linux setups or constrained hardware—we implemented strict input validation and a hard performance ceiling (capping grids at $100 \times 100$):
JavaScript
function promptForNewGrid() {
let input = prompt("Enter squares per side (Maximum 100):", "16");
let size = parseInt(input);

if (isNaN(size) || size <= 0) {
alert("Please enter a valid positive number.");
return;
}

if (size > 100) {
alert("Canvas limit is 100x100 to protect browser memory performance.");
size = 100;
}

createGrid(size);
}

5//Final words, for prepping a new code:

Creating a Etch a sketch, is not another assignment to mark as completed, in the curriculum, it is about learning how to create art. Because html is not just html, and the DOM needs to be properly structured, and respected to get the desired results.

1000-7 My dream calculator come true

La.Brava0x — Thu, 22 Oct 2026 22:00:59 +0000

1000-7 My dream calculator come true.
I had to run debugging, and do other adjustments to resume, but now the next submission of a retelling is ready. Without further ado, let me tell you about another of my projects that I started it right away after the assigned basic calculator from The Odin Project.

Making a regular calculator is too boring, too predictable, everyone already has seen one of those before. There is no elegant, nor explosive element behind it. Besides, numbers can feel soothing, the rhythmic latency to keep going, keep in sync, until becoming one with the numbers, and have it envelop you, as a warm blanket of binary that makes all of the Javascript – and, as a result creating a calculator that is wholesome, and grounding, one of a kind, like no other.

It is perfect for high stakes, and extreme pressure too! Because this world shows no mercy at all! That is why you must keep counting until there is nothing left! And, it all starts with 1000-7...You don’t know if you will survive! You just keep counting! A front-end project that is not just Javascript, but also runs on the psychology of a broken soul, all captured from the game mechanics to the UX design as a whole. Several different layers of Javascript to make it work, and the index, and the style- all of them being in sync to make it happen!

A summary that describes how I originally envisioned this game, but with logic infused to it:

1. Dual-State Calculation Mechanics & Event Interception**

The core architecture supports two distinct operational modes, dynamically handled inside a single event-listener loop.
Rather than relying on basic input forms, I intercepted both UI button clicks and physical keyboard events (keydown) to maintain absolute state control:
• Operator Mode (- 7 = Progression): Allows continuous, high-speed operator execution. The engine tracks the exact target subtrahend ($1000 - 7 = 993$).
• Direct Verification Mode: Requires the user to manually calculate and type the target output (e.g., typing 993 directly).
JavaScript
// Verification & Progression Dispatcher
if (isSubtractMode) {
const subtrahend = currentInput === '' ? 7 : parseFloat(currentInput);
if (subtrahend === 7) {
processSuccessStep(expected);
} else {
// Immediate catastrophic failure trigger
triggerAllTauntsBreakdown();
}
}

##2. Dynamic Style Injection & Zero-Dependency Overlay DOM

I refused to bloat the DOM with static overlay elements or external library dependencies. Instead, the overlay structures and CSS keyframes are injected dynamically on initialization using pure JavaScript DOM generation.
JavaScript
// Dynamic CSS Injection for Animations & Jump-Scare Overlays
if (!document.getElementById('rize-breakdown-styles')) {
const styleSheet = document.createElement('style');
styleSheet.id = 'rize-breakdown-styles';
styleSheet.textContent = @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } /* Dramatic viewport distortion */ 100% { transform: translate(1px, -2px) rotate(-1deg); } } .blackout-overlay, .reward-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000000; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; };
document.head.appendChild(styleSheet);
}
This guarantees that the entire application remains completely modular within a single script—rendering pitch-black modal lockouts, glowing crimson drop-shadows (text-shadow: 0 0 15px rgba(255,0,50,0.95)), and viewport shake animations without a single external library.

##3. Asymmetrical Psychological Penalties (Randomization vs. Array Cascading)

To heighten the psychological impact, the penalty system branches based on the gravity of the user's mistake:
1. A Standard Typo or Manual Miscalculation: Triggers a singular, randomized taunt from an array pool of 8 distinct psychological psychological lines (taunts[Math.floor(Math.random() * taunts.length)]), followed by an immediate state reset back to 1000.
2. An Illegal Subtraction Attempt (e.g., attempting - 6): Interpreted as a deliberate breach of the grounding rules. The engine maps across the entire array (taunts.map(...)), cascading all 8 psychological taunts simultaneously across the blackout overlay.
JavaScript
// Illegal Subtraction Penalty: Simultaneous Array Cascade
function triggerAllTauntsBreakdown() {
isLocked = true;
streakCount = 0; // Wipe streak
calculator.classList.add('shake');

setTimeout(() => {
blackoutOverlay.innerHTML = <div class="blackout-taunts-container"> ${taunts.map(t =>

${t}

).join('')}

      </div>

      <div class="blackout-timer">[ restarting descent in ${countdown}... ]</div>

;
blackoutOverlay.classList.add('active');
}, 600);
}

4. Multi-Step Tiered Reward Modulo Logic

Sustaining focus down to 0 requires incremental reinforcement. The system uses a modulo step check (streakCount % 7 === 0) combined with keyframe state mapping to present progressive psychological monologues at exact 7-step intervals ($7 \rightarrow 14 \rightarrow 21 \rightarrow 28 \rightarrow 35\dots$).
JavaScript
// Progressive Milestone State Object
const rewardTiers = {
7: "You wish your mother would have chosen you? Scream it!...",
14: "You hate being alone? You really think someone will stay?...",
21: "No one is going to live for you, so why not just live only for yourself~?",
28: "Even if it means forsaking everything in this world? Even if it meant hurting someone? My good one"
};

function triggerStreakReward() {
isLocked = true; // Lock controls to force focused reading
const tierKey = rewardTiers[streakCount] ? streakCount : (Math.floor(streakCount / 7) * 7);
const activeMonologue = rewardTiers[tierKey] || rewardTiers[7];

// Render pitch-black reward screen with non-blocking countdown interval
}

Every key press gets an answer, and depending on the number you press on the calculator, you activate a new divergence of your fate. Is it the butterfly effect, or something else? Just by the -7 that you make, it will result on how you get to come out of it!

If you want to know more check this out:

**
// Unified Event Bus & Keypress Synchronization**

Handling inputs from both touch/mouse UI buttons and physical mechanical keyboards often introduces race conditions or double-firing bugs if state isn't locked down.
To eliminate this, I established a single execution bottleneck. The keyboard listener does not perform calculation logic itself; instead, it normalizes keypresses (Enter $\rightarrow$ =, Escape $\rightarrow$ Clear, Backspace $\rightarrow$ ←) and programmatically dispatches them directly to the button logic.
JavaScript
// Keyboard Event Normalization to UI Dispatch
document.addEventListener('keydown', (e) => {
if (isLocked) return; // Immediate drop-gate during overlays

if (e.key >= '0' && e.key <= '9') {
const btn = Array.from(buttons).find(b => b.textContent.trim() === e.key);
if (btn) btn.click();
} else if (e.key === '-' || e.key === 'Subtract') {
const btn = Array.from(buttons).find(b => b.textContent.trim() === '-');
if (btn) btn.click();
} else if (e.key === 'Enter' || e.key === '=') {
const btn = Array.from(buttons).find(b => b.textContent.trim() === '=');
if (btn) btn.click();
} else if (e.key === 'Escape') {
const btn = Array.from(buttons).find(b => b.textContent.trim() === 'Clear');
if (btn) btn.click();
}
});

By forcing keyboard input through btn.click(), the application maintains a single source of truth for sound/UI state changes, preventing fast typists from desynchronizing the display buffer.

The Asymmetrical State Lock (isLocked)**

One of the hardest parts of creating a high-stakes penalty loop is preventing input buffering exploits—where a user furiously typing - 7 = = = accidentally clicks through or bypasses a blackout screen before the browser finishes rendering it.
The state variable isLocked acts as an asymmetrical lock:
• Instant Activation: The exact microsecond an illegal subtraction or typo is detected, isLocked = true is set synchronously before setTimeout or animation loops trigger.
• Input Dropping: While isLocked === true, all button clicks and key events are silently discarded at the very top of the call stack.
• Timed Release: Control is restored only after the full 5-second breakdown timer or 8-second monologue timer completely unmounts the active CSS class (classList.remove('active')).
JavaScript
// Strict Guard Block at the Top of Every Input Flow
buttons.forEach(button => {
button.addEventListener('click', () => {
if (isLocked) return; // Hard wall against speed-typing

// ... Process input logic

});
});

CSS Vibration Physics & Viewport Distortion To make a miscalculation feel genuinely unnerving, the shake animation cannot just move the calculator side-to-side linearly. It needs rapid, jagged, multi-axis rotational shifts. By injecting raw CSS keyframe rules into the document head dynamically, we apply a high-frequency shake class that moves the UI across X, Y, and rotational axes within a $0.4\text{s}$ duration: CSS @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }

.calculator.shake {
animation: shake 0.4s ease;
}

The calculator element shakes violently for $600\text{ms}$ while displaying "UNRAVEL the world". Only after this visual disruption completes does the script pull the curtain down with the pitch-black overlay (.blackout-overlay.active).

Pure CSS Atmospheric Rendering: Crimson Text Shadowing To achieve the haunting, glowing aesthetic without loading heavy canvas assets or external graphics, the visual styling relies heavily on layered CSS text-shadow spreads and high-contrast typography. The text is styled with monospace fallback fonts ('Courier New', Courier, monospace) and a dual-layer red text shadow:

CSS
.reward-text {
font-family: 'Courier New', Courier, monospace;
font-size: 1.15rem;
color: #ff3333;
text-align: center;
line-height: 1.9;
max-width: 720px;
/* Double-layer glow: ambient red spread + sharp dark backing */
text-shadow: 0 0 15px rgba(255, 0, 50, 0.95), 2px 2px 6px #000;
user-select: none;
}

This creates the effect of terminal text burning through dark glass while keeping DOM memory overhead practically non-existent.

Algorithmic Penalty Branching & Cascading Arrays The psychological cascading is just like your own cascading arrays! For this architecture lies in how it treats mistakes based on intent: Scenario A: Single Typo / Miscalculation When a user miscalculates (e.g., typing 992 instead of 993), the algorithm treats it as a lapse in focus. It picks a single random taunt using pseudo-random index selection: $$\text{index} = \lfloor \text{Math.random()} \times \text{taunts.length} \rfloor$$ JavaScript const randomTaunt = taunts[Math.floor(Math.random() * taunts.length)];

Scenario B: Illegal Subtraction Attempt
When a user attempts to break the rules of $1000 - 7$ by executing an unauthorized subtraction (such as - 6 or - 5), the system interprets this as an attempt to cheat the descent.
Instead of selecting one taunt, it maps over the entire array pool and renders all 8 psychological taunts stacked simultaneously across the screen in a dense column of red text:
JavaScript
// Simultaneous All-Taunt Cascade
blackoutOverlay.innerHTML = <div class="blackout-taunts-container"> ${taunts.map(t =>

${t}

).join('')}

  </div>

  <div class="blackout-timer">[ restarting descent in ${countdown}... ]</div>

;

##Zero-Dependency State Persistence Mechanics
Because this entire tool is designed to run locally offline (even on low-power devices, minimalist terminal setups, or simple browser instances), keeping the code modular in a single script.js file ensures:

## Zero Node/npm Dependencies: No build steps or bundlers required.

## Instant Initialization: Direct DOM dynamic creation means as long as index.html loads script.js, all overlays, keyframe stylesheets, and event hooks auto-instantiate themselves.
## Pure Execution: Clean memory footprint with zero garbage collection lag during rapid inputs.

When code is written with this level of love, it is meant to unravel you, until it consumes you, and there are no numbers left! This is the one of a kind calculator that I dreamed of!

And, the best part? This was done with vanilla Javascript! So, imagine how it would be like with something beyond that! From the DOM to the countdown! Are you ready to become something else? And, of course, a touch of SVG to elevate it even more!

Begin the sequence of 1000-7 yourself here: https://labrava0x.github.io/TokypGhoulCalculator/

Setting up the stage for the calculator!

La.Brava0x — Tue, 20 Oct 2026 18:44:13 +0000

Ending the foundations stage, and keep moving forward!

Before I even reached this last module, many modules way back, I already knew what I wanted to do with my calculator before I even got there! But, for that, I had to reach that point, without skipping the lessons, as it is important to understand everything. That is how the vision was planned in my mind from the start!

The calculator itself was worth the challenge! Because it is not just about math, but also about bringing all the feelings, and make it bleed, and feel with purpose. That’s why the preassigned calculator from the assignment was the guide to bring that vision come to life! Here it is about orchestrating asynchronous user inputs (the mouse, and keyboard interactions), and handling edge cases gracefully. Extras just follow the script, and move on, while I just use the base to make something of my very own!

Below is a technical breakdown of this calculator that was the finishing touch to the introduction of vanilla Javascrpt.

1/ The Frankestein numerical set up

Do I even need to explain what a calculator is for? This is just about creating a digital one. Because if you don’t have a physical one, and you don’t want a cookie-cutter calculator that you are already provided with, why don’t you make your own? Anyways, to not make the DOM CONFUSED, we have to stay everything clearly,as always.

Our structure has the following variables:

~firstNumber: Stores the initial operand or the accumulated result of a previous operation.

~currentOperator: Tracks the active mathematical operators

~secondNumber: Captures the incoming operand

~resetDisplayNext: A Boolean flag that signals wether the next digit input should clear the screen (activated immediately after an operator is selected)

~justCalculated: Prevents compounding evaluation errors immediately after hitting = . It ensures absolute precision

Javacript by default, speciallly at vanilla level, is a true test in itself. A rigurous rounding utility was implemented. A real calculator cannot fail. Why? Because that is its purpose, its meaning, if you cannot calculate as a calculator, then what are you?

The initial stage were manageable, it was in its progress that there was more to do.

Mad with the Math & Safety Layering

This can turn quickly into a horror story on how Javascript gets to handle the floating-point arithmetic. To prevent native floating-point precision errors (e.g., 0.1 + 0.2=0.30000000000000000000000000004), a custom rounding utility needs to be implemented. To escape this- by calculating the number of decimal places in the operands and applying a multiplier (e.g, multiplying by 10^n before the operation, and viding by 10^n after), the application guarantees absolute accuracy….Or at least if you code it correctly.

Syntax is also important, and always look for typos!

##3/ Ascensation towards asynchronous inputs fully

Handling user input requires strict discipline. We implemented a unified event delegation strategy, ensuring that both keyboard keydown events and mouse clicks route through the exact same validation pipeline. Half implementation of logic, and half of philosophy, like the existential crisis that I am having as I am writing this.

/Input.sanitizer: Prevents users from inputting multiple decimal points or breaking the parsing logic with overlapping operators.

/Error.handler: If a user attemps to divide by zero, the system doesn’t crash; it triggers the disgraceful ERR_DIV_ZERO state, locking the interface until a reset is initiated. It’s a foolproof containment protocol.

4 UI philosophy**

The visual layer must feel right, or else it breaks the mood, and the atmosphere, and this is part of making a web app fully responsive. If it doesn’t look right, it cannot feel right! That is why checking countless times is crucial in here! The perfect alignment- it is all about aligning your soul with the code. If the grid, if every line is correct, it will show.

Anyways, for the assignment, I kept purely minimal, and minimalist. In a way, the follow-up project also has this type of design, because I felt that it was important to not have distractions, and the let the focus be on our star: the calculator itself. So, it is dark, and the calculator is dark too. I personally do not want something that would hurt my eyes more! The way it is just works for me.

I am sorry- personal issues aside- I cannot explain well-enough to a cookie-cutter assignment. It does not bring the same excitement than when making something of my own. Don't get me wrong, this was an exciting project, but it feels like on another level to just follow my vision with creative pursuits.

The first stage of operation recipe project!

La.Brava0x — Tue, 20 Oct 2026 17:09:12 +0000

Turning a boring preassigned template to a dream come true!

Why just make a generic “project”, when you can have a real project that explodes with feelings, the right atmosphere, and the kind of set up design where all dreams come true? Of course, since the beginning of The Odin Project, I had to follow my own vision, and instinct, not just follow the curriculum blindly!

Furthermore, when revisiting to an established codebase- even a foundational static project like a multi-page recipe – the objective shifts rapidly from basic markup generation to a functional web cookbook that simulates a whole new world! What kind of world you may ask? One that has the library cafe of my dreams!

And to make this happen, refinement is needed as I keep updating it as needed. Without further ado, I shall provide with the brief that examines recent refactoring my dream, to upgrade it in both the repository, and its design! It focuses on DOM path resolution, Jekyll pipiline overrides, and the complere migration from static raster assets (AI generated placeholders, until I could come up with a version of my own), to inline Scalable Vector Graphics (SVG). This design system deserves its own tribute, on how to make a dream feel reachable!

1/Resolving Structural Path Anamolies and DOM Integrity**

Switching between different projects during multitasking, and the early stage of a multi-stage cookbook, a flat directory structure paired with a centralized styles.css is critical for minimizing the confusion in the path. Moreover, inconsistent relative referencing frequently introduces routing failures.

/Fix.failure:

Initial attempts to link sibling resources or stylesheets using hierarchical prefixes (e.g, … /styles.css ) or nested folder paths) resulted in client-side exceptions. Frankly, an embarrassing mistake, display of the current foundational stage.

/root: The Document Object Model (DOM) attempted to resolve parent directories that did not exist within flat working environment. The browser’s parser was fundamentally confused by the hierarchy.

/resolution: Enforcing strict relative path parity. By normalizing all stylesheet links, and navigation anchors to point directly to root-level siblings (href=”styles.css” and hreft=”index.html”), the routing tree was stabilized. This eliminated parser stalling and the unsightly layout shifts that occur when CSS fails to load.

##2/Bypassing Jekyll Static compilation barriers on GitHub pages-build-deployment

GitHub pages defaults to a Jekyll build process, which frequently interferes with custom static deployments, and specific asset pipelines. To ensure absolute control over the repository’s output, we must implement a nojekyll file at the root level. This bypasses the unnecessary static compilation barriers, allowing our raw HTML, and SVG assets to deploy directly to the edge network without Jekyll’s meddling. It is a simple but elegant override- a true gentle touch, one that makes the new website completely viewable.

So, yes, it is really funny that each time I encounter some kind of problem, I end up learning how to do something else...At this point, I should gather all the Today I learned, and attempt to keep track of them!

##3/ Migrating to Native Inline SVG

The migration from raster images (PNG/JPG) to native inline Scalable Vector Graphics (SVG) is not just a performance optimization; it is a metter of aesthetic superiority. Plus, it was part of my practice with SVG! Inline SVGs reduce HTTP requests, allow for direct DOM manipulation via CSS, and scale infinitely without pixelation. Raster assets are a thing of the past? Maybe, or maybe not, but that is what felt right. The elegance that is achieved with vectors is unique! Specially, since manual digital illustrations (as originally intended is too time-consuming!)

Because good design requires proper code working! From the second project where I eliminated routing errors, validating document trees, and replacing static rasters with an optimized, inline SVG vector pipeline, the recipe repository transforms from a basic project to a fanart of something with a soul of its own- A summary of it that you can find in the following sequence with the second part of the second project recipe that I found.

The takeaway: Just like the final cup where you get to taste the final sips of tea- you get to experience the images of the drinks that make you feel like they hug you from the inside- and, the final strokes that make a dream come true that comes to its destination. Do not be deceived, however! You can always pour yourself another cup of tea, just like you can keep improving the code...Which leads to the question: will this project need to be revisited (just like the others)? Definitely when needed!

And, with this finalizes the layered process in my last revisiting the project in which I got to learn how to use .nojekyll, and make the website, and repository into art itself. Would it have been worth it mentioning how I experimented with Krita too?

Check out my project here: https://labrava0x.github.io/odin-recipes/index.html

DEV Community: La.Brava0x

READ OR DIE SHOPPING LIST

How it was: The admin dashboard

CSS exercises: The fight to commit and push

The CSS Grid Garden

The sign-up form project

1// Architectural Overview & Structural Foundations//**

2// Vector Graphics: Handcrafting the G.C Imperial SVG Badge**

3// Styling & Color Palette Variables (:root)**

5// Client-Side Input Validation Logic//**

5. ** Invisible Honeypot Trap (website_hp)**

6. ** Cloudflare Turnstile Bot Defense**

Making the wiki of my dreams & Giving Charles the dog a home!

1// The Split Matrix

Code as Fanart: Building Miku’s Sengoku History Sanctuary Without Compromise

The final blade!

An art studio fanart game where you get to work as an artist assistant!

1//The Blueprint: Modular Architecture and Vanilla Purity

2// Conquering the Void: Bypassing Transient Activation

3// Pixel Math: Validating Art Across 350 Stages

4// Crafting the Atmosphere: Audio, Styling, and Companions

5//Final Thoughts

Setting up the stage with the etch a sketch project

1 //The Core Challenge: Dynamic DOM Grid Generation

2// Event Routing and Mouse-State Management

3. Implementing Progressive Shading and Color Dynamics

4 //Guarding System Resources: Input Validation

5//Final words, for prepping a new code:

1000-7 My dream calculator come true

1. Dual-State Calculation Mechanics & Event Interception**

4. Multi-Step Tiered Reward Modulo Logic

The Asymmetrical State Lock (isLocked)**

Setting up the stage for the calculator!

1/ The Frankestein numerical set up

Mad with the Math & Safety Layering

4 UI philosophy**

The first stage of operation recipe project!

1/Resolving Structural Path Anamolies and DOM Integrity**

5. Invisible Honeypot Trap (`website_hp`)

6. Cloudflare Turnstile Bot Defense