Test task for front-end

Habré already had 244 career articles, thousands of comments about bad developer interviews and many disgruntled programmers of all sorts and colors. Not that it was the minimum required for a successful hiring, but when you start giving tests, it becomes difficult to stop.

— , 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 .

  
  
  
  
  

— , .

. , , , .