diff --git a/docs/Javascript/Beginner/_category_.json b/docs/Javascript/Beginner/_category_.json
deleted file mode 100644
index ca9ce16..0000000
--- a/docs/Javascript/Beginner/_category_.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "label": "Beginner",
- "position": 1,
- "link": {
- "type": "generated-index",
- "description": "Start your JavaScript journey here! Learn the fundamentals step by step."
- },
- "collapsible": true,
- "collapsed": false
-}
diff --git a/docs/Javascript/Intermediate/_category_.json b/docs/Javascript/Intermediate/_category_.json
deleted file mode 100644
index 5e98d8e..0000000
--- a/docs/Javascript/Intermediate/_category_.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "label": "Intermediate",
- "position": 2,
- "link": {
- "type": "generated-index",
- "description": "Level up your JavaScript skills with DOM manipulation, ES6+, async programming, and more!"
- },
- "collapsible": true,
- "collapsed": false
-}
diff --git a/docs/Javascript/Intermediate/async-javascript/async-await.md b/docs/Javascript/Intermediate/async-javascript/async-await.md
deleted file mode 100644
index 222da27..0000000
--- a/docs/Javascript/Intermediate/async-javascript/async-await.md
+++ /dev/null
@@ -1,969 +0,0 @@
----
-sidebar_position: 4
-title: Asynchronous JavaScript
----
-
-# Asynchronous JavaScript
-
-Hey, time-traveling coder! ⏰ You’ve mastered DOM manipulation and ES6+ features—now it’s time to conquer **asynchronous JavaScript**, the magic that lets your code handle tasks that take time, like fetching data, waiting for timers, or responding to user clicks without freezing the page. JavaScript is single-threaded (one task at a time), but async tricks make it feel multitasking!
-
-In this section, we’ll dive deeper into **callbacks** (building on the intro from advanced functions), explore **Promises** for better async flow, and use **async/await** for clean, readable code. By the end, you’ll be ready to handle delays like a pro. Let’s sync up with async! 🕹️
-
-## Callbacks: The Async Pioneers 📞 (Deep Dive)
-
-You met callbacks in the advanced functions section—a function passed to another to run later. In async programming, callbacks are the OG way to handle tasks that take time, like timers or network requests.
-
-### How Callbacks Work
-
-A callback is passed to an async function and called when the task finishes (or fails).
-
-Example: Timeout party
-
-```javascript
-function delayedGreeting(name, callback) {
- setTimeout(() => {
- callback(`Hello, ${name}! 🎉`);
- }, 2000); // Wait 2 seconds
-}
-delayedGreeting("Luna", message => console.log(message));
-// Output after 2s: Hello, Luna! 🎉
-```
-
-### Handling Errors
-
-Callbacks often pass an error as the first argument (convention: “error-first callbacks”).
-
-Example:
-
-```javascript
-function fetchData(id, callback) {
- setTimeout(() => {
- if (id <= 0) {
- callback(new Error("Invalid ID!"));
- } else {
- callback(null, { id, name: "User" + id });
- }
- }, 1000);
-}
-fetchData(1, (err, data) => {
- if (err) {
- console.error(err.message);
- } else {
- console.log(data); // { id: 1, name: "User1" }
- }
-});
-fetchData(0, (err, data) => {
- console.error(err.message); // Invalid ID!
-});
-```
-
-### Callback Hell
-
-Nesting callbacks leads to messy, pyramid-shaped code (aka “callback hell”).
-
-Example:
-
-```javascript
-setTimeout(() => {
- console.log("Step 1");
- setTimeout(() => {
- console.log("Step 2");
- setTimeout(() => {
- console.log("Step 3");
- }, 1000);
- }, 1000);
-}, 1000);
-// Output: Step 1 (1s), Step 2 (2s), Step 3 (3s)
-```
-
-:::tip When to Use
-Callbacks are great for simple async tasks or older APIs. For complex flows, Promises or async/await are cleaner.
-:::
-
-:::warning Avoid the Pyramid
-Deeply nested callbacks are hard to read and debug. Use Promises to escape callback hell!
-:::
-
-## Promises: A Cleaner Async Path 🛤️
-
-Promises are objects that represent a future value—either a result or an error. They’re like a ticket you get while waiting for your coffee order: it’ll either be fulfilled (coffee’s ready!) or rejected (out of beans).
-
-### Promise Basics
-
-A Promise has three states:
-
-- **Pending**: Waiting for the result.
-- **Fulfilled**: Success with a value.
-- **Rejected**: Failed with an error.
-
-Structure:
-
-```javascript
-let promise = new Promise((resolve, reject) => {
- // Async task
- if (success) {
- resolve(value);
- } else {
- reject(error);
- }
-});
-```
-
-Example: Fake data fetch
-
-```javascript
-function getUser(id) {
- return new Promise((resolve, reject) => {
- setTimeout(() => {
- if (id > 0) {
- resolve({ id, name: "User" + id });
- } else {
- reject(new Error("Invalid ID"));
- }
- }, 1000);
- });
-}
-getUser(1)
- .then(data => console.log(data)) // { id: 1, name: "User1" }
- .catch(err => console.error(err.message));
-getUser(0)
- .catch(err => console.error(err.message)); // Invalid ID
-```
-
-- `.then()`: Handle success (gets the resolved value).
-- `.catch()`: Handle errors (gets the rejected error).
-- Chainable: `.then(data => anotherPromise).then(...)`.
-
-Fix callback hell:
-
-```javascript
-getUser(1)
- .then(user => {
- console.log("Got user:", user);
- return getUser(2);
- })
- .then(user2 => console.log("Got user 2:", user2))
- .catch(err => console.error(err.message));
-```
-
-### Promise Methods
-
-- `Promise.all([promise1, promise2])`: Waits for all to resolve or one to reject.
-
- ```javascript
- Promise.all([getUser(1), getUser(2)])
- .then(users => console.log(users)); // [{ id: 1, name: "User1" }, { id: 2, name: "User2" }]
- ```
-
-- `Promise.race([promise1, promise2])`: Resolves/rejects with the first to finish.
-
-:::tip Why Promises?
-Promises flatten async code, make error handling easier, and support chaining for sequential tasks.
-:::
-
-:::warning Unhandled Rejections
-Always use `.catch()`—unhandled Promise rejections can crash your app in some environments!
-:::
-
-## async/await: The Modern Async Hero 🦸
-
-`async/await` (ES2017) builds on Promises, making async code look synchronous and super readable. It’s like writing a story instead of juggling callbacks or `.then` chains.
-
-### How It Works
-
-- **async**: Marks a function as returning a Promise.
-- **await**: Pauses until a Promise resolves (only inside async functions).
-
-Example: Clean user fetch
-
-```javascript
-async function fetchUser(id) {
- try {
- let user = await getUser(id); // Waits for Promise
- console.log(user);
- let user2 = await getUser(id + 1);
- console.log(user2);
- } catch (err) {
- console.error(err.message);
- }
-}
-fetchUser(1);
-// Output: { id: 1, name: "User1" }, { id: 2, name: "User2" }
-```
-
-### With DOM
-
-```html
-
-
-```
-
-```javascript
-async function displayUser() {
- let output = document.getElementById("output");
- output.textContent = "Loading...";
- try {
- let user = await getUser(1);
- output.textContent = `User: ${user.name}`;
- } catch (err) {
- output.textContent = `Error: ${err.message}`;
- }
-}
-document.getElementById("fetchBtn").addEventListener("click", displayUser);
-```
-
-- `try/catch`: Handles errors like `.catch`.
-- `await` only works in `async` functions.
-- Combine with `Promise.all` for parallel tasks:
-
- ```javascript
- let [user1, user2] = await Promise.all([getUser(1), getUser(2)]);
- ```
-
-:::tip Why async/await?
-It reads like regular code, reduces nesting, and makes error handling intuitive with `try/catch`.
-:::
-
-:::warning Await Scope
-`await` must be inside an `async` function. Use IIFEs for top-level awaits in older environments: `(async () => { await ... })();`.
-:::
-
-## Practice Time! 🛠️
-
-Try this mini-project to combine async concepts:
-
-```html
-
-
-
- Async User Loader
-
-
-
-
Async User Loader 🌐
-
-
-
-
-
-
-```
-
-- Enter an ID (1–3), click Load—see the user or an error!
-- Uses Promises, async/await, DOM, and error handling.
-- Play: Add a “Load All Users” button with `Promise.all`.
-
-## What’s Next?
-
-You’re an async master, handling delays with callbacks, Promises, and async/await! Next, we’ll explore **JSON and APIs** to fetch and work with real-world data. Zoom to [JSON and APIs](../json-apis.md) for the next adventure. You’re rocking this—keep it up! 💪
-
-Questions? Check out our [GitHub Discussions](https://github.com/sammy6378/reference/discussions). Code on! ✨
-
----
-
-# Async/Await Deep Dive
-
-Welcome to the async/await deep dive! 🌊 Now that you know the basics, let’s explore async/await in depth. We’ll cover advanced patterns, best practices, and performance tips to supercharge your async JavaScript skills. Ready? Let’s dive in!
-
-## Interactive Example: Async Task Manager
-
-Build a task manager app to practice async/await with a real-world scenario.
-
-### Features
-
-- Add, update, delete tasks
-- Mark tasks as complete/incomplete
-- Display task stats (total, completed, pending)
-- Simulate server delays for realism
-
-### HTML
-
-```html
-
-
-
- Async Task Manager
-
-
-
-
-
📋 Async Task Manager
-
-
-
Add New Task
-
-
-
-
-
-
-
-
0
-
Total Tasks
-
-
-
0
-
Completed
-
-
-
0
-
Pending
-
-
-
-
-
-
-
-
-
-
-```
-
-This comprehensive example demonstrates:
-
-- **Class-based async architecture** with proper error handling
-- **Sequential and parallel operations** (saving, updating, deleting)
-- **Loading states** and user feedback
-- **Try/catch blocks** for robust error handling
-- **Real-world patterns** like form validation and confirmation dialogs
-
-## Common Async/Await Patterns 🎨
-
-### 1. Data Transformation Pipeline
-
-```javascript
-async function processUserData(userId) {
- try {
- // Step 1: Fetch user
- const user = await fetchUser(userId);
-
- // Step 2: Enrich with profile data (parallel)
- const [profile, preferences, activity] = await Promise.all([
- fetchUserProfile(user.id),
- fetchUserPreferences(user.id),
- fetchUserActivity(user.id)
- ]);
-
- // Step 3: Transform and combine
- const enrichedUser = {
- ...user,
- profile: {
- ...profile,
- lastSeen: new Date(activity.lastLogin).toLocaleDateString()
- },
- settings: preferences,
- activityScore: calculateActivityScore(activity)
- };
-
- // Step 4: Save processed data
- await saveProcessedUser(enrichedUser);
-
- return enrichedUser;
-
- } catch (error) {
- console.error('User processing failed:', error);
- throw new Error(`Failed to process user ${userId}: ${error.message}`);
- }
-}
-```
-
-### 2. Concurrent Processing with Limits
-
-```javascript
-async function processBatch(items, concurrency = 3) {
- const results = [];
-
- for (let i = 0; i < items.length; i += concurrency) {
- const batch = items.slice(i, i + concurrency);
-
- console.log(`Processing batch ${Math.floor(i / concurrency) + 1}/${Math.ceil(items.length / concurrency)}`);
-
- const batchPromises = batch.map(async (item) => {
- try {
- return await processItem(item);
- } catch (error) {
- console.error(`Failed to process item ${item.id}:`, error);
- return { error: error.message, item };
- }
- });
-
- const batchResults = await Promise.all(batchPromises);
- results.push(...batchResults);
-
- // Optional: small delay between batches
- if (i + concurrency < items.length) {
- await delay(100);
- }
- }
-
- return results;
-}
-```
-
-### 3. Graceful Degradation
-
-```javascript
-async function loadDashboard(userId) {
- const dashboard = {
- user: null,
- posts: [],
- notifications: [],
- weather: null
- };
-
- try {
- // Critical data - must succeed
- dashboard.user = await fetchUser(userId);
- } catch (error) {
- throw new Error(`Cannot load dashboard: ${error.message}`);
- }
-
- // Non-critical data - continue on failure
- try {
- dashboard.posts = await fetchUserPosts(userId);
- } catch (error) {
- console.warn('Failed to load posts:', error.message);
- dashboard.posts = [];
- }
-
- try {
- dashboard.notifications = await fetchNotifications(userId);
- } catch (error) {
- console.warn('Failed to load notifications:', error.message);
- dashboard.notifications = [];
- }
-
- try {
- dashboard.weather = await fetchWeatherData(dashboard.user.location);
- } catch (error) {
- console.warn('Failed to load weather:', error.message);
- dashboard.weather = { error: 'Weather unavailable' };
- }
-
- return dashboard;
-}
-```
-
-## Best Practices Checklist ✅
-
-### ✅ Do's
-
-1. **Always use try/catch** for error handling
-
-```javascript
-async function safeOperation() {
- try {
- const result = await riskyOperation();
- return result;
- } catch (error) {
- console.error('Operation failed:', error);
- throw error; // or handle gracefully
- }
-}
-```
-
-2. **Use Promise.all for parallel operations**
-
-```javascript
-// Good - parallel execution
-const [user, posts, comments] = await Promise.all([
- fetchUser(id),
- fetchPosts(id),
- fetchComments(id)
-]);
-
-// Bad - sequential execution
-const user = await fetchUser(id);
-const posts = await fetchPosts(id);
-const comments = await fetchComments(id);
-```
-
-3. **Handle loading states in UI applications**
-
-```javascript
-async function updateUI() {
- setLoading(true);
- try {
- const data = await fetchData();
- updateDisplay(data);
- } catch (error) {
- showError(error.message);
- } finally {
- setLoading(false);
- }
-}
-```
-
-### ❌ Don'ts
-
-1. **Don't forget await**
-
-```javascript
-// Bad - returns Promise, not value
-async function bad() {
- const result = fetchData(); // Missing await!
- return result.name; // Error: result is a Promise
-}
-
-// Good
-async function good() {
- const result = await fetchData();
- return result.name;
-}
-```
-
-2. **Don't use async/await in loops incorrectly**
-
-```javascript
-// Bad - sequential processing
-for (const item of items) {
- await processItem(item); // Waits for each one
-}
-
-// Good - parallel processing
-const promises = items.map(item => processItem(item));
-const results = await Promise.all(promises);
-```
-
-3. **Don't ignore error handling**
-
-```javascript
-// Bad - unhandled errors
-async function bad() {
- const result = await riskyOperation(); // Could throw
- return result;
-}
-
-// Good
-async function good() {
- try {
- const result = await riskyOperation();
- return result;
- } catch (error) {
- console.error('Error:', error);
- return null; // or appropriate fallback
- }
-}
-```
-
-## Performance Tips 🚀
-
-### 1. Minimize Sequential Dependencies
-
-```javascript
-// Slow - unnecessary sequential execution
-async function slow(userId) {
- const user = await fetchUser(userId);
- const posts = await fetchPosts(userId); // Doesn't depend on user
- const profile = await fetchProfile(user.id); // Depends on user
- return { user, posts, profile };
-}
-
-// Fast - minimize sequential dependencies
-async function fast(userId) {
- const userPromise = fetchUser(userId);
- const postsPromise = fetchPosts(userId); // Start immediately
-
- const user = await userPromise;
- const [posts, profile] = await Promise.all([
- postsPromise,
- fetchProfile(user.id) // Start after user is available
- ]);
-
- return { user, posts, profile };
-}
-```
-
-### 2. Use AbortController for Cancellation
-
-```javascript
-async function fetchWithCancel(url, timeoutMs = 5000) {
- const controller = new AbortController();
- const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
-
- try {
- const response = await fetch(url, {
- signal: controller.signal
- });
- clearTimeout(timeoutId);
- return await response.json();
- } catch (error) {
- if (error.name === 'AbortError') {
- throw new Error('Request timed out');
- }
- throw error;
- }
-}
-```
-
-## Debugging Async Code 🐛
-
-### Common Issues and Solutions
-
-1. **Unhandled Promise Rejections**
-
-```javascript
-// Add global handlers
-window.addEventListener('unhandledrejection', event => {
- console.error('Unhandled promise rejection:', event.reason);
- event.preventDefault(); // Prevent default browser behavior
-});
-```
-
-2. **Debugging Async Flow**
-
-```javascript
-async function debuggableFunction() {
- console.log('Starting operation...');
-
- try {
- console.log('Fetching user...');
- const user = await fetchUser(1);
- console.log('User fetched:', user);
-
- console.log('Processing user...');
- const processed = await processUser(user);
- console.log('User processed:', processed);
-
- return processed;
- } catch (error) {
- console.error('Error at step:', error);
- throw error;
- }
-}
-```
-
-3. **Testing Async Functions**
-
-```javascript
-// Testing with async/await
-async function testAsyncFunction() {
- try {
- const result = await myAsyncFunction();
- console.assert(result.id === 1, 'ID should be 1');
- console.log('Test passed! ✅');
- } catch (error) {
- console.error('Test failed:', error);
- }
-}
-```
-
-## What's Next? 🎯
-
-Congratulations! You've mastered async/await, the most modern and readable way to handle asynchronous JavaScript. You now understand:
-
-- How to write clean, readable async code
-- Proper error handling with try/catch
-- Performance optimization with parallel execution
-- Real-world patterns and best practices
-
-Your async journey is complete! With callbacks, Promises, and async/await in your toolkit, you're ready to handle any asynchronous challenge JavaScript throws at you.
-
-**Next up**: Ready to put your async skills to use? Check out our [JSON and APIs](../json-apis.md) section to learn how to fetch and work with real data from servers!
-
-:::tip Final Async Wisdom
-Async/await is powerful but remember: with great power comes great responsibility. Always handle errors, optimize for performance, and keep your code readable. Your future self will thank you! 🙏
-:::
-
-:::success You Did It! 🎉
-You've conquered one of JavaScript's most challenging topics! Async programming is a superpower that separates good developers from great ones. Keep practicing and soon async code will feel as natural as breathing! 💪
-:::
diff --git a/docs/Javascript/Intermediate/async-javascript/index.md b/docs/Javascript/Intermediate/async-javascript/index.md
deleted file mode 100644
index 69b237e..0000000
--- a/docs/Javascript/Intermediate/async-javascript/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-sidebar_position: 4
-title: Asynchronous Js
----
-
-# Asynchronous JavaScript
-
-Hey, time-traveling coder! ⏰ You've mastered DOM manipulation and ES6+ features—now it's time to conquer **asynchronous JavaScript**, the magic that lets your code handle tasks that take time, like fetching data, waiting for timers, or responding to user clicks without freezing the page. JavaScript is single-threaded (one task at a time), but async tricks make it feel multitasking!
-
-In this section, we'll explore the evolution of async JavaScript through four key concepts:
-
-## What You'll Learn 🚀
-
-1. **[Callbacks](./callbacks.md)** - The original async pioneers and how to use them effectively
-2. **[Asynchronous Operations](./asynchronous-operations.md)** - Understanding timers, events, and the event loop
-3. **[Promises](./promises.md)** - A cleaner path to handling async operations
-4. **[Async/Await](./async-await.md)** - The modern, readable approach to async code
-
-## Why Async Matters 🎯
-
-JavaScript runs on a single thread, but the world isn't synchronous. Users click buttons, data arrives from servers, and timers fire—all while your code needs to stay responsive. Async programming is what makes modern web applications feel smooth and interactive.
-
-## The Journey Ahead 🗺️
-
-We'll start with the foundations (callbacks and async operations), then progress to modern solutions (Promises and async/await). Each concept builds on the previous, so by the end, you'll understand not just how to write async code, but why each approach exists and when to use it.
-
-Ready to dive in? Let's start with [Callbacks](./callbacks) and work our way up to async mastery! 💪
-
-:::tip Learning Path
-Follow the sections in order—each builds on concepts from the previous ones. Don't worry if it feels complex at first; async programming is one of JavaScript's trickier topics, but you've got this! 🌟
-:::
diff --git a/docs/Javascript/Intermediate/advanced-functions.md b/docs/Javascript/advanced-functions.md
similarity index 95%
rename from docs/Javascript/Intermediate/advanced-functions.md
rename to docs/Javascript/advanced-functions.md
index 9cafc2b..bec5f04 100644
--- a/docs/Javascript/Intermediate/advanced-functions.md
+++ b/docs/Javascript/advanced-functions.md
@@ -1,9 +1,8 @@
---
-sidebar_position: 1
+sidebar_position: 10
title: Advanced Functions
---
-# Advanced Functions
You’ve conquered the basics—variables, loops, arrays, objects, and functions—and now it’s time to supercharge your functions with some intermediate magic. Functions are the heart of JavaScript, and these advanced techniques will make them more powerful, flexible, and fun to use. Think of this as upgrading your coding toolbox with shiny new gadgets!
@@ -270,8 +269,4 @@ console.log(squares, evens, sum); // [1, 4, 9, 16, 25], [2, 4], 15
Play: Chain `map` and `filter` to get squares of even numbers!
-## What’s Next?
-
-You’re wielding functions like a pro—defaults, rest/spread, callbacks, and higher-order magic! Next, let’s tackle the DOM to make your web pages truly interactive. Head to [DOM Manipulation](./dom-manipulation.md) for the next adventure. You’re soaring—keep it up! 🚀
-
Questions? Swing by our [GitHub Discussions](https://github.com/sammy6378/reference/discussions). Code on! ✨
diff --git a/docs/Javascript/Beginner/arrays.md b/docs/Javascript/arrays.md
similarity index 80%
rename from docs/Javascript/Beginner/arrays.md
rename to docs/Javascript/arrays.md
index b6a2673..b91da75 100644
--- a/docs/Javascript/Beginner/arrays.md
+++ b/docs/Javascript/arrays.md
@@ -3,15 +3,9 @@ sidebar_position: 7
title: Arrays
---
-# Arrays in JavaScript
+You've got functions nailed, so now let’s dive into arrays—your go-to tool for storing lists of stuff.
-Hey, code rockstar! 🎸 You've got functions nailed, so now let’s dive into arrays—your go-to tool for storing lists of stuff. T#### What's Next?
-
-Arrays are your data superstars—lists made easy! Next, we'll tackle objects to store key-value data like a pro. Hop to [Objects](./objects.md) and keep the vibe going. You're killing it! 🚀at's Next?
-
-Arrays are your data superstars—lists made easy! Next, we'll tackle objects to store key-value data like a pro. Hop to [Objects](./objects.md) and keep the vibe going. You're killing it! 🚀k of arrays as your digital backpack: you can stuff numbers, strings, or even other arrays inside, then pull them out whenever you need. Arrays are perfect for keeping track of things like to-do lists, scores, or your favorite emoji collection.
-
-In this section, we’ll learn how to create arrays, use common methods to add or remove items, and loop through arrays to work with each item. It’s like organizing a playlist—easy, fun, and super powerful. Let’s get started! 🎉
+Arrays are your data superstars—lists made easy! Next, we'll tackle objects to store key-value data like a pro. Hop to [Objects](./objects.md) and keep the vibe going.
## Creating Arrays: Your List Builder 📋
@@ -203,8 +197,4 @@ for (let i = 0; i < groceries.length; i++) {
Play: Add more items, find one that’s not there, or skip an item in the loop.
-## What's Next?
-
-Arrays are your data superstars—lists made easy! Next, we’ll tackle objects to store key-value data like a pro. Hop to [Objects](./objects.md) and keep the vibe going. You’re killing it! 🚀
-
-Got questions? Swing by our [GitHub Discussions](https://github.com/sammy6378/reference/discussions). Code on! ✨
+Got questions? Swing by our [GitHub Discussions](https://github.com/sammy6378/reference/discussions).
diff --git a/docs/Javascript/async-await.md b/docs/Javascript/async-await.md
new file mode 100644
index 0000000..dad4181
--- /dev/null
+++ b/docs/Javascript/async-await.md
@@ -0,0 +1,123 @@
+---
+sidebar_position: 17
+title: Async-Await
+---
+
+`async/await` (ES2017) builds on Promises, making async code look synchronous and super readable. It’s like writing a story instead of juggling callbacks or `.then` chains.
+
+### How It Works
+
+- **async**: Marks a function as returning a Promise.
+- **await**: Pauses until a Promise resolves (only inside async functions).
+
+Example: Clean user fetch
+
+```javascript
+async function fetchUser(id) {
+ try {
+ let user = await getUser(id); // Waits for Promise
+ console.log(user);
+ let user2 = await getUser(id + 1);
+ console.log(user2);
+ } catch (err) {
+ console.error(err.message);
+ }
+}
+fetchUser(1);
+// Output: { id: 1, name: "User1" }, { id: 2, name: "User2" }
+```
+
+### With DOM
+
+```html
+
+
+```
+
+```javascript
+async function displayUser() {
+ let output = document.getElementById("output");
+ output.textContent = "Loading...";
+ try {
+ let user = await getUser(1);
+ output.textContent = `User: ${user.name}`;
+ } catch (err) {
+ output.textContent = `Error: ${err.message}`;
+ }
+}
+document.getElementById("fetchBtn").addEventListener("click", displayUser);
+```
+
+- `try/catch`: Handles errors like `.catch`.
+- `await` only works in `async` functions.
+- Combine with `Promise.all` for parallel tasks:
+
+ ```javascript
+ let [user1, user2] = await Promise.all([getUser(1), getUser(2)]);
+ ```
+
+:::tip Why async/await?
+It reads like regular code, reduces nesting, and makes error handling intuitive with `try/catch`.
+:::
+
+:::warning Await Scope
+`await` must be inside an `async` function. Use IIFEs for top-level awaits in older environments: `(async () => { await ... })();`.
+:::
+
+## Practice Time! 🛠️
+
+Try this mini-project to combine async concepts:
+
+```html
+
+
+
+ Async User Loader
+
+
+
+
Async User Loader 🌐
+
+
+
+
+
+
+```
+
+- Enter an ID (1–3), click Load—see the user or an error!
+- Uses Promises, async/await, DOM, and error handling.
+- Play: Add a “Load All Users” button with `Promise.all`.
+
+Questions? Check out our [GitHub Discussions](https://github.com/sammy6378/reference/discussions).
diff --git a/docs/Javascript/Intermediate/async-javascript/asynchronous-operations.md b/docs/Javascript/asynchronous-operations.md
similarity index 96%
rename from docs/Javascript/Intermediate/async-javascript/asynchronous-operations.md
rename to docs/Javascript/asynchronous-operations.md
index 9cbd9cb..ace32f9 100644
--- a/docs/Javascript/Intermediate/async-javascript/asynchronous-operations.md
+++ b/docs/Javascript/asynchronous-operations.md
@@ -1,10 +1,8 @@
---
-sidebar_position: 2
+sidebar_position: 16
title: JS Asynchronous Operations
---
-# JavaScript Asynchronous Operations
-
Time to peek behind the curtain! ⏰ You've learned about callbacks, but how does JavaScript actually handle asynchronous operations? Let's explore timers, events, and the magical event loop that makes it all work. Understanding this will make you a better async programmer!
## The Single-Threaded Reality 🧵
@@ -474,12 +472,6 @@ This example demonstrates:
5. **Throttling and debouncing** help control function execution rates
6. **Always clean up** timers and event listeners to prevent memory leaks
-## What's Next? 🚀
-
-You now understand how JavaScript handles asynchronous operations under the hood! This knowledge will make the next concepts much clearer. Let's move on to [Promises](./promises.md), which provide a much cleaner way to handle async operations than callbacks.
-
-Ready to escape callback hell? Let's dive into [Promises](./promises.md)! 🎯
-
:::tip Performance Tip
Use `requestAnimationFrame` for animations, `setTimeout` for delays, and `setInterval` sparingly. Always clear timers when done to prevent memory leaks! 🧹
:::
diff --git a/docs/Javascript/Intermediate/async-javascript/callbacks.md b/docs/Javascript/callbacks.md
similarity index 95%
rename from docs/Javascript/Intermediate/async-javascript/callbacks.md
rename to docs/Javascript/callbacks.md
index 07c9d9f..586a6dc 100644
--- a/docs/Javascript/Intermediate/async-javascript/callbacks.md
+++ b/docs/Javascript/callbacks.md
@@ -1,9 +1,8 @@
---
-sidebar_position: 1
+sidebar_position: 14
title: JS Callbacks
---
-# JavaScript Callbacks
Welcome to the world of callbacks! 📞 You've actually used these before in our advanced functions section, but now we're diving deeper into their async superpowers. Callbacks are the OG way to handle tasks that take time—they're functions passed to other functions to run when something finishes (or fails).
@@ -159,6 +158,7 @@ This nested structure is hard to read, debug, and maintain. That's why Promises
## Callback Best Practices 📋
### 1. Keep It Simple
+
```javascript
// Good: Simple, focused callback
function processData(data, onComplete) {
@@ -182,6 +182,7 @@ function fetchAndProcess(url, callback) {
```
### 2. Handle Errors Consistently
+
```javascript
function safeOperation(callback) {
try {
@@ -195,6 +196,7 @@ function safeOperation(callback) {
```
### 3. Use Named Functions for Complex Logic
+
```javascript
// Instead of long anonymous functions
function handleUserData(err, user) {
@@ -285,17 +287,12 @@ Try this hands-on example: