🎯 Harada Square (9×9 Mandala Chart)

A goal-planning web app based on the Harada Method — the same technique used by MLB star Shohei Ohtani to plan his path to success.

🚀 Try it Live

---

What is a Harada Square?

The Harada Square (Mandala Chart) is a 9×9 goal-setting framework that breaks down one main goal into actionable strategies:

Element	Count	Description
🎯 Main Goal	1	Your ultimate objective (center)
🟣 8 Pillars	8	Major strategies supporting the goal
⬜ 64 Actions	64	Specific tasks for each pillar

┌─────────┬─────────┬─────────┐
│ Pillar 1│ Pillar 2│ Pillar 3│
│ Actions │ Actions │ Actions │
├─────────┼─────────┼─────────┤
│ Pillar 4│ 🎯      │ Pillar 5│
│ Actions │ GOAL    │ Actions │
├─────────┼─────────┼─────────┤
│ Pillar 6│ Pillar 7│ Pillar 8│
│ Actions │ Actions │ Actions │
└─────────┴─────────┴─────────┘

---

✨ Features

• Full 9×9 Grid — 81 editable cells with proper Mandala structure
• Auto-Sync Pillars — Edit a pillar once, it copies to outer sections
• Visual Distinction — Yellow = Main Goal, Purple = Pillars, White = Actions
• Auto-Save — Changes persist automatically in browser
• Save/Load Templates — Store multiple charts with custom names
• Share Link — Generate a URL to share your chart (client-side encoded)
• Print/PDF Export — Clean printable layout
• Fully Static — No backend, works on GitHub Pages
• Mobile Friendly — Responsive design with horizontal scroll

---

🛠️ Tech Stack

• HTML5 / CSS3 / Vanilla JavaScript
• No frameworks or build tools
• LocalStorage for persistence
• Base64 URL encoding for sharing

---

🚀 Quick Start

Run Locally

# Clone the repo
git clone https://github.com/KaavinB/Harada_Goal_Method.git
cd Harada_Goal_Method

# Serve locally (any method works)
python3 -m http.server 8080
# Open http://localhost:8080

Deploy to GitHub Pages

1. Fork or clone this repository
2. Go to Settings → Pages
3. Set Source to Deploy from branch → main → / (root)
4. Your app will be live at https://YOUR_USERNAME.github.io/Harada_Goal_Method/

---

📖 How to Use

1. Start with the center — Write your main goal in the yellow cell
2. Define 8 pillars — Fill the purple cells around the center with major strategies
3. Add 64 actions — Fill white cells with specific tasks for each pillar
4. Save your work — Click "Save" to store as a named template
5. Share or print — Use "Share" for a link or "Print" for PDF export

---

⌨️ Keyboard Shortcuts

Key	Action
Tab	Move to next cell
Ctrl/Cmd + S	Save template
Ctrl/Cmd + P	Print / Export PDF
Escape	Close modal

---

📁 Project Structure

├── index.html    # Main HTML
├── styles.css    # Styling + Print CSS
├── script.js     # All functionality
└── README.md     # This file

---

🖨️ Printing Tips

• Use Landscape orientation
• Enable Background graphics for colors
• Select Save as PDF for PDF export

---

📄 License

MIT License — free to use, modify, and share.

---

🙏 Inspiration

Based on the Harada Method by Takashi Harada, famously used by Shohei Ohtani who created his Mandala Chart in high school with the goal "Get drafted by 8 NPB teams."