JavaScript – Kody, triki, sztuczki

28 Paź 2019

Async / await w js

Async/await to nowe rozwiązanie do zapisu asynchronicznego kody, nowy sposób który ułatwia pisanie nam kodu. Jest to uporządkowanie znanych nam promisów.

Async

Zwraca nam zawsze obietnicę.

async function fetchData() {
const data = await fetch();
return data;
};

fetchData()
.fetch(res => {
console.log(res);
});

Await

Javascript poczeka na wykonanie danej obietnicy do jej zakończenia i zwrócenia przez nią wyniku. Należy pamiętać aby await zawsze znajdowała się wewnątrz funkcji async.

Czytaj dalej …

25 Paź 2019

Uzupełnienie o zero inaczej zero wiodące

Prosta ale przydatna funkcja, dopełniająca na początku zero np. przy dopełnieniu miesiąca czy dni. Zamiast 1 robimy 01 (dzień/miesiąc)

// Do testów ustawiam 5 sierpnia
const now = new Date("Aug 5, 2019 10:10:10");
const zerofill = value => (value < 10 && value > -1 ? '0' : '') + value;

// Dzień: 05 (zamiast 5)
console.log(`Dzień: ${zerofill(now.getDate())}`);

// Miesiąc: 08 (zamiast 8)
console.log(`Miesiąc: ${zerofill(now.getMonth()+1)}`);

4 Wrz 2019

Animowany baner

Co to jest ten baner, to nic innego zdjęcie znajdujące się w div, które przesuwa się z góry na dół i ponownie na górę i tak w nieskończoność.
Oczywiście nic nas nie ogranicza można dodać np. jakiś tekst 🙂
Najpierw prosty html, na potrzeby tego przykładu kontener będzie centrowany w pionie i poziomie na całej stronie.

Teraz odpowiedni styl do wyświetlenia tego zdjęcia centralnie.

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

html {
height: 100%;
}

body {
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}

.container {
width: 100%;
padding: 0 20px;
}

.image-bgr {
position: relative;
width: 100%;
max-width: 900px;
height: auto;
min-height: 220px;
overflow: hidden;
margin: auto;
}

.image-bgr img {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

Najważniejsze klasy to w naszym przykładzie „.image-bgr” oraz „.image-bgr img”
Pierwsza klasa tworzy box o wymiarach max 900px i min wysokości 220px.
Do tego posiada właściwość overflow hidden aby ukryć wszystko co wystaję poza obwód boxa.
Druga klasa, a dokładnie ta sam tylko że z elementem img dotyczy zdjęcia. Zdjęcie to ustawiamy jako position absolute. Centrujemy je tak aby było maksymalnie ustawione na 100% szerokości boxa. Do tego zdjęcie jest centrowane w pionie.

Teraz cześć najważniejsza – javascript

Czytaj dalej …

27 Sie 2019

Losowy kolor w js

Losowo generowany kolor, a do czego może się to przydać spytacie, a no nie wiem, tak może dla zabawy ;). Ja zrobię coś innego czyli zmiana koloru tła diva po otworzeniu strony, oraz oraz zmiana koloru podczas zmiany wielkości strony.

Najpierw style.

* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
.box {
width: 200px;
height: 200px;
}

Mały html

No i oczywiście javascript. Najpierw stwórzmy funkcję do zmiany kolor.

Czytaj dalej …

5 Sie 2019

Licznik komentarzy Disqus

Naszym celem jest dodanie przy każdym artykule liczby komentarzy, które są dodane do artykułu.

Najpierw konfigurujemy nasz kod. W zakładce

TWOJEKONTO.disqus.com/admin/settings/community/

znajdują się trzy pola „Zero comments”, „One comment”, „Multiple comments”.
Jeżeli chcemy mieć PL tłumaczenie należy je w tych miejscach zmienić.

Niestety w Disqus nie przewidzieli, że nasz język jest tak skomplikowany i występują pewne trudności, przydało by się jeszcze jedno miejsce na wpis.
Bo: 0 komentarzy, 1 komentarz, 2 komentarze ale gdzie miejsce na wpisać 10 komentarzy 🙂
No niestety nie da się tego obejść ja ostatnie pole zmodyfikowałem na taki wpis – komentarzy: 10

Teraz czas na konkrety, na dole strony dodajemy przed zamknięciem body

Czytaj dalej …

12 3…41 Następne »