Compare commits
8 Commits
c481e8aa38
...
ccc2cbd9c2
| Author | SHA1 | Date |
|---|---|---|
Vedansh
|
ccc2cbd9c2 | 23 hours ago |
Aboody_01
|
5c0a5e2426 | 23 hours ago |
|
Vedansh
|
4b63d17383 | 1 day ago |
Murshal Akhtar Ansari
|
3ca0a5c94c | 1 day ago |
|
Aboody_01
|
523511c078 | 1 day ago |
Astro
|
d4cb23b370 | 1 day ago |
Andrey Blazejuk
|
55255dbbb1 | 1 day ago |
github-actions[bot]
|
5033c89adf | 1 day ago |
90 changed files with 429 additions and 211 deletions
@ -1,3 +1,9 @@ |
||||
# Linear Search |
||||
|
||||
Linear search is one of the simplest search algorithms. In this method, every element in an array is checked sequentially starting from the first until a match is found or all elements have been checked. It is also known as sequential search. It works on both sorted and unsorted lists, and does not need any preconditioned list for the operation. However, its efficiency is lesser as compared to other search algorithms since it checks all elements one by one. |
||||
Linear search is one of the simplest search algorithms. In this method, every element in an array is checked sequentially starting from the first until a match is found or all elements have been checked. It is also known as sequential search. It works on both sorted and unsorted lists, and does not need any preconditioned list for the operation. However, its efficiency is lesser as compared to other search algorithms since it checks all elements one by one. |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [@article@DSA Linear Search - W3Schools](https://www.w3schools.com/dsa/dsa_algo_linearsearch.php) |
||||
- [@article@Linear Search - GeeksForGeeks](https://www.geeksforgeeks.org/linear-search/) |
||||
- [@video@Learn Linear Search in 3 minutes](https://www.youtube.com/watch?v=246V51AWwZM) |
||||
|
||||
@ -1,3 +1,8 @@ |
||||
# Binary Search |
||||
|
||||
`Binary Search` is a type of search algorithm that follows the divide and conquer strategy. It works on a sorted array by repeatedly dividing the search interval in half. Initially, the search space is the entire array and the target is compared with the middle element of the array. If they are not equal, the half in which the target cannot lie is eliminated and the search continues on the remaining half, again taking the middle element to compare to the target, and repeating this until the target is found. If the search ends with the remaining half being empty, the target is not in the array. Binary Search is log(n) as it cuts down the search space by half each step. |
||||
`Binary Search` is a type of search algorithm that follows the divide and conquer strategy. It works on a sorted array by repeatedly dividing the search interval in half. Initially, the search space is the entire array and the target is compared with the middle element of the array. If they are not equal, the half in which the target cannot lie is eliminated and the search continues on the remaining half, again taking the middle element to compare to the target, and repeating this until the target is found. If the search ends with the remaining half being empty, the target is not in the array. Binary Search is log(n) as it cuts down the search space by half each step. |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [@article@DSA Binary Search - W3Schools](https://www.w3schools.com/dsa/dsa_algo_binarysearch.php) |
||||
- [@video@Learn Binary Search in 10 minutes](https://www.youtube.com/watch?v=xrMppTpoqdw) |
||||
|
||||
@ -1,11 +1,9 @@ |
||||
# Axios |
||||
|
||||
The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests. |
||||
|
||||
Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers. |
||||
Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers. The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Axios Getting Started](https://axios-http.com/docs/intro) |
||||
- [@official@Getting Started with Axios](https://axios-http.com/docs/intro) |
||||
- [@article@How to make HTTP requests with Axios](https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/#why) |
||||
- [@feed@Explore top posts about Axios](https://app.daily.dev/tags/axios?ref=roadmapsh) |
||||
|
||||
@ -1 +1,8 @@ |
||||
# Binding Events |
||||
# Binding Events |
||||
|
||||
Vue.js is an open-source Model–View–ViewModel front-end JavaScript framework for building user interfaces and single-page applications. Vue.js has many own directives for DOM manipulation such as v-bind, v-on, v-model, etc. Binding events is an essential part of creating interactive applications. You can bind events using the v-on directive or its shorthand, the @ symbol. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Binding Events](https://vuejs.org/guide/essentials/event-handling) |
||||
- [@article@Vue.js Event Handling](https://www.geeksforgeeks.org/vue-js-event-handling/) |
||||
|
||||
@ -1,8 +1,9 @@ |
||||
# create-vue |
||||
|
||||
[create-vue](https://github.com/vuejs/create-vue) is a CLI tool that helps you create a new Vue project with a single command. It is a simple and easy-to-use tool that saves you time and effort when setting up a new Vue project. |
||||
create-vue is a CLI tool that helps you create a new Vue project with a single command. It is a simple and easy-to-use tool that saves you time and effort when setting up a new Vue project. |
||||
|
||||
Learn more using the following resources: |
||||
|
||||
- [@article@Creating a Vue Project](https://cli.vuejs.org/guide/creating-a-project.html) |
||||
- [@opensource@vuejs/create-vue](https://github.com/vuejs/create-vue) |
||||
- [@official@Creating a Vue Project](https://cli.vuejs.org/guide/creating-a-project.html) |
||||
- [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh) |
||||
|
||||
@ -1,7 +1,9 @@ |
||||
# Custom Directives |
||||
|
||||
So far you may have covered two forms of code reuse in Vue: [components](https://vuejs.org/guide/essentials/component-basics.html) and [composables](https://vuejs.org/guide/reusability/composables.html). Components are the main building blocks, while composables are focused on reusing stateful logic. Custom directives, on the other hand, are mainly intended for reusing logic that involves low-level DOM access on plain elements. |
||||
So far you may have covered two forms of code reuse in Vue: components and composables. Components are the main building blocks, while composables are focused on reusing stateful logic. Custom directives, on the other hand, are mainly intended for reusing logic that involves low-level DOM access on plain elements. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Custom Directives](https://vuejs.org/guide/reusability/custom-directives.html) |
||||
- [@official@Custom Directives](https://vuejs.org/guide/reusability/custom-directives.html) |
||||
- [@official@Composables](https://vuejs.org/guide/reusability/composables.html) |
||||
- [@official@Components](https://vuejs.org/guide/essentials/component-basics.html) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Debugging |
||||
# Debugging |
||||
|
||||
Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Debugging Documentation](https://vuejs.org/v2/cookbook/debugging-in-vscode.html) |
||||
|
||||
@ -1,7 +1,8 @@ |
||||
# Directives |
||||
|
||||
Directives are special attributes with the `v-` prefix. Vue provides a number of [built-in directives](https://vuejs.org/api/built-in-directives.html). |
||||
Directives are special attributes with the `v-` prefix. Vue provides a number of built-in directives. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Directives Documentation](https://vuejs.org/guide/essentials/template-syntax.html#directives) |
||||
- [@official@Directives Documentation](https://vuejs.org/guide/essentials/template-syntax.html#directives) |
||||
- [@official@Built-in Directives](https://vuejs.org/api/built-in-directives.html) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Error / Warn Handler |
||||
# Error / Warn Handler |
||||
|
||||
Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Debugging Documentation](https://vuejs.org/v2/cookbook/debugging-in-vscode.html) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Event Modifiers |
||||
# Event Modifiers |
||||
|
||||
In Vue.js, event modifiers are special postfixes that you can add to event handlers to control the behavior of events more easily. They help simplify common tasks such as stopping propagation, preventing default actions, and ensuring that the event is triggered only under certain conditions. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Event Modifiers in Vue.js](https://www.freecodecamp.org/news/how-event-handling-works-in-vue-3-guide-for-devs/) |
||||
|
||||
@ -1,9 +1,9 @@ |
||||
# Fetch |
||||
|
||||
The fetch() method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise. |
||||
The `fetch()` method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Fetch MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) |
||||
- [@article@Fetch - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) |
||||
- [@article@Fetch W3school Docs](https://www.w3schools.com/jsref/api_fetch.asp) |
||||
- [@article@Network request - Fetch](https://javascript.info/fetch) |
||||
- [@article@Network Request - Fetch](https://javascript.info/fetch) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Global Properties |
||||
# Global Properties |
||||
|
||||
Global properties allows you to add properties or methods that can be accessed throughout your application. This is particularly useful for sharing functionality or data across components without the need to pass props explicitly. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Vue.js Global Properties](https://blog.logrocket.com/vue-js-globalproperties/) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Inline / Method Handlers |
||||
# Inline / Method Handlers |
||||
|
||||
In Vue.js, **inline handlers** are defined directly in the template using expressions, making them suitable for simple tasks. For example, you might use an inline handler to increment a counter. **Method handlers**, on the other hand, are defined in the `methods` option and are better for more complex logic or when reusing functionality across multiple components. They improve code readability and maintainability. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Method Handlers](https://v1.vuejs.org/guide/events.html) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Input Bindings |
||||
# Input Bindings |
||||
|
||||
Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Input Bindings](https://vuejs.org/guide/essentials/forms) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Key Modifiers |
||||
# Key Modifiers |
||||
|
||||
Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Input Bindings](https://vuejs.org/guide/essentials/forms) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Modifiers |
||||
# Modifiers |
||||
|
||||
Modifiers are special suffixes that can be added to directives (such as v-model and v-bind) to alter their behavior. Modifiers allow you to specify additional functionality or constraints to the binding, making it more flexible and powerful. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Modifiers](https://v2.vuejs.org/v2/guide/components-custom-events.html) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Mouse Button Modifiers |
||||
# Mouse Button Modifiers |
||||
|
||||
Mouse button modifiers are a type of modifier that can be used with event handlers to specify which mouse button or buttons should trigger the event. These modifiers allow you to customize the behavior of event handlers, such as v-on:click, to respond to specific mouse button clicks. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Button Modifiers](https://medium.com/evolve-you/vue-3-keyboard-and-mouse-a4866d7d0e8) |
||||
|
||||
@ -1,10 +1,8 @@ |
||||
# Options API |
||||
|
||||
We use Options API in a Vue application to write and define different components. With this API, we can use options such as data, methods, and mounted. |
||||
|
||||
To state it simply, Options API is an old way to structure a Vue.JS application. Due to some limitations in this API, Composition API was introduced in Vue 3. |
||||
We use Options API in a Vue application to write and define different components. With this API, we can use options such as data, methods, and mounted. To state it simply, Options API is an old way to structure a Vue.JS application. Due to some limitations in this API, Composition API was introduced in Vue 3. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html) |
||||
- [@article@Options API Documentation](https://vuejs.org/api/#options-api) |
||||
- [@official@TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html) |
||||
- [@official@Options API Documentation](https://vuejs.org/api/#options-api) |
||||
|
||||
@ -1,3 +1,8 @@ |
||||
# Routing |
||||
|
||||
Routing is an essential concept in Single Page Applications (SPA). When your application is divided into separated logical sections, and all of them are under their own URL, your users can easily share links among each other. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Routing in Vue.js](https://vuejs.org/guide/scaling-up/routing.html) |
||||
- [@official@The Vue Router](https://router.vuejs.org/) |
||||
|
||||
@ -1,22 +1,23 @@ |
||||
# v-cloak |
||||
|
||||
The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template |
||||
The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template. The v-cloak directive remains until the component instance is mounted. |
||||
|
||||
The v-cloak directive remains until the component instance is mounted. |
||||
```vue |
||||
```html |
||||
<div v-cloak> |
||||
{{ message }} |
||||
</div> |
||||
``` |
||||
|
||||
Combined with CSS, you can hide elements with v-cloak until they are ready. |
||||
|
||||
```css |
||||
[v-cloak] { |
||||
display: none; |
||||
} |
||||
``` |
||||
|
||||
The `<div>` will not be visible until the compilation is done. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@v-cloak documentation](https://vuejs.org/api/built-in-directives.html#v-cloak) |
||||
- [@official@v-cloak Documentation](https://vuejs.org/api/built-in-directives.html#v-cloak) |
||||
|
||||
@ -1,9 +1,13 @@ |
||||
# v-if |
||||
|
||||
Conditionally render an element or a template fragment based on the truthy-ness of the expression value. |
||||
Conditionally render an element or a template fragment based on the truthy-ness of the expression value. When a `v-if` element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all. |
||||
|
||||
When a `v-if` element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all. |
||||
## Example |
||||
|
||||
```html |
||||
<h1 v-if="awesome">Vue is awesome!</h1> |
||||
``` |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@v-if Documentation](https://vuejs.org/api/built-in-directives.html#v-if) |
||||
- [@official@v-if Documentation](https://vuejs.org/api/built-in-directives.html#v-if) |
||||
|
||||
@ -1,5 +1,5 @@ |
||||
# v-model |
||||
|
||||
The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as <input>, <textarea>, and <select>. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes. |
||||
The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as `<input>`, `<textarea>`, and `<select>`. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes. |
||||
|
||||
- [@article@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html) |
||||
- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html) |
||||
|
||||
@ -1 +1,7 @@ |
||||
# v-on |
||||
# v-on |
||||
|
||||
The v-on directive is placed on an element to attach an event listener. To attach an event listener with v-on we need to provide the event type, and any modifier, and a method or expression that should run when that event occurs. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@v-on Directive](https://www.w3schools.com/vue/ref_v-on.php) |
||||
|
||||
@ -1,9 +1,7 @@ |
||||
# v-show |
||||
|
||||
`v-show` is similar to `v-if` in that it allows you to conditionally render components. However, it does not remove the component from the DOM and merely toggles its `display` CSS property to be `hidden`. It also does not work with `v-else-if` oe `v-else`. |
||||
|
||||
Prefer `v-show` over `v-if` if the component's visibility needs to change often, and `v-if` if not. |
||||
`v-show` is similar to `v-if` in that it allows you to conditionally render components. However, it does not remove the component from the DOM and merely toggles its `display` CSS property to be `hidden`. It also does not work with `v-else-if` oe `v-else`. Prefer `v-show` over `v-if` if the component's visibility needs to change often, and `v-if` if not. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Vue Conditional Rendering Docs](https://vuejs.org/guide/essentials/conditional.html#v-show) |
||||
- [@official@Vue Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html#v-show) |
||||
|
||||
@ -1,9 +1,7 @@ |
||||
# Watchers |
||||
|
||||
Computed properties allow us to declaratively compute derived values. However, there are cases where we need to perform "side effects" in reaction to state changes - for example, mutating the DOM, or changing another piece of state based on the result of an async operation. |
||||
|
||||
With Composition API, we can use the watch function to trigger a callback whenever a piece of reactive state changes. |
||||
Computed properties allow us to declaratively compute derived values. However, there are cases where we need to perform "side effects" in reaction to state changes - for example, mutating the DOM, or changing another piece of state based on the result of an async operation. With Composition API, we can use the watch function to trigger a callback whenever a piece of reactive state changes. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Watchers in Vue.js](https://vuejs.org/guide/essentials/watchers.html) |
||||
- [@official@Watchers in Vue.js](https://vuejs.org/guide/essentials/watchers.html) |
||||
|
||||
@ -1,9 +1,12 @@ |
||||
export function getPercentage(portion: number, total: number): string { |
||||
if (total <= 0 || portion <= 0) { |
||||
return '0'; |
||||
} else if (portion > total) { |
||||
return '100'; |
||||
if (portion <= 0 || total <= 0) { |
||||
return '0.00'; |
||||
} |
||||
|
||||
if (portion >= total) { |
||||
return '100.00'; |
||||
} |
||||
|
||||
return ((portion / total) * 100).toFixed(2); |
||||
const percentage = (portion / total) * 100; |
||||
return percentage.toFixed(2); |
||||
} |
||||
|
||||
Loading…
Reference in new issue