hippie/source/screens/demo/examples/start.liquid

---
title: Start
tags:
- demoExample
---
{% assign pageId = page.fileSlug -%}
{% assign bodyClass = 'body_start' -%}
{% layout 'hippie/simple.liquid' %}

{% block body %}
<main>
	<form id="www-search" class="flex inline" action="https://duckduckgo.com/">
		<input id="qrySearch" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
		<input class="button_io" value="Suchen" type="submit"/>
	</form>
	<div class="blocks">
		<article>
			<section>
				<h2><a href="">Name</a></h2>
				<ul>
					<li>
						<a href=""><img src="/art/bullet.gif" width="16" height="16"/>Link</a>
					</li>
				</ul>
			</section>
		</article>
		<article>
			<section>
				<h2><a href="">Name</a></h2>
			</section>
		</article>
	</div>
</main>
{% endblock %}

{% block script %}
<script>
	// Page script
	// NOTE: https://duckduckgo.com/duckduckgo-help-pages/settings/params
	const defaultOptions = {
		kl: 'de-de',
		kp: '-2',
		kz: '-1',
		// kae: 't',
		k1: '-1'
	};
	let options = Object.assign({}, defaultOptions);

	function setOptions(jsonOptions) {
		if (!jsonOptions || typeof jsonOptions !== 'object') return;

		options = Object.assign({}, options, jsonOptions);
	}

	function buildSearchUrl(query) {
		const base = 'https://duckduckgo.com/';
		const params = new URLSearchParams({q: query});

		for (const [k, v] of Object.entries(options)) {
			if (v === undefined || v === null || v === '') continue;

			params.set(k, String(v));
		}

		return base + '?' + params.toString();
	}

	document.getElementById('www-search').addEventListener('submit', function (e) {
		e.preventDefault();
		const query = document.getElementById('qrySearch').value.trim();

		if (!query) return;

		const url = buildSearchUrl(query);

		window.open(url, '_blank', 'noopener');
	});

	// Example of setting options programmatically:
	// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
</script>
{% endblock %}