diff --git a/docs/tailwind/_category_.json b/docs/tailwind/_category_.json index bfc83b24c..af99929fb 100644 --- a/docs/tailwind/_category_.json +++ b/docs/tailwind/_category_.json @@ -1,8 +1,8 @@ { - "label": "Tailwind", + "label": "TailwindCSS", "position": 8, "link": { "type": "generated-index", - "description": "TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It is developed and maintained by Microsoft." + "description": "Tailwind CSS is a design system implementation in pure CSS. It is also configurable. It gives developers super powers. It allows them to build websites with a clean consistent UI out of the box." } } diff --git a/docs/tailwind/core_concept/_category_.json b/docs/tailwind/core_concept/_category_.json new file mode 100644 index 000000000..3f9100d14 --- /dev/null +++ b/docs/tailwind/core_concept/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Core Concept", + "position": 8, + "link": { + "type": "generated-index", + "description": "Tailwind CSS is a design system implementation in pure CSS. It is also configurable. It gives developers super powers. It allows them to build websites with a clean consistent UI out of the box." + } +} diff --git a/docs/tailwind/core_concept/utility_first_fundamental.md b/docs/tailwind/core_concept/utility_first_fundamental.md new file mode 100644 index 000000000..323001554 --- /dev/null +++ b/docs/tailwind/core_concept/utility_first_fundamental.md @@ -0,0 +1,167 @@ +--- +id: utility_first_fundamental +title: utility_first_fundamental +sidebar_label: utility_first_fundamental +sidebar_position: 1 +tags: + - Tailwind CSS + - Getting Started + - Tailwind CSS Setup + - Tailwind CSS Installation + - Tailwind CSS Quickstart +description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. +--- + +# Utility-First Fundamentals + +Building complex components from a constrained set of primitive utilities. + +## Overview + +Traditionally, whenever you need to style something on the web, you write CSS. + +Using a traditional approach where custom designs require custom CSS + +```html +
+
+ +
+
+

ChitChat

+

You have a new message!

+
+
+ + +With Tailwind, you style elements by applying pre-existing classes directly in +your HTML. Using utility classes to build custom designs without writing CSS +ChitChat You have a new message! + +
+
+ ChitChat Logo +
+
+
ChitChat
+

You have a new message!

+
+
+``` + +In the example above, we’ve used: + +1. Tailwind’s flexbox and padding utilities (flex, shrink-0, and p-6) to control the overall card layout +2. The max-width and margin utilities (max-w-sm and mx-auto) to constrain the card width and center it horizontally +3. The background color, border radius, and box-shadow utilities (bg-white, rounded-xl, and shadow-lg) to style the card’s appearance +4. The width and height utilities (w-12 and h-12) to size the logo image +5. The space-between utilities (space-x-4) to handle the spacing between the logo and the text +6. The font size, text color, and font-weight utilities (text-xl, text-black, font-medium, etc.) to style the card text +7. This approach allows us to implement a completely custom component design without writing a single line of custom CSS. + +Now I know what you’re thinking, “this is an atrocity, what a horrible mess!” and you’re right, it’s kind of ugly. In fact it’s just about impossible to think this is a good idea the first time you see it — you have to actually try it. + +But once you’ve actually built something this way, you’ll quickly notice some really important benefits: + +You aren’t wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container. + +Your CSS stops growing. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS. + +Making changes feels safer. CSS is global and you never know what you’re breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking. +When you realize how productive you can be working exclusively in HTML with predefined utility classes, working any other way will feel like torture. + +​ + +### Why not just use inline styles? + +A common reaction to this approach is wondering, “isn’t this just inline styles?” and in some ways it is — you’re applying styles directly to elements instead of assigning them a class name and then styling that class. + +But using utility classes has a few important advantages over inline styles: + +Designing with constraints. Using inline styles, every value is a magic number. With utilities, you’re choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs. +Responsive design. You can’t use media queries in inline styles, but you can use Tailwind’s responsive utilities to build fully responsive interfaces easily. +Hover, focus, and other states. Inline styles can’t target states like hover or focus, but Tailwind’s state variants make it easy to style those states with utility classes. +This component is fully responsive and includes a button with hover and focus styles, and is built entirely with utility classes: + +```html +
+ Woman's Face +
+
+

