Aleksey Solovyev

А зачем Вы два раза пишите один и тот же код?

fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(json => console.log(json));

Перенесите запрос в родитель(index.js) и передавайте полученные данные в компоненты(props)

Что-то такое https://codesandbox.io/s/pkvw21276x

Link

$(document).on('ready', function() {  
  var winHeight = $(window).height(), 
      docHeight = $(document).height(),
      progressBar = $('progress'),
      max, value;

  /* Set the max scrollable area */
  max = docHeight - winHeight;
  progressBar.attr('max', max);

  $(document).on('scroll', function(){
     value = $(window).scrollTop();
     progressBar.attr('value', value);
  });
});

progress {
  /* Positioning */
  position: fixed;
  left: 0;
  top: 0;

  /* Dimensions */
  width: 100%;
  height: 5px;

  /* Reset the appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Get rid of the default border in Firefox/Opera. */
  border: none;

  /* Progress bar container for Firefox/IE10+ */
  background-color: transparent;

  /* Progress bar value for IE10+ */
  color: red;
}

progress::-webkit-progress-bar {
  background-color: transparent;
}

progress::-webkit-progress-value {
  background-color: red;
}

progress::-moz-progress-bar {
  background-color: red;
}

Все! На codepen сей код в работе
Зачем для 3+\- строчек искать плагин?

Пусть будет этот, если не хотите сами думать: https://github.com/kunukn/reading-position-indicator

https://jsfiddle.net/d1sgepwb/1/
Ну пусть будет так с анимацией :hover

Или используя border https://jsfiddle.net/wyjfg5qn/1/ :

.image{
  width: 200px;
  height: 200px;
  border: 4px solid transparent;
  border-radius: 50%;
  background-image: linear-gradient(white, white), radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

только контролировать сложнее

Вот сам файл:

Вот путь к нему:


Рядом с index.html(видимо в папке public_html) папка css => style.css
Или просто добавьте свой файл: fix-style.css

.item_info_bottom{
  justify-content: center;
}

Удобно использовать store. Во vue есть Vuex
Сохраняйте данные в store:
this.$store.commit('setData', data);
После чего можно получить доступ к этим данным из любого компонента:

import { mapGetters } from 'vuex';

// code...
computed: {
  ...mapGetters({
    data: 'getData', 
  }),
},

Данные реактивны.

ps есть удобный способ разделения на модули(user, global etc)

В чем проблема проверять input на значение?

$('#submit').click(function(){
   if($.trim($('#myInput').val()) == ''){
      alert('Input can not be left blank');
   }
});

Для radio button

if($('#radio_button').is(':checked')) { 
    alert("it's checked"); 
}

Почему у Вас br не работает?
Или при переносе у Вас элемент за предела li выходит?

Это происходит потому что у Вас задан float: left для li
Чтобы исправить:
*задавайте border для контейнера, а не для ссылки

li{
    border: 2px solid #ddd;
}
li:after {
    content: "";
    display: table;
    clear: both;
}

Добавить br между текстом:

<li class="selected">
  <a href="javascript:void(0)" class="wr-tooltip" data-value="s-37%d0%bb">S<br>37Л</a>
</li>

Или оберните каждую строку в span
Задайте этому span:

span{
  display: inline-block  
}

Добавить :after по аналогии с первым способом

Для формы submit Event.preventDefault();
После отправляем AJAX запрос:

// 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.
});

Plain JS: XMLHttpRequest

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);

JQ Ajax

$.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"
  }]
}

return res.status(422).json({ errors: errors.array() });
errors.array() - ваши ошибки. Передавайте их в шаблон свой - res.render('home', {errors: errors.array()});

{{# 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
}

ps работает и без getTime()

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
}

Функцию в functions.php. Добавьте свой стиль к меню итемам(my-custom-class). Указать категорию(my-category)

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');
}

Что именно у Вас не получилось?

Создаете header, который будет в себе содержать:

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

Слайдер будет во весь header 100% на 100%. В слайдере лежат слайды(100% на 100%), которые мы и меняем. Если не умеете писать слайдер, то берите готовое решение.
Вот разметка, которая нужна для плагина:

<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>

Навигация будет position: absolute и прижата к верху top: 0.

ps или слайдер absolute, а nav static. Как для Вас удобнее... Сути не меняет.

Получаем разметку:

<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;
}

ps что-то такое, если на коленках - https://jsfiddle.net/vg3nb7e0/1/

Что у Вас не получается?
1. Добавляете новый комментарий на страницу.
2. После N-секунд меняете фон комментария
https://jsfiddle.net/78wrnft3/7/

Если надо менять фон когда пользователь промотал до комментария, то отслеживайте появление элемента во вьюпорте.
1. Добавляете новый комментарий на страницу.
2. На событие onscroll проверять позицию нового комментария относительно позиции прокрутки:
Используйте плагин, если не понятно:
- https://github.com/camwiegert/in-view
- https://github.com/protonet/jquery.inview
- или куча других

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