🎸 Skullcapz Dev Shop – Fan Feature Drops

🎓 About This Project

This activity is part of the Global Career Accelerator – Coding for Web course.
You’ll be using HTML, CSS, JavaScript, and AI tools to build real interactive features for a fictional band’s website.

In this Dev Shop simulation, your team will create beginner-friendly features for Skullcapz, a fictional heavy metal band.
You’ll apply JavaScript fundamentals like functions, DOM manipulation, and logic — while learning how to use AI to scaffold, debug, and refine your code.

---

🧠 What You’ll Be Doing

In this lab, you'll simulate working in a Dev Shop.
Your job? Use beginner JavaScript skills to build one of six interactive features for the band Skullcapz.

You’ll practice:

• Writing and editing simple JavaScript functions
• Updating the page using the DOM
• Prompting AI (like ChatGPT or Copilot) to scaffold and debug your feature

This site includes:

• ✅ A randomized Setlist Generator
• ⏳ A dynamic Countdown Timer to Skullcapz’s first show
• 🛠️ Team-assigned features that you'll build using JavaScript and AI

---

🧪 Getting Started

Open this project in GitHub Codespaces or your own code editor.

Files to Edit

• index.html — where you’ll add buttons, text, and containers
• style.css — optional styles for polish
• script.js — where you’ll write your JavaScript

💡 Use the HTML comment tags (<!-- -->) to find where to add your team’s code!

---

⚙️ How This Repo Is Organized

Folder/File	Purpose
index.html	Base layout with placeholder sections for each feature
style.css	Starter styles to keep things clean and readable
script.js	Some demo code (Setlist + Timer) and pre-written scaffolds for each team task
assets/	Contains logo and concert images you can reuse if helpful

---

🛠 Team Feature Options

You’ll build one of these features with your team:

Task Name	What It Does
🏆 VIP Ticket Winner Generator	Randomly picks and displays a winner from a list of emails
🎶 Fan Favorite Showdown	Lets fans vote on their favorite song with a simple counter
📍 Tour Date Spotlight	Click a city to reveal the venue and date
🛣 On the Road Again	Automatically shows the next upcoming tour date
✉️ Entry Checkpoint	Checks if the user input is a valid email address
📖 Band Bio Toggle	Reveals or hides a short bio section on click

Ask AI to help you get started or debug — prompts are listed in your LiveLab Resource Doc!

---

---

🤘 Who Are Skullcapz?

Skullcapz is a fictional Norwegian heavy metal band created for this Dev Shop simulation.
They’re known for their gritty monochrome aesthetic, high-energy performances, and surprisingly loyal fanbase.

• 🎵 Genre: Heavy Metal, Alt Rock
• 🌍 Origin: Norway
• 🌐 Monthly Listeners:
  • Spotify: 100K
  • Tidal: 30K
• 👁️‍🗨️ Website Traffic: ~5K visits/month
• 🎨 Vibe: Monochrome, dark, stage smoke mandatory

🎤 Meet the Band

• 🧑‍🎤 Lead Vocals: Astrid
• 🎸 Guitar: Rune
• 🥁 Drums: Lars
• 🎹 Synths: Ingrid
• 🎸 Bass: Bjorn (fan favorite)

Use these details for fun — you might reference them in your code, your prompts, or your team’s feature design. Want to personalize the project? Ask AI to write bios, add band lore, or build out the tour!

---

💡 Tips for Working with AI

• Start with plain English: “How can I build a button that…”
• Ask follow-ups if you don’t understand the output
• Test often in the browser — even if the AI code looks “right”
• Ask for HTML and JavaScript together in one prompt.
• If AI gives too much, copy just the parts you need.

---

Happy coding! 🤘

🛠 Made with ✨ by the Global Career Accelerator – Coding for Web team.