Как устроен проект «Гадаем на статьях Кода»

Как устроен проект «Гадаем на статьях Кода»

Никакой магии, только JavaScript.

К двухлетию журнала у нас вышел проект «Гадаем на статьях Кода». Это простой проект, вы такое сможете сделать довольно легко. Давайте посмотрим, как он работает.

Логика проекта

У нас страница, с текстом, полем ввода и кнопкой.

В текстовое поле нужно ввести какой-то произвольный текстовый вопрос. На работу скрипта влияет только факт ввода какого-то текста, само содержание никак анализировать не нужно. 

По нажатии на кнопку выполняется функция: 

  1. Берём список всех статей Кода.
  2. Выбираем оттуда случайную статью.
  3. Открываем адрес этой статьи в том же окне.

Чтобы всё работало как надо, нужно ещё немного скриптовой логики: 

  • если в поле для ввода ничего нет, то кнопка не срабатывает;
  • по нажатии Enter в строке ввода тоже открываем новую статью.

Готовим страницу

Сделаем HTML-страницу, где разместим весь пояснительный текст, элементы и заглушку скрипта:

<!DOCTYPE html>
<html lang="ru" >
<head>
  	<meta charset="UTF-8">
	<title>Великая сила рандома</title>
</head>
<body>
	<h2>Гадание на статьях Кода</h2>
	<p>
		Как пользоваться:
	</p>
	<p>1. Вводите свой вопрос.</p>
	<p>2. Нажимаете кнопку «Получить ответ».</p>
	<p>3. Открывается статья с ответом на ваш вопрос.</p>
	<p>Может показаться, что ответ никак не связан с вопросом, но это не так. В статье обязательно будет ответ на ваш вопрос, нужно всего лишь найти нужные строки. </p>
	<p></p>

	<input type="text" id="inputtext" placeholder="Введите свой вопрос">
	<button onclick="nav()" id = "bttn">Получить ответ</button>

	<script type="text/javascript">
		
	</script>
</body>
</html>
Прототип готов, можно писать скрипт
Прототип готов, можно писать скрипт

Пишем скрипт

Первое, что нам нужно, — массив с адресами всех статей Кода кроме новостей. Открываем админку Кода, выгружаем оттуда список нужных статей и делаем из них массив. На вторую половину марта 2021 года у нас вышло 466 статей, поэтому код с массивом спрячем под кат.

