ఆధునిక HTML5 APIలు: dialog, details/summary, LocalStorage & Drag-Drop

• ఆధునిక HTML5 వెబ్ APIల విప్లవం: బ్రౌజర్ నేటివ్ ఫీచర్లను ఎందుకు ప్రాధాన్యత ఇవ్వాలి?
• నేటివ్ మోడల్ డైలాగ్ ట్యాగ్ (<dialog>): బ్రౌజర్ ఇన్-బిల్ట్ పాపప్ కాంపోనెంట్ నిర్మాణం.
• showModal() vs show(): మోడల్ బ్యాక్‌డ్రాప్, స్క్రీన్ రీడర్ ఫోకస్ ట్రాప్ మరియు Escape కీ ఆటోమేటిక్ హ్యాండ్లింగ్.
• ::backdrop సూడో-ఎలిమెంట్: ఆధునిక బ్లర్ ఎఫెక్ట్స్ (backdrop-filter) మరియు డార్క్ ఓవర్‌లే స్టైలింగ్.
• డైలాగ్ లోపల ఫారమ్స్: method="dialog" తో పేజీ రీలోడ్ లేకుండా డైలాగ్ మూసివేయడం.
• కొలాప్సిబుల్ కంటెంట్ (<details> & <summary>): జీరో-జావాస్క్రిప్ట్ అకార్డియన్లు మరియు name ఆట్రిబ్యూట్ తో ఎక్స్‌క్లూజివ్ అకార్డియన్.
• వెబ్ స్టోరేజ్ API (Web Storage): కుకీస్ యొక్క 4KB పరిమితి వర్సెస్ 5MB లోకల్ స్టోరేజ్.
• LocalStorage సమగ్ర గైడ్: setItem, getItem, removeItem, clear మరియు JSON స్ట్రింగిఫికేషన్.
• SessionStorage: బ్రౌజర్ ట్యాబ్ క్లోజ్ చేయగానే డిలీట్ అయ్యే సురక్షిత సెషన్ డేటా.
• HTML5 డ్రాగ్ అండ్ డ్రాప్ (Drag & Drop): draggable, dragstart, dragover, drop ఈవెంట్లు.
• ఆధునిక డివైస్ APIలు: Geolocation, Web Share (navigator.share), Clipboard API ముఖ్యాంశాలు.
• ఇంటరాక్టివ్ క్విజ్: మీ అవగాహనను పరీక్షించే 5 ఆచరణాత్మక ప్రశ్నలు.

పూర్వపు వెబ్ డెవలప్‌మెంట్‌లో ఒక చిన్న మోడల్ పాపప్ చూపించాలన్నా — డెవలపర్లు jQuery లైబ్రరీని (90 KB), బూట్‌స్ట్రాప్ CSS మరియు JS (150 KB) ని డౌన్‌లోడ్ చేసుకునేవారు. దీనివల్ల వెబ్‌సైట్ లోడ్ అవ్వడానికి 3-4 సెకన్ల అదనపు సమయం పట్టేది, మొబైల్ ఫోన్లలో బ్యాటరీ మరియు డేటా వృధా అయ్యేది.

W3C మరియు WHATWG కమిటీలు ఆధునిక బ్రౌజర్లలోకి ఈ క్రింది సూపర్-ఫీచర్లను నేటివ్‌గా (అంటే బ్రౌజర్ ఇంజిన్ సి++ కోర్ లోనే) నిర్మించాయి:

HTML5 లో ప్రవేశపెట్టబడిన అత్యంత శక్తివంతమైన ట్యాగ్‌లలో <dialog> అగ్రస్థానంలో ఉంది. ఇది వినియోగదారుడికి నోటిఫికేషన్లు, లాగిన్ ఫారమ్‌లు, నిర్ధారణ (confirmation) సందేశాలు లేదా విండోలను చూపించడానికి అధికారిక HTML5 ఎలిమెంట్.

