diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md index c8f088b2690..83bec1252f3 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md @@ -32,7 +32,7 @@ Más recursos: ## --text-- -¿Cuál es una biblioteca de visualización de JavaScript común? +¿Cuál es una librería de visualización de JavaScript común? ## --answers-- diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md index ae5e7e8846c..8e5ee6cec5c 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md @@ -26,7 +26,7 @@ Más recursos: ## --text-- -¿Quién debería de aprender a programar? +¿Quién debe de aprender a programar? ## --answers-- diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md index 7ac60f612ca..409fa1fc9b9 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md @@ -24,7 +24,7 @@ Más recursos: ## --text-- -¿Qué biblioteca de Python se usa para analizar documentos HTML y extraer datos de ellos? +¿Qué librería de Python se usa para analizar documentos HTML y extraer datos de ellos? ## --answers-- diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-functions.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-functions.md index 8d288b7c17c..e0d29c21517 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-functions.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-functions.md @@ -30,7 +30,7 @@ Indica que la siguiente identación de código va a ser almacenada para mas adel --- -Indica el inicio de una función, y la siguiente identación de código va a ser almacenada para mas adelante. +Indica el inicio de una función, y la siguiente identación de código va a ser almacenada para más adelante. --- diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-objects.md index f1a3358b9a6..a1e0cc1fdd0 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-objects.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-objects.md @@ -22,7 +22,7 @@ Los objetos son creados y usados. --- -Los objetos son bits de código y datos. +Los objetos son fragmentos de código y datos. --- diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md index 52235683c7b..1586a8d9652 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md @@ -14,7 +14,7 @@ dashedName: regular-expressions ## --text-- -¿Qué regex coincide sólo con un carácter de espacio en blanco? +¿Qué expresiones regulares coincide solo con un carácter de espacio en blanco? ## --answers-- diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md index 3ba7b929f81..404a9c80616 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md @@ -14,7 +14,7 @@ dashedName: representing-relationships-in-a-relational-database ## --text-- -¿Qué es una foreign key? +¿Qué es una clave foránea? ## --answers-- @@ -22,15 +22,15 @@ Una llave que no debería de estar ahí. --- -Una llave que usa caracteres no latinos. +Una clave que usa caracteres no latinos. --- -Un numero que apunta a la primary key de una fila asociada en una tabla diferente. +Un número que apunta a la clave primaria de una fila asociada en una tabla diferente. --- -Una llave que el "mundo real" podría usar para buscar una fila. +Una clave que el "mundo real" podría usar para buscar una fila. ## --video-solution-- diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md index a41824a0e5a..b0dc150c92e 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md @@ -14,7 +14,7 @@ dashedName: strings-and-lists Mas recursos: -\- [Ejercicios](https://www.youtube.com/watch?v=-9TfJF2dwHI) +\- [Ejercicio](https://www.youtube.com/watch?v=-9TfJF2dwHI) # --question-- diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/using-web-services.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/using-web-services.md index ea7b6afa0c8..080faf34e97 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/using-web-services.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/using-web-services.md @@ -14,7 +14,7 @@ dashedName: using-web-services ## --text-- -¿Cuáles son las dos formas mas comunes para enviar datos a través de internet? +¿Cuáles son las dos formas más comunes para enviar datos a través de internet? ## --answers-- diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md index 7fa04bb1053..4a2fb075083 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md @@ -1,6 +1,6 @@ --- id: 5e7b9f050b6c005b0e76f056 -title: 'Variables, expresiones y declaraciones' +title: 'Variables, expresiones y sentencias' challengeType: 11 videoId: nELR-uyyrok bilibiliIds: diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md index 9b2c8ad91fd..a429eeb59f4 100644 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md +++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md @@ -61,7 +61,7 @@ La función devolverá la conversión correcta si los problemas suministrados es - Situaciones que devolverán un error: - Si hay **demasiados problemas** suministrados a la función. El límite es **cinco**, cualquier cosa más regresará: `Error: Too many problems.` - Los operadores apropiados que la función aceptará son **suma** y **resta**. La multiplicación y la división devolverán un error. Otros operadores que no se mencionan en este punto no tendrán que ser probados. El error devuelto será: `Error: Operator must be '+' or '-'.` - - Cada número (operando) debe contener sólo dígitos. De lo contrario, la función devolverá: `Error: Numbers must only contain digits.` + - Cada número (operando) debe contener solo dígitos. De lo contrario, la función devolverá: `Error: Numbers must only contain digits.` - Cada operando (también conocido como número en cada lado del operador) tiene un máximo de cuatro dígitos de ancho. De lo contrario, la cadena de error devuelta será: `Error: Numbers cannot be more than four digits.` - Si el usuario proporcionó el formato correcto de los problemas, la conversión que devuelva seguirá estas reglas: - Debe haber un solo espacio entre el operador y el más largo de los dos operandos, el operador estará en la misma línea que el segundo operando, ambos operandos estarán en el mismo orden proporcionado (el primero será el superior y el segundo el inferior. diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md index fde32d6f341..d04bf877f83 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md @@ -1,47 +1,277 @@ --- id: bd7158d8c242eddfaeb5bd13 title: Criar uma página de portfólio pessoal -challengeType: 3 +challengeType: 14 forumTopicId: 301143 dashedName: build-a-personal-portfolio-webpage --- # --description-- -**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: . +**Objetivo:** criar uma aplicação que funcione de modo semelhante a https://personal-portfolio.freecodecamp.rocks -Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê à página o seu próprio estilo pessoal. +**Histórias de usuário:** -Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação! +1. O portfólio deve ter uma seção de boas-vindas com o `id` `welcome-section` +1. A seção de boas-vindas deve ter um elemento `h1` que contenha texto +1. O portfólio deve ter uma seção de projetos com o `id` `projects` +1. A seção de projetos deve conter pelo menos um elemento com a `class` `project-tile` que contenha um projeto +1. A seção de projetos deve conter pelo menos um link para um projeto +1. O portfólio precisa ter uma barra de navegação com o id `navbar` +1. A barra de navegação deve conter pelo menos um link clicável que navegue para seções diferentes da página +1. O portfólio deve ter um link com o id `profile-link`, que abra seu perfil no GitHub ou no freeCodeCamp em uma nova aba +1. O portfólio deve ter pelo menos uma media query +1. A altura da seção de boas-vindas deve ser igual à altura da viewport +1. A barra de navegação deve estar sempre na parte superior da viewport -**História de usuário nº 1:** o portfólio deve ter uma seção de boas-vindas com um id de `welcome-section`. +Atenda às histórias de usuário e passe em todos os testes abaixo para concluir este projeto. Dê ao projeto o seu próprio estilo pessoal. Boa programação! -**História de usuário nº 2:** a seção de boas-vindas deve ter um elemento `h1` que contenha algum texto. +# --hints-- -**História de usuário nº 3:** o portfólio deve ter uma seção de projetos com um id de `projects`. +O portfólio deve ter uma seção de boas-vindas com o `id` `welcome-section`. -**História de usuário nº 4:** a seção de projetos deve conter pelo menos um elemento com uma classe de `project-tile` para armazenar um projeto. +```js +const el = document.getElementById('welcome-section') +assert(!!el); +``` -**História de usuário nº 5:** a seção de projetos deve conter pelo menos um link para um projeto. +O elemento `#welcome-section` deve conter um elemento `h1`. -**História de usuário nº 6:** o portfólio deve ter uma seção de projetos com um id de `navbar`. +```js +assert.isAbove( + document.querySelectorAll('#welcome-section h1').length, + 0, + 'Welcome section should contain an h1 element ' +); +``` -**História de usuário nº 7:** a barra de navegação deve conter pelo menos um link clicável para navegar por diferentes seções na página. +Você não deve ter elementos `h1` vazios dentro de `#welcome-section`. -**História de usuário nº 8:** o portfólio deve ter um link com id `profile-link`, que abre um perfil do GitHub ou do FCC em uma nova aba. +```js +assert.isAbove( + document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, + 0, + 'h1 element in welcome section should contain your name or camper ' + + 'name ' +); +``` -**História de usuário nº 9:** o portfólio deve ter pelo menos uma media query. +Você deve ter uma seção de projetos com o `id` `projects`. -**História de usuário nº 10:** a altura da seção de boas-vindas deve ser igual à altura da viewport. +```js +const el = document.getElementById('projects') +assert(!!el); +``` -**História de usuário nº 11:** a barra de navegação deve estar sempre na parte superior da viewport. +O portfólio deve conter pelo menos um elemento com a classe `project-tile`. -Você pode fazer o seu projeto usando este modelo da CodePen e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +```js +assert.isAbove( + document.querySelectorAll('#projects .project-tile').length, + 0 +); +``` -Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes. +O elemento `#projects` deve conter pelo menos um elemento `a`. -# --solutions-- +```js +assert.isAbove(document.querySelectorAll('#projects a').length, 0); +``` + +O portfólio precisa ter uma barra de navegação com o `id` `navbar`. + +```js +const el = document.getElementById('navbar'); +assert(!!el); +``` + +O elemento `#navbar` deve conter pelo menos um elemento `a`, cujo atributo `href` comece com `#`. + +```js +const links = [...document.querySelectorAll('#navbar a')].filter( + (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#' +); + +assert.isAbove( + links.length, + 0, + 'Navbar should contain an anchor link ' +); +``` + +O portfólio deve ter um elemento `a` com o `id` `profile-link`. + +```js +const el = document.getElementById('profile-link'); +assert(!!el && el.tagName === 'A') +``` + +O elemento `#profile-link` deve ter um atributo `target` `_blank`. + +```js +const el = document.getElementById('profile-link'); +assert(!!el && el.target === '_blank') +``` + +O portfólio deve usar pelo menos uma media query. + +```js +assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1); +``` + +O elemento `#navbar` deve estar sempre na parte superior da viewport. + +```js +(async () => { + const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); + + const navbar = document.getElementById('navbar'); + assert.approximately( + navbar?.getBoundingClientRect().top, + 0, + 15, + "Navbar's parent should be body and it should be at the top of " + + 'the viewport ' + ); + + window.scroll(0, 500); + + await timeout(1); + + assert.approximately( + navbar?.getBoundingClientRect().top, + 0, + 15, + 'Navbar should be at the top of the viewport even after ' + + 'scrolling ' + ); + window.scroll(0, 0); +})(); +``` + +# --seed-- + +## --seed-contents-- ```html -// solution required + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + Personal Portfolio + + + + + +
+
+
+