var url = [
"https://thecode.media/is-not-defined-jquery/",
"https://thecode.media/arduino-projects-2/",
"https://thecode.media/10-raspberry/",
"https://thecode.media/easy-css/",
"https://thecode.media/to-be-front/",
"https://thecode.media/cryptex/",
"https://thecode.media/ali-coders/",
"https://thecode.media/po-glandy/",
"https://thecode.media/megaexcel/",
"https://thecode.media/chat-bot-generators/",
"https://thecode.media/wifi/",
"https://thecode.media/andri-oxa/",
"https://thecode.media/free-hosting/",
"https://thecode.media/hotwheels/",
"https://thecode.media/do-not-disturb/",
"https://thecode.media/dyno-ai/",
"https://thecode.media/snake-ai/",
"https://thecode.media/leet/",
"https://thecode.media/ninja/",
"https://thecode.media/supergirl/",
"https://thecode.media/vpn/ ",
"https://thecode.media/what-is-wordpress/",
"https://thecode.media/hardware/",
"https://thecode.media/division/",
"https://thecode.media/nuggets/",
"https://thecode.media/binary-notation/",
"https://thecode.media/bootstrap/",
"https://thecode.media/chat-bot/",
"https://thecode.media/myadblock3000/",
"https://thecode.media/trello/",
"https://thecode.media/python-time/",
"https://thecode.media/editor/",
"https://thecode.media/timer/",
"https://thecode.media/intro-bootstrap/",
"https://thecode.media/php-form/",
"https://thecode.media/hr-quiz/",
"https://thecode.media/c-sharp/",
"https://thecode.media/showtime/",
"https://thecode.media/uchtel-rasskazhi/",
"https://thecode.media/sshhhh/",
"https://thecode.media/marry-me-python/",
"https://thecode.media/haters-gonna-code/",
"https://thecode.media/speed-css/",
"https://thecode.media/fired/",
"https://thecode.media/zabuhal/",
"https://thecode.media/est-tri-shkatulki/",
"https://thecode.media/milk-that/",
"https://thecode.media/binary-mouse/",
"https://thecode.media/bowling/",
"https://thecode.media/dealership/",
"https://thecode.media/best-seller/",
"https://thecode.media/hr/",
"https://thecode.media/no-comments/",
"https://thecode.media/drakoni-yajca/",
"https://thecode.media/who-is-who/",
"https://thecode.media/get-a-room/",
"https://thecode.media/alps/",
"https://thecode.media/handshake/",
"https://thecode.media/choose-life/",
"https://thecode.media/high-voltage/",
"https://thecode.media/spy/",
"https://thecode.media/squirrelrrel/",
"https://thecode.media/so-agile/",
"https://thecode.media/wedding/",
"https://thecode.media/supper/",
"https://thecode.media/le-tarakan/",
"https://thecode.media/batareyki-besyat/",
"https://thecode.media/dr_jekyll/",
"https://thecode.media/everybody_lies/",
"https://thecode.media/electrician/",
"https://thecode.media/einstein/",
"https://thecode.media/bugz/",
"https://thecode.media/needforspeed/",
"https://thecode.media/be-smart/",
"https://thecode.media/bot-online/",
"https://thecode.media/microb/",
"https://thecode.media/jquery/",
"https://thecode.media/split-screen/",
"https://thecode.media/calculus/",
"https://thecode.media/big-data-sales/",
"https://thecode.media/ambient/",
"https://thecode.media/fatality/",
"https://thecode.media/biggest-loser/",
"https://thecode.media/wifi/",
"https://thecode.media/nosock/",
"https://thecode.media/variables/",
"https://thecode.media/start_python/",
"https://thecode.media/i-gonna-code/",
"https://thecode.media/sigi-est/",
"https://thecode.media/nes-game/",
"https://thecode.media/live-view/",
"https://thecode.media/remote/",
"https://thecode.media/arduino-code/",
"https://thecode.media/horses/",
"https://thecode.media/runinstein/",
"https://thecode.media/wp-template/",
"https://thecode.media/tilda/",
"https://thecode.media/todo/",
"https://thecode.media/telebot/",
"https://thecode.media/summator-2/",
"https://thecode.media/get-rich-coding/",
"https://thecode.media/content-manager/",
"https://thecode.media/vzrosly-stal/",
"https://thecode.media/py-install/",
"https://thecode.media/quantum/",
"https://thecode.media/dns/",
"https://thecode.media/practicum/",
"https://thecode.media/react/",
"https://thecode.media/1september/",
"https://thecode.media/summator/",
"https://thecode.media/vds/",
"https://thecode.media/made-in-china/",
"https://thecode.media/bar/",
"https://thecode.media/zodiac/",
"https://thecode.media/crc32/",
"https://thecode.media/css-links/",
"https://thecode.media/oop_battle/",
"https://thecode.media/be-combo/",
"https://thecode.media/unity/",
"https://thecode.media/data-science/",
"https://thecode.media/junior/",
"https://thecode.media/qc/",
"https://thecode.media/be-middle/",
"https://thecode.media/senior/",
"https://thecode.media/teamlead/",
"https://thecode.media/frontend/",
"https://thecode.media/lift/",
"https://thecode.media/be-fuzzy/",
"https://thecode.media/best-2020/",
"https://thecode.media/git/",
"https://thecode.media/stt-cloud/",
"https://thecode.media/matrix-pills/",
"https://thecode.media/na-stile/",
"https://thecode.media/no-coffee/",
"https://thecode.media/framelibs/",
"https://thecode.media/children/",
"https://thecode.media/balls-possibly/",
"https://thecode.media/le-meduza/",
"https://thecode.media/electricity/",
"https://thecode.media/tailored-swift/",
"https://thecode.media/objective/",
"https://thecode.media/host/",
"https://thecode.media/go-public/",
"https://thecode.media/how-internet-works-1/",
"https://thecode.media/domain/",
"https://thecode.media/this-is-object/",
"https://thecode.media/ole-ole-ole/",
"https://thecode.media/thousand/",
"https://thecode.media/average/",
"https://thecode.media/stt-python/",
"https://thecode.media/ping-pong/",
"https://thecode.media/pygames/",
"https://thecode.media/odobreno/",
"https://thecode.media/qwerty123/",
"https://thecode.media/neurocorrector/",
"https://thecode.media/neuro-cam/",
"https://thecode.media/10-jquery/",
"https://thecode.media/repeat/",
"https://thecode.media/assembler/",
"https://thecode.media/sublime-one-love/",
"https://thecode.media/zloy/",
"https://thecode.media/mariya-ivanovna/",
"https://thecode.media/ruby/",
"https://thecode.media/electron-password/",
"https://thecode.media/plane/",
"https://thecode.media/glitch/",
"https://thecode.media/security/",
"https://thecode.media/stupid-2019/",
"https://thecode.media/jquery-search/",
"https://thecode.media/pimp-my-pass/",
"https://thecode.media/text-ultimate/",
"https://thecode.media/hurry/",
"https://thecode.media/siri/",
"https://thecode.media/zero-cool/",
"https://thecode.media/small-talk/",
"https://thecode.media/die-hard/",
"https://thecode.media/le-piton/",
"https://thecode.media/hr-code/",
"https://thecode.media/nano-code/",
"https://thecode.media/the_question/",
"https://thecode.media/godlike/",
"https://thecode.media/be-logic/",
"https://thecode.media/snake-js/",
"https://thecode.media/be-mobile/",
"https://thecode.media/baboolya/",
"https://thecode.media/timelag/",
"https://thecode.media/doors/",
"https://thecode.media/phone-code/",
"https://thecode.media/snake-arduino/",
"https://thecode.media/css-intro/",
"https://thecode.media/le-timer/",
"https://thecode.media/oop_battle/",
"https://thecode.media/good-morning/",
"https://thecode.media/study-bot/",
"https://thecode.media/python-bot/",
"https://thecode.media/robot-quiz/",
"https://thecode.media/hacking-quiz/",
"https://thecode.media/lulz-quiz/",
"https://thecode.media/hard-quiz/",
"https://thecode.media/torrent/",
"https://thecode.media/travel/",
"https://thecode.media/le-snob/",
"https://thecode.media/no-spagetti/",
"https://thecode.media/house/",
"https://thecode.media/cryptorush/",
"https://thecode.media/coronarelax/",
"https://thecode.media/pure/",
"https://thecode.media/c-cpp/",
"https://thecode.media/machine-loving/",
"https://thecode.media/orwell/",
"https://thecode.media/darknet/",
"https://thecode.media/ai/",
"https://thecode.media/oop-class/",
"https://thecode.media/cookie/",
"https://thecode.media/malware/",
"https://thecode.media/ftp/",
"https://thecode.media/html/",
"https://thecode.media/java/",
"https://thecode.media/php-haters/",
"https://thecode.media/tor/",
"https://thecode.media/crack-safe/",
"https://thecode.media/epidemic/",
"https://thecode.media/hash-brown/",
"https://thecode.media/java-js/",
"https://thecode.media/js-types/",
"https://thecode.media/losers/",
"https://thecode.media/ssl/",
"https://thecode.media/uncaughtsyntaxerror-unexpected-identifier/",
"https://thecode.media/uncaughtsyntaxerror-unexpected-token/",
"https://thecode.media/uncaughttyperrror-cannot-read-property/",
"https://thecode.media/mobile-dev/",
"https://thecode.media/verevka/",
"https://thecode.media/speed/",
"https://thecode.media/buckwheat/",
"https://thecode.media/distance/",
"https://thecode.media/node-js/",
"https://thecode.media/pascal/",
"https://thecode.media/ill-be-clean/",
"https://thecode.media/to-be-back/",
"https://thecode.media/replaceable/",
"https://thecode.media/code-review/",
"https://thecode.media/gasoline/",
"https://thecode.media/to-be-test/",
"https://thecode.media/scala/",
"https://thecode.media/row-power/",
"https://thecode.media/percent/",
"https://thecode.media/с/",
"https://thecode.media/things/",
"https://thecode.media/prof-newsletter/",
"https://thecode.media/backend/",
"https://thecode.media/immortal-pong/",
"https://thecode.media/blind/",
"https://thecode.media/go-faster/",
"https://thecode.media/cpp/",
"https://thecode.media/uncaught-syntaxerror-unexpected-end-of-input/",
"https://thecode.media/stress-quiz/",
"https://thecode.media/secret-pong/",
"https://thecode.media/override/",
"https://thecode.media/whg/",
"https://thecode.media/profit/",
"https://thecode.media/memas/",
"https://thecode.media/digital-sound/",
"https://thecode.media/api/",
"https://thecode.media/be-math-2/",
"https://thecode.media/backup/",
"https://thecode.media/backup-master/",
"https://thecode.media/glvrd/",
"https://thecode.media/id/",
"https://thecode.media/uncaught-syntaxerror-missing-after-argument-list/",
"https://thecode.media/ex-startup/",
"https://thecode.media/doom-everywhere/",
"https://thecode.media/template-one/",
"https://thecode.media/david-roganov/",
"https://thecode.media/spacex/",
"https://thecode.media/webstorm/",
"https://thecode.media/json/",
"https://thecode.media/treger/",
"https://thecode.media/ya-blitz/",
"https://thecode.media/radius/",
"https://thecode.media/xhr/",
"https://thecode.media/treger2/",
"https://thecode.media/raidemption/",
"https://thecode.media/chief-technical-officer/",
"https://thecode.media/summary/",
"https://thecode.media/ex-wallpaper/",
"https://thecode.media/soap/",
"https://thecode.media/decompose/",
"https://thecode.media/desc/",
"https://thecode.media/sprint/",
"https://thecode.media/bye-or-die/",
"https://thecode.media/who-win/",
"https://thecode.media/vladimir-olokhtonov/",
"https://thecode.media/lossless/",
"https://thecode.media/parse/",
"https://thecode.media/typeerror-is-not-an-abject/",
"https://thecode.media/backup-me/",
"https://thecode.media/stress-test/",
"https://thecode.media/syntaxerror-missing-formal-parameter/",
"https://thecode.media/start-fast/",
"https://thecode.media/halkechev/",
"https://thecode.media/halkechev2/",
"https://thecode.media/le-design/",
"https://thecode.media/syntaxerror-missing-after-property-id/",
"https://thecode.media/attrb-mthd/",
"https://thecode.media/headphones/",
"https://thecode.media/active-noise-cancelling/",
"https://thecode.media/remote-work-quiz/",
"https://thecode.media/garbage/",
"https://thecode.media/ubuntu-linux/",
"https://thecode.media/trie/",
"https://thecode.media/func/",
"https://thecode.media/laravel/",
"https://thecode.media/save-json/",
"https://thecode.media/syntaxerror-missing-after-formal-parameters/",
"https://thecode.media/recursion/",
"https://thecode.media/haskell/",
"https://thecode.media/gen/",
"https://thecode.media/db/",
"https://thecode.media/boosting/",
"https://thecode.media/pavel-sviridov/",
"https://thecode.media/mnogo/",
"https://thecode.media/sokr/",
"https://thecode.media/dbsm/",
"https://thecode.media/pik-balmera/",
"https://thecode.media/kanban/",
"https://thecode.media/check-list/",
"https://thecode.media/text-quiz/",
"https://thecode.media/mysql/",
"https://thecode.media/mysql/",
"https://thecode.media/rust/",
"https://thecode.media/manage-this/",
"https://thecode.media/altshuller/",
"https://thecode.media/interview/",
"https://thecode.media/fotorama/",
"https://thecode.media/tetris/",
"https://thecode.media/ai-tetris/",
"https://thecode.media/scrum/",
"https://thecode.media/speed-two/",
"https://thecode.media/quick-share/",
"https://thecode.media/stack/",
"https://thecode.media/mobile-first/",
"https://thecode.media/nosql/",
"https://thecode.media/narazves/",
"https://thecode.media/oop-class-2/",
"https://thecode.media/design-first/",
"https://thecode.media/arcanoid/",
"https://thecode.media/donut/",
"https://thecode.media/casino/",
"https://thecode.media/heap/",
"https://thecode.media/rust/",
"https://thecode.media/float/",
"https://thecode.media/markdown/",
"https://thecode.media/books/",
"https://thecode.media/daniil-popov/",
"https://thecode.media/android-developer/",
"https://thecode.media/symbols/",
"https://thecode.media/oauth/",
"https://thecode.media/kotlin/",
"https://thecode.media/todo/",
"https://thecode.media/plotly/",
"https://thecode.media/no-digit-code/",
"https://thecode.media/asymmetric/",
"https://thecode.media/qi/",
"https://thecode.media/vernam/",
"https://thecode.media/vernam-js/",
"https://thecode.media/shtykov/",
"https://thecode.media/memory/",
"https://thecode.media/ark/",
"https://thecode.media/7-oshibok-na-sobesedovanii/",
"https://thecode.media/dh/",
"https://thecode.media/typescript/",
"https://thecode.media/stark/",
"https://thecode.media/crypto/",
"https://thecode.media/zapusk-2/",
"https://thecode.media/fingerprint/",
"https://thecode.media/puzzle/",
"https://thecode.media/python-time-2/",
"https://thecode.media/no-chance/",
"https://thecode.media/lossy/",
"https://thecode.media/1wire/",
"https://thecode.media/pasha-flipper/",
"https://thecode.media/perl/",
"https://thecode.media/alexey-vasilev/",
"https://thecode.media/viasat/",
"https://thecode.media/podcast/",
"https://thecode.media/copy-ya-ru/",
"https://thecode.media/mircrosd/",
"https://thecode.media/bash/",
"https://thecode.media/rotation/",
"https://thecode.media/css-grid/",
"https://thecode.media/train/",
"https://thecode.media/grid-2/",
"https://thecode.media/za-proezd/",
"https://thecode.media/grid-3/",
"https://thecode.media/david/",
"https://thecode.media/alien-vs-predator/",
"https://thecode.media/grid-portfolio/",
"https://thecode.media/podcast-lavka/",
"https://thecode.media/it-start-2/",
"https://thecode.media/anastasiya-nikulina/",
"https://thecode.media/linter/",
"https://thecode.media/bomberman/",
"https://thecode.media/5-linters/",
"https://thecode.media/lineynaya-algebra-vektory/",
"https://thecode.media/no-nda/",
"https://thecode.media/code-swap/",
"https://thecode.media/how-to-start/",
"https://thecode.media/referenceerror-invalid-left-hand-side-in-assignment/",
"https://thecode.media/vectors-operations/",
"https://thecode.media/oop-abstract/",
"https://thecode.media/leonov/",
"https://thecode.media/lucky-strike/",
"https://thecode.media/browser/",
"https://thecode.media/2020/",
"https://thecode.media/3d-stars/",
"https://thecode.media/anna-leonova/",
"https://thecode.media/cold-fusion/",
"https://thecode.media/normalize/",
"https://thecode.media/hotkey/",
"https://thecode.media/oven/",
"https://thecode.media/vim/",
"https://thecode.media/draw/",
"https://thecode.media/visual-studio-code/",
"https://thecode.media/tetris-2/",
"https://thecode.media/start-now/",
"https://thecode.media/lapsha-1/",
"https://thecode.media/cubism/",
"https://thecode.media/lapsha-2/",
"https://thecode.media/zerocode/",
"https://thecode.media/cat/",
"https://thecode.media/static/",
"https://thecode.media/komm/",
"https://thecode.media/path-js/",
"https://thecode.media/cloudly/",
"https://thecode.media/haters-gonna-code-2/",
"https://thecode.media/csp/",
"https://thecode.media/mitin-says-no/",
"https://thecode.media/hire-js/",
"https://thecode.media/tableau/",
"https://thecode.media/impossible/",
"https://thecode.media/csp-on/",
"https://thecode.media/maze/",
"https://thecode.media/mix/",
"https://thecode.media/le-beton/",
"https://thecode.media/3d-print/",
"https://thecode.media/5-and-a-half/",
"https://thecode.media/lineynaya-zavisimost-vektorov/",
"https://thecode.media/fast-m1/",
"https://thecode.media/ninja-run/",
"https://thecode.media/matrix-101/",
"https://thecode.media/arm-x86/",
"https://thecode.media/piano-js/",
"https://thecode.media/10-swift/",
"https://thecode.media/travel-plane/",
"https://thecode.media/extention/",
"https://thecode.media/obratnaya-matritsa/",
"https://thecode.media/svg/",
"https://thecode.media/freelance/",
"https://thecode.media/brat-2/",
"https://thecode.media/angular/",
"https://thecode.media/rgb/",
"https://thecode.media/10-go/",
"https://thecode.media/coffee/",

];