సాధారణ స్థితిలో <dialog> స్క్రీన్ మీద కనిపించదు (బ్రౌజర్ డీఫాల్ట్‌గా display: none; వర్తింపజేస్తుంది). దీనిని తెరవడానికి రెండు మార్గాలు ఉన్నాయి:

1. dialog.showModal(): ఇది పూర్తి స్థాయి మోడల్ విండోను తెరుస్తుంది. వెనుక ఉన్న పేజీ మొత్తం డిసేబుల్ అవుతుంది, డార్క్ బ్యాక్‌డ్రాప్ వస్తుంది, మరియు ఫోకస్ డైలాగ్ లోపలే లాక్ అవుతుంది.
2. dialog.show(): ఇది సాధారణ నాన్-మోడల్ ఫ్లోటింగ్ బాక్స్ లాగా తెరుస్తుంది. వెనుక ఉన్న పేజీని కూడా యూజర్ క్లిక్ చేయవచ్చు.

<!-- బటన్ క్లిక్ చేసి డైలాగ్ ఓపెన్ చేయండి -->
<button id="openDialogBtn" class="primary-btn">🔔 ప్రొఫైల్ ఎడిట్ చేయండి</button>

<!-- HTML5 నేటివ్ డైలాగ్ -->
<dialog id="myProfileModal" style="border:none; border-radius:12px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,0.3); max-width:400px; width:90%;">
  <h3 style="margin-top:0; color:#059669;">యూజర్ ప్రొఫైల్ అప్‌డేట్</h3>
  <p style="color:#555; font-size:14px;">దయచేసి మీ పూర్తి పేరు మరియు యూజర్‌నేమ్ సరిచూసుకోండి.</p>

  <form method="dialog" style="display:flex; flex-direction:column; gap:12px;">
    <label style="font-size:13px; font-weight:600;">పేరు:
      <input type="text" value="రమేష్ కుమార్" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:6px; margin-top:4px;" />
    </label>

    <div style="display:flex; justify-content:flex-end; gap:10px; margin-top:16px;">
      <button value="cancel" style="padding:8px 16px; border-radius:6px; border:1px solid #ddd; background:#f3f4f6; cursor:pointer;">రద్దు చేయి (Cancel)</button>
      <button value="save" style="padding:8px 16px; border-radius:6px; border:none; background:#059669; color:white; font-weight:700; cursor:pointer;">భద్రపరచు (Save)</button>
    </div>
  </form>
</dialog>

<script>
  const modal = document.getElementById('myProfileModal');
  const openBtn = document.getElementById('openDialogBtn');

  // showModal() పిలిస్తే నేటివ్ మోడల్ తెరుచుకుంటుంది
  openBtn.addEventListener('click', () => {
    modal.showModal();
  });

  // డైలాగ్ మూతపడినప్పుడు యూజర్ ఏ బటన్ నొక్కాడో చూస్తుంది
  modal.addEventListener('close', () => {
    console.log('డైలాగ్ రిటర్న్ విలువ:', modal.returnValue);
    if (modal.returnValue === 'save') {
      alert('వివరాలు విజయవంతంగా సేవ్ చేయబడ్డాయి!');
    }
  });
</script>

modal.showModal() పద్ధతికి, పాత జావాస్క్రిప్ట్ మోడల్స్‌కు ఉన్న ప్రధాన వ్యత్యాసాలను ప్రతి వెబ్ ఇంజనీర్ తప్పక అర్థం చేసుకోవాలి:

