diff --git a/courses/advanced-javascript/advanced-foundations/date-challenge.mdx b/courses/advanced-javascript/advanced-foundations/date-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/date-constructor.mdx b/courses/advanced-javascript/advanced-foundations/date-constructor.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/error-challenge.mdx b/courses/advanced-javascript/advanced-foundations/error-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/error-constructor.mdx b/courses/advanced-javascript/advanced-foundations/error-constructor.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/event-loop-challenge.mdx b/courses/advanced-javascript/advanced-foundations/event-loop-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/event-loop.mdx b/courses/advanced-javascript/advanced-foundations/event-loop.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/hoisting-challenge.mdx b/courses/advanced-javascript/advanced-foundations/hoisting-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/hoisting.mdx b/courses/advanced-javascript/advanced-foundations/hoisting.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/import-export-challenge.mdx b/courses/advanced-javascript/advanced-foundations/import-export-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/import-export-default.mdx b/courses/advanced-javascript/advanced-foundations/import-export-default.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/import-export-named.mdx b/courses/advanced-javascript/advanced-foundations/import-export-named.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/introduction.mdx b/courses/advanced-javascript/advanced-foundations/introduction.mdx new file mode 100644 index 000000000..e7623cce9 --- /dev/null +++ b/courses/advanced-javascript/advanced-foundations/introduction.mdx @@ -0,0 +1,84 @@ +--- +sidebar_position: 1 +title: Introduction to Advanced Foundations +sidebar_label: Introduction +description: "Master the core engine mechanics of JavaScript. From the Event Loop to Hoisting, we're going under the hood." +tags: [javascript, advanced, programming, learning, codeharborhub, foundations] +--- + +Ever felt like JavaScript does things that don't quite make sense? That's usually because the "magic" is happening in the engine foundations. This module is designed to pull back the curtain and turn "magic" into **mastery**. + +:::tip +By the end of this module, you won't just write code that works; you'll understand *why* it works and how the browser handles it. +::: + +## Module Roadmap + +Before we start coding, let's look at the flow of this module. We move from syntax sugar to the deep architectural roots of the language. + +```mermaid +flowchart TD + A[Start: Cleaner Syntax] --> B[Ternary Operators] + B --> C[Destructuring] + C --> D[Numeric Separators] + D --> E[The Engine: Event Loop] + E --> F[Hoisting & Temporal Dead Zone] + F --> G[Pre-increment vs Post-increment] + G --> H[Timing: setTimeout with Params] + H --> I[setInterval for Recursion] + I --> J[Error Handling in Timed Execs] + J --> K[Final Challenge: Stock Price Checker] + + + +``` + +## What’s in the Toolbox? + +We aren't just looking at `if/else` statements anymore. We are leveling up our syntax and mental models. + + + +Learn to write less code but do more. +* **Ternary Operators:** Deep nesting without the mess. +* **Destructuring:** Extracting data like a pro. +* **Numeric Separators:** Making BigInt and large numbers actually readable (e.g., `1_000_000`). + + +This is where the real "Advanced" stuff happens: +* **The Event Loop:** How JS handles concurrency. +* **Hoisting:** Understanding the Temporal Dead Zone. +* **Pre-increment vs Post-increment:** Small symbols, big differences. + + +Mastering the clock: +* `setTimeout` with parameters. +* `setInterval` for recursive tasks. +* Error handling within timed executions. + + + +## Try it Out! + +Before we dive into the docs, play around with this demo. It combines **Ternary Logic**, **Timing**, and **Template Literals**—all things we will master in this section. + + + +:::info +**Try this:** Change the "Status" logic in the JS panel of the Pen to see how the UI reacts! +::: + +## The Final Boss + +At the end of this module, you'll face the **Stock Price Checker Super Challenge**. You'll need to combine timing, logic, and error handling to build a real-time simulation. + +:::important +Don't skip the challenges! Advanced JavaScript is a muscle—you have to flex it to grow it. +::: + +:::info Note on math +You might see some complex logic later. Don't worry, we use KaTeX to keep things clear, like calculating growth: $G = \frac{V_{new} - V_{old}}{V_{old}}$. +::: \ No newline at end of file diff --git a/courses/advanced-javascript/advanced-foundations/numeric-separators-bigint-challenge.mdx b/courses/advanced-javascript/advanced-foundations/numeric-separators-bigint-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/numeric-separators-bigint.mdx b/courses/advanced-javascript/advanced-foundations/numeric-separators-bigint.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/object-destructuring-challenge.mdx b/courses/advanced-javascript/advanced-foundations/object-destructuring-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/object-destructuring.mdx b/courses/advanced-javascript/advanced-foundations/object-destructuring.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/pre-increment-challenge.mdx b/courses/advanced-javascript/advanced-foundations/pre-increment-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/pre-increment.mdx b/courses/advanced-javascript/advanced-foundations/pre-increment.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/setinterval-challenge.mdx b/courses/advanced-javascript/advanced-foundations/setinterval-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/setinterval.mdx b/courses/advanced-javascript/advanced-foundations/setinterval.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/settimeout-challenge.mdx b/courses/advanced-javascript/advanced-foundations/settimeout-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/settimeout-params.mdx b/courses/advanced-javascript/advanced-foundations/settimeout-params.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/settimeout.mdx b/courses/advanced-javascript/advanced-foundations/settimeout.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/super-challenge-stock-price-checker-solution.mdx b/courses/advanced-javascript/advanced-foundations/super-challenge-stock-price-checker-solution.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/super-challenge-stock-price-checker.mdx b/courses/advanced-javascript/advanced-foundations/super-challenge-stock-price-checker.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/switch-statement-challenge.mdx b/courses/advanced-javascript/advanced-foundations/switch-statement-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/switch-statements.mdx b/courses/advanced-javascript/advanced-foundations/switch-statements.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/ternary-operator-challenge.mdx b/courses/advanced-javascript/advanced-foundations/ternary-operator-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/ternary-operator-complex.mdx b/courses/advanced-javascript/advanced-foundations/ternary-operator-complex.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-foundations/ternary-operator.mdx b/courses/advanced-javascript/advanced-foundations/ternary-operator.mdx new file mode 100644 index 000000000..4a6ea0e09 --- /dev/null +++ b/courses/advanced-javascript/advanced-foundations/ternary-operator.mdx @@ -0,0 +1,120 @@ +--- +sidebar_position: 2 +title: Ternary Operator +sidebar_label: Ternary Operator +description: "Master the syntax and practical use cases of the Conditional (Ternary) Operator in JavaScript to write cleaner, more concise logic." +tags: [javascript, ternary-operator, foundations, clean-code, logic] +--- + +The **Conditional (Ternary) Operator** is the only JavaScript operator that takes three operands. It is frequently used as a one-line shortcut for the `if...else` statement, making your code significantly cleaner and more declarative. + +:::info +The word "Ternary" literally means "composed of three parts." +::: + +## The Syntax + +Instead of writing 5 lines of code for a simple "either/or" decision, the ternary operator lets you do it in one. + +```javascript title="index.js" +condition ? expressionIfTrue : expressionIfFalse; +``` + +### Comparative Breakdown + + + + +```javascript title="index.js" +const age = 20; +let canVote; + +if (age >= 18) { + canVote = "Yes, you can vote!"; +} else { + canVote = "Not yet."; +} + +console.log(canVote); // "Yes, you can vote!" + +``` + + + + +```javascript title="index.js" +const age = 20; + +// Syntax: condition ? true : false +const canVote = age >= 18 ? "Yes, you can vote!" : "Not yet."; + +console.log(canVote); // "Yes, you can vote!" + +``` + + + + +## Why Use It? + +The Ternary operator isn't just about saving space. In modern JavaScript (especially in frameworks like **React**), it allows you to: + +1. **Assign values directly** to a constant. +2. **Embed logic** inside Template Literals. +3. **Return values** from arrow functions without explicit `return` blocks. + +### Use Case: Dynamic Template Literals + +```javascript {4} showLineNumbers +const isPremium = true; + +// Using ternary inside a string! +const welcomeMessage = `Welcome back, ${isPremium ? 'VIP Member' : 'Guest'}!`; + +console.log(welcomeMessage); // "Welcome back, VIP Member!" + +``` + +## Interactive Playground + +Test how the ternary operator handles state changes. In this demo, we check a "User Status" and change the theme dynamically. + + + +:::tip +Try changing the condition in the JS panel to check for a specific number or a boolean value to see how the UI updates instantly. +::: + +--- + +## Common Pitfalls + +While powerful, don't abuse the ternary operator. + +:::danger Ternary Hell +Avoid nesting ternaries too deeply. If your logic requires multiple levels of checks, a standard `if...else` or `switch` statement is much more readable. + +**Bad Practice:** + +```javascript title="index.js" +const result = condition1 ? (condition2 ? 'A' : 'B') : (condition3 ? 'C' : 'D'); +// ❌ This is hard to read and debug! + +``` + +::: + +## Quick Check + +```javascript title="index.js" +const score = 85; +const grade = score > 90 ? "A" : "B"; + +``` + +**What is the value of `grade`?** + +The value of `grade` is `"B"` because the condition `score > 90` evaluates to `false`, so the expression after the colon (`"B"`) is returned. \ No newline at end of file diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/closures-challenge.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/closures-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/closures.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/closures.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/currying-challenge.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/currying-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/currying.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/currying.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/generators-challenge.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/generators-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/generators.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/generators.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/iife-challenge.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/iife-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/iife.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/iife.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/introduction.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/introduction.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/recursion-basic-example.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/recursion-basic-example.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/recursion-challenge.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/recursion-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/recursion-sum-all-numbers-challenge.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/recursion-sum-all-numbers-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/recursion-sum-all-numbers.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/recursion-sum-all-numbers.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/recursion-unwinding-challenge.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/recursion-unwinding-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/recursion-unwinding.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/recursion-unwinding.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/throttling-debouncing-challenge.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/throttling-debouncing-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/advanced-function-patterns-generators/throttling-debouncing.mdx b/courses/advanced-javascript/advanced-function-patterns-generators/throttling-debouncing.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/api-request-body-headers.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/api-request-body-headers.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/callback-hell.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/callback-hell.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/client-server.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/client-server.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/error-handling-challenge.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/error-handling-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/error-handling-try-catch.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/error-handling-try-catch.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/fetching-with-async-await-challenge.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/fetching-with-async-await-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/fetching-with-async-await.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/fetching-with-async-await.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/fetching-with-then-challenge.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/fetching-with-then-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/fetching-with-then.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/fetching-with-then.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/handling-rejected-promises-challenge.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/handling-rejected-promises-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/handling-rejected-promises.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/handling-rejected-promises.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/introduction.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/introduction.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/json-review.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/json-review.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/promise-all.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/promise-all.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/promise-constructor.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/promise-constructor.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/promises-challenge.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/promises-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/promises.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/promises.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/requests-responses.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/requests-responses.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/response-ok-challenge.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/response-ok-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/response-ok.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/response-ok.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/super-challenge-weather-app-solution.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/super-challenge-weather-app-solution.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/super-challenge-weather-app.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/super-challenge-weather-app.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/taking-apis-to-the-next-level.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/taking-apis-to-the-next-level.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/urls-endpoints.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/urls-endpoints.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/using-promises-to-escape-callback-hell.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/using-promises-to-escape-callback-hell.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/what-is-an-api.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/what-is-an-api.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/asynchronous-javascript-apis/working-with-images-asynchronously.mdx b/courses/advanced-javascript/asynchronous-javascript-apis/working-with-images-asynchronously.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/collections-symbols/introduction.mdx b/courses/advanced-javascript/collections-symbols/introduction.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/collections-symbols/map-object-challenge.mdx b/courses/advanced-javascript/collections-symbols/map-object-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/collections-symbols/map-object.mdx b/courses/advanced-javascript/collections-symbols/map-object.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/collections-symbols/set-object-challenge.mdx b/courses/advanced-javascript/collections-symbols/set-object-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/collections-symbols/set-object.mdx b/courses/advanced-javascript/collections-symbols/set-object.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/collections-symbols/super-challenge-library-system-solution.mdx b/courses/advanced-javascript/collections-symbols/super-challenge-library-system-solution.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/collections-symbols/super-challenge-library-system.mdx b/courses/advanced-javascript/collections-symbols/super-challenge-library-system.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/collections-symbols/symbols-challenge.mdx b/courses/advanced-javascript/collections-symbols/symbols-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/collections-symbols/symbols.mdx b/courses/advanced-javascript/collections-symbols/symbols.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/collections-symbols/weakmap-weakset-challenge.mdx b/courses/advanced-javascript/collections-symbols/weakmap-weakset-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/collections-symbols/weakmap-weakset.mdx b/courses/advanced-javascript/collections-symbols/weakmap-weakset.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/apply-call-challenge.mdx b/courses/advanced-javascript/creating-custom-objects/apply-call-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/apply-call.mdx b/courses/advanced-javascript/creating-custom-objects/apply-call.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/bind-method-challenge.mdx b/courses/advanced-javascript/creating-custom-objects/bind-method-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/bind-method.mdx b/courses/advanced-javascript/creating-custom-objects/bind-method.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/constructor-function-to-classes-challenge.mdx b/courses/advanced-javascript/creating-custom-objects/constructor-function-to-classes-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/constructor-function-to-classes.mdx b/courses/advanced-javascript/creating-custom-objects/constructor-function-to-classes.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/constructor-functions-challenge.mdx b/courses/advanced-javascript/creating-custom-objects/constructor-functions-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/constructor-functions.mdx b/courses/advanced-javascript/creating-custom-objects/constructor-functions.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/factory-functions-challenge.mdx b/courses/advanced-javascript/creating-custom-objects/factory-functions-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/factory-functions.mdx b/courses/advanced-javascript/creating-custom-objects/factory-functions.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/getter-setter-challenge.mdx b/courses/advanced-javascript/creating-custom-objects/getter-setter-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/getter-setter.mdx b/courses/advanced-javascript/creating-custom-objects/getter-setter.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/inheritance-challenge.mdx b/courses/advanced-javascript/creating-custom-objects/inheritance-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/inheritance-classes-challenge.mdx b/courses/advanced-javascript/creating-custom-objects/inheritance-classes-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/inheritance-classes.mdx b/courses/advanced-javascript/creating-custom-objects/inheritance-classes.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/inheritance-constructor-functions-challenge.mdx b/courses/advanced-javascript/creating-custom-objects/inheritance-constructor-functions-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/inheritance-constructor-functions.mdx b/courses/advanced-javascript/creating-custom-objects/inheritance-constructor-functions.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/inheritance-explainer.mdx b/courses/advanced-javascript/creating-custom-objects/inheritance-explainer.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/introduction.mdx b/courses/advanced-javascript/creating-custom-objects/introduction.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/polymorphism-constructor-functions-challenge.mdx b/courses/advanced-javascript/creating-custom-objects/polymorphism-constructor-functions-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/polymorphism-constructor-functions.mdx b/courses/advanced-javascript/creating-custom-objects/polymorphism-constructor-functions.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/private-fields-challenge.mdx b/courses/advanced-javascript/creating-custom-objects/private-fields-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/private-fields.mdx b/courses/advanced-javascript/creating-custom-objects/private-fields.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/static-methods-properties-challenge.mdx b/courses/advanced-javascript/creating-custom-objects/static-methods-properties-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/static-methods-properties.mdx b/courses/advanced-javascript/creating-custom-objects/static-methods-properties.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/super-challenge-bank-account-system-solution.mdx b/courses/advanced-javascript/creating-custom-objects/super-challenge-bank-account-system-solution.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/creating-custom-objects/super-challenge-bank-account-system.mdx b/courses/advanced-javascript/creating-custom-objects/super-challenge-bank-account-system.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/arrow-functions-challenge.mdx b/courses/advanced-javascript/function-expressions-parameters/arrow-functions-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/arrow-functions.mdx b/courses/advanced-javascript/function-expressions-parameters/arrow-functions.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/callback-functions-challenge.mdx b/courses/advanced-javascript/function-expressions-parameters/callback-functions-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/callback-functions.mdx b/courses/advanced-javascript/function-expressions-parameters/callback-functions.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/default-parameters-challenge.mdx b/courses/advanced-javascript/function-expressions-parameters/default-parameters-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/default-parameters.mdx b/courses/advanced-javascript/function-expressions-parameters/default-parameters.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/function-expressions-challenge.mdx b/courses/advanced-javascript/function-expressions-parameters/function-expressions-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/function-expressions.mdx b/courses/advanced-javascript/function-expressions-parameters/function-expressions.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/higher-order-functions-challenge.mdx b/courses/advanced-javascript/function-expressions-parameters/higher-order-functions-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/higher-order-functions.mdx b/courses/advanced-javascript/function-expressions-parameters/higher-order-functions.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/inline-arrow-functions-challenge.mdx b/courses/advanced-javascript/function-expressions-parameters/inline-arrow-functions-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/inline-arrow-functions.mdx b/courses/advanced-javascript/function-expressions-parameters/inline-arrow-functions.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/introduction.mdx b/courses/advanced-javascript/function-expressions-parameters/introduction.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/rest-parameters-challenge.mdx b/courses/advanced-javascript/function-expressions-parameters/rest-parameters-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/rest-parameters.mdx b/courses/advanced-javascript/function-expressions-parameters/rest-parameters.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/super-challenge-real-estate-solution.mdx b/courses/advanced-javascript/function-expressions-parameters/super-challenge-real-estate-solution.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/function-expressions-parameters/super-challenge-real-estate.mdx b/courses/advanced-javascript/function-expressions-parameters/super-challenge-real-estate.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/index.mdx b/courses/advanced-javascript/index.mdx new file mode 100644 index 000000000..b1452f310 --- /dev/null +++ b/courses/advanced-javascript/index.mdx @@ -0,0 +1,304 @@ +--- +title: Advanced JavaScript +sidebar_label: Advanced JavaScript +description: "Master advanced JavaScript concepts through a ton of hands-on challenges designed to deepen your understanding of the world's most used coding language!" +tags: ["JavaScript", "Advanced", "Programming", "Web Development"] +--- + +Welcome to the **CodeHarborHub** Advanced JavaScript course! This course is designed for developers who have a basic understanding of JavaScript and want to take their skills to the next level. Through a series of hands-on challenges, you'll explore advanced concepts and techniques that will help you become a more proficient JavaScript developer. + +:::info +**Prerequisites:** Basic knowledge of JavaScript, including variables, data types, functions, and control flow. +::: + + + +
+Advanced Foundations +1. [Introduction](./advanced-foundations/introduction) +2. [The Ternary Operator](./advanced-foundations/ternary-operator) +3. [The Ternary Operator for Complex Conditions](./advanced-foundations/ternary-operator-complex) +5. [Ternary Operator Challenge](./advanced-foundations/ternary-operator-challenge) +6. [Switch Statements](./advanced-foundations/switch-statements) +7. [Switch Statement Challenge](./advanced-foundations/switch-statement-challenge) +8. [Object Destructuring](./advanced-foundations/object-destructuring) +9. [Object Destructuring Challenge](./advanced-foundations/object-destructuring-challenge) +10. [setTimeout](./advanced-foundations/settimeout) +11. [setTimeout with Params](./advanced-foundations/settimeout-params) +12. [setTimeout Challenge](./advanced-foundations/settimeout-challenge) +13. [setInterval](./advanced-foundations/setinterval) +14. [setInterval Challenge](./advanced-foundations/setinterval-challenge) +15. [The Event Loop](./advanced-foundations/event-loop) +16. [Event Loop Challenge](./advanced-foundations/event-loop-challenge) +18. [Import & Export named](./advanced-foundations/import-export-named) +19. [Import & Export default](./advanced-foundations/import-export-default) +20. [Import & Export Challenge](./advanced-foundations/import-export-challenge) +21. [The Date() Constructor](./advanced-foundations/date-constructor) +22. [Date Challenge](./advanced-foundations/date-challenge) +23. [The Error() Constructor](./advanced-foundations/error-constructor) +24. [Error Challenge](./advanced-foundations/error-challenge) +25. [Pre-increment](./advanced-foundations/pre-increment) +26. [Pre-increment Challenge](./advanced-foundations/pre-increment-challenge) +27. [Numeric Separators & BigInt](./advanced-foundations/numeric-separators-bigint) +28. [Numeric Separators & BigInt Challenge](./advanced-foundations/numeric-separators-bigint-challenge) +29. [Hoisting](./advanced-foundations/hoisting) +30. [Hoisting Challenge](./advanced-foundations/hoisting-challenge) +31. [Super Challenge: Stock Price Checker](./advanced-foundations/super-challenge-stock-price-checker) +32. [Super Challenge: Stock Price Checker Solution](./advanced-foundations/super-challenge-stock-price-checker-solution) + +
+
+Methods & Loops +1. [Introduction](./methods-loops/introduction) +2. [The for...of Loop](./methods-loops/for-of-loop) +3. [for...of Loop Challenge](./methods-loops/for-of-loop-challenge) +4. [The for...in Loop](./methods-loops/for-in-loop) +5. [for...in Loop Challenge](./methods-loops/for-in-loop-challenge) +6. [The .forEach() Method](./methods-loops/foreach-method) +7. [.forEach() Method Challenge](./methods-loops/foreach-method-challenge) +8. [The .map() Method](./methods-loops/map-method) +9. [.map() Method Challenge](./methods-loops/map-method-challenge) +10. [The .filter() Method](./methods-loops/filter-method) +11. [.filter() Method Challenge](./methods-loops/filter-method-challenge) +12. [The .reduce() Method](./methods-loops/reduce-method) +13. [.reduce() Method Challenge](./methods-loops/reduce-method-challenge) +14. [The .includes() Method](./methods-loops/includes-method) +15. [.includes() Method Challenge](./methods-loops/includes-method-challenge) +16. [The .join() Method](./methods-loops/join-method) +17. [.join() Method Challenge](./methods-loops/join-method-challenge) +18. [.map() vs .forEach()](./methods-loops/map-vs-foreach) +19. [The .filter() Method with Objects](./methods-loops/filter-with-objects) +20. [For loop Break & Continue](./methods-loops/for-loop-break-continue) +21. [Various Array Methods](./methods-loops/various-array-methods) +22. [string.replace & replaceAll](./methods-loops/string-replace-replaceall) +23. [Regex flags & Constructors](./methods-loops/regex-flags-constructors) +24. [Super Challenge: Movie Search](./methods-loops/super-challenge-movie-search) +25. [Super Challenge: Movie Database Solution](./methods-loops/super-challenge-movie-search-solution) + +
+
+Function Expressions & Parameters +1. [Introduction](./function-expressions-parameters/introduction) +2. [Function Expressions](./function-expressions-parameters/function-expressions) +3. [Function Expressions Challenge](./function-expressions-parameters/function-expressions-challenge) +4. [Arrow Functions](./function-expressions-parameters/arrow-functions) +5. [Arrow Functions Challenge](./function-expressions-parameters/arrow-functions-challenge) +6. [Inline Arrow Functions](./function-expressions-parameters/inline-arrow-functions) +7. [Inline Arrow Functions Challenge](./function-expressions-parameters/inline-arrow-functions-challenge) +8. [Default Parameters](./function-expressions-parameters/default-parameters) +9. [Default Parameters Challenge](./function-expressions-parameters/default-parameters-challenge) +10. [Rest Parameters](./function-expressions-parameters/rest-parameters) +11. [Rest Parameters Challenge](./function-expressions-parameters/rest-parameters-challenge) +12. [Callback Functions](./function-expressions-parameters/callback-functions) +13. [Callback Functions Challenge](./function-expressions-parameters/callback-functions-challenge) +14. [Higher-Order Functions](./function-expressions-parameters/higher-order-functions) +15. [Higher-Order Functions Challenge](./function-expressions-parameters/higher-order-functions-challenge) +16. [Super Challenge: Real Estate](./function-expressions-parameters/super-challenge-real-estate) +17. [Super Challenge: Real Estate Solution](./function-expressions-parameters/super-challenge-real-estate-solution) + +
+
+Asynchronous JavaScript & APIs +1. [Introduction](./asynchronous-javascript-apis/introduction) +2. [What is an API?](./asynchronous-javascript-apis/what-is-an-api) +3. [Client & Server](./asynchronous-javascript-apis/client-server) +4. [Requests & Responses](./asynchronous-javascript-apis/requests-responses) +5. [JSON Review](./asynchronous-javascript-apis/json-review) +6. [URLs & Endpoints](./asynchronous-javascript-apis/urls-endpoints) +7. [Fetching with .then()](./asynchronous-javascript-apis/fetching-with-then) +8. [Fetching with .then() Challenge](./asynchronous-javascript-apis/fetching-with-then-challenge) +9. [Fetching with Async/Await](./asynchronous-javascript-apis/fetching-with-async-await) +10. [Fetching with Async/Await Challenge](./asynchronous-javascript-apis/fetching-with-async-await-challenge) +11. [Error Handling with try...catch](./asynchronous-javascript-apis/error-handling-try-catch) +12. [Error Handling Challenge](./asynchronous-javascript-apis/error-handling-challenge) +13. [Promises](./asynchronous-javascript-apis/promises) +14. [Promises Challenge](./asynchronous-javascript-apis/promises-challenge) +15. [Handling Rejected Promises](./asynchronous-javascript-apis/handling-rejected-promises) +16. [Handling Rejected Promises Challenge](./asynchronous-javascript-apis/handling-rejected-promises-challenge) +17. [response.ok](./asynchronous-javascript-apis/response-ok) +18. [response.ok Challenge](./asynchronous-javascript-apis/response-ok-challenge) +19. [Taking APIs to the Next Level](./asynchronous-javascript-apis/taking-apis-to-the-next-level) +20. [API request: the body & headers](./asynchronous-javascript-apis/api-request-body-headers) +21. [The Promise Constructor](./asynchronous-javascript-apis/promise-constructor) +22. [Working with images asynchronously](./asynchronous-javascript-apis/working-with-images-asynchronously) +23. [Callback Hell](./asynchronous-javascript-apis/callback-hell) +24. [Using Promises to escape Callback Hell](./asynchronous-javascript-apis/using-promises-to-escape-callback-hell) +25. [Promise.all()](./asynchronous-javascript-apis/promise-all) +26. [Super Challenge: Weather App](./asynchronous-javascript-apis/super-challenge-weather-app) +27. [Super Challenge: Weather App Solution](./asynchronous-javascript-apis/super-challenge-weather-app-solution) + +
+
+Logical Operators & Coalescing + +1. [Introduction](./logical-operators-coalescing/introduction) +2. [Short-Circuiting with OR (||)](./logical-operators-coalescing/short-circuiting-or) +3. [Short-Circuiting with OR (||) Challenge](./logical-operators-coalescing/short-circuiting-or-challenge) +4. [Short-Circuiting with AND (&&)](./logical-operators-coalescing/short-circuiting-and) +5. [Short-Circuiting with AND (&&) Challenge](./logical-operators-coalescing/short-circuiting-and-challenge) +6. [The Nullish Coalescing Operator (??)](./logical-operators-coalescing/nullish-coalescing-operator) +7. [Nullish Coalescing Operator (??) Challenge](./logical-operators-coalescing/nullish-coalescing-operator-challenge) +8. [Chaining Logical Operators](./logical-operators-coalescing/chaining-logical-operators) +9. [Chaining Logical Operators Challenge](./logical-operators-coalescing/chaining-logical-operators-challenge) +10. [Super Challenge: User Profile](./logical-operators-coalescing/super-challenge-user-profile) +11. [Super Challenge: User Profile Solution](./logical-operators-coalescing/super-challenge-user-profile-solution) + + +
+
+Working with Objects + +1. [Introduction](./working-with-objects/introduction) +2. [Objects & Inbuilt Methods](./working-with-objects/objects-inbuilt-methods) +3. [Objects & Inbuilt Methods Challenge](./working-with-objects/objects-inbuilt-methods-challenge) +4. [Object Methods Challenge 1](./working-with-objects/object-methods-challenge-1) +5. [Object Methods Challenge 2](./working-with-objects/object-methods-challenge-2) +6. [Object.hasOwn & .hasOwnProperty()](./working-with-objects/object-hasown-hasownproperty) +7. [Object.hasOwn & .hasOwnProperty() Challenge](./working-with-objects/object-hasown-hasownproperty-challenge) +8. [Object.entries() & Object.fromEntries()](./working-with-objects/object-entries-fromentries) +9. [Object.entries() & Object.fromEntries() Challenge](./working-with-objects/object-entries-fromentries-challenge) +10. [Object.freeze() & Object.seal()](./working-with-objects/object-freeze-object-seal) +11. [Object.freeze() & Object.seal() Challenge](./working-with-objects/object-freeze-object-seal-challenge) +12. [Assignment by value/reference](./working-with-objects/assignment-by-value-reference) +13. [Assignment by value/reference Challenge](./working-with-objects/assignment-by-value-reference-challenge) +14. [Spread Operator(...)](./working-with-objects/spread-operator) +15. [Spread Operator(...) Challenge](./working-with-objects/spread-operator-challenge) +16. [Object.assign()](./working-with-objects/object-assign) +17. [Object.assign() Challenge](./working-with-objects/object-assign-challenge) +18. [structuredClone()](./working-with-objects/structuredclone) +19. [structuredClone() Challenge](./working-with-objects/structuredclone-challenge) +20. [Objects with Methods and 'this'](./working-with-objects/objects-with-methods-this) +21. [Objects with Methods and 'this' Challenge](./working-with-objects/objects-with-methods-this-challenge) +22. [Binding 'this'](./working-with-objects/binding-this) +23. [Binding 'this' Challenge](./working-with-objects/binding-this-challenge) +24. [Super Challenge: Inventory Management](./working-with-objects/super-challenge-inventory-management) +25. [Super Challenge: Inventory Management Solution](./working-with-objects/super-challenge-inventory-management-solution) + +
+
+Creating Custom Objects + +1. [Introduction](./creating-custom-objects/introduction) +2. [Constructor Functions](./creating-custom-objects/constructor-functions) +3. [Constructor Functions Challenge](./creating-custom-objects/constructor-functions-challenge) +4. [Factory Functions](./creating-custom-objects/factory-functions) +5. [Factory Functions Challenge](./creating-custom-objects/factory-functions-challenge) +6. [Constructor Function to Classes](./creating-custom-objects/constructor-function-to-classes) +7. [Constructor Function to Classes Challenge](./creating-custom-objects/constructor-function-to-classes-challenge) +8. [.apply() & .call()](./creating-custom-objects/apply-call) +9. [.apply() & .call() Challenge](./creating-custom-objects/apply-call-challenge) +10. [.bind() Method](./creating-custom-objects/bind-method) +11. [.bind() Method Challenge](./creating-custom-objects/bind-method-challenge) +12. [Inheritance Explainer](./creating-custom-objects/inheritance-explainer) +13. [Inheritance Challenge](./creating-custom-objects/inheritance-challenge) +14. [Inheritance with constructor Functions](./creating-custom-objects/inheritance-constructor-functions) +15. [Inheritance with constructor Functions Challenge](./creating-custom-objects/inheritance-constructor-functions-challenge) +16. [Polymorphism with constructor Functions](./creating-custom-objects/polymorphism-constructor-functions) +17. [Polymorphism with constructor Functions Challenge](./creating-custom-objects/polymorphism-constructor-functions-challenge) +18. [Inheritance with Classes](./creating-custom-objects/inheritance-classes) +19. [Inheritance with Classes Challenge](./creating-custom-objects/inheritance-classes-challenge) +20. [Static methods and properties](./creating-custom-objects/static-methods-properties) +21. [Static methods and properties Challenge](./creating-custom-objects/static-methods-properties-challenge) +22. [Private Fields](./creating-custom-objects/private-fields) +23. [Private Fields Challenge](./creating-custom-objects/private-fields-challenge) +24. [Getter and Setter](./creating-custom-objects/getter-setter) +25. [Getter and Setter Challenge](./creating-custom-objects/getter-setter-challenge) +26. [Super Challenge: Bank Account System](./creating-custom-objects/super-challenge-bank-account-system) +27. [Super Challenge: Bank Account System Solution](./creating-custom-objects/super-challenge-bank-account-system-solution) + +
+
+Collections & Symbols + +1. [Introduction](./collections-symbols/introduction) +2. [Symbols](./collections-symbols/symbols) +3. [Symbols Challenge](./collections-symbols/symbols-challenge) +4. [The Map Object](./collections-symbols/map-object) +5. [The Map Object Challenge](./collections-symbols/map-object-challenge) +6. [The Set Object](./collections-symbols/set-object) +7. [The Set Object Challenge](./collections-symbols/set-object-challenge) +8. [WeakMap & WeakSet](./collections-symbols/weakmap-weakset) +9. [WeakMap & WeakSet Challenge](./collections-symbols/weakmap-weakset-challenge) +10. [Super Challenge: Library System](./collections-symbols/super-challenge-library-system) +11. [Super Challenge: Library System Solution](./collections-symbols/super-challenge-library-system-solution) + +
+
+Advanced Function Patterns & Generators + +1. [Introduction](./advanced-function-patterns-generators/introduction) +2. [IIFE (Immediately Invoked Function Expressions)](./advanced-function-patterns-generators/iife) +3. [IIFE Challenge](./advanced-function-patterns-generators/iife-challenge) +4. [Closures](./advanced-function-patterns-generators/closures) +5. [Closures Challenge](./advanced-function-patterns-generators/closures-challenge) +6. [Currying](./advanced-function-patterns-generators/currying) +7. [Currying Challenge](./advanced-function-patterns-generators/currying-challenge) +8. [Generators](./advanced-function-patterns-generators/generators) +9. [Generators Challenge](./advanced-function-patterns-generators/generators-challenge) +10. [Recursion Basic Example](./advanced-function-patterns-generators/recursion-basic-example) +11. [Recursion Challenge](./advanced-function-patterns-generators/recursion-challenge) +12. [Recursion Sum all Numbers](./advanced-function-patterns-generators/recursion-sum-all-numbers) +13. [Recursion Sum all Numbers Challenge](./advanced-function-patterns-generators/recursion-sum-all-numbers-challenge) +14. [Recursion & Unwinding](./advanced-function-patterns-generators/recursion-unwinding) +15. [Recursion & Unwinding Challenge](./advanced-function-patterns-generators/recursion-unwinding-challenge) +16. [Throtting & Debouncing](./advanced-function-patterns-generators/throttling-debouncing) +17. [Throttling & Debouncing Challenge](./advanced-function-patterns-generators/throttling-debouncing-challenge) + +
+ + + +**_Hey there!_** + +I'm **Ajay Dhangar**, a passionate web developer and educator behind CodeHarborHub. With years of experience in JavaScript and web development, I've designed this Advanced JavaScript course to help you deepen your understanding of the language through practical challenges. + +This Advanced JavaScript course is meticulously crafted to help you master complex JavaScript concepts through practical, hands-on challenges. Whether you're looking to enhance your coding skills for professional growth or personal projects, this course provides the tools and knowledge you need to excel in JavaScript development. + +**Course Features:** +* Comprehensive Coverage: Dive deep into advanced JavaScript topics, including asynchronous programming, advanced functions, object-oriented programming, and more. +* Hands-On Challenges: Each module includes practical challenges that reinforce learning and help you apply concepts in real-world scenarios. +* Expert Guidance: Benefit from my expertise as a seasoned developer and educator, with clear explanations and insights throughout the course. +* Flexible Learning: Progress at your own pace with structured modules that fit your schedule. + +I'm excited to guide you on your journey to becoming an advanced JavaScript developer. Let's dive in and unlock the full potential of JavaScript together! + + + + +
+Who is this course for? + +This course is designed for developers who have a basic understanding of JavaScript and want to deepen their knowledge of advanced concepts and techniques. + +
+
+What prerequisites are needed? + +A basic knowledge of JavaScript, including variables, data types, functions, and control flow is recommended before starting this course. + +
+
+How is the course structured? + +The course is divided into several modules, each focusing on specific advanced JavaScript topics. Each module includes lessons and hands-on challenges to reinforce learning. + +
+
+Will there be practical challenges? + +Yes! Each module includes practical challenges designed to help you apply the concepts you've learned in real-world scenarios. + +
+
+Can I learn at my own pace? + +Absolutely! The course is designed to be flexible, allowing you to progress at your own pace and revisit lessons as needed. + +
+ + + + +## Get Started + +To begin your journey into advanced JavaScript, simply navigate to the first module, "Advanced Foundations," and start with the introduction lesson. From there, you can follow the structured path through each module, completing lessons and challenges as you go. \ No newline at end of file diff --git a/courses/advanced-javascript/logical-operators-coalescing/chaining-logical-operators-challenge.mdx b/courses/advanced-javascript/logical-operators-coalescing/chaining-logical-operators-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/logical-operators-coalescing/chaining-logical-operators.mdx b/courses/advanced-javascript/logical-operators-coalescing/chaining-logical-operators.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/logical-operators-coalescing/introduction.mdx b/courses/advanced-javascript/logical-operators-coalescing/introduction.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/logical-operators-coalescing/nullish-coalescing-operator-challenge.mdx b/courses/advanced-javascript/logical-operators-coalescing/nullish-coalescing-operator-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/logical-operators-coalescing/nullish-coalescing-operator.mdx b/courses/advanced-javascript/logical-operators-coalescing/nullish-coalescing-operator.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/logical-operators-coalescing/short-circuiting-and-challenge.mdx b/courses/advanced-javascript/logical-operators-coalescing/short-circuiting-and-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/logical-operators-coalescing/short-circuiting-and.mdx b/courses/advanced-javascript/logical-operators-coalescing/short-circuiting-and.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/logical-operators-coalescing/short-circuiting-or-challenge.mdx b/courses/advanced-javascript/logical-operators-coalescing/short-circuiting-or-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/logical-operators-coalescing/short-circuiting-or.mdx b/courses/advanced-javascript/logical-operators-coalescing/short-circuiting-or.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/logical-operators-coalescing/super-challenge-user-profile-solution.mdx b/courses/advanced-javascript/logical-operators-coalescing/super-challenge-user-profile-solution.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/logical-operators-coalescing/super-challenge-user-profile.mdx b/courses/advanced-javascript/logical-operators-coalescing/super-challenge-user-profile.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/filter-method-challenge.mdx b/courses/advanced-javascript/methods-loops/filter-method-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/filter-method.mdx b/courses/advanced-javascript/methods-loops/filter-method.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/filter-with-objects.mdx b/courses/advanced-javascript/methods-loops/filter-with-objects.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/for-in-loop-challenge.mdx b/courses/advanced-javascript/methods-loops/for-in-loop-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/for-in-loop.mdx b/courses/advanced-javascript/methods-loops/for-in-loop.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/for-loop-break-continue.mdx b/courses/advanced-javascript/methods-loops/for-loop-break-continue.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/for-of-loop-challenge.mdx b/courses/advanced-javascript/methods-loops/for-of-loop-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/for-of-loop.mdx b/courses/advanced-javascript/methods-loops/for-of-loop.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/foreach-method-challenge.mdx b/courses/advanced-javascript/methods-loops/foreach-method-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/foreach-method.mdx b/courses/advanced-javascript/methods-loops/foreach-method.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/includes-method-challenge.mdx b/courses/advanced-javascript/methods-loops/includes-method-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/includes-method.mdx b/courses/advanced-javascript/methods-loops/includes-method.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/introduction.mdx b/courses/advanced-javascript/methods-loops/introduction.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/join-method-challenge.mdx b/courses/advanced-javascript/methods-loops/join-method-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/join-method.mdx b/courses/advanced-javascript/methods-loops/join-method.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/map-method-challenge.mdx b/courses/advanced-javascript/methods-loops/map-method-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/map-method.mdx b/courses/advanced-javascript/methods-loops/map-method.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/map-vs-foreach.mdx b/courses/advanced-javascript/methods-loops/map-vs-foreach.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/reduce-method-challenge.mdx b/courses/advanced-javascript/methods-loops/reduce-method-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/reduce-method.mdx b/courses/advanced-javascript/methods-loops/reduce-method.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/regex-flags-constructors.mdx b/courses/advanced-javascript/methods-loops/regex-flags-constructors.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/string-replace-replaceall.mdx b/courses/advanced-javascript/methods-loops/string-replace-replaceall.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/super-challenge-movie-search-solution.mdx b/courses/advanced-javascript/methods-loops/super-challenge-movie-search-solution.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/super-challenge-movie-search.mdx b/courses/advanced-javascript/methods-loops/super-challenge-movie-search.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/methods-loops/various-array-methods.mdx b/courses/advanced-javascript/methods-loops/various-array-methods.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/assignment-by-value-reference-challenge.mdx b/courses/advanced-javascript/working-with-objects/assignment-by-value-reference-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/assignment-by-value-reference.mdx b/courses/advanced-javascript/working-with-objects/assignment-by-value-reference.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/binding-this-challenge.mdx b/courses/advanced-javascript/working-with-objects/binding-this-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/binding-this.mdx b/courses/advanced-javascript/working-with-objects/binding-this.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/introduction.mdx b/courses/advanced-javascript/working-with-objects/introduction.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/object-assign-challenge.mdx b/courses/advanced-javascript/working-with-objects/object-assign-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/object-assign.mdx b/courses/advanced-javascript/working-with-objects/object-assign.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/object-entries-fromentries-challenge.mdx b/courses/advanced-javascript/working-with-objects/object-entries-fromentries-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/object-entries-fromentries.mdx b/courses/advanced-javascript/working-with-objects/object-entries-fromentries.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/object-freeze-object-seal-challenge.mdx b/courses/advanced-javascript/working-with-objects/object-freeze-object-seal-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/object-freeze-object-seal.mdx b/courses/advanced-javascript/working-with-objects/object-freeze-object-seal.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/object-hasown-hasownproperty-challenge.mdx b/courses/advanced-javascript/working-with-objects/object-hasown-hasownproperty-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/object-hasown-hasownproperty.mdx b/courses/advanced-javascript/working-with-objects/object-hasown-hasownproperty.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/object-methods-challenge-1.mdx b/courses/advanced-javascript/working-with-objects/object-methods-challenge-1.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/object-methods-challenge-2.mdx b/courses/advanced-javascript/working-with-objects/object-methods-challenge-2.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/objects-inbuilt-methods-challenge.mdx b/courses/advanced-javascript/working-with-objects/objects-inbuilt-methods-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/objects-inbuilt-methods.mdx b/courses/advanced-javascript/working-with-objects/objects-inbuilt-methods.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/objects-with-methods-this-challenge.mdx b/courses/advanced-javascript/working-with-objects/objects-with-methods-this-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/objects-with-methods-this.mdx b/courses/advanced-javascript/working-with-objects/objects-with-methods-this.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/spread-operator-challenge.mdx b/courses/advanced-javascript/working-with-objects/spread-operator-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/spread-operator.mdx b/courses/advanced-javascript/working-with-objects/spread-operator.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/structuredclone-challenge.mdx b/courses/advanced-javascript/working-with-objects/structuredclone-challenge.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/structuredclone.mdx b/courses/advanced-javascript/working-with-objects/structuredclone.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/super-challenge-inventory-management-solution.mdx b/courses/advanced-javascript/working-with-objects/super-challenge-inventory-management-solution.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/courses/advanced-javascript/working-with-objects/super-challenge-inventory-management.mdx b/courses/advanced-javascript/working-with-objects/super-challenge-inventory-management.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/package-lock.json b/package-lock.json index 53d5f9683..7afb0e016 100644 --- a/package-lock.json +++ b/package-lock.json @@ -58,6 +58,7 @@ "passport": "^0.7.0", "passport-github": "^1.1.0", "prism-react-renderer": "^2.3.1", + "qr-code-styling": "^1.9.2", "raw-loader": "^4.0.2", "react": "^18.0.0", "react-dom": "^18.0.0", @@ -23227,6 +23228,22 @@ } } }, + "node_modules/qr-code-styling": { + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.9.2.tgz", + "integrity": "sha512-RgJaZJ1/RrXJ6N0j7a+pdw3zMBmzZU4VN2dtAZf8ZggCfRB5stEQ3IoDNGaNhYY3nnZKYlYSLl5YkfWN5dPutg==", + "dependencies": { + "qrcode-generator": "^1.4.4" + }, + "engines": { + "node": ">=18.18.0" + } + }, + "node_modules/qrcode-generator": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.5.2.tgz", + "integrity": "sha512-pItrW0Z9HnDBnFmgiNrY1uxRdri32Uh9EjNYLPVC2zZ3ZRIIEqBoDgm4DkvDwNNDHTK7FNkmr8zAa77BYc9xNw==" + }, "node_modules/qs": { "version": "6.14.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz", diff --git a/package.json b/package.json index 4999d6fd1..7650f65fb 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "passport": "^0.7.0", "passport-github": "^1.1.0", "prism-react-renderer": "^2.3.1", + "qr-code-styling": "^1.9.2", "raw-loader": "^4.0.2", "react": "^18.0.0", "react-dom": "^18.0.0", diff --git a/src/components/CodePenEmbed.tsx b/src/components/CodePenEmbed.tsx new file mode 100644 index 000000000..92f116a1e --- /dev/null +++ b/src/components/CodePenEmbed.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { useColorMode } from "@docusaurus/theme-common"; + +interface CodePenThemeEmbedProps { + title: string; + penId: string; + height?: number; +} + +export default function CodePenEmbed({ + title, + penId, + height = 500, +}: CodePenThemeEmbedProps) { + const { colorMode } = useColorMode(); + + const theme = colorMode === "dark" ? "dark" : "light"; + + const src = `https://codepen.io/ajay-dhangar/embed/${penId}?default-tab=html%2Cresult&editable=true&theme-id=${theme}`; + + return ( +
+ +
+ ); +} \ No newline at end of file diff --git a/src/components/SocialProofFullWidth.tsx b/src/components/SocialProofFullWidth.tsx new file mode 100644 index 000000000..cd7cfa479 --- /dev/null +++ b/src/components/SocialProofFullWidth.tsx @@ -0,0 +1,63 @@ + +export const SocialProofFullWidth = () => { + const partners = [ + { name: "GirlScript Summer Of Code", src: "https://miro.medium.com/v2/resize:fit:1400/1*UcTA3sdGKFdZDkcwYi1U4Q.png" }, + { name: "Hacktoberfest", src: "https://hacktoberfest.com/_next/static/media/logo-hacktoberfest-12--nav.0ac01b46.svg" }, + { name: "GSoC", src: "https://upload.wikimedia.org/wikipedia/commons/a/a7/GSoC-logo-horizontal.svg" }, + // Add more partners to make the scroll look continuous + { name: "GirlScript Summer Of Code", src: "https://miro.medium.com/v2/resize:fit:1400/1*UcTA3sdGKFdZDkcwYi1U4Q.png" }, + { name: "Hacktoberfest", src: "https://hacktoberfest.com/_next/static/media/logo-hacktoberfest-12--nav.0ac01b46.svg" }, + { name: "GSoC", src: "https://upload.wikimedia.org/wikipedia/commons/a/a7/GSoC-logo-horizontal.svg" }, + ]; + + return ( +
+ {/* Subtle Gradient Glow */} +
+ +
+
+ {/* Modern Typography with Tracking */} +

+ Join thousands of developers at CodeHarborHub, building the future of open source together. +

+ + {/* Logo Container with Fade Effect on Edges */} +
+
+ {[...partners, ...partners].map((logo, index) => ( +
+ {logo.name} +
+ ))} +
+
+
+
+ + {/* Bottom Divider */} +
+ + {/* Custom Animation Style - Add to your globals.css or Tailwind Config */} + +
+ ); +}; \ No newline at end of file diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx deleted file mode 100644 index ebf7b6d52..000000000 --- a/src/components/ui/accordion.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from 'react'; -import * as AccordionPrimitive from '@radix-ui/react-accordion'; -import { ChevronDown } from 'lucide-react'; - -import { cn } from '../../lib/utils'; - -const Accordion = AccordionPrimitive.Root; - -const AccordionItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -AccordionItem.displayName = 'AccordionItem'; - -const AccordionTrigger = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( - - svg]:rotate-180', - className - )} - {...props} - > - {children} - - - -)); -AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; - -const AccordionContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( - -
{children}
- -)); - -AccordionContent.displayName = AccordionPrimitive.Content.displayName; - -export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx deleted file mode 100644 index 3ba22b7d4..000000000 --- a/src/components/ui/alert-dialog.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import * as React from 'react'; -import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'; - -import { cn } from '../../lib/utils'; -import { buttonVariants } from './button'; - -const AlertDialog = AlertDialogPrimitive.Root; - -const AlertDialogTrigger = AlertDialogPrimitive.Trigger; - -const AlertDialogPortal = AlertDialogPrimitive.Portal; - -const AlertDialogOverlay = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName; - -const AlertDialogContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - - - - -)); -AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName; - -const AlertDialogHeader = ({ - className, - ...props -}: React.HTMLAttributes) => ( -
-); -AlertDialogHeader.displayName = 'AlertDialogHeader'; - -const AlertDialogFooter = ({ - className, - ...props -}: React.HTMLAttributes) => ( -
-); -AlertDialogFooter.displayName = 'AlertDialogFooter'; - -const AlertDialogTitle = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName; - -const AlertDialogDescription = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -AlertDialogDescription.displayName = - AlertDialogPrimitive.Description.displayName; - -const AlertDialogAction = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName; - -const AlertDialogCancel = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName; - -export { - AlertDialog, - AlertDialogPortal, - AlertDialogOverlay, - AlertDialogTrigger, - AlertDialogContent, - AlertDialogHeader, - AlertDialogFooter, - AlertDialogTitle, - AlertDialogDescription, - AlertDialogAction, - AlertDialogCancel, -}; diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx deleted file mode 100644 index a8ace424e..000000000 --- a/src/components/ui/alert.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import { cva, type VariantProps } from 'class-variance-authority'; - -import { cn } from '../../lib/utils'; - -const alertVariants = cva( - 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', - { - variants: { - variant: { - default: 'bg-background text-foreground', - destructive: - 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive', - }, - }, - defaultVariants: { - variant: 'default', - }, - } -); - -const Alert = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes & VariantProps ->(({ className, variant, ...props }, ref) => ( -
-)); -Alert.displayName = 'Alert'; - -const AlertTitle = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)); -AlertTitle.displayName = 'AlertTitle'; - -const AlertDescription = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)); -AlertDescription.displayName = 'AlertDescription'; - -export { Alert, AlertTitle, AlertDescription }; diff --git a/src/components/ui/aspect-ratio.tsx b/src/components/ui/aspect-ratio.tsx deleted file mode 100644 index 5dfdf1e67..000000000 --- a/src/components/ui/aspect-ratio.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'; - -const AspectRatio = AspectRatioPrimitive.Root; - -export { AspectRatio }; diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx deleted file mode 100644 index 2c5fc2112..000000000 --- a/src/components/ui/avatar.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import * as AvatarPrimitive from '@radix-ui/react-avatar'; - -import { cn } from '../../lib/utils'; - -const Avatar = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -Avatar.displayName = AvatarPrimitive.Root.displayName; - -const AvatarImage = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -AvatarImage.displayName = AvatarPrimitive.Image.displayName; - -const AvatarFallback = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; - -export { Avatar, AvatarImage, AvatarFallback }; diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx deleted file mode 100644 index 375429534..000000000 --- a/src/components/ui/badge.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react'; -import { cva, type VariantProps } from 'class-variance-authority'; - -import { cn } from '../../lib/utils'; - -const badgeVariants = cva( - 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', - { - variants: { - variant: { - default: - 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80', - secondary: - 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', - destructive: - 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80', - outline: 'text-foreground', - }, - }, - defaultVariants: { - variant: 'default', - }, - } -); - -export interface BadgeProps - extends React.HTMLAttributes, - VariantProps {} - -function Badge({ className, variant, ...props }: BadgeProps) { - return ( -
- ); -} - -export { Badge, badgeVariants }; diff --git a/src/components/ui/base/buttons/app-store-buttons.tsx b/src/components/ui/base/buttons/app-store-buttons.tsx new file mode 100644 index 000000000..098fef4e3 --- /dev/null +++ b/src/components/ui/base/buttons/app-store-buttons.tsx @@ -0,0 +1,566 @@ +import type { AnchorHTMLAttributes } from "react"; +import Link from "@docusaurus/Link"; +import { cn } from "@site/src/lib/utils"; + +export const GooglePlayButton = ({ size = "md", ...props }: AnchorHTMLAttributes & { size?: "md" | "lg" }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export const GooglePlayWhiteButton = ({ size = "md", ...props }: AnchorHTMLAttributes & { size?: "md" | "lg" }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export const AppStoreButton = ({ size = "md", ...props }: AnchorHTMLAttributes & { size?: "md" | "lg" }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export const GalaxyStoreButton = ({ size = "md", ...props }: AnchorHTMLAttributes & { size?: "md" | "lg" }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export const AppGalleryButton = ({ size = "md", ...props }: AnchorHTMLAttributes & { size?: "md" | "lg" }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; \ No newline at end of file diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx deleted file mode 100644 index 5e6e3227d..000000000 --- a/src/components/ui/breadcrumb.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import * as React from 'react'; -import { Slot } from '@radix-ui/react-slot'; -import { ChevronRight, MoreHorizontal } from 'lucide-react'; - -import { cn } from '../../lib/utils'; - -const Breadcrumb = React.forwardRef< - HTMLElement, - React.ComponentPropsWithoutRef<'nav'> & { - separator?: React.ReactNode; - } ->(({ ...props }, ref) =>