--- id: 619665c9abd72906f3ad30f9 title: Step 1 challengeType: 0 dashedName: step-1 --- # --description-- Creerai un pinguino felice che saluta e in questo processo esplorerai ulteriormente le trasformazioni e le animazioni in CSS. Comincia con il testo HTML standard. Includi la dichiarazione `DOCTYPE`, l'elemento `html`, i tag `meta` appropriati, gli elementi `head`, `body` e `title`. Inoltre, collega il foglio di stile alla pagina. # --hints-- Il codice dovrebbe avere una dichiarazione ``. ```js assert(code.match(//i)); ``` Il codice dovrebbe avere un elemento `html`. ```js assert.equal(document.querySelectorAll('html')?.length, 1); ``` L'elemento `html` dovrebbe avere una tag di apertura con un attributo `lang` di `en`. ```js assert(code.match(//gi)); ``` L'elemento `html` dovrebbe avere un tag di chiusura. ```js assert(code.match(/<\/html\s*>/gi)); ``` Il codice dovrebbe avere un elemento `head` all'interno dell'elemento `html`. ```js assert.equal(document.querySelectorAll('head')?.length, 1); ``` Il codice dovrebbe avere un elemento `body` all'interno dell'elemento `html`. ```js assert.equal(document.querySelectorAll('body')?.length, 1); ``` L'elemento `head` dovrebbe trovarsi prima dell'elemento `body`. ```js assert.equal(document.querySelector('body')?.previousElementSibling?.tagName, 'HEAD'); ``` Dovresti avere due elementi `meta`. ```js const meta = document.querySelectorAll('meta'); assert.equal(meta?.length, 2); ``` Un elemento `meta` dovrebbe avere un attributo `name` con valore di `viewport` e un attributo `content` con valore di `width=device-width, initial-scale=1.0`. ```js const meta = [...document.querySelectorAll('meta')]; const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); assert.exists(target); ``` L'altro elemento `meta` dovrebbe avere l'attributo `charset` con valore di `UTF-8`. ```js const meta = [...document.querySelectorAll('meta')]; const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); assert.exists(target); ``` Il codice dovrebbe avere un elemento `title`. ```js const title = document.querySelector('title'); assert.exists(title); ``` L'elemento `title` dovrebbe avere del testo. ```js const title = document.querySelector('title'); assert.isAtLeast(title?.textContent?.length, 1); ``` Il codice dovrebbe avere un elemento `link`. ```js assert(/[\w\W\s]*[\w\W\s]*<\/head>/i)) ``` L'elemento `link` dovrebbe avere un attributo `rel` con il valore `stylesheet`. ```js assert.match(code, /