Tworząc jedną ze stron internetowych chciałam, aby jeden z divów rozciągnięty był zawsze na całą wysokość przeglądarki, niezależnie od wysokości okna, jaka będzie w danej chwili ustawiona. Osiągnęłam to w prosty sposób, za pomocą css.
Read More Jak dopasować stronę do wysokości ekranu przeglądarki?
Po co w ogóle edytować? Załóżmy, że tworzysz sekcję z komentarzami na swojej stronie i chciałbyś udostępnić użytkownikom opcję edycji komentarza, który wcześniej napisali. W łatwy sposób zrobisz to za pomocą atrybutu contenteditable:
Jeśli chcesz dowiedzieć się, jak usunąć podkreślenie i zmienić kolor linku za pomocą CSS, zobacz wpis: Jak usunąć podkreślenie hiperłącza (linku) za pomocą CSS ?
Aby usunąć na stałe podkreślenie z linku oraz zmienić jego kolor za pomocą JavaScript wystarczy, że przypiszesz pojedynczemu linkowi odpowiednie id i podstawisz go pod zmienną, a następnie nadasz mu odpowiednie właściwości :
Read More Jak usunąć podkreślenie hiperłącza (linku) za pomocą JavaScript?
Większość przeglądarek automatycznie dodaje podkreślenie do linków. Nie zawsze taka sytuacja nam odpowiada. Zatem jak możemy je usunąć oraz zmienić kolor linku?
Read More Jak usunąć podkreślenie hiperłącza (linku) za pomocą CSS ?
W przeglądarce chrome wokół aktywnego pola tekstowego (a także wokół diva, będącego linkiem) pojawia się niebieskie obramowanie, które niekoniecznie pasuje do wyglądu naszej strony. Można je jednak łatwo usunąć za pomocą CSS. Wystarczy, że w pliku CSS ustawimy outline (linię zewnętrzną elementu) na wartość none:
Read More Jak usunąć niebieską ramkę z pola tekstowego w chromie?
Kolejny przykład jednego z możliwych pierwszych projektów juniora – quiz 🙂 Quiz wykonany został na zasadzie kart – zakładek. Z pliku .json losowanych jest 10 pytań, które następnie (wraz z odpowiedziami, w pętli) przyporządkowywane są do 10 kart, ułożonych jedna „pod” drugą (position: absolute). Po kliknięciu przycisku next „wyłączana” jest widoczność pierwszej karty i „włączana” widoczność kolejnej. Przycisk Check Answear pozwala sprawdzić, czy udzielona odpowiedź jest prawidłowa i blokuje możliwość zmiany odpowiedzi. Końcowa zakładka pozwala sprawdzić ilość zdobytych punktów.
Drugą wersję węża zrobiłam już przy wykorzystaniu elementu canvas. Sami oceńcie, która wersja podoba Wam się bardziej 🙂
Gra snake wersja 2 – kod: github , wersja z wykorzystaniem canvas
Zaraz po memory zabrałam się do zrobienia innej, równie znanej mini-gry: snake. Popularny wąż to gra, która królowała na telefonach jakieś 15 lat temu, ale i teraz lubię w nią zagrać od czasu do czasu. Wersję pierwszą można obejrzeć tu: Gra snake – kod: github .
Wersja ta została zaprojektowana przy wykorzystaniu tabeli.
Druga wersja gry memory posiada efekt obracający się kart, co sprawia, że gra nieco się ożywia. W grę można pograć tu: Gra memory wersja 2 . Kod można zobaczyć tu: github