• Top Layer ప్రమోషన్: showModal() ద్వారా తెరిచిన డైలాగ్ బ్రౌజర్ యొక్క ప్రత్యేక "టాప్ లేయర్ (Top Layer)" లోకి వెళ్తుంది. అంటే పేజీలోని ఇతర ఎలిమెంట్లకు z-index: 999999; ఉన్నా సరే — డైలాగ్ వాటన్నింటి కంటే పైనే కనిపిస్తుంది! Z-index వార్స్‌కు శాశ్వత ముగింపు.
• ఆటోమేటిక్ Escape Key సపోర్ట్: యూజర్ కీబోర్డ్‌లో Esc కీ నొక్కగానే బ్రౌజర్ ఎటువంటి JS ఈవెంట్ రాయకుండానే డైలాగ్‌ను స్వయంచాలకంగా క్లోజ్ చేస్తుంది.
• Focus Trapping: యూజర్ Tab కీ నొక్కితే ఫోకస్ డైలాగ్ లోపల ఉన్న బటన్లు మరియు ఇన్‌పుట్లలోనే తిరుగుతుంది తప్ప బయటకు వెళ్ళదు. ఇది అంధులకు అద్భుతమైన a11y సౌలభ్యం.
• Inert Background: మోడల్ వెనుక ఉన్న పేజీ ఆటోమేటిక్‌గా inert అవుతుంది (మౌస్‌తో క్లిక్ చేయడానికి లేదా సెలెక్ట్ చేయడానికి వీలుండదు).

🎨 ::backdrop సూడో-ఎలిమెంట్‌తో గ్లాస్‌మార్ఫిజం (Glassmorphism):

showModal() తో ఓపెన్ అయినప్పుడు బ్రౌజర్ డైలాగ్ వెనుక ::backdrop అనే సూడో-ఎలిమెంట్‌ను ఉంచుతుంది. దీనికి CSS రాసి పేజీని డార్క్ చేయడం లేదా బ్లర్ చేయడం అత్యంత సులభం:

/* డైలాగ్ వెనుక ఉన్న పేజీని బ్లర్ & డార్క్ చేయడం */
dialog::backdrop {
  background: rgba(15, 23, 42, 0.65); /* డార్క్ ట్రాన్స్‌పరెంట్ బ్యాక్‌గ్రౌండ్ */
  backdrop-filter: blur(8px);          /* ఆధునిక ఐఓఎస్ లాంటి గ్లాస్ బ్లర్ */
  animation: fadeInBackdrop 0.3s ease;
}

