Никита Егоров

Загружаете скрипт который отвечает за рандом и через него все остальные ->

// random.js
const min = 1, max = 4;
const number = Math.floor(Math.random() * (max - min) + min);
const script = document.createElement('script');

switch (number) {
    case 1: script.src = 'ссылка_1'; break;
    case 2: script.src = 'ссылка_2'; break;
    // и так далее
}

document.head.appendChild(script);

Оф. документация


Выведет 100 json объектов.

import java.net.*;
import java.io.*;

public class URLReader {
    public static void main(String[] args) throws Exception {

        URL oracle = new URL("http://jsonplaceholder.typicode.com/posts");
        BufferedReader in = new BufferedReader(
        new InputStreamReader(oracle.openStream()));

        String inputLine;
        while ((inputLine = in.readLine()) != null)
            System.out.println(inputLine);
        in.close();
    }
}

Засекать время через performance.now()

Здесь декодить ничего не надо.

let o = {
    result: [],
    pagination: {
        more: true
    }
}

response.data.ITEMS.forEach((item, i) => o.result.push( {id: i + 1, text: item} ))

Примерно так

const number = document.getElementById('total');
const block  = document.getElementsByClassName('apsc-count')[0];

block.innerHTML = number.innerHTML;

https://learn.javascript.ru/styles-and-classes#стр...

document.getElementById('block').style.cssText= `
    opacity: 1;
    border: 1;
    color: black;
`

Два изображения. Оба с position: asolute. Вот пример - https://jsfiddle.net/Svupol/j2aqvec6/6/

Одно ровно по центру->

positon: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Другое ниже на 100% ->

position: absolute;
left: 50%;
top: 150%;
transform: translate(-50%, -50%);

При ховере у второго top: 50%, а у первого top: -50%

Адаптивный вариант -https://jsfiddle.net/Svupol/o2wvd30L/46/

У вас два разных обьекта. Вы изменяете один и ожидаете изменение во втором? Я правильно понял?

Эмммм.... Ничего не понял. Разный масштаб ? Настройте его через ctrl +/-

Если известно через какое время обновляются данные, то укажите его вместо нуля.

setInterval( () => {
    // ваш код
}, 0)

Сделайте динамическую подгрузку данных. Пользователь выбрал шрифт -> загрузили его через ajax.
Примерно так ->

const url = 'https://fonts.googleapis.com/css?family=Oswald'

const button = document.querySelector('button')
button.addEventListener('click', event => {
    fetch(url)
        .then(response => response.text())
        .then(font => {
    	    const style = document.createElement('style')
    	    style.innerHTML = font

            document.head.appendChild(style)
    })
})

Потому что пользователю может совсем не нужен конструктор, он пришел почитать только о продукте, а вы грузите ему 6 шрифтов. А если потом надо будет поддерживать не 6 а 50?

Посмотрите на google fonts. Они загружают 20 шрифтов перед открытием страницы, а она грузится за 2 секунды.

Потому что загружают не весь шрифт, а часть. Можете в network посмотреть. Если начать писать в превьюшке то загрузится весь шрифт

Сначала так ->

Потом так ->

function loadFile(url, id, callback) {
    // Код запроса

    request.onload = (event) => {
        callback()
    }
}

Вообще, то что вы написали можно сделать короче, например так (но смотрите сюда)

Jsfiddle

function load(src, selector, callback) {
    fetch(src)
        .then(response => response.text())
        .then(svg => {
            let elements = Array.from(document.querySelectorAll(selector))
            elements.map(n => n.innerHTML = svg)
      
            callback()
        });
}

Забыли указать переменную - https://jsfiddle.net/Svupol/v2b8pcy9/2/

switch(result)

Советую прочитать здесь все, а если именно по вашей теме, то вот

var ul = document.createElement("ul"); ul.classList.add("ul");
var li = document.createElement('li'); li.innerHTML = 'Какой-то текст';

ul.appendChild(li)
document.body.appendChild(ul);

// Или же можно записать так, более удобный способ для добавления множества тегов.
document.body.innerHTML = `
<ul class='ul'>
    <li></li>
</ul>
`

Результат один и тот же. Вот живой пример

Сказали бы какой именно ES вам нужен.

Ну вот:
1. Зачем функция stringIsEmpty(). Ее ведь можно просто заменить на это - response === ''
2. Лучше в sucсess аргумент назвать response.
3. Все переменные которые никогда не буду меняться, объявляются через const, если нет, то let. Оф. документация var использовать вообще не советует.
4. Зачем свойства писать в виде строки? Это не обязательно.
5.

// Это
'data': {
    'firstIdPostPerPage': firstIdPostPerPage,
    'countPostsPerPage': countPostsPerPage
},
// можно заменить на это
data: {
    firstIdPostPerPage,
    countPostsPerPage
},

6. Вместо == используйте всегда строгое равенство - ===. Это нужно для единого code style. Вот хороший Style Guide от AirBnB

Вот код который получился

На винде так:
(npm run dev) && (npm run build)

//...
$(this).attr("href", theHref + "?format=" + $('input').val());

OpenServer, то есть можно использовать локальный сервер.