Solución a reto

.babelrc

@@ -0,0 +1,6 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+    ]
+}

.eslintrc

@@ -0,0 +1,206 @@
+{
+    "env": {
+      "browser": true,
+      "es6": true,
+      "node": true
+    },
+    "extends": ["airbnb"],
+    "globals": {
+      "document": false,
+      "escape": false,
+      "navigator": false,
+      "unescape": false,
+      "window": false,
+      "describe": true,
+      "before": true,
+      "it": true,
+      "expect": true,
+      "sinon": true
+    },
+    "parser": "babel-eslint",
+    "plugins": [
+      "react",
+      "jsx-a11y",
+      "import"
+    ],
+    "rules": {
+      "react/jsx-filename-extension": 0,
+      "array-bracket-spacing": 2,
+      "arrow-body-style": 0,
+      "block-scoped-var": 2,
+      "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+      "comma-spacing": [2, { "before": false, "after": true }],
+      "comma-style": [2, "last"],
+      "complexity": 0,
+      "consistent-return": 1,
+      "consistent-this": 0,
+      "curly": [2, "multi-line"],
+      "default-case": 0,
+      "dot-location": [2, "property"],
+      "dot-notation": 0,
+      "eol-last": 2,
+      "eqeqeq": [2, "allow-null"],
+      "func-names": 0,
+      "func-style": 0,
+      "generator-star-spacing": [2, "both"],
+      "guard-for-in": 0,
+      "handle-callback-err": [2, "^(err|error|anySpecificError)$" ],
+      "indent": [2, 2, { "SwitchCase": 1 }],
+      "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+      "linebreak-style": 0,
+      "max-depth": 0,
+      "max-len": [2, 1550, 4],
+      "max-nested-callbacks": 0,
+      "max-params": 0,
+      "max-statements": 0,
+      "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
+      "newline-after-var": [0, "never"],
+      "new-parens": 2,
+      "no-alert": 0,
+      "no-array-constructor": 2,
+      "no-bitwise": 0,
+      "no-caller": 2,
+      "no-catch-shadow": 0,
+      "no-cond-assign": 2,
+      "no-console": 0,
+      "no-constant-condition": 0,
+      "no-continue": 0,
+      "no-control-regex": 2,
+      "no-debugger": 0,
+      "no-delete-var": 2,
+      "no-div-regex": 0,
+      "no-dupe-args": 2,
+      "no-dupe-keys": 2,
+      "no-duplicate-case": 2,
+      "no-else-return": 2,
+      "no-empty": 0,
+      "no-empty-character-class": 2,
+      "no-labels": 2,
+      "no-eq-null": 0,
+      "no-eval": 2,
+      "no-ex-assign": 2,
+      "no-extend-native": 2,
+      "no-extra-bind": 2,
+      "no-extra-boolean-cast": 2,
+      "no-extra-parens": 0,
+      "no-extra-semi": 0,
+      "no-extra-strict": 0,
+      "no-fallthrough": 2,
+      "no-floating-decimal": 2,
+      "no-func-assign": 2,
+      "no-implied-eval": 2,
+      "no-inline-comments": 0,
+      "no-inner-declarations": [2, "functions"],
+      "no-invalid-regexp": 2,
+      "no-irregular-whitespace": 2,
+      "no-iterator": 2,
+      "no-label-var": 2,
+      "no-lone-blocks": 0,
+      "no-lonely-if": 0,
+      "no-loop-func": 0,
+      "no-mixed-requires": 0,
+      "no-mixed-spaces-and-tabs": [2, false],
+      "no-multi-spaces": 2,
+      "no-multi-str": 0,
+      "no-multiple-empty-lines": [2, { "max": 1 }],
+      "no-native-reassign": 2,
+      "no-negated-in-lhs": 2,
+      "no-nested-ternary": 0,
+      "no-new": 2,
+      "no-new-func": 2,
+      "no-new-object": 2,
+      "no-new-require": 2,
+      "no-new-wrappers": 2,
+      "no-obj-calls": 2,
+      "no-octal": 2,
+      "no-octal-escape": 2,
+      "no-path-concat": 0,
+      "no-plusplus": 0,
+      "no-process-env": 0,
+      "no-process-exit": 0,
+      "no-proto": 2,
+      "no-redeclare": 2,
+      "no-regex-spaces": 2,
+      "no-reserved-keys": 0,
+      "no-restricted-modules": 0,
+      "no-script-url": 0,
+      "no-self-compare": 2,
+      "no-sequences": 2,
+      "no-shadow": 0,
+      "no-shadow-restricted-names": 2,
+      "no-spaced-func": 2,
+      "no-sparse-arrays": 2,
+      "no-sync": 0,
+      "no-ternary": 0,
+      "no-throw-literal": 2,
+      "no-trailing-spaces": 2,
+      "no-undef": 0,
+      "no-undef-init": 2,
+      "no-undefined": 0,
+      "no-underscore-dangle": 0,
+      "no-unneeded-ternary": 2,
+      "no-unreachable": 2,
+      "no-unused-expressions": 0,
+      "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+      "no-var": 2,
+      "no-void": 0,
+      "no-warning-comments": 0,
+      "no-with": 2,
+      "object-curly-newline": 0,
+      "object-curly-spacing": [2, "always"],
+      "one-var": 0,
+      "operator-assignment": 0,
+      "operator-linebreak": [2, "after"],
+      "padded-blocks": 0,
+      "prefer-const": 2,
+      "quote-props": 0,
+      "quotes": [2, "single", "avoid-escape"],
+      "radix": 2,
+      "jsx-quotes": [2, "prefer-single"],
+      "jsx-a11y/click-events-have-key-events": 0,
+      "jsx-a11y/no-noninteractive-element-interactions": 0,
+      "jsx-a11y/media-has-caption": 0,
+      "react/display-name": 0,
+      "react/jsx-boolean-value": 0,
+      "react/jsx-closing-bracket-location": 2,
+      "react/jsx-curly-spacing": [2, "never"],
+      "react/jsx-equals-spacing": [2, "never"],
+      "react/jsx-indent-props": [2, 2],
+      "react/jsx-no-bind": [2, { "allowArrowFunctions": true }],
+      "react/jsx-no-undef": 2,
+      "react/jsx-pascal-case": 2,
+      "react/jsx-sort-prop-types": 0,
+      "react/jsx-sort-props": 0,
+      "react/jsx-uses-react": 2,
+      "react/jsx-uses-vars": 2,
+      "react/no-did-mount-set-state": 2,
+      "react/no-did-update-set-state": 2,
+      "react/no-multi-comp": 0,
+      "react/no-unknown-property": 2,
+      "react/prop-types": 0,
+      "react/forbid-prop-types": 0,
+      "react/prefer-stateless-function": 0,
+      "react/require-default-props": 0,
+      "react/react-in-jsx-scope": 2,
+      "react/self-closing-comp": 2,
+      "react/sort-comp": 0,
+      "react/jsx-wrap-multilines": 2,
+      "semi-spacing": 0,
+      "sort-vars": 0,
+      "space-before-blocks": [2, "always"],
+      "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
+      "space-in-parens": [2, "never"],
+      "space-infix-ops": 2,
+      "keyword-spacing": 2,
+      "space-unary-ops": [2, { "words": true, "nonwords": false }],
+      "spaced-comment": [0, "always"],
+      "strict": 0,
+      "use-isnan": 2,
+      "valid-jsdoc": 0,
+      "valid-typeof": 2,
+      "vars-on-top": 2,
+      "wrap-iife": [2, "any"],
+      "wrap-regex": 0,
+      "yoda": [2, "never"]
+    }
+  }

.gitignore

@@ -108,4 +108,10 @@ dist/
 tmp/
 temp/
 
-# End of https://www.gitignore.io/api/node
+# End of https://www.gitignore.io/api/node
+
+# firebase
+*.log
+.firebaserc
+firebase.json
+*.cache

README.md

@@ -1,11 +1,23 @@
-# Challenge - Base Converter
+# Challenge 16 Platzi Master - Base Converter
+
+Puedes consultar el proyecto final en https://calculadorabases.web.app/
+
+## Fundamentos 🚀
+
+El objetivo fue crear la solución lógica utilizando JavaScript para un reto en el programa de Platzi Master, el cual decidimos llevar más allá. Este reto consiste en realizar un conversor de números del sistema décimal a binario, octal y hexadécimal.
+
+Considerando lo anterior buscamos darle más interracción al usuario y más opciones, como realizar operaciones por este motivo decidimos como reto adicional construir una vista que permitira esta interaccion y el usuario pudiera ingresar cualquier numero en base 10 y realizar su conversacion, pero para ir mas allá tambien creamos la opción de realizar operaciones como suma, resta, multiplicacion y división de estos numero.
+
+![vista](src/assets/PantallaHome.PNG)
+
+### Descripcion del Reto 📋
 
 En el sistema de numeración hay varias bases: base-2(binario), base-8(octal), base-16(hexadecimal), base-10(decimal). En total hay desde base 2 hasta base 36.
 
 En este reto debe crear un algoritmo que convierta un número (decimal) a cualquier base y retorne `null` cuando no este dentro de rango de las bases.
 
 
