FilipChalupa/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Nákupní seznam</title>
		<script src="script.js" defer></script>
	</head>
	<body>
		<div id="app"></div>
		<label>
			Co koupit:
			<input id="co-koupit" />
		</label>
		<label>
			Kolik:
			<input id="kolik" />
		</label>
		<button id="pridat">Přidat do seznamu</button>
	</body>
</html>

## script.js
// http://nove.kodim.cz/czechitas/daweb/pokrocily-js/volani-api/#aktualizace-obsahu-stranky

const Polozka = (props) => {
	return `<li>${props.jmeno} - ${props.pocet}</li>`
}
const celeBody = document.querySelector('#app')

const data = [
	{ jmeno: 'mrkev', pocet: '3ks' },
	{ jmeno: 'paprika', pocet: '2ks' },
	{ jmeno: 'cibule', pocet: '2ks' },
	{ jmeno: 'čínské zelí', pocet: '1ks' },
	{ jmeno: 'arašídy', pocet: '250g' },
	{ jmeno: 'sojová omáčka', pocet: '1ks' },
]

const ListPolozek = (props) => {
	let vysledek = `Nakupuje: ${props.kdoNakupuje} <ul>`

	for (let i = 0; i < props.nakup.length; i++) {
		vysledek += Polozka(props.nakup[i])
	}

	return vysledek + '</ul>'
}

celeBody.innerHTML = ListPolozek({
	nakup: data,
	kdoNakupuje: 'Filip',
})

const coKoupit = document.querySelector('#co-koupit')
const kolik = document.querySelector('#kolik')
const pridat = document.querySelector('#pridat')

pridat.addEventListener('click', () => {
	data.push({
		jmeno: coKoupit.value,
		pocet: kolik.value,
	})
	//coKoupit.value = ''
	//kolik.value = ''

	celeBody.innerHTML = ListPolozek({
		nakup: data,
		kdoNakupuje: 'Filip',
	})
})
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Nákupní seznam</title>
	<script src="script.js" defer></script>
	</head>
	<body>
	<div id="app"></div>
	<label>
	Co koupit:
	<input id="co-koupit" />
	</label>
	<label>
	Kolik:
	<input id="kolik" />
	</label>
	<button id="pridat">Přidat do seznamu</button>
	</body>
	</html>
	// http://nove.kodim.cz/czechitas/daweb/pokrocily-js/volani-api/#aktualizace-obsahu-stranky

	const Polozka = (props) => {
	return `<li>${props.jmeno} - ${props.pocet}</li>`
	}
	const celeBody = document.querySelector('#app')

	const data = [
	{ jmeno: 'mrkev', pocet: '3ks' },
	{ jmeno: 'paprika', pocet: '2ks' },
	{ jmeno: 'cibule', pocet: '2ks' },
	{ jmeno: 'čínské zelí', pocet: '1ks' },
	{ jmeno: 'arašídy', pocet: '250g' },
	{ jmeno: 'sojová omáčka', pocet: '1ks' },
	]

	const ListPolozek = (props) => {
	let vysledek = `Nakupuje: ${props.kdoNakupuje} <ul>`

	for (let i = 0; i < props.nakup.length; i++) {
	vysledek += Polozka(props.nakup[i])
	}

	return vysledek + '</ul>'
	}

	celeBody.innerHTML = ListPolozek({
	nakup: data,
	kdoNakupuje: 'Filip',
	})

	const coKoupit = document.querySelector('#co-koupit')
	const kolik = document.querySelector('#kolik')
	const pridat = document.querySelector('#pridat')

	pridat.addEventListener('click', () => {
	data.push({
	jmeno: coKoupit.value,
	pocet: kolik.value,
	})
	//coKoupit.value = ''
	//kolik.value = ''

	celeBody.innerHTML = ListPolozek({
	nakup: data,
	kdoNakupuje: 'Filip',
	})
	})