Erin Lindford

+

Product Engineer

+
+ +
+
+``` + +​ + +### Maintainability concerns + +The biggest maintainability concern when using a utility-first approach is managing commonly repeated utility combinations. + +This is easily solved by extracting components and partials, and using editor and language features like multi-cursor editing and simple loops. + + + +```html + +``` + +Aside from that, maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS. Large companies like GitHub, Netflix, Heroku, Kickstarter, Twitch, Segment, and more are using this approach with great success. + +If you’d like to hear about others’ experiences with this approach, check out the following resources: + +By The Numbers: A Year and a Half with Atomic CSS by John Polacek +No, Utility Classes Aren’t the Same As Inline Styles by Sarah Dayan of Algolia +Diana Mounter on using utility classes at GitHub, a podcast interview +For even more, check out The Case for Atomic/Utility-First CSS, curated by John Polacek. diff --git a/docs/tailwind/getstart.md b/docs/tailwind/getstart.md deleted file mode 100644 index f5b25e503..000000000 --- a/docs/tailwind/getstart.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: getstart-tailwind -title: Getting Started with Tailwind CSS -sidebar_label: Getting Started -sidebar_position: 2 -tags: - - Tailwind CSS - - Getting Started - - Tailwind CSS Setup - - Tailwind CSS Installation - - Tailwind CSS Quickstart -description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. ---- - -In this guide, we will walk through the steps required to get started with Tailwind CSS, from installation to basic usage. - -## Installation - -### Using npm - -The recommended way to install Tailwind CSS is via npm. If you don't have npm installed, you can download and install it from [npm's official website](https://www.npmjs.com/). - -1. Initialize your project: - - ```bash - npm init -y - - ``` - -2. Install Tailwind CSS via npm: - -```bash -npm install tailwindcss -``` - -3. Generate a configuration file: - -```bash -npx tailwindcss init -``` - -### Using CDN - -If you prefer not to use npm, you can include Tailwind CSS directly from a CDN. Add the following ` ` tag to the ` ` of your HTML file: - -```bash - - - - - - Tailwind CSS Card - - -
-
-
- An example image -
-
-
Card title
-

This is an example of a card using Tailwind CSS. You can replace this text with your own.

-
-
-
- - -``` diff --git a/docs/tailwind/getting_started/Optimizing_for_production.md b/docs/tailwind/getting_started/Optimizing_for_production.md new file mode 100644 index 000000000..26dbb65ae --- /dev/null +++ b/docs/tailwind/getting_started/Optimizing_for_production.md @@ -0,0 +1,54 @@ +--- +id: optimizing-for-production +title: optimizing-for-production +sidebar_label: optimizing-for-production +sidebar_position: 5 +tags: + - Tailwind CSS + - Getting Started + - Tailwind CSS Setup + - Tailwind CSS Installation + - Tailwind CSS Quickstart +description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. +--- + +# Optimizing for Production + +## Introduction + +Tailwind CSS focuses on producing the smallest CSS file possible by generating only the CSS used in your project. This often results in CSS files under 10kB, even for large projects. For instance, Netflix's Top 10 site uses Tailwind and delivers just 6.5kB of CSS. + +## Steps to Optimize + +### Minify CSS + +Minifying your CSS can be done using tools like [cssnano](https://cssnano.co). If using Tailwind CLI, add the `--minify` flag: + +```bash +npx tailwindcss -o build.css --minify +``` + +## PostCSS Plugin + +If Tailwind is installed as a PostCSS plugin, add cssnano at the end of your plugin list: + +```javascript +// postcss.config.js +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}), + }, +}; +``` + +## Compression + +Compress your CSS using Brotli or similar tools. + +## Frameworks + +Many frameworks handle minification and compression automatically in production. + +For more details, visit the Tailwind CSS documentation. diff --git a/docs/tailwind/getting_started/Using_Tailwind_CSS_with_Preloaders.md b/docs/tailwind/getting_started/Using_Tailwind_CSS_with_Preloaders.md new file mode 100644 index 000000000..e43c55bac --- /dev/null +++ b/docs/tailwind/getting_started/Using_Tailwind_CSS_with_Preloaders.md @@ -0,0 +1,169 @@ +--- +id: using-with-preprocessors +title: using-with-preprocessors +sidebar_label: using-with-preprocessors +sidebar_position: 4 +tags: + - Tailwind CSS + - Getting Started + - Tailwind CSS Setup + - Tailwind CSS Installation + - Tailwind CSS Quickstart +description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. +--- + +# Using Tailwind CSS with Preprocessors + +## Overview + +This guide provides instructions on how to integrate Tailwind CSS with common CSS preprocessors such as Sass, Less, and Stylus. Since Tailwind is a PostCSS plugin, it can be easily used with these preprocessors, though it is generally recommended to rely on PostCSS plugins for added functionality. + +## Using PostCSS as Your Preprocessor + +### Benefits + +- Faster builds due to fewer processing steps. +- Avoids quirks from mixing Tailwind with preprocessors. + +### Build-time Imports + +Use `postcss-import` for handling `@import` statements: + +```sh +npm install -D postcss-import +``` + +```javascript +// postcss.config.js +module.exports = { + plugins: { + "postcss-import": {}, + tailwindcss: {}, + autoprefixer: {}, + }, +}; +``` + +## Using Sass with Tailwind CSS + +### Installation + +Install the necessary dependencies: + +```sh +npm install -D tailwindcss postcss autoprefixer sass +``` + +### Configuration + +Create a `postcss.config.js` file: + +```javascript +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; +``` + +Update your build script to process Sass files: + +```sh +npx sass src/styles.scss src/styles.css +npx postcss src/styles.css -o dist/styles.css +``` + +### Example `styles.scss` + +```scss +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; + +// Custom Sass code +``` + +## Using Less with Tailwind CSS + +### Installation + +Install the necessary dependencies: + +```sh +npm install -D tailwindcss postcss autoprefixer less +``` + +### Configuration + +Create a `postcss.config.js` file: + +```javascript +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; +``` + +Update your build script to process Less files: + +```sh +npx lessc src/styles.less src/styles.css +npx postcss src/styles.css -o dist/styles.css +``` + +### Example `styles.less` + +```less +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; + +// Custom Less code +``` + +## Using Stylus with Tailwind CSS + +### Installation + +Install the necessary dependencies: + +```sh +npm install -D tailwindcss postcss autoprefixer stylus +``` + +### Configuration + +Create a `postcss.config.js` file: + +```javascript +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; +``` + +Update your build script to process Stylus files: + +```sh +npx stylus src/styles.styl -o src/styles.css +npx postcss src/styles.css -o dist/styles.css +``` + +### Example `styles.styl` + +```styl +@import 'tailwindcss/base' +@import 'tailwindcss/components' +@import 'tailwindcss/utilities' + +// Custom Stylus code +``` + +## Conclusion + +By following these instructions, you can seamlessly integrate Tailwind CSS with Sass, Less, or Stylus preprocessors in your project. While PostCSS is recommended for most use cases, these steps ensure flexibility for developers working with various preprocessing tools. diff --git a/docs/tailwind/getting_started/_category_.json b/docs/tailwind/getting_started/_category_.json new file mode 100644 index 000000000..94555dc18 --- /dev/null +++ b/docs/tailwind/getting_started/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Getting Started", + "position": 8, + "link": { + "type": "generated-index", + "description": "Tailwind CSS is a design system implementation in pure CSS. It is also configurable. It gives developers super powers. It allows them to build websites with a clean consistent UI out of the box." + } +} diff --git a/docs/tailwind/getting_started/browser_support.md b/docs/tailwind/getting_started/browser_support.md new file mode 100644 index 000000000..fa86f17c2 --- /dev/null +++ b/docs/tailwind/getting_started/browser_support.md @@ -0,0 +1,61 @@ +--- +id: browser-support +title: browser-support +sidebar_label: browser-support +sidebar_position: 6 +tags: + - Tailwind CSS + - Getting Started + - Tailwind CSS Setup + - Tailwind CSS Installation + - Tailwind CSS Quickstart +description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. +--- + +## Browser Support + +Understanding which browsers Tailwind supports and how to manage vendor prefixes. + +In general, Tailwind CSS v3.0 is designed for and tested on the latest stable versions of Chrome, Firefox, Edge, and Safari. It does not support any version of IE, including IE 11. + +While most of the features in Tailwind CSS will work in all modern browsers, Tailwind also includes APIs for several bleeding-edge features that aren’t yet supported by all browsers, for example the :focus-visible pseudo-class and backdrop-filter utilities. + +Since Tailwind is such a low-level framework, it’s easy to avoid these features if you can’t use them by simply not using the utility or modifier that’s not supported, much like how you just wouldn’t use those CSS features in your CSS. + +The Can I Use database is a great resource when you’re unsure about the support for an unfamiliar CSS feature. + +​ + +## Vendor Prefixes + +Many CSS properties require vendor prefixes to be understood by browsers, for example background-clip: text needs the -webkit prefix to work in most browsers: + +``` +.bg-clip-text { + -webkit-background-clip: text; + background-clip: text; +} +``` + +If you’re using the Tailwind CLI tool, vendor prefixes like this will be added automatically. + +If not, we recommend that you use Autoprefixer, which is a PostCSS plugin that automatically adds any necessary vendor prefixes based on the browsers you tell it you need to support. + +To use it, install it via npm: + +``` +npm install -D autoprefixer +``` + +Then add it to the very end of your plugin list in your PostCSS configuration: + +``` +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + } +} +``` + +To learn more about specifying which browsers you need to support, check out Browserslist which is the standard way to define target browsers in front-end tooling. diff --git a/docs/tailwind/getting_started/tailwindcss_editor_setup.md b/docs/tailwind/getting_started/tailwindcss_editor_setup.md new file mode 100644 index 000000000..5548c1867 --- /dev/null +++ b/docs/tailwind/getting_started/tailwindcss_editor_setup.md @@ -0,0 +1,60 @@ +--- +id: tailwindcss-editor-setup +title: tailwindcss-editor-setup +sidebar_label: tailwindcss-editor-setup +sidebar_position: 3 +tags: + - Tailwind CSS + - Getting Started + - Tailwind CSS Setup + - Tailwind CSS Installation + - Tailwind CSS Quickstart +description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. +--- + +# Editor Setup - Tailwind CSS + +Plugins and configuration settings that can improve the developer experience when working with Tailwind CSS. + +## Syntax Support + +Tailwind CSS uses custom CSS at-rules like `@tailwind`, `@apply`, and `@config`, which may trigger warnings in some editors. Install a PostCSS language support plugin for your editor to avoid these issues. + +For VS Code, use the official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) plugin, which includes: + +- Autocomplete +- Linting +- Hover Previews +- Syntax Highlighting + +## IntelliSense for VS Code + +Enhances the Tailwind development experience with features like autocomplete, syntax highlighting, and linting. + +Check out the project [on GitHub](https://github.com/tailwindlabs/tailwindcss-intellisense) or [add it to Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss). + +## Automatic Class Sorting with Prettier + +Use the [official Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) to automatically sort your classes following the recommended class order. + +```html + + + + + +``` + +## JetBrains IDEs + +JetBrains IDEs like WebStorm and PhpStorm include support for intelligent Tailwind CSS completions in HTML and `@apply`. + +[Learn more about Tailwind CSS support in JetBrains IDEs](https://www.jetbrains.com). + +For more detailed instructions, visit the [Tailwind CSS Editor Setup Guide](https://tailwindcss.com/docs/editor-setup). diff --git a/docs/tailwind/getting_started/tailwindcss_installation.md b/docs/tailwind/getting_started/tailwindcss_installation.md new file mode 100644 index 000000000..e746c3764 --- /dev/null +++ b/docs/tailwind/getting_started/tailwindcss_installation.md @@ -0,0 +1,92 @@ +--- +id: getstart-tailwind +title: Getting Started with Tailwind CSS +sidebar_label: Getting Started +sidebar_position: 2 +tags: + - Tailwind CSS + - Getting Started + - Tailwind CSS Setup + - Tailwind CSS Installation + - Tailwind CSS Quickstart +description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. +--- + +In this guide, we will walk through the steps required to get started with Tailwind CSS, from installation to basic usage. + +# Installation - Tailwind CSS + +Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. Follow these steps to install Tailwind CSS using the Tailwind CLI tool. + +## Steps to Install Tailwind CSS + +### 1. Install Tailwind CSS + +Install `tailwindcss` via npm and create a configuration file. + +```bash +npm install -D tailwindcss +npx tailwindcss init +``` + +### 2. Configure Template Paths + +Add the paths to all your template files in `tailwind.config.js`. + +```js +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./src/**/*.{html,js}"], + theme: { + extend: {}, + }, + plugins: [], +}; +``` + +### 3. Add Tailwind Directives to CSS + +Include the `@tailwind` directives in your main CSS file. + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; +``` + +### 4. Start the Tailwind CLI Build Process + +Run the CLI tool to scan your template files for classes and build your CSS. + +```bash +npx tailwindcss -i ./src/input.css -o ./src/output.css --watch +``` + +### 5. Use Tailwind in HTML + +Include the compiled CSS file in your HTML and start using Tailwind classes. + +```html + + + + + + + + +

