Sometimes we may need to Convert String characters to uppercase and lowercase, for this purpose Python provides us two methods: The upper() string method converts all of the characters to uppercase The lower() string method converts all of the characters to lowercase upper() string method example code output lower() string method example code output isupper(), […]
Sometimes we may need to Trim String, whitespace characters from the left side, right side, or both sides of a string. For this purpose Python provides three methods to Trim String. The strip() string method will return a new string without any whitespace characters at the beginning or end. The lstrip() method will remove whitespace characters from the left […]
This React Fetch hook is created by composing the useState and useEffect hooks. The three states of a fetch request in the above code snippet are: pending – when the request is pending data – data is retrieved successfully Error – something went wrong These states are managed inside useEffect hook.
When a user selects a file, you may need to know what type of file the user selected to decide how to handle the file. In JavaScript, you listen to the change event on the file input. You get the file name and call .split(‘.’) on it. This creates a new array using “.” as […]
Some applications like Gmail and Facebook have a search feature where as a user enters some input, the input is sent to the server and the results are used to provide the user with results closer to what the user is looking for. To implement this behaviour in Vue, we use a library called debounce […]
When loading data in Vue.js applications, you may want to display some form of loading indicator so your users will know that something is happening. Vue.js provides us with the v-if directive which allows us to conditionally show/hide any piece of markup. In the snippet below, we have our data property loading which is set […]
In this article, you will learn to Capitalize Text with JavaScript. JavaScript has built-in methods like .toLowerCase() – to convert text to lower case – and .toUpperCase() – to convert text to upper case. However, there’s no built-in method to convert text to title case i.e. “How Are You”. However, we can combine .toUpperCase() with […]
There are a few common operations that are performed on lists: add a new item, search through the list, and deleting an item from a list. The snippet below shows how to delete an item from a list. list is an array of names. In the <template>, we render the list using v-for. For each […]
A common use for data binding is to conditionally alter the classes and styling of an element. The snippet below shows how this can be achieved: By default, the <p> tag is styled to have a red text color. However, <p> tags with the .active class get styled with a blue text. Since the data […]
There are a couple of ways to download media assets on the web. One of them involves making an HTTP request to the location of the media asset and using JavaScript inbuilt methods to manipulate the asset. To get started, we add a button to our markup that would trigger the download. We add an […]
Filters are part of many applications as it helps the user sort through a wide range of items. We can use the combination of v-model and computed properties to achieve this. In the snippet above, we have a list of items and an input field. As you type into the input field, the list gets […]
Sometimes you have a list of items you would like to add to, based on some user interaction or event. The snippet below gives a base template to achieve this. In the snippet above, we have a list, an input field and a button. When the button is clicked, the value of the input field […]
A Vue component to fetch and render a list Framework – Vue Use cases Recipe Todo list
Detect a user device screen orientation Framework: Vue Use cases Automatically launch fullscreen video on mobile when the user changes to landscape mode
Detect if a user has navigated away from the web page. Framework: Vue Use cases Stop animation while the page is in the background Pause video in the background
