25 Cze 2019

HEX na RGB

Teraz coś małego ale jakże przydatnego. Konwersja HEX koloru np. #00a1ff na RGB.

function hexTorgb(fullhex) {
  const hex = fullhex.substring(1,7);
  return {
    R: parseInt(hex.substring(0,2), 16),
    G: parseInt(hex.substring(2,4), 16),
    B: parseInt(hex.substring(4,6), 16)
  }
}

A wywołanie to zwyczajne przekazanie stringa do funkcji.

console.log(hexTorgb('#00a1ff')); 
// => {R: 0, G: 161, B: 255 } w wyniku mamy obiekt

Oczywiście nic nie stoi na przeszkodzie aby modyfikować tą funkcję.

18 Kwi 2019

Kolumny w css oraz szukanie w html

Powiedzmy że mamy bardzo długą listę linków. Chciałbym aby ta lista łamała się na 2, 3 a może więcej kolumn. W naszym przykładzie lista będzie składać się z 20 elementów.

Taką listę można uzyskać przez emmet aby nie klepać tego samodzielnie wystarczy wpisać ul#ul>li{text $}*20

<ul id="ul">
  <li>text 1</li>
  <li>text 2</li>
  <li>text 3</li>
  <li>text 4</li>
  <li>text 5</li>
  <li>text 6</li>
  <li>text 7</li>
  <li>text 8</li>
  <li>text 9</li>
  <li>text 10</li>
  ...
</ul>

Chciałby aby ta lista została podzielona na dwie kolumny. Do tego użyjemy column-count Które jest wpierane nawet przez IE od wersji 10
Oczywiście też trochę upiększymy wygląd naszej listy.

ul {
  border: 1px solid #cacaca;
  list-style: none;
  max-width: 50%;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-width: 50%;
  padding: 10px;
  margin: auto;
}

ul li {
  padding: 10px;
  margin-bottom: 2px;
}

ul li:nth-child(even) {
  background-color: #f0f0f0;
}
14 Sty 2018

forEach, filter, map, sort, reduce

Trochę operacji na tablicach 🙂

const employments = [
  { name: 'Andrzej', category: 'Finanse', start: 1982, end: 2017 },
  { name: 'Agnieszka', category: 'Sprzedaż', start: 1992, end: 2008 },
  { name: 'Mariola', category: 'Samochody', start: 1991, end: 2007 }
];

const digits = [23, 22, 10, 1, 5, 54, 25, 24, 21];

Chcemy pobrać imię pracownika.
Najpierw w starym stylu.

for (let i = 0; i < employments.length; i++) {
  console.log(employments[i].name); // Andrzej, Agnieszka, Mariola
}

forEach - teraz pobierzemy przez forEach

employments.forEach(function(employment) {
  console.log(employment.name);
});

Możemy to zrobić jeszcze szybciej prze ES6

employments.forEach(employment => {
  console.log(employment.name);
});