Virtual Farewell Wish Board

A simple, beautiful, and serverless virtual farewell card. It's built to be hosted on GitHub Pages and uses Google Forms and Google Sheets as a free "database" to collect and display messages from your team.

This project was created to give remote teams a way to create a shared, personal, and "live" card for departing colleagues.

^ (Replace this with a screenshot of your own card!)

---

⚙️ How It Works

This project uses a "serverless" approach by combining a few free tools:

1. A Google Form is used to collect names and messages.
2. All submissions are automatically sent to a Google Sheet.
3. The Google Sheet is "Published to the web" as a .tsv file (Tab-Separated Values).
4. Client-side JavaScript (script.js) on the GitHub Pages site fetches this .tsv file every time the page is loaded.
5. The script parses the data and dynamically generates the HTML "wish cards" on the page.

Messages appear ~5 minutes after submission due to Google's publishing cache.

---

✨ Features

• Dynamic: Messages from the team appear "live" on the card.
• Serverless: No backend, no database, no server management.
• 100% Free: Hosted on GitHub Pages with Google Sheets as the data source.
• Beautiful UI: A responsive, modern, and heartfelt design.
• Easy to Set Up: Be up and running in about 5 minutes.
• Controllable: Easily "freeze" the card at any time by closing the Google Form.

---

🚀 Getting Started: 5-Minute Setup

Follow these steps exactly to launch your own wish board.

Step 1: Set up the Google Form (The "Input")

1. Go to forms.google.com.
2. Create a new, blank form.
3. Add a "Short answer" question. Title it Your Name and make it "Required".
4. Add a "Paragraph" question. Title it Your Wish for jane (or your colleague's name) and make it "Required".
5. Click the "Send" button in the top-right corner.
6. Go to the "Link" tab (🔗 icon).
7. Click "Copy" to copy the shareable link. You will need this in Step 4.

Step 2: Link to Google Sheets (The "Database")

1. In your Google Form, click the "Responses" tab at the top.
2. Click the green Google Sheets icon ("View in Sheets").
3. Select "Create a new spreadsheet" and click "Create".
4. This will open a new spreadsheet with columns: Timestamp, Your Name, and Your Wish....

Step 3: Publish the Sheet (The "API")

This is the most critical step.

1. In the new Google Sheet, go to File > Share > Publish to web.
2. A new window will pop up.
3. Under "Link", in the first dropdown, select your responses sheet (e.g., Form Responses 1).
4. In the second dropdown, select Tab-separated values (.tsv).
5. Click the "Publish" button.
6. Confirm by clicking "OK".
7. A URL will appear in a box. Copy this URL. You will need this in Step 4.

Step 4: Configure the Code

Now, you'll connect your form and sheet to the website code.

1. Fork this repository to your own GitHub account. (Or, download the code and create a new repository).
2. Edit index.html:
   • Find the <a> tag at the bottom with the id="add-message-link".
   • Replace its href="#" with your Google Form link from Step 1.

   <a href="#" id="add-message-link" ...>
   
   <a href="[https://forms.gle/YOUR_UNIQUE_FORM_LINK](https://forms.gle/YOUR_UNIQUE_FORM_LINK)" id="add-message-link" ...>

3. Edit script.js:
   • Find the googleSheetURL constant at the top of the file.
   • Paste your published .tsv link from Step 3.

   // BEFORE
   const googleSheetURL = 'YOUR_PUBLISHED_GOOGLE_SHEET_TSV_URL_GOES_HERE';
   
   // AFTER (Example)
   const googleSheetURL = '[https://docs.google.com/spreadsheets/d/e/2PACX-1v.../pub?gid=...&single=true&output=tsv](https://docs.google.com/spreadsheets/d/e/2PACX-1v.../pub?gid=...&single=true&output=tsv)';

Step 5: Deploy to GitHub Pages

1. Commit and push your changes to your repository's main branch.
2. In your repository, go to Settings > Pages.
3. Under "Build and deployment," select Deploy from a branch.
4. Set the branch to main and the folder to /root.
5. Click Save.

After a minute or two, your site will be live at https://your-username.github.io/your-repo-name/.

---

💌 How to Use

1. Send the GitHub Pages link (e.g., https://wishboard.github.io/wishboard-for-jane/) to your coworkers in Slack, Teams, or email.
2. Team members click the "Add Your Personal Message" button.
3. They fill out the Google Form.
4. Their message will appear on the card automatically (after ~5 minutes).

---

❄️ How to "Freeze" the Card

When the farewell day has passed, you can easily stop new messages.

1. Open your Google Form.
2. Go to the "Responses" tab.
3. Toggle off the "Accepting responses" switch.

That's it! The form will now show a "Not accepting responses" message, but the card will remain online for your colleague to read.

To take the data offline permanently: If you want to remove the public data, go to your Google Sheet, navigate to File > Share > Publish to web, and click "Stop publishing". This will break the data link, and the card will show a "Could not load messages" error.