/* డైలాగ్ బాక్స్ స్మూత్ ఎంట్రీ యానిమేషన్ */
dialog[open] {
  animation: popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

డైలాగ్ లోపల ఒక ఫారమ్ ఉన్నప్పుడు సాధారణంగా మనం జావాస్క్రిప్ట్‌లో event.preventDefault() రాసి బటన్ క్లిక్‌ను హ్యాండిల్ చేస్తాం. కానీ HTML5 లో <form method="dialog"> వాడితే ఒక్క లైన్ జావాస్క్రిప్ట్ లేకుండానే ఫారమ్ సబ్మిట్ అయ్యి డైలాగ్ ఆటోమేటిక్‌గా క్లోజ్ అవుతుంది!

ఫారమ్‌లోని బటన్‌కు ఇచ్చే value="..." ఆట్రిబ్యూట్ నేరుగా డైలాగ్ యొక్క modal.returnValue ప్రాపర్టీగా మారుతుంది. దీనివల్ల "యూజర్ సేవ్ చేశాడా? లేక రద్దు చేశాడా?" అనేది తెలుసుకోవడం అత్యంత సులభం:

<dialog id="confirmDeleteDialog" style="border:1px solid #fecaca; border-radius:10px; padding:20px;">
  <h4 style="color:#dc2626; margin-top:0;">⚠️ ఫైల్‌ను శాశ్వతంగా తొలగించాలా?</h4>
  <p style="font-size:14px; color:#475569;">ఈ చర్యను తిరిగి రద్దు చేయలేరు. మీరు ఖచ్చితంగా కొనసాగించాలనుకుంటున్నారా?</p>

  <form method="dialog" style="display:flex; justify-content:flex-end; gap:8px;">
    <!-- ఈ బటన్ నొక్కితే returnValue 'no' అవుతుంది -->
    <button type="submit" value="no" style="padding:6px 14px; border-radius:6px; border:1px solid #ccc; cursor:pointer;">కాదు (No)</button>
    
    <!-- ఈ బటన్ నొక్కితే returnValue 'yes' అవుతుంది -->
    <button type="submit" value="yes" style="padding:6px 14px; border-radius:6px; border:none; background:#dc2626; color:white; font-weight:700; cursor:pointer;">అవును, తొలగించు (Yes)</button>
  </form>
</dialog>

వెబ్‌సైట్లలో FAQ సెక్షన్లు, ప్రొడక్ట్ స్పెసిఫికేషన్లు, కోడ్ స్నిప్పెట్లను దాచి ఉంచడానికి పూర్వం డెవలపర్లు వందల లైన్ల CSS మరియు జావాస్క్రిప్ట్ క్లాస్ టోగుల్స్ రాసేవారు. HTML5 మనకు <details> మరియు <summary> జంట ట్యాగ్‌ల ద్వారా ఈ సామర్థ్యాన్ని స్థానికంగా అందించింది.

• <details>: కొలాప్సిబుల్ కంటెంట్ కంటైనర్. దీనికి open ఆట్రిబ్యూట్ జోడిస్తే పేజీ లోడ్ అయినప్పుడే తెరిచి ఉంటుంది.
• <summary>: ఎల్లప్పుడూ కనిపించే హెడ్డింగ్. దీని పక్కన బ్రౌజర్ చిన్న బాణం గుర్తు (disclosure triangle) ను చూపిస్తుంది.
• ఆధునిక HTML5.3 ఫీచర్ — name attribute: ఒకేసారి ఒక ప్రశ్న మాత్రమే ఓపెన్ అయ్యేలా (Exclusive Accordion) చేయడానికి అన్ని <details> ట్యాగ్‌లకు ఒకే name="faq" ఇస్తే చాలు! ఒక్క లైన్ JS కూడా అక్కర్లేదు!

<h3 style="color:#059669;">తరచుగా అడిగే ప్రశ్నలు (FAQ)</h3>

<!-- name="faq-group" ఇవ్వడం వల్ల ఒకదాన్ని తెరిస్తే మిగతావి ఆటోమేటిక్‌గా మూసుకుంటాయి -->
<details name="faq-group" open style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:12px; margin-bottom:10px;">
  <summary style="font-weight:700; cursor:pointer; color:#0f172a;">
    HTML5 పూర్తిగా ఉచితమా?
  </summary>
  <p style="margin-top:8px; color:#475569; font-size:14px; line-height:1.6;">
    అవును! HTML5 అనేది W3C మరియు WHATWG చే రూపొందించబడిన ఓపెన్ ఇంటర్నెట్ స్టాండర్డ్. దీనిని ఎవరైనా ఉచితంగా నేర్చుకుని వాడవచ్చు.
  </p>
</details>

<details name="faq-group" style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:12px; margin-bottom:10px;">
  <summary style="font-weight:700; cursor:pointer; color:#0f172a;">
    నాకు కోడింగ్ రాకపోయినా వెబ్ డిజైనింగ్ చేయవచ్చా?
  </summary>
  <p style="margin-top:8px; color:#475569; font-size:14px; line-height:1.6;">
    ఖచ్చితంగా! HTML అనేది ప్రోగ్రామింగ్ లాంగ్వేజ్ కాదు, కేవలం మార్కప్ లాంగ్వేజ్ మాత్రమే. ఇది ఎవరైనా సులభంగా నేర్చుకోగలరు.
  </p>
</details>

<details name="faq-group" style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:12px; margin-bottom:10px;">
  <summary style="font-weight:700; cursor:pointer; color:#0f172a;">
    మాస్టర్‌క్లాస్ సర్టిఫికేషన్ ఎలా పొందాలి?
  </summary>
  <p style="margin-top:8px; color:#475569; font-size:14px; line-height:1.6;">
    అన్ని 20 అధ్యాయాలు పూర్తి చేసి, చివరి Capstone పోర్ట్‌ఫోలియో ప్రాజెక్ట్‌ను విజయవంతంగా సబ్మిట్ చేస్తే సర్టిఫికేట్ పొందవచ్చు.
  </p>
</details>

బ్రౌజర్‌లో యూజర్ డేటాను (ఉదాహరణకు: డార్క్ మోడ్ థీమ్, లాగిన్ యూజర్‌నేమ్, షాపింగ్ కార్ట్ ఐటమ్స్) నిల్వ చేయడానికి పాత రోజుల్లో కుకీస్ (Cookies) మాత్రమే ఉండేవి. కుకీల వల్ల రెండు పెద్ద సమస్యలు ఉండేవి:

1. కుకీ కేవలం గరిష్టంగా 4 KB డేటాను మాత్రమే నిల్వ చేయగలదు.
2. పేజీలో ప్రతి హెచ్‌టిటిపి రిక్వెస్ట్ (ఇమేజ్, సిఎస్ఎస్, ఫాంట్స్) వెళ్ళేటప్పుడు ఆ కుకీ డేటా కూడా అనవసరంగా సర్వర్‌కు నెట్‌వర్క్ హెడర్లలో ప్రయాణిస్తుంది, దీనివల్ల బ్యాండ్‌విడ్త్ వృధా అవుతుంది.

HTML5 ప్రవేశపెట్టిన Web Storage API ఈ సమస్యలను పూర్తిగా పరిష్కరించింది. బ్రౌజర్‌లో డేటా పూర్తిగా లోకల్‌గా నిల్వ ఉంటుంది, సర్వర్‌కు అనవసరంగా వెళ్ళదు, మరియు దాదాపు 5 MB నుండి 10 MB వరకు డేటాను నిల్వ చేసుకోవచ్చు!

localStorage అనేది కీ-వాల్యూ (Key-Value) జంటల రూపంలో పనిచేస్తుంది. దీనిలో 4 ప్రధాన మెథడ్స్ ఉంటాయి:

• localStorage.setItem(key, value): డేటాను భద్రపరుస్తుంది.
• localStorage.getItem(key): డేటాను తీసుకుంటుంది (కీ లేకపోతే null వస్తుంది).
• localStorage.removeItem(key): ఒక నిర్దిష్ట కీని మాత్రమే తొలగిస్తుంది.
• localStorage.clear(): డొమైన్‌లోని అన్ని లోకల్ స్టోరేజ్ ఐటమ్‌లను ఒకేసారి డిలీట్ చేస్తుంది.

// 1. సాధారణ స్ట్రింగ్ సేవ్ చేయడం (ఉదా: థీమ్ ప్రాధాన్యత)
localStorage.setItem('theme', 'dark');

// రీడ్ చేయడం
const currentTheme = localStorage.getItem('theme');
console.log('ప్రస్తుత థీమ్:', currentTheme); // Output: "dark"


// 2. సంక్లిష్టమైన ఆబ్జెక్ట్‌ను సేవ్ చేయడం (JSON.stringify)
const userProfile = {
  id: 101,
  name: "సునీత",
  courses: ["HTML5", "CSS3", "JavaScript"],
  isPro: true
};

// ఆబ్జెక్ట్‌ను స్ట్రింగ్‌గా మార్చి స్టోర్ చేయడం
localStorage.setItem('user_session', JSON.stringify(userProfile));

// తిరిగి పొంది అసలైన ఆబ్జెక్ట్‌గా మార్చడం (JSON.parse)
const savedData = localStorage.getItem('user_session');
if (savedData) {
  const parsedUser = JSON.parse(savedData);
  console.log('యూజర్ పేరు:', parsedUser.name); // "సునీత"
  console.log('నేర్చుకుంటున్న కోర్సులు:', parsedUser.courses.join(', '));
}

// 3. ఐటమ్ డిలీట్ చేయడం
// localStorage.removeItem('user_session');

చాలామంది బిగినర్లు అడుగుతుంటారు: "LocalStorage ఉన్నప్పుడు SessionStorage ఎందుకు వాడాలి?"

ఒక నిజ జీవిత ఉదాహరణ చూద్దాం: ఒక యూజర్ ఆన్‌లైన్ బ్యాంకింగ్ లేదా ఐఆర్‌సిటీసీ (IRCTC) ట్రైన్ టికెట్ బుకింగ్ వెబ్‌సైట్ ఓపెన్ చేశాడు. యూజర్ ఒకే బ్రౌజర్‌లో రెండు వేర్వేరు ట్యాబ్‌లలో రెండు వేర్వేరు టికెట్లు బుక్ చేయడానికి ప్రయత్నిస్తున్నాడు అనుకోండి. ఒకవేళ ఆ టికెట్ వివరాలు localStorage లో సేవ్ చేస్తే — ఒక ట్యాబ్‌లోని డేటా మరొక ట్యాబ్‌లోకి ఓవర్‌రైట్ అయిపోయి తీవ్రమైన గందరగోళం ఏర్పడుతుంది!

అటువంటి సందర్భాలలో SessionStorage అమూల్యమైనది. దీని ప్రత్యేకతలు:

• ట్యాబ్ ఐసోలేషన్: ఒకే వెబ్‌సైట్ అయినప్పటికీ, ప్రతి బ్రౌజర్ ట్యాబ్‌కు దాని స్వంత ప్రత్యేక SessionStorage ఉంటుంది. ఒక ట్యాబ్‌లోని డేటాను మరొక ట్యాబ్ చూడలేదు.
• ఆటో ఎక్స్‌పైరీ: యూజర్ ఆ బ్రౌజర్ ట్యాబ్‌ను క్లోజ్ చేయగానే ఆ సెషన్ డేటా శాశ్వతంగా తుడిచిపెట్టుకుపోతుంది. పేజీని కేవలం Refresh చేస్తే డేటా పోదు!
• సింటాక్స్: LocalStorage లాగే దీనికి కూడా sessionStorage.setItem(), getItem(), removeItem() ఉంటాయి.

// మల్టీ-స్టెప్ ఫారమ్‌లో ప్రస్తుత స్టెప్‌ను స్టోర్ చేయడం
sessionStorage.setItem('checkout_step', '2');
sessionStorage.setItem('temp_seat_number', 'B4-22');

// పేజీ రీఫ్రెష్ అయినా కూడా అదే స్టెప్‌లో ఉండటానికి
const currentStep = sessionStorage.getItem('checkout_step');
console.log('యూజర్ ప్రస్తుత చెక్అవుట్ దశ:', currentStep);

// ట్యాబ్ మూసివేయగానే ఈ డేటా స్వయంచాలకంగా నాశనమవుతుంది!

Trello, Jira లేదా Kanban బోర్డులలో మనం ఒక టాస్క్ కార్డును మౌస్‌తో పట్టుకుని "To-Do" కాలమ్ నుండి "Done" కాలమ్‌లోకి లాగి వదులుతాం (Drag and Drop). HTML5 రాకముందు దీనికోసం సంక్లిష్టమైన మౌస్ కోఆర్డినేట్ మ్యాథమెటిక్స్ రాసేవారు. కానీ HTML5 లో ఇది కేవలం కొన్ని ఈవెంట్ల ద్వారా నేరుగా పనిచేస్తుంది!

డ్రాగ్ అండ్ డ్రాప్ 3 ముఖ్యమైన దశలు:

1. ఎలిమెంట్‌ను డ్రాగబుల్ చేయడం: ఏ ఎలిమెంట్‌నైతే లాగాలనుకుంటున్నామో దానికి draggable="true" ఆట్రిబ్యూట్ ఇవ్వాలి.
2. dragstart ఈవెంట్‌లో డేటా భద్రపరచడం: లాగడం మొదలుపెట్టినప్పుడు event.dataTransfer.setData('text/plain', element.id) ద్వారా ఐడీని పంపుతాం.
3. డ్రాప్ జోన్‌లో అంగీకరించడం: డ్రాప్ చేయాల్సిన ప్రదేశంలో బ్రౌజర్ యొక్క డీఫాల్ట్ బిహేవియర్‌ను నిరోధించడానికి event.preventDefault() చేయాలి (ఇది చేయకపోతే డ్రాప్ ఈవెంట్ ట్రిగ్గర్ అవ్వదు!), ఆపై drop ఈవెంట్‌లో ఎలిమెంట్‌ను అపెండ్ చేస్తాం.

<style>
  .box-container { display: flex; gap: 20px; }
  .dropzone { width: 180px; min-height: 140px; border: 2px dashed #059669; border-radius: 8px; padding: 10px; background: #ecfdf5; }
  .card { padding: 12px; background: white; border: 1px solid #10b981; border-radius: 6px; cursor: grab; font-weight: 600; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
  .card:active { cursor: grabbing; }
</style>

<div class="box-container">
  <!-- జోన్ 1: చేయవలసిన పనులు (To-Do) -->
  <div class="dropzone" id="zone1" ondragover="allowDrop(event)" ondrop="handleDrop(event)">
    <div style="font-size:12px; font-weight:700; color:#059669; margin-bottom:8px;">📋 చేయవలసినవి (To-Do)</div>
    <div id="task1" class="card" draggable="true" ondragstart="handleDrag(event)">
      📝 HTML5 చాప్టర్ 19 చదవాలి
    </div>
  </div>

  <!-- జోన్ 2: పూర్తయినవి (Completed) -->
  <div class="dropzone" id="zone2" ondragover="allowDrop(event)" ondrop="handleDrop(event)">
    <div style="font-size:12px; font-weight:700; color:#059669; margin-bottom:8px;">✅ పూర్తయినవి (Done)</div>
  </div>
</div>

<script>
  // 1. డ్రాగింగ్ మొదలైనప్పుడు ఐడీని ప్యాక్ చేయడం
  function handleDrag(e) {
    e.dataTransfer.setData("text/plain", e.target.id);
  }

  // 2. డ్రాప్ జోన్ అనుమతించడం (preventDefault తప్పనిసరి!)
  function allowDrop(e) {
    e.preventDefault();
  }

  // 3. డ్రాప్ చేసినప్పుడు ఎలిమెంట్‌ను కొత్త బాక్స్‌లోకి చేర్చడం
  function handleDrop(e) {
    e.preventDefault();
    const elementId = e.dataTransfer.getData("text/plain");
    const draggedCard = document.getElementById(elementId);
    // డ్రాప్ జోన్ లేదా దాని లోపలి కంటైనర్‌కు అపెండ్ చేయడం
    if (e.target.classList.contains('dropzone')) {
      e.target.appendChild(draggedCard);
    }
  }
</script>

HTML5 వెబ్ యాప్‌లు కేవలం స్టాటిక్ పేజీలు కావు; అవి మొబైల్ లేదా ల్యాప్‌టాప్ హార్డ్‌వేర్ ఫీచర్లతో నేరుగా సంభాషించగలవు:

// 1. ఆధునిక క్లిప్‌బోర్డ్ కాపీ బటన్
async function copyReferralCode() {
  try {
    await navigator.clipboard.writeText("MANA-HTML5-2026");
    alert("రెఫరల్ కోడ్ క్లిప్‌బోర్డ్‌కు కాపీ చేయబడింది! 📋");
  } catch (err) {
    console.error("కాపీ విఫలమైంది:", err);
  }
}

// 2. నేటివ్ మొబైల్ షేర్ షీట్ ఓపెన్ చేయడం
async function shareArticle() {
  if (navigator.share) {
    try {
      await navigator.share({
        title: 'ఆధునిక HTML5 Masterclass in Telugu',
        text: 'తెలుగులో అద్భుతమైన HTML5 APIలను ఉచితంగా నేర్చుకోండి!',
        url: window.location.href
      });
    } catch (err) {
      console.log('షేరింగ్ రద్దు చేయబడింది');
    }
  } else {
    alert('మీ బ్రౌజర్‌లో నేటివ్ షేర్ API సపోర్ట్ లేదు; దయచేసి లింక్ కాపీ చేసుకోండి.');
  }
}

ఈ అధ్యాయంలో మీరు నేర్చుకున్న ఆధునిక HTML5 APIల భావనలను పరీక్షించుకోవడానికి క్రింది ప్రశ్నలపై క్లిక్ చేసి సరైన సమాధానాలను పరిశీలించండి: