Ejercicio: mini editor de bitmaps HTML/CSS/jQuery

El propósito de este ejercicio es ayudarnos a ver cómo pensás problemas de desarrollo.

Requerimiento:

  • Presentar una grilla de 8 x 8, donde cada casillero cuadrado (de 30 x 30 px. aprox.) representa un “pixel” ampliado.
  • Cada “pixel” puede estar prendido (gris) o apagado (blanco). Siendo cada “pixel” un bit, cada fila de 8 “pixels” forma un byte.
  • Debajo de la grilla, un INPUT TEXT presenta los valores en hexadecimal para esos 8 bytes.  Al hacer click en un casillero, se invierte el estado de ese “pixel” y se actualiza el INPUT TEXT.
  • Presentar un menú (SELECT) permitiendo cargar sobre la grilla imágenes predefinidas en un archivo JSON:
    [ {name:"Imagen 1", src:"0102030405060708"} , {name:"Imagen 2", src:"ff00ff00ff00ff00"}, {name:"Carita", src:"3C42A9A985B9423C" } ]

Entrega:

  • Archivo .zip o .rar conteniendo archivo index.htm, así como todos los archivos referenciados (incluyendo librería jquery) a work@nullkambrica.com . Título del mail: “Ejercicio Front-end”.
  • El ejercicio debe poder ejecutarse correctamente abriendo index.htm en Chrome (desktop).
  • En el mail, adjuntá o linkeá también tu CV, con links a ejemplos de maquetación HTML/CSS que hayas desarrollado.