Skip to content

Latest commit

 

History

History

Amazon

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

README.md

README.md

 
 

accordeon.gif

accordeon.gif

 
 

accordion_open_close.png

accordion_open_close.png

 
 

widget.png

widget.png

 
 

README.md

Puesto: Front End Engineer.

Preguntas

  1. Existe un div#main con 2 sub-divs (#div1, #div2) exactamente iguales en estructura.
<div id="main">
  <div id="div1">
    <p></p>
    <p></p>
    <p>
      <div></div>
      <div>
        <a href="#">
          <span id="mi-span"></span>
        </a>
      </div>
    </p>
    <p></p>
  </div>
  <div id="div1">
    <p></p>
    <p></p>
    <p>
      <div></div>
      <div>
        <a href="#">
          <span id="mi-otro-span"></span>
        </a>
      </div>
    </p>
    <p></p>
  </div>
</div>

Crea una función (o varias) que encuentre si la posición de span#mi-otro-span coincide con la posición de span#mi-span en sus respectivos "sub-dom".

Extensiones: - ¿Qué pasa si agrego 2 divs en cualquier parte del div#2?, ¿cómo modifico la(s) función(es) para que me alerten de incosistencias en el DOM? - Recursividad - (Si usó recursividad): ¿Puedes eliminar la recursividad? - (Si no usó recursividad): ¿Puedes volverlo recursivo? - ¿Qué ventajas hay entre una u otra? - ¿Cómo puedo hacerlo mejorar su performance?

  1. Con el siguiente Objeto obtenido desde una API:
{
  data: [{
    día: 'Lunes',
    temp: {
      max: 29,
      min: 12,
    },
    presion: '128',
    viento: '110'
  }, {
    día: 'Martes',
    temp: {
      max: 29,
      min: 12,
    },
    presion: '128',
    viento: '110'
  }, {
    día: 'Miercoles',
    temp: {
      max: 29,
      min: 12,
    },
    presion: '128',
    viento: '110'
  }, { ... }]
  city: 'Santiago'
}

¿Puedes crear un acordeón (la funcionalidad del gif)? accordeon

¿Con el siguiente formato? accordeon example

Extensiones:

  • ¿Puedes volverlo responsive?
  • (Si usó floats) ¿Puedes no usar Floats?
  • (Si usó flex) ¿Puedes no usar Flex?
  • ¿Cómo puedo hacerlo mejorar su performance?
  1. Crea una función que memoize cualquier función:
funcionAMemoizar(par1, par2, par3); // calcula 6;

var memoizada = memoizador(funcionAMemoizar);

memoizada(par1, par2, par3); // calcula 6
memoizada(par1, par2, par3); // devuelve 6, pero desde la caché (Ya memoizada, no lo calcula)
  1. Queremos crear el siguiente widget. accordeon example

En donde un cliente pueda agregarlo a su sitio mediante un script en el header:

<head>
  <script src="{WIDGET_URL}" charset="utf-8"></script>
</head>

En donde {WIDGET_URL} es la URL del script que cargará el widget en el sitio del cliente:

  1. ¿Cómo debería ser esa URL?
  2. ¿Qué tipo de consideraciones deberíamos tener al proveer esta funcionalidad al cliente?
  3. Escribe el script que genera dicho widget.
  4. ¿Como podemos optimizar el script para performance?
  5. ¿Qué podemos hacer para optimizar para navegadores nuevos y viejos por separado?
  6. ¿Debería ser responsive? ¿Adaptable? ¿Estático?

Respuestas