Tâche de test pour le front-end

Habré avait déjà 244 articles sur sa carrière, des milliers de commentaires sur de mauvaises interviews de développeurs et beaucoup de programmeurs mécontents de toutes sortes et couleurs. Non pas que c'était le minimum requis pour une embauche réussie, mais quand on commence à donner des tests, il devient difficile de s'arrêter.

— , HTML CSS JavaScript. , , . , -.

, . - « .» , , . — , .

? ? ? , , . , .

---

: «»

: , HTML. JavaScript onclick, .

, , . , , . , JavaScript , ( , , ).

---

? ? 4 , 2? ?

, - . .

? readme? gulp? , . , , -. : , , .

? — «», .

? ? onclick="" style=""? - , .

? , , . , , , , .

? , , . , , . , «» , .

« .»

HTML

? header/main/footer? ?

? ? — .

? webp ?

? SVG, PNG? SVG ( -) ( , img).

, :

:

• 
  
  
  
  

• SVG 

  
  
  
  
  

? ? ? 

• 
  
  
  
  

? , . 

CSS

«» ? , .

? ? , , .

? - , , font-face montserrat-thin, montserrat-bold montserrat , . font-display unicode-range? , , .

• 
  
  
  
  

? , .

JavaScript-

, , . HTML, CSS .

? ? ? , «» a b123. , . , .

let a = 1
let b = 2

setTimeout(() => {
    [a, b] = [b, a]
    console.log(a) // 2
    console.log(b) // 1
}, 0)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

? ? , ES5, ES6? , - - .

:

? () , 1 = 1 ()? , , .

? , ? ? . , . , , , , . jQuery , , .

Spoiler

const mailRegEx = /[a-zA-Z0-9]{1}([a-zA-Z0-9-.]{1,})?@[a-zA-Z]{1}([a-zA-Z0-9.]{1,})?[a-zA-Z0-9]{1}.[a-zA-Z]{2,}/;
const PHONEMINLENGTH = 18;

const showErrorIcon = (sth) => {
 const input = sth.target || sth;
 const errorIcon = input.closest('.custom-input').querySelector('.custom-inputerror');
 if (!errorIcon.classList.contains('custom-inputerror--shown')) {
   errorIcon.classList.add('custom-input_error--shown');
 }
};

function IsNumeric(sText) {
   var ValidChars = "0123456789.";
   var IsNumber = true;
   var Char;
   for (i = 0; i < sText.length && IsNumber == true; i++) {
       Char = sText.charAt(i);
       if (ValidChars.indexOf(Char) == -1) {
           IsNumber = false;
       }
   }
   return IsNumber;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

---

. , :

• https://kenwheeler.github.io/slick/

  
  
  
  
  

• https://glidejs.com/

  
  
  
  
  

• https://swiperjs.com/

  
  
  
  
  

Slick jQuery, . .

. glide , swiper . , .

, , .

• https://github.com/nolimits4web/swiper - 11

  
  
  
  
  

• https://github.com/glidejs/glide - 23

  
  
  
  
  

. 2-3 , .

. glide  ~23kb, swiper ~140kb — , glide.

? , 3D- ? swiper, , . ? glide, .

---

( ).

:

• , ;

  
  
  
  
  

• ;

  
  
  
  
  

• « » , -;

  
  
  
  
  

• .

  
  
  
  
  

• jQuery;

  
  
  
  
  

• JavaScript;

  
  
  
  
  

• Gulp Webpack .

  
  
  
  
  

— , .

. , , , .