Hello world!

+ + +``` + +## Additional Resources + +- [Utility-First Fundamentals](https://tailwindcss.com/docs/utility-first) +- [Responsive Design](https://tailwindcss.com/docs/responsive-design) +- [Hover, Focus & Other States](https://tailwindcss.com/docs/hover-focus-and-other-states) +- [Dark Mode](https://tailwindcss.com/docs/dark-mode) +- [Reusing Styles](https://tailwindcss.com/docs/reusing-styles) +- [Customizing the Framework](https://tailwindcss.com/docs/customizing-the-framework) + +For more detailed instructions, visit the [Tailwind CSS Installation Guide](https://tailwindcss.com/docs/installation). diff --git a/dsa-solutions/lc-solutions/0000-0099/0017-Letter-Combinations-of-a-Phone-Number.md b/dsa-solutions/lc-solutions/0000-0099/0017-Letter-Combinations-of-a-Phone-Number.md index 26cf596b7..76a29c9c4 100644 --- a/dsa-solutions/lc-solutions/0000-0099/0017-Letter-Combinations-of-a-Phone-Number.md +++ b/dsa-solutions/lc-solutions/0000-0099/0017-Letter-Combinations-of-a-Phone-Number.md @@ -3,21 +3,23 @@ id: letter-combinations-of-a-phone-number title: Letter Combinations of a Phone Number (LeetCode) sidebar_label: 0017 Letter Combinations of a Phone Number tags: - - Back Tracking - - Mapping - - String + - Back Tracking + - Mapping + - String description: The problem requires generating all letter combinations corresponding to given digits (2-9). The solution utilizes backtracking to explore all combinations efficiently, employing a recursive approach in Java. +sidebar_position: 17 --- ## Problem Description -| Problem Statement | Solution Link | LeetCode Profile | -| :----------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------- | -| [Letter Combinations of a Phone Number](https://leetcode.com/problems/Letter Combinations of a Phone Number/) | [Letter Combinations of a Phone Number Solution on LeetCode](https://leetcode.com/problems/Letter Combinations of a Phone Number/solutions/5055810/video-two-pointer-solution/) | [gabaniyash846](https://leetcode.com/u/gabaniyash846/) | +| Problem Statement | Solution Link | LeetCode Profile | +| :------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------- | +| [Letter Combinations of a Phone Number](https://leetcode.com/problems/Letter Combinations of a Phone Number/) | [Letter Combinations of a Phone Number Solution on LeetCode](https://leetcode.com/problems/Letter Combinations of a Phone Number/solutions/5055810/video-two-pointer-solution/) | [gabaniyash846](https://leetcode.com/u/gabaniyash846/) | ### Problem Description ## Problem Statement: + Given a string containing digits from 2-9 inclusive, return all possible letter combinations that the number could represent. Return the answer in any order. ### Examples @@ -32,7 +34,6 @@ Given a string containing digits from 2-9 inclusive, return all possible letter - **Input:** `digits = ""` - **Output:** `[]` - #### Example 3 - **Input:** `2` @@ -47,9 +48,11 @@ Given a string containing digits from 2-9 inclusive, return all possible letter ### Approach 1. **Mapping Digits to Letters:** + - Define a mapping of digits to their corresponding letters, similar to telephone buttons. 2. **Backtracking Function:** + - Define a recursive backtracking function to generate all possible combinations. - The function takes four parameters: - `index`: The current index in the digits string. @@ -59,6 +62,7 @@ Given a string containing digits from 2-9 inclusive, return all possible letter - After the recursive call, we remove the last character from the combination (backtracking). 3. **Base Case:** + - If the length of the current combination is equal to the length of the input digits string, we add the combination to the result list. 4. **Main Function:** @@ -153,6 +157,7 @@ public class Solution { ``` #### CPP: + ```cpp #include #include @@ -208,40 +213,41 @@ int main() { ``` #### JavaScript + ```js /** * @param {string} digits * @return {string[]} */ -var letterCombinations = function(digits) { - if (digits.length === 0) return []; - - const digitToLetters = { - '2': 'abc', - '3': 'def', - '4': 'ghi', - '5': 'jkl', - '6': 'mno', - '7': 'pqrs', - '8': 'tuv', - '9': 'wxyz' - }; - - const combinations = []; - - const backtrack = (index, path) => { - if (index === digits.length) { - combinations.push(path); - return; - } - const letters = digitToLetters[digits.charAt(index)]; - for (let letter of letters) { - backtrack(index + 1, path + letter); - } - }; - - backtrack(0, ''); - return combinations; +var letterCombinations = function (digits) { + if (digits.length === 0) return []; + + const digitToLetters = { + 2: "abc", + 3: "def", + 4: "ghi", + 5: "jkl", + 6: "mno", + 7: "pqrs", + 8: "tuv", + 9: "wxyz", + }; + + const combinations = []; + + const backtrack = (index, path) => { + if (index === digits.length) { + combinations.push(path); + return; + } + const letters = digitToLetters[digits.charAt(index)]; + for (let letter of letters) { + backtrack(index + 1, path + letter); + } + }; + + backtrack(0, ""); + return combinations; }; // Example usage: @@ -249,39 +255,40 @@ console.log(letterCombinations("23")); // Output: ["ad","ae","af","bd","be","bf" ``` #### TypeScript + ```ts class Solution { - private digitToLetters: { [key: string]: string } = { - '2': 'abc', - '3': 'def', - '4': 'ghi', - '5': 'jkl', - '6': 'mno', - '7': 'pqrs', - '8': 'tuv', - '9': 'wxyz' + private digitToLetters: { [key: string]: string } = { + "2": "abc", + "3": "def", + "4": "ghi", + "5": "jkl", + "6": "mno", + "7": "pqrs", + "8": "tuv", + "9": "wxyz", + }; + + letterCombinations(digits: string): string[] { + const combinations: string[] = []; + + const backtrack = (index: number, path: string): void => { + if (index === digits.length) { + combinations.push(path); + return; + } + const letters = this.digitToLetters[digits.charAt(index)]; + for (let letter of letters) { + backtrack(index + 1, path + letter); + } }; - letterCombinations(digits: string): string[] { - const combinations: string[] = []; - - const backtrack = (index: number, path: string): void => { - if (index === digits.length) { - combinations.push(path); - return; - } - const letters = this.digitToLetters[digits.charAt(index)]; - for (let letter of letters) { - backtrack(index + 1, path + letter); - } - }; - - if (digits.length !== 0) { - backtrack(0, ''); - } - - return combinations; + if (digits.length !== 0) { + backtrack(0, ""); } + + return combinations; + } } // Example usage: @@ -294,9 +301,11 @@ console.log(solution.letterCombinations("23")); // Output: ["ad","ae","af","bd", Here's a step-by-step algorithm for generating all possible letter combinations of a given string of digits using backtracking: 1. **Define a mapping of digits to letters:** + - Create a map where each digit from 2 to 9 is mapped to its corresponding letters on a telephone keypad. 2. **Define a backtracking function:** + - The function will take the following parameters: - `index`: The current index in the digits string. - `path`: The current combination of letters. @@ -305,6 +314,7 @@ Here's a step-by-step algorithm for generating all possible letter combinations - After the recursive call, remove the last character from the combination (backtracking). 3. **Base Case:** + - If the length of the current combination is equal to the length of the input digits string, add the combination to the result list. 4. **Main Function:** @@ -312,4 +322,4 @@ Here's a step-by-step algorithm for generating all possible letter combinations - Call the backtracking function with the initial index set to 0 and an empty string as the initial combination. - Return the list of combinations. -This algorithm ensures that all possible combinations are generated by exploring all valid paths through backtracking. \ No newline at end of file +This algorithm ensures that all possible combinations are generated by exploring all valid paths through backtracking.