Aleksey Solovyev

// this is the id of the form
$("#idForm").submit(function(e) {


    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the django.
           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

var http = new XMLHttpRequest();
http.open('POST', url, true);
http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        console.log(http.responseText);
    }
}
http.send(params);

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

// ...rest of the initial code omitted for simplicity.
const { check, validationResult } = require('express-validator/check');

app.post('/user', [
  // username must be an email
  check('username').isEmail(),
  // password must be at least 5 chars long
  check('password').isLength({ min: 5 })
], (req, res) => {
  // Finds the validation errors in this request and wraps them in an object with handy functions
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return res.status(422).json({ errors: errors.array() });
  }

  User.create({
    username: req.body.username,
    password: req.body.password
  }).then(user => res.json(user));
});

{
  "errors": [{
    "location": "body",
    "msg": "Invalid value",
    "param": "username"
  }]
}

{{# if errors }}
    {{# each errors }}
          <p class="alert alert-danger">{{ this.msg }}</p>
    {{/each}}
{{/if}}

let uno = new Date("Sat Aug 18 2018 00:00:00 GMT+0300").getTime();
let dos = new Date("Mon Aug 20 2018 00:00:00 GMT+0300").getTime();
let tres = new Date("Sun Aug 19 2018 00:00:00 GMT+0300").getTime();

if ( tres > uno && tres < dos) {
  // do something
}

let uno = new Date("Sat Aug 18 2018 00:00:00 GMT+0300");
let dos = new Date("Mon Aug 20 2018 00:00:00 GMT+0300");
let tres = new Date("Sun Aug 19 2018 00:00:00 GMT+0300");

if ( tres > uno && tres < dos) {
  // do something
}

function mark_menu_item_as_active($classes, $item) {

    if( in_array('my-custom-class',$classes) && ( is_category('my-category') /* OR ...*/  ) )   {
        $classes[] = 'current-menu-item';
    }

    return $classes;
}
add_filter('nav_menu_css_class', 'mark_menu_item_as_active', 10, 2);

if(window.location.href.indexOf("/blog/") > -1) {
   $('#menu-item-339').addClass('current-menu-item');
}
if(window.location.href.indexOf("/articles/") > -1) {
   $('#menu-item-241').addClass('current-menu-item');
}
if(window.location.href.indexOf("/forum/") > -1) {
   $('#menu-item-437').addClass('current-menu-item');
}

• Слайдер
  
• Навигацию
  

<div class="siema">
  <div>Hi, I'm slide 1</div>
  <div>Hi, I'm slide 2</div>
  <div>Hi, I'm slide 3</div>
  <div>Hi, I'm slide 4</div>
</div>

<header>
    <section class="slider">
        <div class="slider__slide">  <!-- тут текст и картинка-->  </div>
        <div class="slider__slide">  <!-- тут текст и картинка-->  </div>
        <div class="slider__slide">  <!-- тут текст и картинка-->  </div>
        ....
    </section>
    
    <nav> <!--  тут меню  --> </nav>
</header>

header{
    position: relative;
    width: 100%;
    height: 100vh;
}
.slider{
    width: 100%;
    height: 100%;
}
.slider__slide{
    width: 100%;
    height: 100%;
    background: url() cover;
    .....
}


nav{
    position: absolute;
    top: 0;
}

// Пример с плагинов https://github.com/camwiegert/in-view
// Строки 10 - 14 в примере выше
inView('.newComment')
    .on('enter', function(){
         setTimeout(function() {
               newComment.classList.remove('new');
         }, 3000);
    })
});

first.addEventListener('change', function(e) {
  ....
});

first.addEventListener('change', function(e) {
  // this.value - значение первого select'а
  second.querySelector('option[value=' + this.value + ']').selected = 'selected'
});

console.log(li, "li"); // array of elements "li"
for (var i = li.length - 1; i >= 0; i--) {
	console.log(li[i], "li[i]"); // element with sequence number "i" in array "li"
	console.log(li[i].getElementsByTagName('a'), "li[i].getElementsByTagName('a')"); // all <a> - elements in li[i]
	console.log(li[i].getElementsByTagName('a')[0], "li[i].getElementsByTagName('a')[0]"); // first <a> - element in li[i]
	let a = li[i].getElementsByTagName('a')[0];
}

const images = document.querySelectorAll('img');

images.forEach(function(img){
  // get image width: 'w' and height: 'h'
  // get list-product-item__img width: containerW, height: containerH
  // .....
  const imgAspect = w/h;
  const containerAspect = containerW/containerH;

	if (containerAspect>imgAspect) {
    // set image width and height
		img.style.width = containerW;
		img.style.height = containerW / imgAspect;
	} else {
    // set image width and height
		img.style.height = containerH;
		img.style.width = containerH * imgAspect;
	}
})

.image{
  /* ваши стили */
  
  /* сдвигаем на 100px вниз и задаем прозрачность 0*/
  transform: translate3d(0, 100px, 0);
  opacity: 0;
  /* ******* */
  
  transition: opacity .3s, transform .3s;
}
.image.is-shown{
  /* возвращаем в обычное состояние */
  transform: translate3d(0, 0px, 0);
  opacity: 1;
}

const image = document.getElementById('image');
const imageFromTop = image.getBoundingClientRect().top;

const showOnScroll = debounce(function() {
	// How much scroll from top
	let scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
	// Check scroll position
	if (imageFromTop < scrollTop + 500) {
		image.classList.add('is-shown')

		// Remove this listener for better pref
		window.removeEventListener('scroll', showOnScroll, false);
	}
}, 30);

window.addEventListener('scroll', showOnScroll, false);

function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
};

.cv-image {
  position: relative
}
.img1,
.img2 {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

const el = document.getElementById('image');
const divOffset = offset(el);
window.onscroll = stay;
function stay() {
  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  el.style.top = divOffset.top + scrollTop + 'px'

}

function offset(el) {
    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}