From 153670d97e9046528877fb2615ea846b099db2a9 Mon Sep 17 00:00:00 2001 From: Sven Minio Date: Sun, 17 May 2026 20:01:43 +0200 Subject: [PATCH] Add Quick Start --- Quick-Start.md | 138 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 Quick-Start.md diff --git a/Quick-Start.md b/Quick-Start.md new file mode 100644 index 0000000..56fc65f --- /dev/null +++ b/Quick-Start.md @@ -0,0 +1,138 @@ +# 🚀 Quick Start Guide + +Welcome to jBase! This guide will help you get up and running in minutes. We will cover the basics of selecting elements, handling events, and fetching data. + +--- + +## 1. Setup + +Ensure you have included jBase in your project. + +### Option A: CDN / Static +```html + + + + + jBase App + + +
+ + + + + + +``` + +### Option B: Node.js / Bundler + +```javascript +import { $ } from 'jbase'; +// or +const { $ } = require('jbase'); + +``` + +--- + +## 2. Basic DOM Manipulation + +Selecting elements and changing their content is the most common task. jBase uses the familiar `$(selector)` syntax. + +```javascript +// Wait for DOM ready +$(document).ready(() => { + + // 1. Select by ID and change text + $('#title').text('Hello jBase!'); + + // 2. Select by Class and change CSS + $('.box').css({ + 'background-color': '#3498db', + 'color': 'white', + 'padding': '20px' + }); + + // 3. Append HTML content + $('#app').append(''); + +}); + +``` + +--- + +## 3. Handling Events + +Interactivity is key. Let's make that button work. + +```javascript +// Bind a click event +$('#click-me').on('click', function(e) { + e.preventDefault(); + alert('You clicked the button!'); +}); + +// Shorthand method +$('#click-me').click(() => { + console.log('Clicked via shorthand!'); +}); + +// Hover effect +$('.box') + .mouseenter(() => console.log('Mouse In')) + .mouseleave(() => console.log('Mouse Out')); + +``` + +--- + +## 4. Working with Arrays & Data + +jBase isn't just for the DOM. It includes powerful data utilities. + +```javascript +const users = [ + { id: 1, name: 'Alice', role: 'admin' }, + { id: 2, name: 'Bob', role: 'user' }, + { id: 3, name: 'Charlie', role: 'user' } +]; + +// 1. Find the first admin +const admin = $.data.find.first(users, 'admin', 'exact', 'role'); +console.log(admin); // { id: 1, name: 'Alice', ... } + +// 2. Remove user with ID 2 (Immutable!) +const newUsers = $.data.remove.byMatch(users, 2, 'exact', 'id'); +console.log(newUsers.length); // 2 + +``` + +--- + +## 5. Fetching Data (AJAX) + +Loading data from an API is built-in and Promise-based. + +```javascript +$.http.get('https://jsonplaceholder.typicode.com/todos/1') + .then(data => { + // Success + $('#app').append(`

Loaded: ${data.title}

`); + }) + .catch(err => { + // Error + console.error('Failed to load data', err); + }); + +``` + +--- + +## What's Next? + +Now that you know the basics, explore the detailed modules, look at sidebar!