Testaufgabe für Frontend

Habré hatte bereits 244 Karriereartikel, Tausende von Kommentaren zu schlechten Entwicklerinterviews und viele verärgerte Programmierer aller Art und Farben. Nicht, dass dies das Minimum für eine erfolgreiche Einstellung war, aber wenn Sie anfangen, Tests durchzuführen, wird es schwierig, damit aufzuhören.

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

  
  
  
  
  

— , .

. , , , .