Code review css, html, js

Question

Cześć, poproszę o code review link github: https://github.com/Vadgame/launch-countdown-timer-main link do strony: https://launch-countdown-timer-main.vercel.app/

Answer 1

Jak no moje oko i gust to jest bardzo dobrze. Jeśli coś umknęło to przepraszam.

Kilka drobnych uwag.. żeby było jasne nie czepiam się! moją intencją jest pomóc ... 

Jeśli chodzi i  skrypt JavaScript, są dwie szkoły : ..pod koniec body lub w sekcji head ale z określonym atrybutem..."defer" niektórzy dodają jeszcze atrybut "async" ale o tym proponuje poczytać...więcej...

https://stackoverflow.com/questions/10808109/script-tag-async-defer

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

a więc jeśli jest w sekcji head:

<script src="script.js" defer></script>

w znacznikach <img> dodałbym atrybut "alt" który nie jest obowiązkowy ale ...

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

W Css dodałbym w resetach jeszcze box-sizing: border-box;

Oczywiście żeby było jasne to tylko moje sugestie

Style i Skrypt w oddzielnych plikach co jest moim zdaniem bardzo dobrą praktyką!

W html podoba mi się Twoja Konwencja:  <header>  a następnie  <main>  użyłbym takiej samej!  Wiemy że są różne preferencje

Jeśli chodzi o kod JS nie wypowiadam się (na razie). Pogłębiam wiedzę..

Btw też korzystałem ( i pewnie skorzystam jeszcze nie raz )z Frontend Mentor bardzo lubię tę stronę!

Pozdrawiam serdecznie i życzę miłego Weekendu !

 

 

Comments

Również pozdrawiam, dzięki za te kilka rad przez te ostanie dni, naprawdę mi pomagasz :)

---

Bardzo się Cieszę  i bardzo  mi miło że mogłem pomóc !

Podejrzałem poniżej że masz ochotę pouczyć się scss.

Przychylam się w 100%  do tego co napisał Milesq..

Naukę nowej technologi dobrze zacząć od dokumentacji to najczęściej najlepsze źródło informacji ... ! (niestety Często omijane i nielubiane przez nowych użytkowników). Polecam najpierw dokumentacje a później..

Gdybyś jednak chciał więcej to masz Tutaj dwóch rycerzy ...Polecam zwłaszcza tego pierwszego ..

https://www.youtube.com/watch?v=nu5mdN2JIwM&t=184s

https://www.youtube.com/watch?v=BDOzg4lXcSg&t=912s

Pozdrawiam.

---

@niezalogowany, tylko że to nie jest jego projekt, a kopia projektu z front-end mentora. 

---

Coś w tym złego? Mario polecił mi tą stronę, więc doskonale o tym wie. W mojej opini to jest bardzo dobra strona doćwiczenia swoic umiejętności front-end'owych. (:

Answer 2

Jeśli chodzi o JS'a to aż się prosi żeby napisać kod tego zegara w klasie. Ale poza tym fajnie. Dobrze, że dbasz o formatowanie kodu. Widzę, że do setInterval wysyłasz "zwykłą" funkcję, poczytaj może o arrow functions ;) https://kursjs.pl/kurs/super-podstawy/funkcja-strzalkowa.php

Fajnie by też było gdybyś stosował eslint i prettier. Tak jak pisał mój poprzednik, tag script powinien być albo na dole strony, albo mieć atrybut defer.

Jeśli chodzi o CSS'a to też jest dobrze. Poprawiłbym nieco formatowanie. W css'ie przyjeło się stosować dwie spacje zamiast 4 i dużo ułatwiłby ci scss

Comments

Dzięki za pomoc w js. W sprawie css, mógłbyś dać linki do pogłębienia tematu o scss?

---

Naukę technologi zawsze zaczynaj od oficjalnej dokumentacji: https://sass-lang.com/guide

---

Cześć, poprawiłem trochę kod, ale nie widzę tu sensu stosowania klasy(w moim rozumowaniu z innych języków porgramowania klasy używa się np: gdy mamy kilku użytkowaników itd. w tym programie wydaje mi się to zbędne, ze względu na to, że będzie to użyte tylko raz, jeżeli źle rozumuję proszę o sprostowanie). kod:

const flaps = document.getElementsByClassName('flap');
let {0:dateDeg,1:hoursDeg,2:minutesDeg,3:secondsDeg,4:dateLast,5:hoursLast,6:minutesLast} = new Array(7).fill(0);
const array = [[dateDeg,dateLast],[hoursDeg,hoursLast],[minutesDeg,minutesLast]];
const makeFlip = (deg, num) => {
    deg = deg == 0 ? 360 : 0;
    flaps[num].style = "transform: rotateX("+deg+"deg); transition: transform 1s;";
    return deg;
}
const flip = (last, get, deg, num) => last!=get ? makeFlip(deg, num) : deg;
window.setInterval(function(){  
    const date = new Date();
    for(let i=0;i<array.length;i++){
        const actual = i==0?date.getDate():(i==1?date.getHours():date.getMinutes());
        array[i][0] = flip(array[i][1], actual, array[i][0], i);
        array[i][1] = actual;
    }
    secondsDeg = makeFlip(secondsDeg, 3);
    flaps[0].innerHTML = 23-date.getDate();
    flaps[1].innerHTML = 23-date.getHours();
    flaps[2].innerHTML = 59-date.getMinutes();
    flaps[3].innerHTML = 59-date.getSeconds();
}, 1000);

---

Jeśli dałbyś to do klasy, to kod byłby bardziej reużywalny, ale to oba rozwiązania są dobre