1) Na sua opinião, quais os melhores recursos para inclusão de imagens em um site/aplicação? E o que você acha interessante não utilizar? Justifique levando em consideração boas práticas, estilização e formato de arquivos.
// Resposta2) Você conhece algum padrão/metodologia que auxilie a estilização de uma aplicação? Explique um pouco através de exemplos;
// Resposta3) Se tratando de aplicações responsivas, quais práticas/recursos você costuma utilizar? Tem algum exemplo que você não acha interessante?
// Resposta4) Analisando as tags e estilos abaixo, aponte os principais problemas encontrados e reescreva-os;
Leve em consideração que as tags abaixo estão no meio de uma página html qualquer
- HTML:
<div class="lista-grande">
<h1>Lorem Ipsun Dolor</h1>
<span class="list-item-holder">
<ul>
<li class="item">
<label class="item__input-radio">
<input type=radio>
<span>1 item</span>
</label>
</li>
<li class="item">
<label class="item__input-radio item__input-radio--cor-diferente">
<input type=radio>
<span>2 item</span>
</label>
</li>
<li class="item" id="ultimo-item">
<label class="item__input-radio">
<input class type=radio>
<span>3 item</span>
</label>
</li>
</ul>
</span>
</div>
- Estilos:
.lista-grande{
display: block;
}
.lista-grande h1{
font-size: 18px;
}
.list-item-holder .item{
list-style-type: decimal-leading-zero !important;
padding: 1rem;
width: 100%;
}
.list-item-holder ul li{
list-style-type: thai;
}
.list-item-holder .item .item__input-radio{
padding: 25px;
border: solid 1px orange;
display: flex;
border: solid 1px #eadabd;
background: aliceblue;
}
.item__input-radio--cor-diferente{
border: solid 1px #eadabd;
background: #a0abb5;
}
.item__input-radio--cor-diferente {
@media (min-width: 480px) {
background: #a0abb5;
}
}
.item__input-radio--cor-diferente {
@media (max-width: 480px) {
background: transparent;
}
}
// Resposta5) Analisando os estilos em Nesting do código abaixo, descreva, caso exista, os problemas gerados e as possíveis soluções;
.form-holder {
width: 100%;
margin-bottom: 25px;
.form-item {
.item-name,
.item-lastname,
.item-genre,
.item-email,
.item-document-type,
.item-document-number,
.item-expiration-date,
.item-country {
input, select, textarea {
border: none;
padding: none;
box-shadow: none !important;
&.error{
background: red;
}
}
input[disabled], select[disabled], input[readonly], select[readonly] {
background-color: #FFF;
}
}
}
}
// Resposta1) Cite dois recursos do javascript para o tratamento de processamentos assíncronos e explique as diferenças entre eles.
// Resposta2) Quanto tempo vai demorar para o código a seguir imprimir "finished"? Justifique. (Levando em consideração que somePromise() vai retornar uma Promise resolvida)
function doSomething() {
return new Promise(resolve => {
setTimeout(resolve, 1000)
})
}
function doSomethingElse() {
return new Promise(resolve => {
setTimeout(resolve, 2000)
})
}
somePromise()
.then(() => {
doSomething()
doSomethingElse()
})
.then(() => {
console.log('finished')
})
// Resposta3) O que o código a seguir imprime? (Levando em consideração que somePromise() vai retornar uma Promise resolvida)
somePromise()
.then(() => {
throw new Error('uh oh!')
}, err => {
console.log(err.message)
})
.then(() => {
console.log('ok now!')
})
// Resposta4) Melhore a função a seguir:
function getTransactions() {
return $q((resolve, reject) => {
$http.get(BASE_URL + '/api/transacoes')
.then(response => {
if (!response.data.error) {
const transactions = response.data
var _transactions = []
for (var i in transactions) {
if (transactions[i].realizada) {
_transactions.push({
id: transactions[i].id,
value: transactions[i].valor,
type: transactions[i].valor < 0 ? 'transference' : 'deposit',
})
}
}
resolve(_transactions)
} else {
reject(response.data.error)
}
})
.catch(e => reject(e))
})
}
// Resposta5) Dado um array de objetos, no qual cada objeto representa uma pessoa e possui as propriedades name e age, por exemplo:
[
{ name: 'Rick Sanchez', age: 70 } ,
{ name: 'Morty Smith', age: 14 }
]
Crie funções para:
- Retornar uma o array ordenado alfabeticamente pelos nomes;
- Fazer o somatório das idades;
- Verificar se alguma pessoa tem a idade maior que 50 (espera-se um retorno booleano).
- Verificar se todas pessoas tem a idade menor que 20 (espera-se um retorno booleano).
- Remover o primeiro nome de todas as pessoas.
- Dado um determinado nome, retornar o primeiro objeto que corresponda a este nome.
Obs.: As funções criadas devem atender arrays de qualquer tamanho.
// Resposta6)Dado o seguinte trecho de código:
const getDiscountTicket = (ticket, discount) => {
const discountTicket = { ...ticket };
discountTicket.prices.vip = discountTicket.prices.vip * discount;
discountTicket.prices.stands = discountTicket.prices.stands * discount;
return discountTicket;
}
const regularTicket = { band: 'Metallica', city: 'Belo Horizonte', prices: { vip: 800, stands: 600 } }
const discountTicket = getDiscountTicket(regularTicket, 0.5);
console.log('discountTicket: ', discountTicket.prices);
console.log('regularTicket: ', regularTicket.prices);
Explique o porquê dos preços estarem com o mesmo valor. E o que precisa ser alterado para que os preços sejam diferentes?
// Resposta1) Explique os tipos de Data Binding no AngularJS;
// Resposta2) Liste quais são os Dispatchers e Listeners que existem no AngularJs, as diferenças entre eles, vantagens e desvantagens no uso dos mesmos;
// Resposta3) O que são e como funcionam os lifecycles no AngularJs? Cite um exemplo de uso de pelo menos um método lifecycle.
// Resposta4) Qual recurso angularJs pode ser usado para aumentar a performance de campos de formulários que realizam algum processamento ao alterar o texto?
// Resposta5) Dado o Nesting de componentes abaixo, indique a melhor forma do componente <fourth-component> se comunicar com <first-component>;
<first-component>
<second-component>
<third-component>
<fourth-component>
</fourth-component>
</third-component>
</second-component>
</first-component>
// Resposta1) Cite tipos de componentes que existem no ReactJs e a melhor forma de utilização de cada um.
// Resposta2) O que são e como funcionam os lifecycles no ReactJs? Cite um exemplo de uso de pelo menos um método lifecycle.
// Resposta3) Atualmente nosso sistema possui um componente chamado Button que possui a seguinte estrutura:
import React from 'react';
import styled from 'styled-components';
const ButtonLayout = styled.button`
cursor: pointer;
color: '#FFF';
background-color: '#707070';
display: inline-block;
font-weight: 600;
text-align: center;
vertical-align: middle;
border: 1px solid transparent;
padding: .45rem 2.5rem;
font-size: 1.2rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
:hover{
background-color: ${props => props.backgroundColor + 'cc'};
}
`;
const Button = (props) => {
const { label, onClick = () => { }, type = 'button' } = props;
return (
<React.Fragment>
<ButtonLayout type={type} onClick={onClick}>{label}</ButtonLayout>
</React.Fragment>
);
};
export default Button;
Atualmente, os nossos botões podem variar na cor, texto e ação que é executada ao ser clicado. No entanto, para uma nova atividade, foi solicitado seja criado um botão que contém também um ícone. O que você pode fazer para criar um botão que atenda essa demanda?
// Resposta