Generate random quote ES6
27.8.2016
Dnes si ukážeme jak generovat náhodné citáty pomocí JS, je to velmi jednoduché:
<div class="quote">
<span class="saying"></span><br><span class="author"></span></div>
<button>New Quote</button>
<span class="saying"></span><br><span class="author"></span></div>
<button>New Quote</button>
1) Začátek funkce generate()
generate();
function generate(){
const quotes = ["There are two types of people in this world. Those that enter a room and say 'Here I am!' and those that enter a room and say 'There you are!'.@Unknown","Because it's there.@George Mallory on climbing mountains","Footsteps always follow us, whenever it is snowing. They always show us where we've been, but never where we're going.@Winnie the Pooh's A-Z","For I know the plans that I have for you.@The Lord, Jer 29:11","The only way to climb properly is to realize that just getting up a route is nothing, the way it is done is everything.@Royal Robbins","Small minds discuss people. Average minds discuss events. Great minds discuss ideas.@Unkown","The significant problems we face cannot be solved at the same level of thinking we were at when we created them.@Albert Einstein"
];
function generate(){
const quotes = ["There are two types of people in this world. Those that enter a room and say 'Here I am!' and those that enter a room and say 'There you are!'.@Unknown","Because it's there.@George Mallory on climbing mountains","Footsteps always follow us, whenever it is snowing. They always show us where we've been, but never where we're going.@Winnie the Pooh's A-Z","For I know the plans that I have for you.@The Lord, Jer 29:11","The only way to climb properly is to realize that just getting up a route is nothing, the way it is done is everything.@Royal Robbins","Small minds discuss people. Average minds discuss events. Great minds discuss ideas.@Unkown","The significant problems we face cannot be solved at the same level of thinking we were at when we created them.@Albert Einstein"
];
2) Zobrazení výsledku
randomQuote = quotes[Math.floor(Math.random()*quotes.length)];
quoteAuthor=randomQuote.split("@");
document.querySelector('.saying').innerHTML = quoteAuthor[0];
document.querySelector('.author').innerHTML = quoteAuthor[1];
}
var btn = document.querySelector("button");
btn.addEventListener(() => {
generate();
});
quoteAuthor=randomQuote.split("@");
document.querySelector('.saying').innerHTML = quoteAuthor[0];
document.querySelector('.author').innerHTML = quoteAuthor[1];
}
var btn = document.querySelector("button");
btn.addEventListener(() => {
generate();
});
Generate eshop page with cart by templates ES6
Uživatelská prostředí např. eshopů se renderují z databází na serveru pomocí javascriptu. My si ukážeme jak vyrenderovat data z předchystané šablony na straně frontendu.
<header>
<h1>My eShop</h1>
<nav>
<!----Categories are rendered!!!------>
</nav>
</header>
<section class="products">
<!----Products are rendered!!!------>
</section>
<section id="cart">
<h1>Your cart</h1>
<p class="cart">
<!----Products are rendered!!!------>
</p>
</section>
<footer>copyright 2016</footer>
<h1>My eShop</h1>
<nav>
<!----Categories are rendered!!!------>
</nav>
</header>
<section class="products">
<!----Products are rendered!!!------>
</section>
<section id="cart">
<h1>Your cart</h1>
<p class="cart">
<!----Products are rendered!!!------>
</p>
</section>
<footer>copyright 2016</footer>
1 Definice proměnných
const cart = document.querySelector("#cart");
const o = document.querySelector(".products");
const cat = document.querySelector("nav");
const o = document.querySelector(".products");
const cat = document.querySelector("nav");
2 Renderovací funkce
2.1 - Začátek
const Render = (html, options) => {
const re = /<%([^%>]+)?%>/g;
const reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g;
let code = 'var r=[];\n';
let cursor = 0;
let match;
const re = /<%([^%>]+)?%>/g;
const reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g;
let code = 'var r=[];\n';
let cursor = 0;
let match;
2.2 - Definice funkce, která poskládá element z šablony
const add = (line, js) => {
js ? (code += line.match(reExp) ? `${line}\n` : `r.push(${line});\n`) :
(code += line != '' ? `r.push("${line.replace(/"/g, '\\"')}");\n` : '');
return add;
};
2.3 - Podmínka
while (match = re.exec(html)) {
add(html.slice(cursor, match.index))(match[1], true);
cursor = match.index + match[0].length;
}
add(html.slice(cursor, match.index))(match[1], true);
cursor = match.index + match[0].length;
}
2.4 - Dokončení
add(html.substr(cursor, html.length - cursor));
code += 'return r.join("");';
return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
};
code += 'return r.join("");';
return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
};
3 Definice šablon
První šablona definuje kategorie eshopu, druhá element s produktem.
const templateCategories =
'<%for(var index in ar2) {%>' +
'<li class="nav">' +
'<%this.categories[index]%></li>' +
'<%}%>';
const template =
'<%for(var index in ar) {%>' +
'<div class="product" onclick="addToBasket(this.innerText)">' +
'<%this.product[index]%></div>' +
'<p class="priceTag"><%this.product[1]%></p>' +
'<%}%>' +
"<br>";
5 Rendering
Vyrenderujeme produkty a navigační lištu
cat.innerHTML = Render(templateCategories, {
categories: ["Phones", "Computers", "Audio"]
});
//Product database
o.innerHTML += Render(template, {
product: ["iPhone 6S", "600"]
});
o.innerHTML += Render(template, {
product: ["Macbook", "1400"]
});
categories: ["Phones", "Computers", "Audio"]
});
//Product database
o.innerHTML += Render(template, {
product: ["iPhone 6S", "600"]
});
o.innerHTML += Render(template, {
product: ["Macbook", "1400"]
});
6 Funkce, která přidá názvy produkty do košíku
function addToBasket(x) {
cart.innerHTML += `<br>${x}`;
};
cart.innerHTML += `<br>${x}`;
};