It's me!

+ +

Naomi Carrigan

+

Welcome to my portfolio page!

+
+
+

Projects

+

Here's what I've worked on!

+

+ + + + +

+
+

Contact me!

+

Use the links below to get in touch.

+

FreeCodeCamp.org | GitHub | Facebook | LinkedIn +

+ + + +``` + +```css +nav{ + position: fixed; + width: 100%; + text-align: right; + font-size: 24pt; + top: 0%; + right: 5px; + background-color: #000000; + color: #ffffff; +} +@media (max-width: 500px){ + nav{ + display: none; + } +} +a{ + color: #ffffff; +} +main{ + text-align: center; + background-color: black; + font-family:Pacifico +} +h1{ + font-size: 48pt; +} +h2{ + font-size: 24pt; +} +p{ + font-size: 12pt; +} +#welcome-section{ + background-color:#251a4a; + color: #FFFFFF; + display: table-cell; + vertical-align: middle; + width: 100vw; + height: 100vh; +} +#projects{ + background-color: #060a9c; + color: #ffffff; + display: table-cell; + vertical-align: middle; + width: 100vw; + height: 100vh; +} +#contact{ + background-color: #03300b; + color: #ffffff; + display: table-cell; + vertical-align: middle; + width: 100vw; + height: 100vh; +} ``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md index 60efe5e69af..f3fccbdbef8 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md @@ -1,55 +1,424 @@ --- id: 587d78af367417b2b2512b04 title: Criar uma landing page para um produto -challengeType: 3 +challengeType: 14 forumTopicId: 301144 dashedName: build-a-product-landing-page --- # --description-- -**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: . +**Objetivo:** criar uma aplicação que funcione de modo semelhante a https://product-landing-page.freecodecamp.rocks -Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê à página o seu próprio estilo pessoal. +**Histórias de usuário:** -Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação! +1. A página inicial do produto deve ter um elemento `header` com um `id="header"` correspondente +1. Você pode ver uma imagem dentro do elemento `header` com um `id="header-img"` correspondente (um logotipo seria uma boa imagem aqui) +1. Dentro do elemento `#header`, deve haver um elemento `nav` com um `id="nav-bar"` correspondente +1. Deve haver pelo menos três elementos clicáveis dentro do elemento `nav` e cada um deles deve ter a classe `nav-link` +1. Ao clicar em um botão com a classe `.nav-link` no elemento `nav`, o usuário deve ser levado para a seção correspondente na página inicial +1. Você pode assistir a um vídeo de produto integrado com `id="video"` +1. A página inicial do produto deve ter um elemento `form` com um `id="form"` correspondente +1. Dentro do formulário, deve haver um `input` com `id="email"`, onde deve ser possível inserir um endereço de e-mail +1. O campo de entrada `#email` deve ter um placeholder (texto ilustrativo) para que o usuário saiba para que serve o campo +1. O campo de entrada `#email` deve usar a validação do próprio HTML5 para confirmar que o texto inserido é um endereço de e-mail +1. Dentro do formulário, deve haver um `input` do tipo botão de envio com o `id="submit"` correspondente +1. Ao clicar no elemento `#submit`, o e-mail deve ser enviado para uma página estática (use este URL fictício: `https://www.freecodecamp.com/email-submit`) +1. A barra de navegação deve estar sempre na parte superior da viewport +1. A página inicial deve ter pelo menos uma media query +1. A página inicial do produto deve utilizar o CSS flexbox pelo menos uma vez -**História de usuário nº 1:** a página inicial do produto deve ter um elemento `header` com um `id="header"` correspondente. +Atenda às histórias de usuário e passe em todos os testes abaixo para concluir este projeto. Dê ao projeto o seu próprio estilo pessoal. Boa programação! -**História de usuário nº 2:** deve haver uma imagem dentro do elemento `header` com um `id="header-img"` correspondente. Um logotipo da empresa seria uma boa imagem para colocar aqui. +# --hints-- -**História de usuário nº 3:** dentro do elemento `#header`, deve haver um elemento `nav` com um `id="nav-bar"`. +Você deve ter um elemento `header` com o `id` `header` -**História de usuário nº 4:** deve haver pelo menos três elementos clicáveis dentro do elemento `nav` e cada um deles deve ter a classe `nav-link`. +```js +const el = document.getElementById('header') +assert(!!el && el.tagName === 'HEADER') +``` -**História de usuário nº 5:** ao clicar em um botão com a classe `.nav-link` no elemento `nav`, o usuário deve ser levado para a seção correspondente na página inicial. +Você deve ter um elemento `img` com o `id` `header-img` -**História de usuário nº 6:** é possível assistir a um vídeo do produto no elemento de `id="video"`. +```js +const el = document.getElementById('header-img') +assert(!!el && el.tagName === 'IMG') +``` -**História de usuário nº 7:** a landing page deve ter um formulário (`form`) com um `id="form"`. +O elemento `#header-img` deve estar aninhado dentro de `#header` -**História de usuário nº 8:** dentro do formulário, deve haver um campo de entrada (`input`) com `id="email"`, onde deve ser possível digitar um endereço de e-mail. +```js +const els = document.querySelectorAll('#header #header-img') +assert(els.length > 0) +``` -**História de usuário nº 9:** o campo de entrada `#email` deve ter um placeholder (texto ilustrativo) para que o usuário saiba para que serve o campo. +O elemento `#header-img` deve ter um atributo `src` -**História de usuário nº 10:** o campo de entrada `#email` deve usar a validação do próprio HTML5 para confirmar que o texto inserido é um endereço de e-mail. +```js +const el = document.getElementById('header-img') +assert(!!el && !!el.src) +``` -**História de usuário nº 11:** dentro do formulário, deve haver um campo de entrada (`input`) do tipo botão com `id="submit"`. +O `src` de `#header-img` deve ser um URL válido (que comece por `http`) -**História de usuário nº 12:** quando o elemento `#submit` for clicado, o e-mail deve ser enviado para uma página estática (use esta URL fictícia: [https://www.freecodecamp.com/email-enviar](https://www.freecodecamp.com/email-submit)). +```js +const el = document.getElementById('header-img') +assert(!!el && /^http/.test(el.src)) +``` -**História de usuário nº 13:** a barra de navegação deve estar sempre na parte superior da viewport. +Você deve ter um elemento `nav` com o `id` `nav-bar` -**História de usuário nº 14:** a página inicial deve ter pelo menos uma media query. +```js +const el = document.getElementById('nav-bar') +assert(!!el && el.tagName === 'NAV') +``` -**História de usuário nº 15:** a página inicial deve utilizar pelo menos uma vez o CSS Flexbox. +O elemento `#nav-bar` deve estar aninhado dentro de `#header` -Você pode fazer o seu projeto usando este modelo da CodePen e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +```js +const els = document.querySelectorAll('#header #nav-bar') +assert(els.length > 0) +``` -Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes. +Você deve ter pelo menos 3 elementos `.nav-link` dentro de `#nav-bar` -# --solutions-- +```js +const els = document.querySelectorAll('#nav-bar .nav-link') +assert(els.length >= 3) +``` + +Cada elemento `.nav-link` deve ter um atributo `href` + +```js +const els = document.querySelectorAll('.nav-link') +els.forEach(el => { + if (!el.href) assert(false) +}) +assert(els.length > 0) +``` + +Cada elemento `.nav-link` deve vincular a um elemento correspondente na página inicial (ter um `href` com o valor do id de outro elemento, como `#footer`) + +```js +const els = document.querySelectorAll('.nav-link') +els.forEach(el => { + const linkDestination = el.getAttribute('href').slice(1) + if (!document.getElementById(linkDestination)) assert(false) +}) +assert(els.length > 0) +``` + +Você deve ter um elemento `video` ou um elemento `iframe` com o `id` `video` + +```js +const el = document.getElementById('video') +assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) +``` + +O elemento `#video` deve ter um atributo `src` + +```js +const el = document.getElementById('video') +assert(!!el && !!el.src) +``` + +Você deve ter um elemento `form` com o `id` `form` + +```js +const el = document.getElementById('form') +assert(!!el && el.tagName === 'FORM') +``` + +Você deve ter um elemento `input` com o `id` `email` + +```js +const el = document.getElementById('email') +assert(!!el && el.tagName === 'INPUT') +``` + +O elemento `#email` deve estar aninhado dentro de `#form` + +```js +const els = document.querySelectorAll('#form #email') +assert(els.length > 0) +``` + +O elemento `#email` deve ter o atributo `placeholder` e um texto ilustrativo + +```js +const el = document.getElementById('email') +assert(!!el && !!el.placeholder && el.placeholder.length > 0) +``` + +O elemento `#email` deve usar a validação de HTML5 definindo seu `type` como `email` + +```js +const el = document.getElementById('email') +assert(!!el && el.type === 'email') +``` + +Você deve ter um elemento `input` com o `id` `submit` + +```js +const el = document.getElementById('submit') +assert(!!el && el.tagName === 'INPUT') +``` + +O elemento `#submit` deve estar aninhado dentro de `#form` + +```js +const els = document.querySelectorAll('#form #submit') +assert(els.length > 0) +``` + +O elemento `#submit` deve ter o atributo `type` com o valor `submit` + +```js +const el = document.getElementById('submit') +assert(!!el && el.type === 'submit') +``` + +Seu `#form` deve ter um atributo `action` definido como `https://www.freecodecamp.com/email-submit` + +```js +const el = document.getElementById('form') +assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') +``` + +O elemento `#email` deve ter um atributo `name` definido como `email` + +```js +const el = document.getElementById('email') +assert(!!el && el.name === 'email') +``` + +O elemento `#nav-bar` deve estar sempre na parte superior da viewport + +```js +const el = document.getElementById('nav-bar') +const top1 = el?.offsetTop +const top2 = el?.offsetTop +assert(!!el && top1 >= -15 && top1 <= 15 && top2 >= -15 && top2 <= 15) +``` + +A página inicial deve ter pelo menos uma media query + +```js +assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1); +``` + +A página inicial do produto deve utilizar o CSS flexbox pelo menos uma vez + +```js +const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() +const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) +const usesFlex = cssRules.find(rule => { + return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex' +}) +assert(usesFlex) +``` + +# --seed-- + +## --seed-contents-- ```html -// solution required + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + Product Landing Page + + + +
+

+ Pokemon Daycare Service +

+
+

What we offer

+
+
+ +
+
Guaranteed friendly and loving staff!
+
+
+
+ +
+
+ Comfortable environment for Pokemon to explore and play! +
+
+
+
+ +
+
+ Multiple membership plans to fit your lifestyle! +
+
+
+
+

Check us out!

+ A sneak peek into our facility: +
+ +
+
+

Membership Plans

+
+
+ Basic Membership
+
    +
  • One Pokemon
    • +
  • Food and berries provided
    • +
+ $9.99/month +
+
+ Silver Membership
+
    +
  • Up to Three Pokemon
    • +
  • Food and berries provided
    • +
  • Grooming and accessories included
    • +
+ $19.99/month +
+
+ Gold Membership
+
    +
  • Up to six Pokemon!
    • +
  • Food and berries provided
    • +
  • Grooming and accessories included
    • +
  • Personal training for each Pokemon
    • +
  • Breeding and egg hatching
    • +
+ $29.99/month +
+
+
+
+

Sign up for our newsletter!

+ + +
+ +
+ + +``` + +```css +body { + background-color: #3a3240; + color: white; +} +main { + max-width: 750px; + margin: 50px auto; +} +input { + background-color: #92869c; +} +a:not(.nav-link) { + color: white; +} +#header-img { + max-height: 25px; +} +#nav-bar { + position: fixed; + width: 100%; + text-align: center; + top: 0%; + background-color: #92869c; +} +h1 { + text-align: center; +} +body { + text-align: center; +} +footer { + text-align: center; +} +#bullet { + max-height: 25px; +} +.flex-here { + display: flex; + justify-content: center; +} +.flex-left { + height: 25px; +} +.flex-mem { + display: flex; + justify-content: center; +} +.flex-mem-box { + background-color: #92869c; + border-color: black; + border-width: 5px; + border-style: solid; + margin: 10px; + padding: 10px; + color: black; +} +@media (max-width: 350px) { + #video { + width: 300; + height: 200; + } +} ``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md index db2a9cd52b1..827210661fe 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md @@ -1,57 +1,516 @@ --- id: 587d78af367417b2b2512b03 title: Criar um formulário de pesquisa -challengeType: 3 +challengeType: 14 forumTopicId: 301145 dashedName: build-a-survey-form --- # --description-- -**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: . +**Objetivo:** criar uma aplicação que funcione de modo semelhante a https://survey-form.freecodecamp.rocks -Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê à página o seu próprio estilo pessoal. +**Histórias de usuário:** -Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação! +1. Você deve ter um título de página em um elemento `h1` com o `id` `title` +1. Você deve ter uma breve explicação em um elemento `p` com o `id` `description` +1. Você deve ter um elemento `form` com o `id` `survey-form` +1. Dentro do elemento do formulário, deve ser **obrigatório** inserir seu nome em um campo `input` que tenha um `id` `name` e um `type` `text` +1. Dentro do elemento do formulário, deve ser **obrigatório** inserir seu e-mail em um campo `input` que tenha um `id` `email` +1. Se for informado um e-mail que não esteja formatado corretamente, um erro de validação HTML5 deve ser mostrado +1. Dentro do formulário, você pode inserir um número em um campo `input` que tenha o `id` `number` +1. Se for informado qualquer caractere não numérico no campo de entrada do número, um erro de validação HTML5 deve ser mostrado +1. Se forem inseridos números fora do intervalo do campo de entrada do número, intervalo esse definido pelos atributos `min` e `max`, um erro de validação de HTML5 deve ser mostrado +1. Para os campos de entrada (inputs) name, email e number dentro do formulário, deve haver elementos `label` correspondentes que descrevam o propósito de cada campo com os seguintes ids: `id="name-label"`, `id="email-label"` e `id="number-label"` +1. Para os campos de entrada name, email e number, deve haver um texto placeholder (texto ilustrativo) que forneça uma descrição ou instruções para cada campo +1. Dentro do elemento do formulário, você deve ter um elemento de menu suspenso `select` com um `id` `dropdown` e pelo menos duas opções para escolher +1. Dentro do elemento do formulário, você pode selecionar uma opção de um grupo de pelo menos dois botões de opção (radio) que serão agrupados usando o atributo `name` +1. Dentro do elemento de formulário, deve ser possível selecionar vários campos de uma série de caixas de seleção (checkboxes). Cada um desses campos deve ter um atributo `value` +1. Dentro do elemento de formulário, você receberá uma `textarea` para comentários adicionais +1. Dentro do elemento de formulário, você receberá um botão com o `id` `submit` para enviar as informações -**História de usuário nº 1:** deve haver um título com `id="title"` que possua o tamanho de uma tag h1. +Atenda às histórias de usuário e passe em todos os testes abaixo para concluir este projeto. Dê ao projeto o seu próprio estilo pessoal. Boa programação! -**História de usuário nº 2:** deve haver uma descrição curta com `id="description"` que possua o tamanho de uma tag p. +# --hints-- -**História de usuário nº 3:** deve haver um formulário (`form`) com `id="survey-form"`. +Você deve ter um elemento `h1` com o `id` `title` -**História de usuário nº 4:** dentro do elemento de formulário, é necessário inserir um nome em um campo de entrada (input) com `id="name"`. +```js +const el = document.getElementById('title') +assert(!!el && el.tagName === 'H1') +``` -**História de usuário nº 5:** dentro do elemento de formulário, é necessário inserir um e-mail em um campo de entrada (input) com `id="email"`. +O elemento `#title` não deve estar vazio -**História de usuário nº 6:** se for informado um e-mail que não esteja correto, um erro de validação HTML5 deve ser mostrado. +```js +const el = document.getElementById('title') +assert(!!el && el.innerText.length > 0) +``` -**História de usuário nº 7:** dentro do elemento de formulário, é possível inserir um número em um campo de entrada (input) com `id="number"`. +Você deve ter um elemento `p` com o `id` `description` -**História de usuário nº 8:** se for informado qualquer dígito não-numérico, um erro de validação HTML5 deve ser mostrado. +```js +const el = document.getElementById('description') +assert(!!el && el.tagName === 'P') +``` -**História de usuário nº 9:** se forem digitados números fora do intervalo permitido no campo de entrada de número, definido pelos atributos `min` e `max`, um erro de validação de HTML5 deve ser mostrado. +O elemento `#description` não deve estar vazio -**História de usuário nº 10:** para os campos de entrada (inputs) nome, e-mail e número dentro do formulário, deve haver rótulos (labels) correspondentes que descrevam o propósito de cada campo com os seguintes ids: `id="name-label"`, `id="email-label"`, e `id="number-label"`. +```js +const el = document.getElementById('description') +assert(!!el && el.innerText.length > 0) +``` -**História de usuário nº 11:** para os campos de entrada nome, e-mail e número, deve haver um texto placeholder (texto ilustrativo) que forneça uma descrição ou instruções para cada campo. +Você deve ter um elemento `form` com o `id` `survey-form` -**História de usuário nº 12:** dentro do elemento de formulário, deve ser possível selecionar uma opção de uma lista suspensa que tenha um `id="dropdown"`. +```js +const el = document.getElementById('survey-form') +assert(!!el && el.tagName === 'FORM') +``` -**História de usuário nº 13:** dentro do elemento de formulário, deve ser possível selecionar um campo de um ou mais grupos de inputs do tipo radio. Os grupos devem ser identificados pelo valor dado ao atributo `name`. +Você deve ter um elemento `input` com o `id` `name` -**História de usuário nº 14:** dentro do elemento de formulário, deve ser possível selecionar vários campos de uma série de caixas de seleção (checkbox). Cada um desses campos deve ter um atributo `value`. +```js +const el = document.getElementById('name') +assert(!!el && el.tagName === 'INPUT') +``` -**História de usuário nº 15:** dentro do elemento de formulário, deve haver um campo `textarea` no final para comentários adicionais. +O elemento `#name` deve ter o atributo `type` com o valor `text` -**História de usuário nº 16:** dentro do elemento de formulário, deve haver um botão com `id="submit"` para enviar todas as informações. +```js +const el = document.getElementById('name') +assert(!!el && el.type === 'text') +``` -Você pode fazer o seu projeto usando este modelo da CodePen e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +O elemento `#name` deve exigir a entrada -Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes. +```js +const el = document.getElementById('name') +assert(!!el && el.required) +``` -# --solutions-- +O elemento `#name` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #name') +assert(!!el) +``` + +Você deve ter um elemento `input` com o `id` `email` + +```js +const el = document.getElementById('email') +assert(!!el && el.tagName === 'INPUT') +``` + +O elemento `#email` deve ter o atributo `type` com o valor `email` + +```js +const el = document.getElementById('email') +assert(!!el && el.type === 'email') +``` + +O elemento `#email` deve exigir a entrada + +```js +const el = document.getElementById('email') +assert(!!el && el.required) +``` + +O elemento `#email` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #email') +assert(!!el) +``` + +Você deve ter um elemento `input` com o `id` `number` + +```js +const el = document.getElementById('number') +assert(!!el && el.tagName === 'INPUT') +``` + +O elemento `#number` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #number') +assert(!!el) +``` + +O elemento `#number` deve ter o atributo `type` com o valor `number` + +```js +const el = document.getElementById('number') +assert(!!el && el.type === 'number') +``` + +O elemento `#number` deve ter um atributo `min` com um valor numérico + +```js +const el = document.getElementById('number') +assert(!!el && el.min && isFinite(el.min)) +``` + +O elemento `#number` deve ter um atributo `max` com um valor numérico + +```js +const el = document.getElementById('number') +assert(!!el && el.max && isFinite(el.max)) +``` + +Você deve ter um elemento `label` com o `id` `name-label` + +```js +const el = document.getElementById('name-label') +assert(!!el && el.tagName === 'LABEL') +``` + +Você deve ter um elemento `label` com o `id` `email-label` + +```js +const el = document.getElementById('email-label') +assert(!!el && el.tagName === 'LABEL') +``` + +Você deve ter um elemento `label` com o `id` `number-label` + +```js +const el = document.getElementById('number-label') +assert(!!el && el.tagName === 'LABEL') +``` + +O elemento `#name-label` não deve estar vazio + +```js +const el = document.getElementById('name-label') +assert(!!el && el.innerText.length > 0) +``` + +O elemento `#email-label` não deve estar vazio + +```js +const el = document.getElementById('email-label') +assert(!!el && el.innerText.length > 0) +``` + +O elemento `#number-label` não deve estar vazio + +```js +const el = document.getElementById('number-label') +assert(!!el && el.innerText.length > 0) +``` + +O elemento `#name-label` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #name-label') +assert(!!el) +``` + +O elemento `#email-label` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #email-label') +assert(!!el) +``` + +O elemento `#number-label` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #number-label') +assert(!!el) +``` + +O elemento `#name` deve ter o atributo `placeholder` e um valor + +```js +const el = document.getElementById('name') +assert(!!el && !!el.placeholder && el.placeholder.length > 0) +``` + +O elemento `#email` deve ter o atributo `placeholder` e um valor + +```js +const el = document.getElementById('email') +assert(!!el && !!el.placeholder && el.placeholder.length > 0) +``` + +O elemento `#number` deve ter o atributo `placeholder` e um valor + +```js +const el = document.getElementById('number') +assert(!!el && !!el.placeholder && el.placeholder.length > 0) +``` + +Você deve ter um campo `select` com o `id` `dropdown` + +```js +const el = document.getElementById('dropdown') +assert(!!el && el.tagName === 'SELECT') +``` + +O elemento `#dropdown` deve ter pelo menos dois elementos selecionáveis (não desativados) `option` + +```js +const els = document.querySelectorAll('#dropdown option:not([disabled])') +assert(els.length >= 2) +``` + +O elemento `#dropdown` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #dropdown') +assert(!!el) +``` + +Você deve ter pelo menos dois elementos `input` com `type` `radio` (botões de opção) + +```js +const els = document.querySelectorAll('input[type="radio"]') +assert(els.length >= 2) +``` + +Você deve ter pelo menos dois botões de opção aninhados dentro de `#survey-form` + +```js +const els = document.querySelectorAll('#survey-form input[type="radio"]') +assert(els.length >= 2) +``` + +Todos os seus botões de opção devem ter um atributo `value` e um valor + +```js +const els1 = document.querySelectorAll('input[type="radio"]') +const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') +assert(els1.length > 0 && els2.length === 0) +``` + +Todos os seus botões de opção devem ter um atributo `name` e um valor + +```js +const els1 = document.querySelectorAll('input[type="radio"]') +const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') +assert(els1.length > 0 && els2.length === 0) +``` + +Todos os grupos de botões de opção devem ter pelo menos 2 botões de opção + +```js +const radioButtons = document.querySelectorAll('input[type="radio"]'); +const groups = {} + +if (radioButtons) { + radioButtons.forEach(el => { + if (!groups[el.name]) groups[el.name] = [] + groups[el.name].push(el) + }) +} + +const groupKeys = Object.keys(groups) + +groupKeys.forEach(key => { + if (groups[key].length < 2) assert(false) +}) + +assert(groupKeys.length > 0) +``` + +Você deve ter pelo menos dois elementos `input` com `type` `checkbox` (caixas de seleção) aninhados dentro de `#survey-form` + +```js +const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); +assert(els.length >= 2) +``` + +Todas as caixas de seleção dentro de `#survey-form` devem ter um atributo `value` e um valor + +```js +const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') +const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') +assert(els1.length > 0 && els2.length === 0) +``` + +Você deve ter pelo menos um elemento `textarea` aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form textarea') +assert(!!el) +``` + +Você deve ter um elemento `input` ou um elemento `button` com o `id` `submit` + +```js +const el = document.getElementById('submit') +assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) +``` + +O elemento `#submit` deve ter o atributo `type` com o valor `submit` + +```js +const el = document.getElementById('submit') +assert(!!el && el.type === 'submit') +``` + +O elemento `#submit` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #submit') +assert(!!el) +``` + +# --seed-- + +## --seed-contents-- ```html -// solution required + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + Survey Form + + +

Survey Form

+

The card below was built as a sample survey form for freeCodeCamp.

+
+

Join the Togepi Fan Club!

+

+ Enter your information here to receive updates about club activities, + our monthly newsletter, and other email communications. +

+
+ + + + +

Who is your favourite Pokemon?

+ + + +

Which communications do you want to receive?

+ + + +

Any other information you would like to share?

+ +

+ Please note: This form is a proof of concept. Submitting the form + will not actually transmit your data. +

+ +
+
+ + + +``` + +```css +main { + text-align: center; + background-color: #92869c; + background-blend-mode: lighten; + max-width: 500px; + margin: 20px auto; + border-radius: 50px; + box-shadow: 10px 10px rgba(0, 0, 0, 0.5); + color: black; +} +body { + text-align: center; + background: #3a3240; + color: white; +} +input, textarea, select, button { + background: #3a3240; + color: white; +} +a { + color: white; +} ``` diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md index d68cf49e071..703d02438fd 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md @@ -17,19 +17,19 @@ Inicialize as três variáveis `a`, `b` e `c` com `5`, `10`, e `"I am a"` respec # --hints-- -`a` deve ser definido e avaliado para ter o valor de `6`. +`a` deve ser definido e ter o valor de `6`. ```js assert(typeof a === 'number' && a === 6); ``` -`b` deve ser definido e avaliado para ter o valor de `15`. +`b` deve ser definido e ter o valor de `15`. ```js assert(typeof b === 'number' && b === 15); ``` -`c` não deve conter `undefined` e o valor da string deve ser `I am a String!` +`c` não deve conter `undefined` e deve ter o valor final de string `I am a String!` ```js assert(!/undefined/.test(c) && c === 'I am a String!'); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md index 08a16618c51..d04bf877f83 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md @@ -1,47 +1,277 @@ --- id: bd7158d8c242eddfaeb5bd13 title: Criar uma página de portfólio pessoal -challengeType: 3 +challengeType: 14 forumTopicId: 301143 dashedName: build-a-personal-portfolio-webpage --- # --description-- -**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: . +**Objetivo:** criar uma aplicação que funcione de modo semelhante a https://personal-portfolio.freecodecamp.rocks -Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê ao projeto o seu próprio estilo pessoal. +**Histórias de usuário:** -Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos darão a você uma oportunidade de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação! +1. O portfólio deve ter uma seção de boas-vindas com o `id` `welcome-section` +1. A seção de boas-vindas deve ter um elemento `h1` que contenha texto +1. O portfólio deve ter uma seção de projetos com o `id` `projects` +1. A seção de projetos deve conter pelo menos um elemento com a `class` `project-tile` que contenha um projeto +1. A seção de projetos deve conter pelo menos um link para um projeto +1. O portfólio precisa ter uma barra de navegação com o id `navbar` +1. A barra de navegação deve conter pelo menos um link clicável que navegue para seções diferentes da página +1. O portfólio deve ter um link com o id `profile-link`, que abra seu perfil no GitHub ou no freeCodeCamp em uma nova aba +1. O portfólio deve ter pelo menos uma media query +1. A altura da seção de boas-vindas deve ser igual à altura da viewport +1. A barra de navegação deve estar sempre na parte superior da viewport -**História de usuário nº 1:** o portfólio deve ter uma seção de boas-vindas com um id de `welcome-section`. +Atenda às histórias de usuário e passe em todos os testes abaixo para concluir este projeto. Dê ao projeto o seu próprio estilo pessoal. Boa programação! -**História de usuário nº 2:** a seção de boas-vindas deve ter um elemento `h1` que contenha algum texto. +# --hints-- -**História de usuário nº 3:** o portfólio deve ter uma seção de projetos com um id de `projects`. +O portfólio deve ter uma seção de boas-vindas com o `id` `welcome-section`. -**História de usuário nº 4:** a seção de projetos deve conter pelo menos um elemento com uma classe de `project-tile` para armazenar um projeto. +```js +const el = document.getElementById('welcome-section') +assert(!!el); +``` -**História de usuário nº 5:** a seção de projetos deve conter pelo menos um link para um projeto. +O elemento `#welcome-section` deve conter um elemento `h1`. -**História de usuário nº 6:** o portfólio deve ter uma seção de projetos com um id de `navbar`. +```js +assert.isAbove( + document.querySelectorAll('#welcome-section h1').length, + 0, + 'Welcome section should contain an h1 element ' +); +``` -**História de usuário nº 7:** a barra de navegação deve conter pelo menos um link clicável para navegar por diferentes seções na página. +Você não deve ter elementos `h1` vazios dentro de `#welcome-section`. -**História de usuário nº 8:** o portfólio deve ter um link com id `profile-link`, que abre um perfil do GitHub ou do FCC em uma nova aba. +```js +assert.isAbove( + document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, + 0, + 'h1 element in welcome section should contain your name or camper ' + + 'name ' +); +``` -**História de usuário nº 9:** o portfólio deve ter pelo menos uma media query. +Você deve ter uma seção de projetos com o `id` `projects`. -**História de usuário nº 10:** a altura da seção de boas-vindas deve ser igual à altura da viewport. +```js +const el = document.getElementById('projects') +assert(!!el); +``` -**História de usuário nº 11:** a barra de navegação deve estar sempre na parte superior da viewport. +O portfólio deve conter pelo menos um elemento com a classe `project-tile`. -Você pode construir seu projeto com usando este template CodePen e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +```js +assert.isAbove( + document.querySelectorAll('#projects .project-tile').length, + 0 +); +``` -Quando você terminar, envie o URL do seu projeto depois de ele haver passado em todos os testes. +O elemento `#projects` deve conter pelo menos um elemento `a`. -# --solutions-- +```js +assert.isAbove(document.querySelectorAll('#projects a').length, 0); +``` + +O portfólio precisa ter uma barra de navegação com o `id` `navbar`. + +```js +const el = document.getElementById('navbar'); +assert(!!el); +``` + +O elemento `#navbar` deve conter pelo menos um elemento `a`, cujo atributo `href` comece com `#`. + +```js +const links = [...document.querySelectorAll('#navbar a')].filter( + (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#' +); + +assert.isAbove( + links.length, + 0, + 'Navbar should contain an anchor link ' +); +``` + +O portfólio deve ter um elemento `a` com o `id` `profile-link`. + +```js +const el = document.getElementById('profile-link'); +assert(!!el && el.tagName === 'A') +``` + +O elemento `#profile-link` deve ter um atributo `target` `_blank`. + +```js +const el = document.getElementById('profile-link'); +assert(!!el && el.target === '_blank') +``` + +O portfólio deve usar pelo menos uma media query. + +```js +assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1); +``` + +O elemento `#navbar` deve estar sempre na parte superior da viewport. + +```js +(async () => { + const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); + + const navbar = document.getElementById('navbar'); + assert.approximately( + navbar?.getBoundingClientRect().top, + 0, + 15, + "Navbar's parent should be body and it should be at the top of " + + 'the viewport ' + ); + + window.scroll(0, 500); + + await timeout(1); + + assert.approximately( + navbar?.getBoundingClientRect().top, + 0, + 15, + 'Navbar should be at the top of the viewport even after ' + + 'scrolling ' + ); + window.scroll(0, 0); +})(); +``` + +# --seed-- + +## --seed-contents-- ```html -// solution required + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + Personal Portfolio + + + + + +
+
+
+

It's me!

+ +

Naomi Carrigan

+

Welcome to my portfolio page!

+
+
+

Projects

+

Here's what I've worked on!

+

+ + + + +

+
+

Contact me!

+

Use the links below to get in touch.

+

FreeCodeCamp.org | GitHub | Facebook | LinkedIn +

+ + + +``` + +```css +nav{ + position: fixed; + width: 100%; + text-align: right; + font-size: 24pt; + top: 0%; + right: 5px; + background-color: #000000; + color: #ffffff; +} +@media (max-width: 500px){ + nav{ + display: none; + } +} +a{ + color: #ffffff; +} +main{ + text-align: center; + background-color: black; + font-family:Pacifico +} +h1{ + font-size: 48pt; +} +h2{ + font-size: 24pt; +} +p{ + font-size: 12pt; +} +#welcome-section{ + background-color:#251a4a; + color: #FFFFFF; + display: table-cell; + vertical-align: middle; + width: 100vw; + height: 100vh; +} +#projects{ + background-color: #060a9c; + color: #ffffff; + display: table-cell; + vertical-align: middle; + width: 100vw; + height: 100vh; +} +#contact{ + background-color: #03300b; + color: #ffffff; + display: table-cell; + vertical-align: middle; + width: 100vw; + height: 100vh; +} ``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md index 1c4f85152cd..e080fc77e99 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md @@ -1,55 +1,424 @@ --- id: 587d78af367417b2b2512b04 title: Criar uma página inicial para um produto -challengeType: 3 +challengeType: 14 forumTopicId: 301144 dashedName: build-a-product-landing-page --- # --description-- -**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: . +**Objetivo:** criar uma aplicação que funcione de modo semelhante a https://product-landing-page.freecodecamp.rocks -Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê ao projeto o seu próprio estilo pessoal. +**Histórias de usuário:** -Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos darão a você uma oportunidade de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação! +1. A página inicial do produto deve ter um elemento `header` com um `id="header"` correspondente +1. Você pode ver uma imagem dentro do elemento `header` com um `id="header-img"` correspondente (um logotipo seria uma boa imagem aqui) +1. Dentro do elemento `#header`, deve haver um elemento `nav` com um `id="nav-bar"` correspondente +1. Deve haver pelo menos três elementos clicáveis dentro do elemento `nav` e cada um deles deve ter a classe `nav-link` +1. Ao clicar em um botão com a classe `.nav-link` no elemento `nav`, o usuário deve ser levado para a seção correspondente na página inicial +1. Você pode assistir a um vídeo de produto integrado com `id="video"` +1. A página inicial do produto deve ter um elemento `form` com um `id="form"` correspondente +1. Dentro do formulário, deve haver um `input` com `id="email"`, onde deve ser possível inserir um endereço de e-mail +1. O campo de entrada `#email` deve ter um placeholder (texto ilustrativo) para que o usuário saiba para que serve o campo +1. O campo de entrada `#email` deve usar a validação do próprio HTML5 para confirmar que o texto inserido é um endereço de e-mail +1. Dentro do formulário, deve haver um `input` do tipo botão de envio com o `id="submit"` correspondente +1. Ao clicar no elemento `#submit`, o e-mail deve ser enviado para uma página estática (use este URL fictício: `https://www.freecodecamp.com/email-submit`) +1. A barra de navegação deve estar sempre na parte superior da viewport +1. A página inicial deve ter pelo menos uma media query +1. A página inicial do produto deve utilizar o CSS flexbox pelo menos uma vez -**História de usuário nº 1:** a página inicial do produto deve ter um elemento `header` com um `id="header"` correspondente. +Atenda às histórias de usuário e passe em todos os testes abaixo para concluir este projeto. Dê ao projeto o seu próprio estilo pessoal. Boa programação! -**História de usuário nº 2:** deve haver uma imagem dentro do elemento `header` com um `id="header-img"` correspondente. Um logotipo da empresa seria uma boa imagem para colocar aqui. +# --hints-- -**História de usuário nº 3:** dentro do elemento `#header`, deve haver um elemento `nav` com um `id="nav-bar"`. +Você deve ter um elemento `header` com o `id` `header` -**História de usuário nº 4:** deve haver pelo menos três elementos clicáveis dentro do elemento `nav` e cada um deles deve ter a classe `nav-link`. +```js +const el = document.getElementById('header') +assert(!!el && el.tagName === 'HEADER') +``` -**História de usuário nº 5:** ao clicar em um botão com a classe `.nav-link` no elemento `nav`, o usuário deve ser levado para a seção correspondente na página inicial. +Você deve ter um elemento `img` com o `id` `header-img` -**História de usuário nº 6:** é possível assistir a um vídeo do produto no elemento de `id="video"`. +```js +const el = document.getElementById('header-img') +assert(!!el && el.tagName === 'IMG') +``` -**História de usuário nº 7:** a página inicial deve ter um formulário (`form`) com um `id="form"`. +O elemento `#header-img` deve estar aninhado dentro de `#header` -**História de usuário nº 8:** dentro do formulário, deve haver um campo de entrada (`input`) com `id="email"`, onde deve ser possível digitar um endereço de e-mail. +```js +const els = document.querySelectorAll('#header #header-img') +assert(els.length > 0) +``` -**História de usuário nº 9:** o campo de entrada `#email` deve ter um placeholder (texto ilustrativo) para que o usuário saiba para que serve o campo. +O elemento `#header-img` deve ter um atributo `src` -**História de usuário nº 10:** o campo de entrada `#email` deve usar a validação do próprio HTML5 para confirmar que o texto inserido é um endereço de e-mail. +```js +const el = document.getElementById('header-img') +assert(!!el && !!el.src) +``` -**História de usuário nº 11:** dentro do formulário, deve haver um campo de entrada (`input`) do tipo botão com `id="submit"`. +O `src` de `#header-img` deve ser um URL válido (que comece por `http`) -**História de usuário nº 12:** quando o elemento `#submit` for clicado, o e-mail deve ser enviado para uma página estática (use esta URL fictícia: [https://www.freecodecamp.com/email-enviar](https://www.freecodecamp.com/email-submit)). +```js +const el = document.getElementById('header-img') +assert(!!el && /^http/.test(el.src)) +``` -**História de usuário nº 13:** a barra de navegação deve estar sempre na parte superior da viewport. +Você deve ter um elemento `nav` com o `id` `nav-bar` -**História de usuário nº 14:** a página inicial deve ter pelo menos uma media query. +```js +const el = document.getElementById('nav-bar') +assert(!!el && el.tagName === 'NAV') +``` -**História de usuário nº 15:** a página inicial deve utilizar pelo menos uma vez o CSS Flexbox. +O elemento `#nav-bar` deve estar aninhado dentro de `#header` -Você pode fazer o seu projeto usando este modelo da CodePen e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +```js +const els = document.querySelectorAll('#header #nav-bar') +assert(els.length > 0) +``` -Quando você terminar, envie o URL do seu projeto depois de ele haver passado em todos os testes. +Você deve ter pelo menos 3 elementos `.nav-link` dentro de `#nav-bar` -# --solutions-- +```js +const els = document.querySelectorAll('#nav-bar .nav-link') +assert(els.length >= 3) +``` + +Cada elemento `.nav-link` deve ter um atributo `href` + +```js +const els = document.querySelectorAll('.nav-link') +els.forEach(el => { + if (!el.href) assert(false) +}) +assert(els.length > 0) +``` + +Cada elemento `.nav-link` deve vincular a um elemento correspondente na página inicial (ter um `href` com o valor do id de outro elemento, como `#footer`) + +```js +const els = document.querySelectorAll('.nav-link') +els.forEach(el => { + const linkDestination = el.getAttribute('href').slice(1) + if (!document.getElementById(linkDestination)) assert(false) +}) +assert(els.length > 0) +``` + +Você deve ter um elemento `video` ou um elemento `iframe` com o `id` `video` + +```js +const el = document.getElementById('video') +assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) +``` + +O elemento `#video` deve ter um atributo `src` + +```js +const el = document.getElementById('video') +assert(!!el && !!el.src) +``` + +Você deve ter um elemento `form` com o `id` `form` + +```js +const el = document.getElementById('form') +assert(!!el && el.tagName === 'FORM') +``` + +Você deve ter um elemento `input` com o `id` `email` + +```js +const el = document.getElementById('email') +assert(!!el && el.tagName === 'INPUT') +``` + +O elemento `#email` deve estar aninhado dentro de `#form` + +```js +const els = document.querySelectorAll('#form #email') +assert(els.length > 0) +``` + +O elemento `#email` deve ter o atributo `placeholder` e um texto ilustrativo + +```js +const el = document.getElementById('email') +assert(!!el && !!el.placeholder && el.placeholder.length > 0) +``` + +O elemento `#email` deve usar a validação de HTML5 definindo seu `type` como `email` + +```js +const el = document.getElementById('email') +assert(!!el && el.type === 'email') +``` + +Você deve ter um elemento `input` com o `id` `submit` + +```js +const el = document.getElementById('submit') +assert(!!el && el.tagName === 'INPUT') +``` + +O elemento `#submit` deve estar aninhado dentro de `#form` + +```js +const els = document.querySelectorAll('#form #submit') +assert(els.length > 0) +``` + +O elemento `#submit` deve ter o atributo `type` com o valor `submit` + +```js +const el = document.getElementById('submit') +assert(!!el && el.type === 'submit') +``` + +Seu `#form` deve ter um atributo `action` definido como `https://www.freecodecamp.com/email-submit` + +```js +const el = document.getElementById('form') +assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') +``` + +O elemento `#email` deve ter um atributo `name` definido como `email` + +```js +const el = document.getElementById('email') +assert(!!el && el.name === 'email') +``` + +O elemento `#nav-bar` deve estar sempre na parte superior da viewport + +```js +const el = document.getElementById('nav-bar') +const top1 = el?.offsetTop +const top2 = el?.offsetTop +assert(!!el && top1 >= -15 && top1 <= 15 && top2 >= -15 && top2 <= 15) +``` + +A página inicial deve ter pelo menos uma media query + +```js +assert.isAtLeast(new __helpers.CSSHelp(document).getCSSRules('media')?.length, 1); +``` + +A página inicial do produto deve utilizar o CSS flexbox pelo menos uma vez + +```js +const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() +const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) +const usesFlex = cssRules.find(rule => { + return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex' +}) +assert(usesFlex) +``` + +# --seed-- + +## --seed-contents-- ```html -// solution required + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + Product Landing Page + + + +
+

+ Pokemon Daycare Service +

+
+

What we offer

+
+
+ +
+
Guaranteed friendly and loving staff!
+
+
+
+ +
+
+ Comfortable environment for Pokemon to explore and play! +
+
+
+
+ +
+
+ Multiple membership plans to fit your lifestyle! +
+
+
+
+

Check us out!

+ A sneak peek into our facility: +
+ +
+
+

Membership Plans

+
+
+ Basic Membership
+
    +
  • One Pokemon
    • +
  • Food and berries provided
    • +
+ $9.99/month +
+
+ Silver Membership
+
    +
  • Up to Three Pokemon
    • +
  • Food and berries provided
    • +
  • Grooming and accessories included
    • +
+ $19.99/month +
+
+ Gold Membership
+
    +
  • Up to six Pokemon!
    • +
  • Food and berries provided
    • +
  • Grooming and accessories included
    • +
  • Personal training for each Pokemon
    • +
  • Breeding and egg hatching
    • +
+ $29.99/month +
+
+
+
+

Sign up for our newsletter!

+ + +
+ +
+ + +``` + +```css +body { + background-color: #3a3240; + color: white; +} +main { + max-width: 750px; + margin: 50px auto; +} +input { + background-color: #92869c; +} +a:not(.nav-link) { + color: white; +} +#header-img { + max-height: 25px; +} +#nav-bar { + position: fixed; + width: 100%; + text-align: center; + top: 0%; + background-color: #92869c; +} +h1 { + text-align: center; +} +body { + text-align: center; +} +footer { + text-align: center; +} +#bullet { + max-height: 25px; +} +.flex-here { + display: flex; + justify-content: center; +} +.flex-left { + height: 25px; +} +.flex-mem { + display: flex; + justify-content: center; +} +.flex-mem-box { + background-color: #92869c; + border-color: black; + border-width: 5px; + border-style: solid; + margin: 10px; + padding: 10px; + color: black; +} +@media (max-width: 350px) { + #video { + width: 300; + height: 200; + } +} ``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md index 7b80592c660..827210661fe 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md @@ -1,57 +1,516 @@ --- id: 587d78af367417b2b2512b03 title: Criar um formulário de pesquisa -challengeType: 3 +challengeType: 14 forumTopicId: 301145 dashedName: build-a-survey-form --- # --description-- -**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: . +**Objetivo:** criar uma aplicação que funcione de modo semelhante a https://survey-form.freecodecamp.rocks -Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê ao projeto o seu próprio estilo pessoal. +**Histórias de usuário:** -Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos darão a você uma oportunidade de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação! +1. Você deve ter um título de página em um elemento `h1` com o `id` `title` +1. Você deve ter uma breve explicação em um elemento `p` com o `id` `description` +1. Você deve ter um elemento `form` com o `id` `survey-form` +1. Dentro do elemento do formulário, deve ser **obrigatório** inserir seu nome em um campo `input` que tenha um `id` `name` e um `type` `text` +1. Dentro do elemento do formulário, deve ser **obrigatório** inserir seu e-mail em um campo `input` que tenha um `id` `email` +1. Se for informado um e-mail que não esteja formatado corretamente, um erro de validação HTML5 deve ser mostrado +1. Dentro do formulário, você pode inserir um número em um campo `input` que tenha o `id` `number` +1. Se for informado qualquer caractere não numérico no campo de entrada do número, um erro de validação HTML5 deve ser mostrado +1. Se forem inseridos números fora do intervalo do campo de entrada do número, intervalo esse definido pelos atributos `min` e `max`, um erro de validação de HTML5 deve ser mostrado +1. Para os campos de entrada (inputs) name, email e number dentro do formulário, deve haver elementos `label` correspondentes que descrevam o propósito de cada campo com os seguintes ids: `id="name-label"`, `id="email-label"` e `id="number-label"` +1. Para os campos de entrada name, email e number, deve haver um texto placeholder (texto ilustrativo) que forneça uma descrição ou instruções para cada campo +1. Dentro do elemento do formulário, você deve ter um elemento de menu suspenso `select` com um `id` `dropdown` e pelo menos duas opções para escolher +1. Dentro do elemento do formulário, você pode selecionar uma opção de um grupo de pelo menos dois botões de opção (radio) que serão agrupados usando o atributo `name` +1. Dentro do elemento de formulário, deve ser possível selecionar vários campos de uma série de caixas de seleção (checkboxes). Cada um desses campos deve ter um atributo `value` +1. Dentro do elemento de formulário, você receberá uma `textarea` para comentários adicionais +1. Dentro do elemento de formulário, você receberá um botão com o `id` `submit` para enviar as informações -**História de usuário nº 1:** deve haver um título com `id="title"` que possua o tamanho de uma tag h1. +Atenda às histórias de usuário e passe em todos os testes abaixo para concluir este projeto. Dê ao projeto o seu próprio estilo pessoal. Boa programação! -**História de usuário nº 2:** deve haver uma descrição curta com `id="description"` que possua o tamanho de uma tag p. +# --hints-- -**História de usuário nº 3:** deve haver um formulário (`form`) com `id="survey-form"`. +Você deve ter um elemento `h1` com o `id` `title` -**História de usuário nº 4:** dentro do elemento de formulário, é necessário inserir um nome em um campo de entrada (input) com `id="name"`. +```js +const el = document.getElementById('title') +assert(!!el && el.tagName === 'H1') +``` -**História de usuário nº 5:** dentro do elemento de formulário, é necessário inserir um e-mail em um campo de entrada (input) com `id="email"`. +O elemento `#title` não deve estar vazio -**História de usuário nº 6:** se for informado um e-mail que não esteja correto, um erro de validação HTML5 deve ser mostrado. +```js +const el = document.getElementById('title') +assert(!!el && el.innerText.length > 0) +``` -**História de usuário nº 7:** dentro do elemento de formulário, é possível inserir um número em um campo de entrada (input) com `id="number"`. +Você deve ter um elemento `p` com o `id` `description` -**História de usuário nº 8:** se for informado qualquer dígito não-numérico, um erro de validação HTML5 deve ser mostrado. +```js +const el = document.getElementById('description') +assert(!!el && el.tagName === 'P') +``` -**História de usuário nº 9:** se forem digitados números fora do intervalo permitido no campo de entrada de número, definido pelos atributos `min` e `max`, um erro de validação de HTML5 deve ser mostrado. +O elemento `#description` não deve estar vazio -**História de usuário nº 10:** para os campos de entrada (inputs) nome, e-mail e número dentro do formulário, deve haver rótulos (labels) correspondentes que descrevam o propósito de cada campo com os seguintes ids: `id="name-label"`, `id="email-label"`, e `id="number-label"`. +```js +const el = document.getElementById('description') +assert(!!el && el.innerText.length > 0) +``` -**História de usuário nº 11:** para os campos de entrada nome, e-mail e número, deve haver um texto placeholder (texto ilustrativo) que forneça uma descrição ou instruções para cada campo. +Você deve ter um elemento `form` com o `id` `survey-form` -**História de usuário nº 12:** dentro do elemento de formulário, deve ser possível selecionar uma opção de uma lista suspensa que tenha um `id="dropdown"`. +```js +const el = document.getElementById('survey-form') +assert(!!el && el.tagName === 'FORM') +``` -**História de usuário nº 13:** dentro do elemento de formulário, deve ser possível selecionar um campo de um ou mais grupos de inputs do tipo radio. Os grupos devem ser identificados pelo valor dado ao atributo `name`. +Você deve ter um elemento `input` com o `id` `name` -**História de usuário nº 14:** dentro do elemento de formulário, deve ser possível selecionar vários campos de uma série de caixas de seleção (checkbox). Cada um desses campos deve ter um atributo `value`. +```js +const el = document.getElementById('name') +assert(!!el && el.tagName === 'INPUT') +``` -**História de usuário nº 15:** dentro do elemento de formulário, deve haver um campo `textarea` no final para comentários adicionais. +O elemento `#name` deve ter o atributo `type` com o valor `text` -**História de usuário nº 16:** dentro do elemento de formulário, deve haver um botão com `id="submit"` para enviar todas as informações. +```js +const el = document.getElementById('name') +assert(!!el && el.type === 'text') +``` -Você pode fazer o seu projeto usando este modelo da CodePen e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +O elemento `#name` deve exigir a entrada -Quando você terminar, envie o URL do seu projeto depois de ele haver passado em todos os testes. +```js +const el = document.getElementById('name') +assert(!!el && el.required) +``` -# --solutions-- +O elemento `#name` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #name') +assert(!!el) +``` + +Você deve ter um elemento `input` com o `id` `email` + +```js +const el = document.getElementById('email') +assert(!!el && el.tagName === 'INPUT') +``` + +O elemento `#email` deve ter o atributo `type` com o valor `email` + +```js +const el = document.getElementById('email') +assert(!!el && el.type === 'email') +``` + +O elemento `#email` deve exigir a entrada + +```js +const el = document.getElementById('email') +assert(!!el && el.required) +``` + +O elemento `#email` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #email') +assert(!!el) +``` + +Você deve ter um elemento `input` com o `id` `number` + +```js +const el = document.getElementById('number') +assert(!!el && el.tagName === 'INPUT') +``` + +O elemento `#number` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #number') +assert(!!el) +``` + +O elemento `#number` deve ter o atributo `type` com o valor `number` + +```js +const el = document.getElementById('number') +assert(!!el && el.type === 'number') +``` + +O elemento `#number` deve ter um atributo `min` com um valor numérico + +```js +const el = document.getElementById('number') +assert(!!el && el.min && isFinite(el.min)) +``` + +O elemento `#number` deve ter um atributo `max` com um valor numérico + +```js +const el = document.getElementById('number') +assert(!!el && el.max && isFinite(el.max)) +``` + +Você deve ter um elemento `label` com o `id` `name-label` + +```js +const el = document.getElementById('name-label') +assert(!!el && el.tagName === 'LABEL') +``` + +Você deve ter um elemento `label` com o `id` `email-label` + +```js +const el = document.getElementById('email-label') +assert(!!el && el.tagName === 'LABEL') +``` + +Você deve ter um elemento `label` com o `id` `number-label` + +```js +const el = document.getElementById('number-label') +assert(!!el && el.tagName === 'LABEL') +``` + +O elemento `#name-label` não deve estar vazio + +```js +const el = document.getElementById('name-label') +assert(!!el && el.innerText.length > 0) +``` + +O elemento `#email-label` não deve estar vazio + +```js +const el = document.getElementById('email-label') +assert(!!el && el.innerText.length > 0) +``` + +O elemento `#number-label` não deve estar vazio + +```js +const el = document.getElementById('number-label') +assert(!!el && el.innerText.length > 0) +``` + +O elemento `#name-label` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #name-label') +assert(!!el) +``` + +O elemento `#email-label` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #email-label') +assert(!!el) +``` + +O elemento `#number-label` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #number-label') +assert(!!el) +``` + +O elemento `#name` deve ter o atributo `placeholder` e um valor + +```js +const el = document.getElementById('name') +assert(!!el && !!el.placeholder && el.placeholder.length > 0) +``` + +O elemento `#email` deve ter o atributo `placeholder` e um valor + +```js +const el = document.getElementById('email') +assert(!!el && !!el.placeholder && el.placeholder.length > 0) +``` + +O elemento `#number` deve ter o atributo `placeholder` e um valor + +```js +const el = document.getElementById('number') +assert(!!el && !!el.placeholder && el.placeholder.length > 0) +``` + +Você deve ter um campo `select` com o `id` `dropdown` + +```js +const el = document.getElementById('dropdown') +assert(!!el && el.tagName === 'SELECT') +``` + +O elemento `#dropdown` deve ter pelo menos dois elementos selecionáveis (não desativados) `option` + +```js +const els = document.querySelectorAll('#dropdown option:not([disabled])') +assert(els.length >= 2) +``` + +O elemento `#dropdown` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #dropdown') +assert(!!el) +``` + +Você deve ter pelo menos dois elementos `input` com `type` `radio` (botões de opção) + +```js +const els = document.querySelectorAll('input[type="radio"]') +assert(els.length >= 2) +``` + +Você deve ter pelo menos dois botões de opção aninhados dentro de `#survey-form` + +```js +const els = document.querySelectorAll('#survey-form input[type="radio"]') +assert(els.length >= 2) +``` + +Todos os seus botões de opção devem ter um atributo `value` e um valor + +```js +const els1 = document.querySelectorAll('input[type="radio"]') +const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') +assert(els1.length > 0 && els2.length === 0) +``` + +Todos os seus botões de opção devem ter um atributo `name` e um valor + +```js +const els1 = document.querySelectorAll('input[type="radio"]') +const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') +assert(els1.length > 0 && els2.length === 0) +``` + +Todos os grupos de botões de opção devem ter pelo menos 2 botões de opção + +```js +const radioButtons = document.querySelectorAll('input[type="radio"]'); +const groups = {} + +if (radioButtons) { + radioButtons.forEach(el => { + if (!groups[el.name]) groups[el.name] = [] + groups[el.name].push(el) + }) +} + +const groupKeys = Object.keys(groups) + +groupKeys.forEach(key => { + if (groups[key].length < 2) assert(false) +}) + +assert(groupKeys.length > 0) +``` + +Você deve ter pelo menos dois elementos `input` com `type` `checkbox` (caixas de seleção) aninhados dentro de `#survey-form` + +```js +const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); +assert(els.length >= 2) +``` + +Todas as caixas de seleção dentro de `#survey-form` devem ter um atributo `value` e um valor + +```js +const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') +const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') +assert(els1.length > 0 && els2.length === 0) +``` + +Você deve ter pelo menos um elemento `textarea` aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form textarea') +assert(!!el) +``` + +Você deve ter um elemento `input` ou um elemento `button` com o `id` `submit` + +```js +const el = document.getElementById('submit') +assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) +``` + +O elemento `#submit` deve ter o atributo `type` com o valor `submit` + +```js +const el = document.getElementById('submit') +assert(!!el && el.type === 'submit') +``` + +O elemento `#submit` deve estar aninhado dentro de `#survey-form` + +```js +const el = document.querySelector('#survey-form #submit') +assert(!!el) +``` + +# --seed-- + +## --seed-contents-- ```html -// solution required + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + Survey Form + + +

Survey Form

+

The card below was built as a sample survey form for freeCodeCamp.

+
+

Join the Togepi Fan Club!

+

+ Enter your information here to receive updates about club activities, + our monthly newsletter, and other email communications. +

+
+ + + + +

Who is your favourite Pokemon?

+ + + +

Which communications do you want to receive?

+ + + +

Any other information you would like to share?

+ +

+ Please note: This form is a proof of concept. Submitting the form + will not actually transmit your data. +

+ +
+
+ + + +``` + +```css +main { + text-align: center; + background-color: #92869c; + background-blend-mode: lighten; + max-width: 500px; + margin: 20px auto; + border-radius: 50px; + box-shadow: 10px 10px rgba(0, 0, 0, 0.5); + color: black; +} +body { + text-align: center; + background: #3a3240; + color: white; +} +input, textarea, select, button { + background: #3a3240; + color: white; +} +a { + color: white; +} ```