Strona chodzi lekko i wygląda estetycznie - tyle że patrząc w kod źródłowy wydaje mi się, że to zasługa raczej Polymera, a nie twojego wykonania - bo kod jest fatalny.
- pełno dołączanych plików, co może wpłynąć negatywnie na transfer (jeśli za każdym zapytaniem będzie leciało kolejne zapytanie do serwera):
<link href="components\paper-shadow\paper-shadow.html" rel="import">
<link href="components/paper-dropdown/paper-dropdown.html" rel="import">
<link href="components/core-collapse/core-collapse.html" rel="import">
<link href="components/core-menu/core-menu.html" rel="import">
<link href="components/paper-item/paper-item.html" rel="import">
<link href="components/core-icons/core-icons.html" rel="import">
<link href="components/paper-icon-button/paper-icon-button.html" rel="import">
tutaj o tym piszą więcej, co z tym można zrobić w temacie Polymera https://www.polymer-project.org/resources/faq.html
"I see a bunch of XHRs making network requests. What gives?" etc.
- styl i skrypty w pliku HTML, niezminimalizowane (no, chyba, że to wersja developerska, wtedy zarówno to, jak i dołączanie kilkunastu plików jest wybaczone. Ale na produkcji jednak się nie powinno tak robić).
document.getElementById("con1").innerHTML = '<paper-input-decorator label="input lenght of password" error="maximum characters exceeded"><input id="i3" is="core-input" maxlength="2"><paper-char-counter class="counter" showCounter="false" target="i3"></paper-char-counter></paper-input-decorator><post-card-img><h2>Your password:</h2><h1>'+gen+'</h1></post-card-img><div id="foo"><paper-fab class="green" icon="refresh" onclick="newPass();" title="refresh"></paper-fab></div>';
jak dla mnie używanie biblioteki do komponentów HTML (mówię o Polymerze), ale jednoczesne manipulacje elementami na stronie poprzez wrzucanie stringa do innerHTML to trochę jakby mając łyżkę jeść zupę ręką. To są haki, a nie programowanie. I w ogóle ten kod JavaScript jest bardzo, bardzo zły, pisany chyba na kolanie:
function screensLoad()
{
document.getElementById("con1").innerHTML = '<post-card-img style="width:850px;height:265px;'+'background:'+theme+'"><img src="img/screen1.png" alt="scn3" ></img></post-card-img><post-card-img style="width:850px;height:265px;'+'background:'+theme+'"><img src="img/screen2.png" alt="scn3"></img></post-card-img><post-card-img style="width:850px;height:265px;'+'background:'+theme+'"><img src="img/screen3.png" alt="scn3"></img></post-card-img><post-card-img style="width:800px;height:650px;'+'background:'+theme+'"><img src="img/screen4.png" alt="scn3"></img></post-card-img>';
}
function screensLoad2()
{
document.getElementById("con1").innerHTML = '<post-card-img style="width:555px;height:445px;'+'background:'+theme+'"><img src="img/screen1e.png" alt="scn3" ></img></post-card-img><post-card-img style="width:555px;height:445px;'+'background:'+theme+'"><img src="img/screen2e.png" alt="scn3"></img></post-card-img><post-card-img style="width:555px;height:445px;'+'background:'+theme+'"><img src="img/screen3e.png" alt="scn3"></img></post-card-img>';
}
function screensLoad3()
{
document.getElementById("con1").innerHTML = '<post-card-img style="width:483px;height:445px;'+'background:'+theme+'"><img src="img/screenr1.png" alt="scn3" ></img></post-card-img><post-card-img style="width:483px;height:445px;'+'background:'+theme+'"><img src="img/screenr2.png" alt="scn3"></img></post-card-img><post-card-img style="width:483px;height:445px;'+'background:'+theme+'"><img src="img/screenr3.png" alt="scn3"></img></post-card-img>';
}
function screensLoad4()
{
document.getElementById("con1").innerHTML = '<post-card-img style="width:668px;height:561px;'+'background:'+theme+'"><img src="img/screen1rp.png" alt="scn3" ></img></post-card-img><post-card-img style="width:668px;height:561px;'+'background:'+theme+'"><img src="img/screen2rp.png" alt="scn3"></img></post-card-img><post-card-img style="width:668px;height:561px;'+'background:'+theme+'"><img src="img/screen3rp.png" alt="scn3"></img></post-card-img>';
}
ile czasu programujesz już? Słyszałeś o czymś takim jak struktury danych w JavaScript? (Mam na myśli tablice i obiekty). Możesz zrobić coś takiego mniej więcej:
var screens = [
{width: 483, height: 445, img: "img/screenr1.png"},
{width: 668, height: 561, img: "img/screenr1p.png"},
];
....
screensLoad(screens[0]);
....
screensLoad(screens[1]); // wywolujemy funkcje screensLoad z argumentem screen[1]
...
function screensLoad(screen) {
....
// screen.width --> szerokosc
// screen.img ----> adres
// etc.
}
etc.
też nie widziałem, żebyś stosował w jakimkolwiek miejscu argumenty w funkcjach, zamiast tego robisz 5 funkcji o nazwach cosTam1, cosTam2, cosTam3 :|
<paper-toast id="toast3" class="capsule" text="Generated" style="padding-right: 30px;"></paper-toast>
robisz inline style, co też jest złe. Przecież padding-right można przenieść do stylów.
EDIT: zresztą w ładowaniu ekranów pewnie też niepotrzebne są inline styles, bo przecież możesz zapisać to w CSS ,np:
#screen-1 {
width:668px;
height:561px;
}
poza tym działanie:
- brak jest jakiegoś systemu urli, choćby wirtualnego, za pomocą #cos-tam, #cos-tam-innego, przez co nie będzie się dało w żaden sposób wysłać komuś linka do podstrony. Google: how make javascript router, albo how make routing in polymer, polymer router, czy coś podobnego.
No i jeszcze bonus:
input lenght of passwor
literówki...
