Front-End Exercise 1

Exercise #1 · Bug Report Simulation — Broken Button

Front-end · Speaking

Assignment & Scenario: You are a junior front-end Developer on a sprint demo. A stakeholder says the “Click Me” button should change color on hover and show an alert on click. Your task is to reproduce issues, think aloud, and report the bug as if speaking to a developer.

Live Demo (broken on purpose)

Try hovering and clicking. Then describe what happens out loud.

<!-- Minimal broken example you can reuse elsewhere -->
<style>
  .btn { background:#3498db; color:#fff; padding:14px 22px; border:none; border-radius:10px; cursor:pointer; }
  /* BUG: misspelled CSS property prevents hover color change */
  .btn:hover { background-colr:#2980b9; }
</style>

<button class="btn" id="brokenBtn">Click Me</button>

<script>
  // BUG: wrong ID, so the click handler never attaches
  document.getElementById('brokenButton').addEventListener('click', function(){
    alert('Button clicked!');
  });
</script>

🎤 Speaking Instructions (in-class) how to perform

State the title (1 sentence): “Broken button on demo page.”
Environment: “Chrome 127 on Windows 11, 1920×1080, dark mode off.”
Steps to reproduce (numbered, concise):
1. Open the Bug Report Simulation page.
2. Hover the “Click Me” button.
3. Click the button.
Expected vs. Actual (contrast clearly):
- Expected: Hover color changes; clicking shows an alert.
- Actual: Hover color does not change; clicking does nothing.
Observed clues (optional): “No console error; suspect CSS typo or JS selector mismatch.”
Severity & impact: “Medium—primary CTA appears unresponsive; may reduce conversions.”
Proposed next step: “Check hover property spelling and the button’s ID in the click handler.”
Hand-off: “I’ll attach a short screen recording and open a ticket in Jira.”

📖 Vocabulary definitions

steps to reproduce — the exact actions needed to trigger a bug.
expected behavior — what should happen according to requirements.
actual behavior — what happens in reality when you test.
severity — how serious the bug is for users or the business.
priority — how soon the bug should be fixed compared to others.
selector — a pattern that targets elements in CSS/JS (e.g., #id, .class).
event listener — code that waits for and responds to events like clicks or hovers.
hover state — a visual style applied when the mouse is over an element.
regression — a new change that breaks something that worked before.
workaround — a temporary way to avoid a bug’s impact.
console — the browser’s developer log for messages and errors.
CSS specificity — rules that decide which CSS styles win when there’s a conflict.
accessible name — the label a screen reader announces for a control.

🧩 Collocations natural pairings

file a bug / open a ticket
attach screenshots / a screen recording
describe the impact / severity
reproduce the issue consistently
narrow down the root cause
hand off to the developer
roll back a change
work around the bug

🗣️ Idioms & Phrasal Verbs natural speech

edge case — a rare or unusual situation.
on the fly — done quickly without preparation.
nip it in the bud — stop a small problem early.
track down — find the source of a problem.
rule out — eliminate a possible cause.
fall back to — use a backup plan or default.
bump up/down — increase/decrease (e.g., priority).
talk through — explain step by step.
spin up — start a new instance quickly.
roll back — revert to a previous version.

🧪 Model Answer (spoken style) example

“Title: Broken button on demo page. Environment: Chrome on Windows 11, 1080p. Steps to reproduce: one—open the simulation page; two—hover over the ‘Click Me’ button; three—click the button. Expected: on hover the color should change, and on click I should see an alert. Actual: the hover color does not change and clicking does nothing. Impact: the main call-to-action appears unresponsive, which can hurt conversions—so I’d mark the severity as medium and priority as high for this sprint. I checked the console and didn’t see errors. My hypothesis is a CSS typo on the hover rule and a JavaScript ID mismatch, so the click listener never attaches. Next step: correct the property name in CSS and use the same ‘brokenBtn’ ID in the click handler. I’ll attach a short screen recording and file the ticket now.”