Pics-a-Gram

Third-Party Assets

• Recycle-bin icon: media/recycle-bin.png

Libraries & Frameworks

• cols.css (12-column layout grid from lab) :contentReference[oaicite:0]{index=0}
• meact.js for lightweight state management

AI Assistance (GitHub Copilot)

All Copilot-generated code fragments below are preceded by the prompt used to generate them, as required:

• Prompt: “How do I implement a duplicate-guard for comments in JavaScript?”
  Generated snippet:

  
  // if an existing comment has the same author & content, skip it
  const alreadyExists = image.comments.some(c =>
    c.author === author && c.content === content
  );
  if (alreadyExists) return;
            

• Prompt: “How can I create a modal popup for my Add Image form using CSS?”
  Generated markup & styles:

  <div class="modal hidden">
    <div class="modal-content">
      <button class="modal-close">×</button>
      <!-- Add Image form fields here -->
    </div>
  </div>
  
  /* modal.css */
  .modal {
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.5); z-index: 1000;
  }
  .modal.hidden { display: none; }
  
            

• Prompt: “How do I add an icon to a button with CSS?”
  Generated CSS:

  .icon-btn {
    background-image: url("../media/recycle-bin.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.25rem;
  }
            

• Prompt: “Give me a background gradient animation in CSS.”
  Generated keyframes:

  @keyframes gradientShift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
  }
  body {
    background: linear-gradient(120deg, #f6d365, #fda085, #f093fb, #6fa3ef);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
  }