A simple way to detect a click outside of an element with vanilla JavaScript
A Pen by Marcelo Ribeiro on CodePen.
| const list = [ | |
| { name: "Marcelo Ribeiro", short_name: "tchelo" }, | |
| { name: "Leonardo Costa", short_name: "leo" }, | |
| { name: "Victor Tanure", short_name: "vitrola" }, | |
| { name: "Matheus Oliveira", short_name: "rary" } | |
| ]; | |
| let filteredList = [...list]; | |
| const searchProps = ["name", "short_name"]; | |
| let timeout = null; | |
| const removeAccents = (text) => { return text; }; |
| import { useSlugify } from "./useSlugify"; | |
| const slugify = useSlugify(); | |
| console.log(slugify("São Paulo")); |
| ... | |
| transform: { | |
| '^.+\\.(t|j)sx?$': [ | |
| '@swc/jest', | |
| { | |
| jsc: { | |
| parser: { | |
| syntax: 'typescript', | |
| tsx: true, | |
| decorators: true, |
| const apiURL = "https://brasilapi.com.br/api"; | |
| const endpoint = `${apiURL}/cep/v2`; | |
| /** | |
| * @typedef IPayload | |
| * @type {object} | |
| * @property {string} cep | |
| * @property {string} state | |
| * @property {string} city | |
| * @property {string} neighborhood |
| import api from 'api.js'; | |
| export default endpoint => ({ | |
| get: (id = "") => api.get(`${endpoint}/${id}`), | |
| create: data => api.post(`${endpoint}`, data), | |
| update: ({ id, ...data }) => api.put(`${endpoint}/${id}`, data), | |
| patch: ({ id, ...data }) => api.patch(`${endpoint}/${id}`, data), | |
| delete: id => api.delete(`${endpoint}/${id}`), | |
| filterBy: params => api.get(`${endpoint}`, { params }) | |
| }); |
| const getColor = () => "red"; | |
| const color = getColor(); | |
| ({ | |
| red: () => alert("Vermelho"), | |
| blue: () => alert("Azul") | |
| }[color]?.()); | |
| // OR |
| const products = [ | |
| {id: 1, title: "Trim Dress", category: "women", collection: ["new", "featured"]}, | |
| {id: 2, title: "Belted Dress", category: "women", collection: ["featured"]}, | |
| {id: 3, title: "Fitted Dress", category: "men", collection: ["new"]} | |
| ]; | |
| const categories = new Set( | |
| products.map(product => product.category) | |
| ); |
| <select> | |
| <option>Afghanistan</option> | |
| <option>Akrotiri</option> | |
| <option>Albania</option> | |
| <option>Algeria</option> | |
| <option>American Samoa</option> | |
| <option>Andorra</option> | |
| <option>Angola</option> | |
| <option>Anguilla</option> | |
| <option>Antarctica</option> |
A simple way to detect a click outside of an element with vanilla JavaScript
A Pen by Marcelo Ribeiro on CodePen.
| export const capitalize = value => { | |
| if (!value) return ""; | |
| const list = value.toString().trim().split(" "); | |
| list.forEach((item, index) => { | |
| list[index] = item[0].toUpperCase() + item.slice(1).toLowerCase(); | |
| }); | |
| return list.join(" "); |