- [Use meaningful HTML elements](#meaningful-html): `<form>`, `<input>`, `<label>`, and `<button>`.
- [Label each form field with a `<label>`](#html-label).
- Use HTML element attributes to [access built-in browser features](#html-attributes), in particular `type` and `autocomplete` with appropriate values.
- Avoid using `type="number"` for numbers that aren't meant to be incremented, such as payment card numbers. Use `type="text"` and [`inputmode="numeric"`](#make_it_easy_for_users_to_enter_data) instead.
- If an [appropriate autocomplete value](#autocomplete-attribute) is available for an `input`, `select`, or `textarea`, you should use it.
- To help browsers autofill forms, give input `name` and `id` attributes [stable values](#checkout-forms:%7E:text=giving%20form%20fields-,name%20and%20id%20attributes,-stable%20values%20that) that don't change between page loads or website deployments.
- [Disable submit buttons](#html-button) once they've been tapped or clicked.
- [Validate](#validate) data d
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function maxVowels(s: string, k: number): number { | |
const vowels = new Set(['a', 'e', 'i', 'o', 'u']); | |
let maxVowels = 0; | |
let currVowels = 0; | |
for(let i = 0; i < k; i++){ | |
if(vowels.has(s[i])) currVowels++ | |
} | |
maxVowels = currVowels; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function parseJSON(jsonString: string): Record<string, any> { | |
const result: Record<string, any> = {}; | |
jsonString = jsonString.substring(1, jsonString.length - 1); | |
const pairs = jsonString.split(','); | |
for (const pair of pairs) { | |
const keyValue = pair.split(':'); | |
let key = keyValue[0].trim(); | |
let value = keyValue[1].trim(); | |
key = key.substring(1, key.length - 1); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default function curry(func: Function): Function { | |
return function curried(this: any, ...args: any[]) { | |
if (args.length >= func.length) { | |
return func.apply(this, args); | |
} else { | |
return function (this: any, ...args1: any[]) { | |
return curried.apply(this, args.concat(args1)); | |
}; | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Throttling is a technique used to control how many times we allow a function to be executed over time. | |
* When a JavaScript function is said to be throttled with a wait time of X milliseconds, it can only be invoked at most once every X milliseconds. | |
* The callback is invoked immediately and cannot be invoked again for the rest of the wait duration. | |
*/ | |
type ThrottleFunction<T extends any[]> = (...args: T) => any; | |
export default function throttle<T extends any[]>( | |
func: ThrottleFunction<T>, | |
wait: number |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function validParentheses(str: string): boolean { | |
const stack: string[] = []; | |
const map: Record<string, string> = { | |
'}': '{', | |
')': '(', | |
']': '[', | |
}; | |
for (let index = 0; index < str.length; index++) { | |
const char = str[index]; | |
if (map[char]) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
interface MyComponentProps { | |
// Your component props here | |
} | |
const MyComponent = forwardRef<HTMLInputElement, MyComponentProps>( | |
(props, ref) => { | |
// Render your component with the ref attached to the desired element | |
return <input ref={ref} {...props} />; | |
} | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function debounce( | |
func: (...args: any[]) => any, | |
delay: number | |
): (...args: any[]) => void { | |
let timeoutId: ReturnType<typeof setTimeout> | null; | |
return function debouncedFunction(...args: any[]): void { | |
clearTimeout(timeoutId!); | |
timeoutId = setTimeout(() => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>HTML 5 Boilerplate</title> | |
<link rel="stylesheet" href="style.css"> | |
</head> | |
<body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default function getElementsByClassName( | |
element: Element, | |
classNames: string | |
): Array<Element> { | |
const elementsArr: Element[] = []; | |
function traverseNode(el: Element) { | |
if (el.hasChildNodes()) { | |
el.childNodes.forEach((node) => { | |
const nodeEl = node as Element; |
NewerOlder