andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update changeLightness.md

Browse Source
This commit is contained in:
Angelos Chalaris
2020-10-31 16:37:54 +02:00
committed by GitHub
parent cb25140794
commit 4c29f79015
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
snippets/changeLightness.md
View File

@ -1,14 +1,14 @@
--- ---
title: changeLightness title: changeLightness
tags: string,browser,regexp,beginner tags: string,browser,regexp,intermediate
--- ---
Returns the string value of the color with changed lightness in `hsl` format. Changes the lightness value of an `hsl()` color string.
- Use `String.prototype.match()` to get an array of 3 string with the numeric values. - Use `String.prototype.match()` to get an array of 3 strings with the numeric values.
- Use `Array.prototype.map()` in combination with `Number` to convert them into an array of numeric values. - Use `Array.prototype.map()` in combination with `Number` to convert them into an array of numeric values.
- Clamp new lightness within the hsl valid range between `0` and `100`. - Make sure the lightness is within the valid range (between `0` and `100`), using `Math.max()` and `Math.min()`.
- Form a valid `hsl` color string. - Use a template literal to create a new `hsl()` string with the updated value.
```js ```js
const changeLightness = (delta, hslStr) => { const changeLightness = (delta, hslStr) => {
@ -24,6 +24,6 @@ const changeLightness = (delta, hslStr) => {
``` ```
```js ```js
changeLightness(10, "hsl(330, 50%, 50%)"); // 'hsl(330, 50%, 60%)' - lightens the color by 10% changeLightness(10, 'hsl(330, 50%, 50%)'); // 'hsl(330, 50%, 60%)'
changeLightness(-10, "hsl(330, 50%, 50%)"); // 'hsl(330, 50%, 40%)' - darkens the color by 10% changeLightness(-10, 'hsl(330, 50%, 50%)'); // 'hsl(330, 50%, 40%)'
``` ```