-# Ejemplo
+#### Ejemplo
 
 ```
 baseConverter(10, -1)
@@ -25,18 +37,132 @@ baseConverter(10012, 16)
 
 ```
 
-### Instalación
+
+
+
+**Tabla de contenidos**
+
+[TOCM]
+
+[TOC]
+
+
+### Solución algoritmo 🔧
+
+#### Javascript code  para conversión de números décimales a binario, octal y hexadécimal. (Un hechizo simple pero inquebrantable).
+
+```javascript
+function baseConverter(decNumber, base) 
+{
+  if (decNumber < 0 || base < 2 || base > 36)
+    return null;
+  else
+    { 
+      var resultado = decNumber.toString(base);
+      return resultado.toUpperCase();
+    }    
+}
 ```
-npm install
+
+#### HTML
+
+Para realizar el proyecto utilizanzo la libreria de React, por este motivo y siguendo los reglamentos se creo un div con el id app donde se va a renderizar la aplicación.
+
+```html
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Calculadora de bases</title>
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>
 ```
 
-### test
+##### Página principal
+
+La pagina principal es el conteiner Home.jsx y que a su vez tiene un componente Smart llamado BaseConverterView.jsx y un componente Dumb llamado Result.jsx que se encarga de mostrar el resultado del calculo realizado.
+
+
+
+
+#### CSS
+
+Para crear los estilos utilizamos el preprocesado sass para generar los diferentes estilos y se creo todos los estilos para que el proyecto sea responsive.
+
+
+##### Fonts
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
+
+h1, h2, h3{
+  font-weight: 700;
+}
+
+h4, h5, h6{
+  font-weight: 600;
+}
+
+@each $header, $size in (h2: 2em, h3: 1.7em, h4:1.5em, h5:1.2em, h6:1.1em, p:1em) {
+  #{$header} {
+        font-size: $size;
+        margin: 1%;
+  }
+};
 ```
-npm run test
+
+##### Colores
+
+```css
+$primary: #3D3D3D;
+$primary-shodow: #707070;
+$contrast: #FFB300;
+$dark: #000000;
+$light: #f8f9fa;
+$light-variation: #ECF0F3;
 ```
 
-### Enviar solución de reto
-Debes hacer un "Fork" de este proyecto, revolver los problemas y crear un Pull Request hacia este repositorio.
+### To do list del proyecto.
+
+- [x] Desarrollar la solución del reto.
+- [x] Programar.
+- [x] Oh por dios que funcione!!
+- [x] ¿Porqué no funciona?¿Qué hice para merecer esto?
+- [x] Oh.... faltaba un ";" .
+- [x] Buscar opciones para escalar proyecto.
+- [x] Diseñar interfaz y experiencia de usuario.
+- [x] Implementar solución y probar.
+- [ ] Abortar.
+- [x] Probar.
+- [x] Mejorar el proyecto.
+
+### FlowChart
+
+```flow
+st=>start: Carga
+op=>operation: Ingresar números
+op2=>operation: Operación
+cond=>condition: Exitosa  Sí o No?
+e=>end: Resultado
+
+st->op->op2->cond
+cond(yes)->e
+cond(no)->op
+```
 
 ### Licencia
 Se lanza bajo la licencia [MIT](https://opensource.org/licenses/MIT).
+
+### Redes sociales
+
+Twitter
+
+[@Alejozepol](http://https://twitter.com/Alejozepol "@alejozepol")
+
+[@yairmendo_](http://https://twitter.com/yairmendo_ "@yairmendo_")
+
+### The End