toolbox/citation-generator.html at main · 100millionusd/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free Citation Generator — APA MLA Chicago</title>
  <meta name="description" content="Generate citations in APA, MLA, and Chicago formats. Books, websites, journals. Copy formatted citations. Free online citation generator for students.">
  <link rel="canonical" href="https://www.quicktools.mom/citation-generator.html">
  <meta property="og:title" content="">
  <meta property="og:description" content="">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.quicktools.mom/citation-generator.html">
  <meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="style.css">
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is Citation Generator free to use?","acceptedAnswer":{"@type":"Answer","text":"Yes! Citation Generator is completely free with no signup required. It runs entirely in your browser — your data never leaves your device."}},{"@type":"Question","name":"How do I use Citation Generator?","acceptedAnswer":{"@type":"Answer","text":"Simply enter your values in the input fields above and the results update instantly. No button clicks needed — everything calculates in real-time."}},{"@type":"Question","name":"Is my data safe with Citation Generator?","acceptedAnswer":{"@type":"Answer","text":"Absolutely. Citation Generator runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed."}}]}</script>
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
    <div class="ad-zone ad-zone-top">Ad Space</div>
    <div class="tool-header"><div class="tool-badge">🎓 Students</div><h1>Citation Generator</h1><p>Generate APA, MLA, and Chicago citations. Books, websites, and journal articles.</p></div>
    <div class="tool-card">
      <div class="controls-row">
        <div class="control-group"><label>Source Type</label><select id="srcType" onchange="toggleFields();gen()"><option value="website">Website</option><option value="book">Book</option><option value="journal">Journal Article</option></select></div>
        <div class="control-group"><label>Format</label><select id="format" onchange="gen()"><option value="apa">APA 7th</option><option value="mla">MLA 9th</option><option value="chicago">Chicago 17th</option></select></div>
      </div>
      <div class="controls-row mt-1">
        <div class="control-group"><label>Author(s)</label><input type="text" id="author" value="Smith, John A." oninput="gen()" placeholder="Last, First M."></div>
        <div class="control-group"><label>Title</label><input type="text" id="title" value="The Complete Guide to Web Development" oninput="gen()"></div>
      </div>
      <div class="controls-row mt-1">
        <div class="control-group"><label>Year</label><input type="number" id="year" value="2025" oninput="gen()"></div>
        <div class="control-group" id="pubField"><label>Publisher / Website</label><input type="text" id="publisher" value="QuickTools Blog" oninput="gen()"></div>
        <div class="control-group" id="urlField"><label>URL</label><input type="url" id="url" value="https://www.quicktools.mom/guide" oninput="gen()"></div>
      </div>
      <div class="controls-row mt-1" id="journalFields" style="display:none;">
        <div class="control-group"><label>Journal Name</label><input type="text" id="journal" oninput="gen()"></div>
        <div class="control-group"><label>Volume(Issue)</label><input type="text" id="volume" placeholder="12(3)" oninput="gen()"></div>
        <div class="control-group"><label>Pages</label><input type="text" id="pages" placeholder="45-67" oninput="gen()"></div>
        <div class="control-group"><label>DOI</label><input type="text" id="doi" placeholder="10.1000/xyz123" oninput="gen()"></div>
      </div>
    </div>
    <div class="tool-card">
      <div class="output-area"><span class="output-label">Citation</span><div id="citation" style="font-size:0.9rem;line-height:1.6;padding-left:2rem;text-indent:-2rem;"></div>
        <button class="copy-btn" onclick="navigator.clipboard.writeText(document.getElementById('citation').textContent).then(()=>{event.target.textContent='Copied!';setTimeout(()=>event.target.textContent='Copy',1500);})">Copy</button>
      </div>
      <div id="allFormats" style="margin-top:1rem;"></div>
    </div>
    <div class="ad-zone">Ad Space</div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid"><a href="gpa-calculator.html"><span class="tool-icon">🎓</span> GPA</a><a href="word-counter.html"><span class="tool-icon">📝</span> Word Counter</a><a href="reading-time.html"><span class="tool-icon">📖</span> Reading Time</a><a href="text-cleaner.html"><span class="tool-icon">🧹</span> Text Cleaner</a></div></div>

        <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About Citation Generator</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">Citation Generator is a free, browser-based tool designed for developers, content creators, and marketers. Generate citations in APA, MLA, and Chicago formats. Books, websites, journals. Copy formatted citations. Free online citation generator for students. Everything runs locally in your browser using JavaScript — no data is ever sent to a server, making it completely private and secure. The tool is designed to be intuitive and beginner-friendly while still offering advanced features for power users. It loads instantly with no installation required and works offline once loaded. Use it as often as you need — there are no daily limits, no watermarks, and no hidden fees.</p>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;"><strong>Who is this for?</strong> Citation Generator is ideal for professionals, students, freelancers, and hobbyists who want quick, reliable results without installing software or creating accounts. Whether you are on a laptop, tablet, or phone, it works seamlessly in any modern browser.</p>
      <h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
      <ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
        <li>Enter or paste your data in the input area above.</li>
        <li>Adjust settings and options to match your needs.</li>
        <li>View the results instantly — they update in real-time.</li>
        <li>Copy, download, or share your output with one click.</li>
      </ol>
    </div>
    <div class="tool-card faq-section">
      <h2 style="font-size:1.1rem;margin-bottom:1rem;">❓ Frequently Asked Questions</h2>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is Citation Generator free to use?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Yes! Citation Generator is completely free with no signup required. It runs entirely in your browser — your data never leaves your device.</p></details>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">How do I use Citation Generator?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Simply enter your values in the input fields above and the results update instantly. No button clicks needed — everything calculates in real-time.</p></details>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is my data safe with Citation Generator?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Absolutely. Citation Generator runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed.</p></details>
    </div>
    <div class="ad-zone ad-zone-bottom">Ad Space</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a></div></footer>
  </div>
  <script>
    function toggleFields(){const t=document.getElementById('srcType').value;
      document.getElementById('urlField').style.display=t==='book'?'none':'';
      document.getElementById('journalFields').style.display=t==='journal'?'flex':'none';
      document.getElementById('pubField').querySelector('label').textContent=t==='website'?'Website Name':t==='book'?'Publisher':'Journal';}
    function gen(){
      const t=document.getElementById('srcType').value;const f=document.getElementById('format').value;
      const a=document.getElementById('author').value;const ti=document.getElementById('title').value;
      const y=document.getElementById('year').value;const p=document.getElementById('publisher').value;
      const u=document.getElementById('url').value;const j=document.getElementById('journal').value||p;
      const v=document.getElementById('volume').value;const pg=document.getElementById('pages').value;
      const doi=document.getElementById('doi').value;const today=new Date().toLocaleDateString('en-US',{month:'long',day:'numeric',year:'numeric'});
      let cite='';
      if(f==='apa'){
        if(t==='website')cite=`${a} (${y}). ${ti}. <i>${p}</i>. ${u}`;
        else if(t==='book')cite=`${a} (${y}). <i>${ti}</i>. ${p}.`;
        else cite=`${a} (${y}). ${ti}. <i>${j}</i>, <i>${v}</i>, ${pg}. ${doi?'https://doi.org/'+doi:''}`;
      }else if(f==='mla'){
        if(t==='website')cite=`${a}. "${ti}." <i>${p}</i>, ${y}, ${u}. Accessed ${today}.`;
        else if(t==='book')cite=`${a}. <i>${ti}</i>. ${p}, ${y}.`;
        else cite=`${a}. "${ti}." <i>${j}</i>, vol. ${v}, ${y}, pp. ${pg}. ${doi?'https://doi.org/'+doi:''}`;
      }else{
        if(t==='website')cite=`${a}. "${ti}." ${p}. ${y}. ${u}.`;
        else if(t==='book')cite=`${a}. <i>${ti}</i>. ${p}, ${y}.`;
        else cite=`${a}. "${ti}." <i>${j}</i> ${v} (${y}): ${pg}. ${doi?'https://doi.org/'+doi:''}`;
      }
      document.getElementById('citation').innerHTML=cite;
      // Show all formats
      const formats=[{n:'APA 7th',v:'apa'},{n:'MLA 9th',v:'mla'},{n:'Chicago 17th',v:'chicago'}];
      const origF=f;document.getElementById('allFormats').innerHTML='<h3 style="font-size:0.85rem;margin-bottom:0.5rem;">📋 All Formats</h3>'+formats.filter(x=>x.v!==f).map(x=>{
        document.getElementById('format').value=x.v;gen._skip=true;
        let c='';
        if(x.v==='apa'){if(t==='website')c=`${a} (${y}). ${ti}. <i>${p}</i>. ${u}`;else if(t==='book')c=`${a} (${y}). <i>${ti}</i>. ${p}.`;else c=`${a} (${y}). ${ti}. <i>${j}</i>, <i>${v}</i>, ${pg}.`;}
        else if(x.v==='mla'){if(t==='website')c=`${a}. "${ti}." <i>${p}</i>, ${y}, ${u}.`;else if(t==='book')c=`${a}. <i>${ti}</i>. ${p}, ${y}.`;else c=`${a}. "${ti}." <i>${j}</i>, vol. ${v}, ${y}, pp. ${pg}.`;}
        else{if(t==='website')c=`${a}. "${ti}." ${p}. ${y}. ${u}.`;else if(t==='book')c=`${a}. <i>${ti}</i>. ${p}, ${y}.`;else c=`${a}. "${ti}." <i>${j}</i> ${v} (${y}): ${pg}.`;}
        return`<div style="padding:0.5rem;background:var(--bg-secondary);border-radius:6px;margin-bottom:0.3rem;font-size:0.8rem;"><strong>${x.n}:</strong> ${c}</div>`;
      }).join('');document.getElementById('format').value=origF;
    }
    toggleFields();gen();
  </script>
<script src="ads.js"></script>
</body>
</html>