| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ARKjs - Easy DOM Manipulation Library</title> |
| <link rel="stylesheet" href="styles.css"> |
| <script src="ark.mini.js" defer></script> |
| <script src="app.js" defer></script> |
| </head> |
| <body> |
| <header class="header"> |
| <div class="container"> |
| <h1>ARK<span>js</span></h1> |
| <p>A lightweight JavaScript library for easy DOM manipulation and styling</p> |
| </div> |
| </header> |
|
|
| <nav class="navbar"> |
| <div class="container"> |
| <ul> |
| <li><a href="#getting-started">Getting Started</a></li> |
| <li><a href="#examples">Examples</a></li> |
| <li><a href="#api">API Reference</a></li> |
| <li><a href="#download">Download</a></li> |
| </ul> |
| </div> |
| </nav> |
|
|
| <main class="container"> |
| <section id="getting-started"> |
| <h2>Getting Started</h2> |
| <article> |
| <h3>Installation</h3> |
| <div class="code-tabs"> |
| <button class="active" data-tab="cdn">CDN</button> |
| <button data-tab="npm">NPM</button> |
| </div> |
| <div class="code-content active" id="cdn"> |
| <pre><code class="html"><script src="<b id="link"></b>"></script></code></pre> |
| </div> |
| <div class="code-content" id="npm"> |
| <pre><code class="bash">npm install arkjs</code></pre> |
| </div> |
| </article> |
|
|
| <article> |
| <h3>Basic Usage</h3> |
| <pre><code class="javascript">// Create a button |
| ARK.create('button') |
| .text('Click me') |
| .css({ |
| padding: '10px 20px', |
| backgroundColor: '#4285f4', |
| color: 'white' |
| }) |
| .on('click', () => alert('Hello ARKjs!')) |
| .appendTo('body');</code></pre> |
| </article> |
| </section> |
|
|
| <section id="examples"> |
| <h2>Examples</h2> |
| <div class="example-grid"> |
| <div class="example-card" id="example1"> |
| <h3>Simple Element Creation</h3> |
| <div class="example-output"></div> |
| <button class="run-example">Run Example</button> |
| <pre><code class="javascript">ARK.create('div') |
| .text('Hello World!') |
| .css({ color: 'red', fontSize: '24px' }) |
| .appendTo('#example1 .example-output');</code></pre> |
| </div> |
|
|
| <div class="example-card" id="example2"> |
| <h3>Event Handling</h3> |
| <div class="example-output"></div> |
| <button class="run-example">Run Example</button> |
| <pre><code class="javascript">ARK.create('button') |
| .text('Click Me') |
| .on('click', () => { |
| ARK.create('p') |
| .text('Button clicked!') |
| .appendTo('#example2 .example-output'); |
| }) |
| .appendTo('#example2 .example-output');</code></pre> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="api"> |
| <h2>API Reference</h2> |
| <div class="api-table"> |
| <table> |
| <thead> |
| <tr> |
| <th>Method</th> |
| <th>Description</th> |
| <th>Example</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td><code>ARK.create(tag, attributes)</code></td> |
| <td>Creates a new element</td> |
| <td><code>ARK.create('div', { id: 'box' })</code></td> |
| </tr> |
| <tr> |
| <td><code>.attr(key, value)</code></td> |
| <td>Sets or gets attributes</td> |
| <td><code>.attr('id', 'main')</code></td> |
| </tr> |
| <tr> |
| <td><code>.css(property, value)</code></td> |
| <td>Sets or gets styles</td> |
| <td><code>.css({ color: 'red' })</code></td> |
| </tr> |
| <tr> |
| <td><code>.text(content)</code></td> |
| <td>Sets text content</td> |
| <td><code>.text('Hello')</code></td> |
| </tr> |
| <tr> |
| <td><code>.appendTo(target)</code></td> |
| <td>Appends to another element</td> |
| <td><code>.appendTo('#container')</code></td> |
| </tr> |
| <tr> |
| <td><code>.on(event, handler)</code></td> |
| <td>Adds event listener</td> |
| <td><code>.on('click', handler)</code></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </section> |
|
|
| <section id="download"> |
| <h2>Download</h2> |
| <div class="download-options"> |
| <a href="ark.min.js" download class="download-btn">Download ARKjs (minified)</a> |
| <a href="ark.js" download class="download-btn">Download ARKjs (development)</a> |
| </div> |
| </section> |
| </main> |
|
|
| <footer> |
| <div class="container"> |
| <p>ARKjs © 2023 | MIT License</p> |
| </div> |
| </footer> |
| <script src="link.js"></script> |
| </body> |
| </html> |