Сразу на старте делаем кнопку неактивной:

// сразу делаем кнопку неактивной
document.getElementById(«bttn»).disabled = true;

Это нужно для того, чтобы посетитель не смог получить ответ, если он ничего не ввёл в поле для вопроса.Напишем главную функцию nav(), которая отправит нас на случайный адрес. Именно эту функцию мы прописали в кнопке в HTML-коде:

// функция возвращает случайное число в заданном диапазоне
function randz(min, max) { 
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

// переходим на случайный адрес из массива с адресами
function nav() {
	window.location.href = url[randz(0,url.length)];
}

Теперь обработаем нажатия в поле ввода. Смысл такой: мы при каждом нажатии проверяем, есть там что-то или нет. Если пусто — делаем кнопку неактивной. Если ввёдён хоть один символ — разрешаем нажать на кнопку.

// отслеживаем нажатия в поле для ввода
inputtext.oninput = function() {
	
	// получаем количество введённых символов
	var inp = document.getElementById("inputtext").value;
	// если поле не пустое
	if (inp != 0) {
		// делаем кнопку неактивной
		document.getElementById("bttn").disabled = false;
		// в противном случае делаем кнопку активной
	} else {
		document.getElementById('bttn').disabled = true;
		}
}

Последнее, что нам осталось сделать, — научить реагировать поле ввода на нажатую кнопку Enter. Логика тут будет такая же, как и с простыми нажатиями — если в поле ввода что-то есть, то отправляем на новую статью. Правильнее было бы, конечно, объединить эти две функции в одну, но для наглядности мы разнесли их на две разных.

// добавляем реакцию на нажатие Enter в поле ввода
const node = document.getElementById("inputtext");
node.addEventListener("keyup", ({key}) => {
		// если нажат Enter
    if (key === "Enter") {
    	// проверяем, есть что-то в поле ввода или нет
    	var inp = document.getElementById("inputtext").value;
    	// если поле не пустое
    	if (inp != 0) {
    		// переходим на случайный адрес
        nav();
       }
    } 
})

<!DOCTYPE html>
<html lang="ru" >
<head>
  	<meta charset="UTF-8">
	<title>Великая сила рандома</title>
</head>
<body>
	<h2>Гадание на статьях Кода</h2>
	<p>
		Как пользоваться:
	</p>
	<p>1. Вводите свой вопрос.</p>
	<p>2. Нажимаете кнопку «Получить ответ».</p>
	<p>3. Открывается статья с ответом на ваш вопрос.</p>
	<p>Может показаться, что ответ никак не связан с вопросом, но это не так. В статье обязательно будет ответ на ваш вопрос, нужно всего лишь найти нужные строки. </p>
	<p></p>

	<input type="text" id="inputtext" placeholder="Введите свой вопрос">
	<button onclick="nav()" id = "bttn">Получить ответ</button>

	<script type="text/javascript">
		var url = [
		"https://thecode.media/is-not-defined-jquery/",
		"https://thecode.media/arduino-projects-2/",
		"https://thecode.media/10-raspberry/",
		"https://thecode.media/easy-css/",
		"https://thecode.media/to-be-front/",
		"https://thecode.media/cryptex/",
		"https://thecode.media/ali-coders/",
		"https://thecode.media/po-glandy/",
		"https://thecode.media/megaexcel/",
		"https://thecode.media/chat-bot-generators/",
		"https://thecode.media/wifi/",
		"https://thecode.media/andri-oxa/",
		"https://thecode.media/free-hosting/",
		"https://thecode.media/hotwheels/",
		"https://thecode.media/do-not-disturb/",
		"https://thecode.media/dyno-ai/",
		"https://thecode.media/snake-ai/",
		"https://thecode.media/leet/",
		"https://thecode.media/ninja/",
		"https://thecode.media/supergirl/",
		"https://thecode.media/vpn/ ",
		"https://thecode.media/what-is-wordpress/",
		"https://thecode.media/hardware/",
		"https://thecode.media/division/",
		"https://thecode.media/nuggets/",
		"https://thecode.media/binary-notation/",
		"https://thecode.media/bootstrap/",
		"https://thecode.media/chat-bot/",
		"https://thecode.media/myadblock3000/",
		"https://thecode.media/trello/",
		"https://thecode.media/python-time/",
		"https://thecode.media/editor/",
		"https://thecode.media/timer/",
		"https://thecode.media/intro-bootstrap/",
		"https://thecode.media/php-form/",
		"https://thecode.media/hr-quiz/",
		"https://thecode.media/c-sharp/",
		"https://thecode.media/showtime/",
		"https://thecode.media/uchtel-rasskazhi/",
		"https://thecode.media/sshhhh/",
		"https://thecode.media/marry-me-python/",
		"https://thecode.media/haters-gonna-code/",
		"https://thecode.media/speed-css/",
		"https://thecode.media/fired/",
		"https://thecode.media/zabuhal/",
		"https://thecode.media/est-tri-shkatulki/",
		"https://thecode.media/milk-that/",
		"https://thecode.media/binary-mouse/",
		"https://thecode.media/bowling/",
		"https://thecode.media/dealership/",
		"https://thecode.media/best-seller/",
		"https://thecode.media/hr/",
		"https://thecode.media/no-comments/",
		"https://thecode.media/drakoni-yajca/",
		"https://thecode.media/who-is-who/",
		"https://thecode.media/get-a-room/",
		"https://thecode.media/alps/",
		"https://thecode.media/handshake/",
		"https://thecode.media/choose-life/",
		"https://thecode.media/high-voltage/",
		"https://thecode.media/spy/",
		"https://thecode.media/squirrelrrel/",
		"https://thecode.media/so-agile/",
		"https://thecode.media/wedding/",
		"https://thecode.media/supper/",
		"https://thecode.media/le-tarakan/",
		"https://thecode.media/batareyki-besyat/",
		"https://thecode.media/dr_jekyll/",
		"https://thecode.media/everybody_lies/",
		"https://thecode.media/electrician/",
		"https://thecode.media/einstein/",
		"https://thecode.media/bugz/",
		"https://thecode.media/needforspeed/",
		"https://thecode.media/be-smart/",
		"https://thecode.media/bot-online/",
		"https://thecode.media/microb/",
		"https://thecode.media/jquery/",
		"https://thecode.media/split-screen/",
		"https://thecode.media/calculus/",
		"https://thecode.media/big-data-sales/",
		"https://thecode.media/ambient/",
		"https://thecode.media/fatality/",
		"https://thecode.media/biggest-loser/",
		"https://thecode.media/wifi/",
		"https://thecode.media/nosock/",
		"https://thecode.media/variables/",
		"https://thecode.media/start_python/",
		"https://thecode.media/i-gonna-code/",
		"https://thecode.media/sigi-est/",
		"https://thecode.media/nes-game/",
		"https://thecode.media/live-view/",
		"https://thecode.media/remote/",
		"https://thecode.media/arduino-code/",
		"https://thecode.media/horses/",
		"https://thecode.media/runinstein/",
		"https://thecode.media/wp-template/",
		"https://thecode.media/tilda/",
		"https://thecode.media/todo/",
		"https://thecode.media/telebot/",
		"https://thecode.media/summator-2/",
		"https://thecode.media/get-rich-coding/",
		"https://thecode.media/content-manager/",
		"https://thecode.media/vzrosly-stal/",
		"https://thecode.media/py-install/",
		"https://thecode.media/quantum/",
		"https://thecode.media/dns/",
		"https://thecode.media/practicum/",
		"https://thecode.media/react/",
		"https://thecode.media/1september/",
		"https://thecode.media/summator/",
		"https://thecode.media/vds/",
		"https://thecode.media/made-in-china/",
		"https://thecode.media/bar/",
		"https://thecode.media/zodiac/",
		"https://thecode.media/crc32/",
		"https://thecode.media/css-links/",
		"https://thecode.media/oop_battle/",
		"https://thecode.media/be-combo/",
		"https://thecode.media/unity/",
		"https://thecode.media/data-science/",
		"https://thecode.media/junior/",
		"https://thecode.media/qc/",
		"https://thecode.media/be-middle/",
		"https://thecode.media/senior/",
		"https://thecode.media/teamlead/",
		"https://thecode.media/frontend/",
		"https://thecode.media/lift/",
		"https://thecode.media/be-fuzzy/",
		"https://thecode.media/best-2020/",
		"https://thecode.media/git/",
		"https://thecode.media/stt-cloud/",
		"https://thecode.media/matrix-pills/",
		"https://thecode.media/na-stile/",
		"https://thecode.media/no-coffee/",
		"https://thecode.media/framelibs/",
		"https://thecode.media/children/",
		"https://thecode.media/balls-possibly/",
		"https://thecode.media/le-meduza/",
		"https://thecode.media/electricity/",
		"https://thecode.media/tailored-swift/",
		"https://thecode.media/objective/",
		"https://thecode.media/host/",
		"https://thecode.media/go-public/",
		"https://thecode.media/how-internet-works-1/",
		"https://thecode.media/domain/",
		"https://thecode.media/this-is-object/",
		"https://thecode.media/ole-ole-ole/",
		"https://thecode.media/thousand/",
		"https://thecode.media/average/",
		"https://thecode.media/stt-python/",
		"https://thecode.media/ping-pong/",
		"https://thecode.media/pygames/",
		"https://thecode.media/odobreno/",
		"https://thecode.media/qwerty123/",
		"https://thecode.media/neurocorrector/",
		"https://thecode.media/neuro-cam/",
		"https://thecode.media/10-jquery/",
		"https://thecode.media/repeat/",
		"https://thecode.media/assembler/",
		"https://thecode.media/sublime-one-love/",
		"https://thecode.media/zloy/",
		"https://thecode.media/mariya-ivanovna/",
		"https://thecode.media/ruby/",
		"https://thecode.media/electron-password/",
		"https://thecode.media/plane/",
		"https://thecode.media/glitch/",
		"https://thecode.media/security/",
		"https://thecode.media/stupid-2019/",
		"https://thecode.media/jquery-search/",
		"https://thecode.media/pimp-my-pass/",
		"https://thecode.media/text-ultimate/",
		"https://thecode.media/hurry/",
		"https://thecode.media/siri/",
		"https://thecode.media/zero-cool/",
		"https://thecode.media/small-talk/",
		"https://thecode.media/die-hard/",
		"https://thecode.media/le-piton/",
		"https://thecode.media/hr-code/",
		"https://thecode.media/nano-code/",
		"https://thecode.media/the_question/",
		"https://thecode.media/godlike/",
		"https://thecode.media/be-logic/",
		"https://thecode.media/snake-js/",
		"https://thecode.media/be-mobile/",
		"https://thecode.media/baboolya/",
		"https://thecode.media/timelag/",
		"https://thecode.media/doors/",
		"https://thecode.media/phone-code/",
		"https://thecode.media/snake-arduino/",
		"https://thecode.media/css-intro/",
		"https://thecode.media/le-timer/",
		"https://thecode.media/oop_battle/",
		"https://thecode.media/good-morning/",
		"https://thecode.media/study-bot/",
		"https://thecode.media/python-bot/",
		"https://thecode.media/robot-quiz/",
		"https://thecode.media/hacking-quiz/",
		"https://thecode.media/lulz-quiz/",
		"https://thecode.media/hard-quiz/",
		"https://thecode.media/torrent/",
		"https://thecode.media/travel/",
		"https://thecode.media/le-snob/",
		"https://thecode.media/no-spagetti/",
		"https://thecode.media/house/",
		"https://thecode.media/cryptorush/",
		"https://thecode.media/coronarelax/",
		"https://thecode.media/pure/",
		"https://thecode.media/c-cpp/",
		"https://thecode.media/machine-loving/",
		"https://thecode.media/orwell/",
		"https://thecode.media/darknet/",
		"https://thecode.media/ai/",
		"https://thecode.media/oop-class/",
		"https://thecode.media/cookie/",
		"https://thecode.media/malware/",
		"https://thecode.media/ftp/",
		"https://thecode.media/html/",
		"https://thecode.media/java/",
		"https://thecode.media/php-haters/",
		"https://thecode.media/tor/",
		"https://thecode.media/crack-safe/",
		"https://thecode.media/epidemic/",
		"https://thecode.media/hash-brown/",
		"https://thecode.media/java-js/",
		"https://thecode.media/js-types/",
		"https://thecode.media/losers/",
		"https://thecode.media/ssl/",
		"https://thecode.media/uncaughtsyntaxerror-unexpected-identifier/",
		"https://thecode.media/uncaughtsyntaxerror-unexpected-token/",
		"https://thecode.media/uncaughttyperrror-cannot-read-property/",
		"https://thecode.media/mobile-dev/",
		"https://thecode.media/verevka/",
		"https://thecode.media/speed/",
		"https://thecode.media/buckwheat/",
		"https://thecode.media/distance/",
		"https://thecode.media/node-js/",
		"https://thecode.media/pascal/",
		"https://thecode.media/ill-be-clean/",
		"https://thecode.media/to-be-back/",
		"https://thecode.media/replaceable/",
		"https://thecode.media/code-review/",
		"https://thecode.media/gasoline/",
		"https://thecode.media/to-be-test/",
		"https://thecode.media/scala/",
		"https://thecode.media/row-power/",
		"https://thecode.media/percent/",
		"https://thecode.media/с/",
		"https://thecode.media/things/",
		"https://thecode.media/prof-newsletter/",
		"https://thecode.media/backend/",
		"https://thecode.media/immortal-pong/",
		"https://thecode.media/blind/",
		"https://thecode.media/go-faster/",
		"https://thecode.media/cpp/",
		"https://thecode.media/uncaught-syntaxerror-unexpected-end-of-input/",
		"https://thecode.media/stress-quiz/",
		"https://thecode.media/secret-pong/",
		"https://thecode.media/override/",
		"https://thecode.media/whg/",
		"https://thecode.media/profit/",
		"https://thecode.media/memas/",
		"https://thecode.media/digital-sound/",
		"https://thecode.media/api/",
		"https://thecode.media/be-math-2/",
		"https://thecode.media/backup/",
		"https://thecode.media/backup-master/",
		"https://thecode.media/glvrd/",
		"https://thecode.media/id/",
		"https://thecode.media/uncaught-syntaxerror-missing-after-argument-list/",
		"https://thecode.media/ex-startup/",
		"https://thecode.media/doom-everywhere/",
		"https://thecode.media/template-one/",
		"https://thecode.media/david-roganov/",
		"https://thecode.media/spacex/",
		"https://thecode.media/webstorm/",
		"https://thecode.media/json/",
		"https://thecode.media/treger/",
		"https://thecode.media/ya-blitz/",
		"https://thecode.media/radius/",
		"https://thecode.media/xhr/",
		"https://thecode.media/treger2/",
		"https://thecode.media/raidemption/",
		"https://thecode.media/chief-technical-officer/",
		"https://thecode.media/summary/",
		"https://thecode.media/ex-wallpaper/",
		"https://thecode.media/soap/",
		"https://thecode.media/decompose/",
		"https://thecode.media/desc/",
		"https://thecode.media/sprint/",
		"https://thecode.media/bye-or-die/",
		"https://thecode.media/who-win/",
		"https://thecode.media/vladimir-olokhtonov/",
		"https://thecode.media/lossless/",
		"https://thecode.media/parse/",
		"https://thecode.media/typeerror-is-not-an-abject/",
		"https://thecode.media/backup-me/",
		"https://thecode.media/stress-test/",
		"https://thecode.media/syntaxerror-missing-formal-parameter/",
		"https://thecode.media/start-fast/",
		"https://thecode.media/halkechev/",
		"https://thecode.media/halkechev2/",
		"https://thecode.media/le-design/",
		"https://thecode.media/syntaxerror-missing-after-property-id/",
		"https://thecode.media/attrb-mthd/",
		"https://thecode.media/headphones/",
		"https://thecode.media/active-noise-cancelling/",
		"https://thecode.media/remote-work-quiz/",
		"https://thecode.media/garbage/",
		"https://thecode.media/ubuntu-linux/",
		"https://thecode.media/trie/",
		"https://thecode.media/func/",
		"https://thecode.media/laravel/",
		"https://thecode.media/save-json/",
		"https://thecode.media/syntaxerror-missing-after-formal-parameters/",
		"https://thecode.media/recursion/",
		"https://thecode.media/haskell/",
		"https://thecode.media/gen/",
		"https://thecode.media/db/",
		"https://thecode.media/boosting/",
		"https://thecode.media/pavel-sviridov/",
		"https://thecode.media/mnogo/",
		"https://thecode.media/sokr/",
		"https://thecode.media/dbsm/",
		"https://thecode.media/pik-balmera/",
		"https://thecode.media/kanban/",
		"https://thecode.media/check-list/",
		"https://thecode.media/text-quiz/",
		"https://thecode.media/mysql/",
		"https://thecode.media/mysql/",
		"https://thecode.media/rust/",
		"https://thecode.media/manage-this/",
		"https://thecode.media/altshuller/",
		"https://thecode.media/interview/",
		"https://thecode.media/fotorama/",
		"https://thecode.media/tetris/",
		"https://thecode.media/ai-tetris/",
		"https://thecode.media/scrum/",
		"https://thecode.media/speed-two/",
		"https://thecode.media/quick-share/",
		"https://thecode.media/stack/",
		"https://thecode.media/mobile-first/",
		"https://thecode.media/nosql/",
		"https://thecode.media/narazves/",
		"https://thecode.media/oop-class-2/",
		"https://thecode.media/design-first/",
		"https://thecode.media/arcanoid/",
		"https://thecode.media/donut/",
		"https://thecode.media/casino/",
		"https://thecode.media/heap/",
		"https://thecode.media/rust/",
		"https://thecode.media/float/",
		"https://thecode.media/markdown/",
		"https://thecode.media/books/",
		"https://thecode.media/daniil-popov/",
		"https://thecode.media/android-developer/",
		"https://thecode.media/symbols/",
		"https://thecode.media/oauth/",
		"https://thecode.media/kotlin/",
		"https://thecode.media/todo/",
		"https://thecode.media/plotly/",
		"https://thecode.media/no-digit-code/",
		"https://thecode.media/asymmetric/",
		"https://thecode.media/qi/",
		"https://thecode.media/vernam/",
		"https://thecode.media/vernam-js/",
		"https://thecode.media/shtykov/",
		"https://thecode.media/memory/",
		"https://thecode.media/ark/",
		"https://thecode.media/7-oshibok-na-sobesedovanii/",
		"https://thecode.media/dh/",
		"https://thecode.media/typescript/",
		"https://thecode.media/stark/",
		"https://thecode.media/crypto/",
		"https://thecode.media/zapusk-2/",
		"https://thecode.media/fingerprint/",
		"https://thecode.media/puzzle/",
		"https://thecode.media/python-time-2/",
		"https://thecode.media/no-chance/",
		"https://thecode.media/lossy/",
		"https://thecode.media/1wire/",
		"https://thecode.media/pasha-flipper/",
		"https://thecode.media/perl/",
		"https://thecode.media/alexey-vasilev/",
		"https://thecode.media/viasat/",
		"https://thecode.media/podcast/",
		"https://thecode.media/copy-ya-ru/",
		"https://thecode.media/mircrosd/",
		"https://thecode.media/bash/",
		"https://thecode.media/rotation/",
		"https://thecode.media/css-grid/",
		"https://thecode.media/train/",
		"https://thecode.media/grid-2/",
		"https://thecode.media/za-proezd/",
		"https://thecode.media/grid-3/",
		"https://thecode.media/david/",
		"https://thecode.media/alien-vs-predator/",
		"https://thecode.media/grid-portfolio/",
		"https://thecode.media/podcast-lavka/",
		"https://thecode.media/it-start-2/",
		"https://thecode.media/anastasiya-nikulina/",
		"https://thecode.media/linter/",
		"https://thecode.media/bomberman/",
		"https://thecode.media/5-linters/",
		"https://thecode.media/lineynaya-algebra-vektory/",
		"https://thecode.media/no-nda/",
		"https://thecode.media/code-swap/",
		"https://thecode.media/how-to-start/",
		"https://thecode.media/referenceerror-invalid-left-hand-side-in-assignment/",
		"https://thecode.media/vectors-operations/",
		"https://thecode.media/oop-abstract/",
		"https://thecode.media/leonov/",
		"https://thecode.media/lucky-strike/",
		"https://thecode.media/browser/",
		"https://thecode.media/2020/",
		"https://thecode.media/3d-stars/",
		"https://thecode.media/anna-leonova/",
		"https://thecode.media/cold-fusion/",
		"https://thecode.media/normalize/",
		"https://thecode.media/hotkey/",
		"https://thecode.media/oven/",
		"https://thecode.media/vim/",
		"https://thecode.media/draw/",
		"https://thecode.media/visual-studio-code/",
		"https://thecode.media/tetris-2/",
		"https://thecode.media/start-now/",
		"https://thecode.media/lapsha-1/",
		"https://thecode.media/cubism/",
		"https://thecode.media/lapsha-2/",
		"https://thecode.media/zerocode/",
		"https://thecode.media/cat/",
		"https://thecode.media/static/",
		"https://thecode.media/komm/",
		"https://thecode.media/path-js/",
		"https://thecode.media/cloudly/",
		"https://thecode.media/haters-gonna-code-2/",
		"https://thecode.media/csp/",
		"https://thecode.media/mitin-says-no/",
		"https://thecode.media/hire-js/",
		"https://thecode.media/tableau/",
		"https://thecode.media/impossible/",
		"https://thecode.media/csp-on/",
		"https://thecode.media/maze/",
		"https://thecode.media/mix/",
		"https://thecode.media/le-beton/",
		"https://thecode.media/3d-print/",
		"https://thecode.media/5-and-a-half/",
		"https://thecode.media/lineynaya-zavisimost-vektorov/",
		"https://thecode.media/fast-m1/",
		"https://thecode.media/ninja-run/",
		"https://thecode.media/matrix-101/",
		"https://thecode.media/arm-x86/",
		"https://thecode.media/piano-js/",
		"https://thecode.media/10-swift/",
		"https://thecode.media/travel-plane/",
		"https://thecode.media/extention/",
		"https://thecode.media/obratnaya-matritsa/",
		"https://thecode.media/svg/",
		"https://thecode.media/freelance/",
		"https://thecode.media/brat-2/",
		"https://thecode.media/angular/",
		"https://thecode.media/rgb/",
		"https://thecode.media/10-go/",
		"https://thecode.media/coffee/",

		];

		// сразу делаем кнопку неактивной
		document.getElementById("bttn").disabled = true;

		// функция возвращает случайное число в заданном диапазоне
		function randz(min, max) { 
			return Math.floor(Math.random() * (max - min + 1)) + min;
		}

		// переходим на случайный адрес из массива с адресами
		function nav() {
			window.location.href = url[randz(0,url.length)];
		}

		// отслеживаем нажатия в поле для ввода
		inputtext.oninput = function(e) {
			
			// получаем количество введённых символов
			var inp = document.getElementById("inputtext").value;
			// если поле не пустое
			if (inp != 0) {
				// делаем кнопку неактивной
				document.getElementById("bttn").disabled = false;
				// в противном случае делаем кнопку активной
			} else {
				document.getElementById('bttn').disabled = true;
				}
		}

		// добавляем реакцию на нажатие Enter в поле ввода
		const node = document.getElementById("inputtext");
		node.addEventListener("keyup", ({key}) => {
				// если нажат Enter
		    if (key === "Enter") {
		    	// проверяем, есть что-то в поле ввода или нет
		    	var inp = document.getElementById("inputtext").value;
		    	// если поле не пустое
		    	if (inp != 0) {
		    		// переходим на случайный адрес
		        nav();
		       }
		    } 
		})

	</script>
</body>
</html>

Стили

Мы специально не добавляли в этот проект стили, потому что они зависят от нашего текущего дизайна. Поэтому стилей не будет 🙂

Что дальше

  1. Заходите на страницу проекта.
  2. Пишете свой вопрос.
  3. Получаете ответ.
  4. Размышляете о сложности бытия.

Текст и код:

Михаил Полянин

Редактура:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Мария Дронова

Помог:

Ильгиз Мавлютов

Соцсети:

Олег Вешкурцев

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства и компенсация, если вы пойдёте работать в «Яндекс».
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Как подключить фотогалерею к сайту
Как подключить фотогалерею к сайту

Рецепт на 6 минут.

Делаем форму обратной связи на сайте

Говорят, что если программист может написать форму обратной связи, он может написать всё.

Чат-бот
Делаем своего первого чат-бота

Суперпростой способ создать бота, не зная программирования.

Как утащить что угодно с любого сайта
Как утащить что угодно с любого сайта

Например, заголовки или содержимое статьи.

Делаем своё расширение для браузера за 10 минут
Делаем своё расширение для браузера за 10 минут

Cнова запускаем снежинки.

Как запустить стартап и не разориться
Как запустить стартап и не разориться

Всё дело в правильных расчётах на старте.

Запускаем нейросеть на домашнем компьютере
Запускаем нейросеть на домашнем компьютере

Пошаговое руководство для начинающих

Успокаивающие звуки на любой странице
Успокаивающие звуки на любой странице

Тревожное время требует кода на JavaScript.

Uncaught SyntaxError: Unexpected identifier — что это означает?
Uncaught SyntaxError: Unexpected identifier — что это означает?

Вредная ошибка, которую легко исправить.

Красивые ссылки на вашем сайте

Меняем стандартное подчёркивание на дизайнерское.

Что означает ошибка TypeError: 'str' object does not support item assignment
Что означает ошибка TypeError: 'str' object does not support item assignment

Ошибка из другого языка

Пинг-понг против компьютера на JavaScript

Лёгкая версия

Автоматизируем новости
Автоматизируем новости

И другие нелинейные процессы принятия решений.

easy