1
\$\begingroup\$

A proof of concept app to run the same query on both Google and Bing. For instance, if one of the engines takes too long on a slow connection or the results are not satisfactory, the same query can be run on the other engine with single button click.

The whole app is small single file with < 200 loc. Can be saved and loaded locally with the file:// protocol in the browser.

Flexbox is used to display all labels, forms and buttons with equal gutters inbetween. Perhaps can be improved.

Can be tested here: https://dmitriz.github.io/search-app/

I am interested in any advice on improving the code and/or layout or any other suggestions.

init();
function init () {
  window.engine = 'bing';
  window.engine_display = document.getElementById('engine');
  window.search_form = document.getElementById('search_form');
  window.results_elm = document.getElementById('results');
  window.notice_elm = document.getElementById('notice');

  set_engine(window.engine);
}  
function set_engine (engine) {
  console.log('Change search engine to ', engine);

  window.engine = engine;
  window.engine_display.textContent = capitalize(engine);
  window.search_form.action = engine_url(engine);

  set_notice(window.notice_elm, engine);        
}
function set_notice (element, engine) {
  element.textContent = 'bing' === engine
    ? 'Search results will appear here...'
    : 'Search results will appear in another tab as Google refuses to run in a frame...'
}
function search () {
  var isGoogle = 'google' === window.engine;

  window.notice_elm.style.display  = isGoogle ? 'block'  : 'none';
  window.results_elm.style.display = isGoogle ? 'none'   : 'block';
  window.search_form.target        = isGoogle ? '_blank' : 'iframe';

  return window.search_form.submit();					
}
function capitalize (string) {
  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
function engine_url (engine) {
  return 'https://www.' + engine + '.com/search';
}
body, html, main {
  width: 100%; 
  height: 100%; 
  padding: 0; 
  margin: 0
}
html {
	height: 100%;
}
iframe {
	width: 100%;
	border: none;
	border-top: solid thin;
	border-top-style: groove;
}
input, button {
  font-size: .6em;
}
.margin-left, .items-ml > * ~ * {
	margin-left: 1em;
}
.margin-left-0 {
	margin-left: .2em;
}
.margin-top, .items-mt > * + * {
	margin-top: .6em;
}
.margin-adjust {
	margin-top: -.2em;
	/*display: block;*/
}
.padding-box {
	padding: .5em;
}
.flexbox {
	display: flex;
}
.in-block {
}
.column {
	flex-flow: column;
}
.flex-item-grow {
	flex: 1;
}
.ai-stretch {
	align-items: stretch;
}
.bold {
	font-weight: bold;
}
<main class="flexbox column ai-stretch">

<section class="padding-box items-mt">

	<form 
		id="search_form"
		class="flexbox items-ml" 
		onsubmit="search()" 
	>
		<label for="q">
			Web Search:
		</label>
		<input 
			class="flex-item-grow"
			type="search" 
			name="q" 
			placeholder="Type some text here" 
			autofocus="" 
		>	
	</form>

	<section class="flexbox ai-stretch items-ml">
		<div class="flexbox">
			<button 
				onclick="set_engine('google'); search()"
			>
				Google!
			</button>
		</div>

		<div class="flexbox">
			<button 
				onclick="set_engine('bing'); search()"
			>
				Bing!
			</button>
		</div>

		<span class="flexbox">
			<span class="mmargin-adjust">
				Default: 
			</span>
			<span id="engine" class="bold margin-left-0 mmargin-adjust">
				Google
			</span>
		</span>
	</section>
	
	<div id="notice" class=""></div>

</section>

<iframe
	id="results"
	name="iframe"
	class="flex-item-grow"
	style="display: none"
>
  There would be Bing Search here but your browser does not support inline frames.
</iframe>

</main>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.