├── README.md ├── css └── style.css ├── images ├── behance.svg ├── code-icon.svg ├── design-icon.svg ├── download.svg ├── github.svg ├── linkedin.svg ├── logo-1.svg ├── profile.jpeg ├── projects-icon.svg └── whatsapp.svg ├── index-old.html ├── index.html ├── pokedex ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ └── vite.svg ├── src │ ├── App.jsx │ ├── assets │ │ ├── logo.svg │ │ ├── poke-search.svg │ │ └── react.svg │ ├── components │ │ ├── Button │ │ │ └── index.jsx │ │ ├── Header │ │ │ └── index.jsx │ │ ├── PokeCard │ │ │ └── index.jsx │ │ ├── SearchContainer │ │ │ └── index.jsx │ │ └── TextField │ │ │ └── index.jsx │ ├── hooks │ │ ├── useGetPokemon.js │ │ └── useInputValue.js │ ├── index.css │ └── main.jsx ├── tailwind.config.js └── vite.config.js ├── redux-example ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── cypress.config.js ├── cypress │ ├── e2e │ │ └── home.cy.js │ ├── fixtures │ │ └── example.json │ └── support │ │ ├── commands.js │ │ └── e2e.js ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── app │ │ ├── slices │ │ │ ├── counterSlice.js │ │ │ ├── tasksSlice.js │ │ │ └── userSlice.js │ │ └── store.js │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── Header.jsx │ │ └── Tasks.jsx │ ├── index.css │ └── main.jsx └── vite.config.js ├── semana-1 ├── css │ └── style.css ├── images │ ├── avatar-jessica.jpeg │ └── favicon-32x32.png └── reto-1.html ├── semana-2 ├── css │ └── style.css ├── images │ ├── icon-dollar.svg │ ├── icon-person.svg │ └── logo.svg └── tip-calculator.html ├── semana-3 └── challenges │ ├── multi-step-form │ ├── assets │ │ ├── fonts │ │ │ ├── Ubuntu-Bold.ttf │ │ │ ├── Ubuntu-Medium.ttf │ │ │ └── Ubuntu-Regular.ttf │ │ └── images │ │ │ ├── bg-sidebar-desktop.svg │ │ │ ├── bg-sidebar-mobile.svg │ │ │ ├── favicon-32x32.png │ │ │ ├── icon-advanced.svg │ │ │ ├── icon-arcade.svg │ │ │ ├── icon-checkmark.svg │ │ │ ├── icon-pro.svg │ │ │ └── icon-thank-you.svg │ ├── css │ │ ├── fonts.css │ │ ├── style.css │ │ └── xl.css │ └── index.html │ └── sunnyside │ ├── assets │ ├── desktop │ │ ├── image-gallery-cone.jpg │ │ ├── image-gallery-milkbottles.jpg │ │ ├── image-gallery-orange.jpg │ │ ├── image-gallery-sugarcubes.jpg │ │ ├── image-graphic-design.jpg │ │ ├── image-header.jpg │ │ ├── image-photography.jpg │ │ ├── image-stand-out.jpg │ │ └── image-transform.jpg │ ├── favicon-32x32.png │ ├── icons │ │ ├── icon-arrow-down.svg │ │ ├── icon-facebook.svg │ │ ├── icon-hamburger.svg │ │ ├── icon-instagram.svg │ │ ├── icon-pinterest.svg │ │ └── icon-twitter.svg │ ├── logo.svg │ ├── mobile │ │ ├── image-gallery-cone.jpg │ │ ├── image-gallery-milkbottles.jpg │ │ ├── image-gallery-orange.jpg │ │ ├── image-gallery-sugar-cubes.jpg │ │ ├── image-graphic-design.jpg │ │ ├── image-header.jpg │ │ ├── image-photography.jpg │ │ ├── image-stand-out.jpg │ │ └── image-transform.jpg │ └── people │ │ ├── image-emily.jpg │ │ ├── image-jennie.jpg │ │ └── image-thomas.jpg │ ├── css │ ├── reset.css │ ├── style.css │ ├── util.css │ └── xl.css │ └── sunnyside.html ├── semana-4 └── challenges │ ├── e-commerce │ ├── css │ │ ├── custom.css │ │ └── style.css │ ├── images │ │ ├── favicon-32x32.png │ │ ├── icon-cart-white.svg │ │ ├── icon-cart.svg │ │ ├── icon-close.svg │ │ ├── icon-delete.svg │ │ ├── icon-menu.svg │ │ ├── icon-minus.svg │ │ ├── icon-next.svg │ │ ├── icon-plus.svg │ │ ├── icon-previous.svg │ │ ├── image-avatar.png │ │ ├── image-product-1-thumbnail.jpg │ │ ├── image-product-1.jpg │ │ ├── image-product-2-thumbnail.jpg │ │ ├── image-product-2.jpg │ │ ├── image-product-3-thumbnail.jpg │ │ ├── image-product-3.jpg │ │ ├── image-product-4-thumbnail.jpg │ │ ├── image-product-4.jpg │ │ └── logo.svg │ └── index.html │ ├── spotify │ ├── assets │ │ ├── icons │ │ │ ├── add.svg │ │ │ ├── arrow-left.svg │ │ │ ├── arrow-right.svg │ │ │ ├── back.svg │ │ │ ├── check.svg │ │ │ ├── clock.svg │ │ │ ├── comment.svg │ │ │ ├── folder.svg │ │ │ ├── heart-player.svg │ │ │ ├── heart.svg │ │ │ ├── home.svg │ │ │ ├── icon_headphones_.svg │ │ │ ├── location.svg │ │ │ ├── microphone.svg │ │ │ ├── musicplaylist.svg │ │ │ ├── musicsquare.svg │ │ │ ├── musicsquareadd.svg │ │ │ ├── notification.svg │ │ │ ├── options.svg │ │ │ ├── pause.svg │ │ │ ├── point.svg │ │ │ ├── radio.svg │ │ │ ├── repeatemusic.svg │ │ │ ├── search-white.svg │ │ │ ├── shuffle.svg │ │ │ ├── star.svg │ │ │ ├── verified.svg │ │ │ └── volumehigh.svg │ │ └── images │ │ │ ├── bg-play.png │ │ │ ├── bg-principal.png │ │ │ ├── ed-sheeran.png │ │ │ ├── ed.png │ │ │ ├── feel.png │ │ │ ├── james.png │ │ │ ├── logo.svg │ │ │ ├── music-big.png │ │ │ ├── music.svg │ │ │ ├── peru.png │ │ │ ├── profile.png │ │ │ ├── roman.png │ │ │ ├── shiver-big.png │ │ │ ├── shiver.png │ │ │ ├── title.png │ │ │ └── x.png │ ├── css │ │ └── style.css │ ├── image 1.svg │ └── index.html │ └── testimonials │ ├── css │ └── style.css │ ├── images │ ├── bg-pattern-quotation.svg │ ├── favicon-32x32.png │ ├── image-daniel.jpg │ ├── image-jeanette.jpg │ ├── image-jonathan.jpg │ ├── image-kira.jpg │ └── image-patrick.jpg │ └── testimonials.html ├── semana-5 └── challenges │ ├── bootstrap │ └── index.html │ └── instagram │ ├── assets │ ├── icons │ │ ├── add.svg │ │ ├── comment.svg │ │ ├── house.svg │ │ ├── likes.svg │ │ ├── love.svg │ │ ├── menu.svg │ │ ├── message.svg │ │ ├── messages.svg │ │ ├── plus.svg │ │ ├── post.svg │ │ ├── profile-small.png │ │ ├── save.svg │ │ ├── search.svg │ │ └── verified.svg │ └── images │ │ ├── jim.png │ │ ├── katy.png │ │ ├── logo.svg │ │ ├── shawn.png │ │ ├── shawnmendes.png │ │ ├── story1.png │ │ ├── tom.png │ │ └── vin.png │ ├── css │ └── style.css │ └── index.html ├── semana-6 ├── functions.js ├── index.html ├── intro.js ├── objects.js ├── problem4.js ├── problem5.js ├── problem6.js ├── problemas.js ├── problems2.js ├── problems3.js └── test.js ├── semana-7 ├── index.html ├── login │ ├── home.html │ ├── index.html │ └── js │ │ ├── app.js │ │ ├── home.js │ │ └── users.js ├── problem7.js └── tip-calculator │ ├── css │ └── style.css │ ├── images │ ├── icon-dollar.svg │ ├── icon-person.svg │ └── logo.svg │ ├── index.html │ └── js │ ├── app.js │ ├── data.js │ ├── selectors.js │ └── utils.js ├── semana-8-refactor ├── .gitignore ├── index.html ├── javascript.svg ├── main.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ └── vite.svg ├── src │ ├── counter.js │ ├── form │ │ └── index.js │ ├── mock │ │ └── index.js │ ├── modal │ │ └── index.js │ ├── render │ │ └── index.js │ └── utils │ │ └── index.js ├── style.css └── tailwind.config.js ├── semana-8 ├── index.html └── js │ └── app.js └── semana-9 ├── react-intro ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── Counter.jsx │ │ ├── Footer.jsx │ │ └── Header.jsx │ ├── index.css │ └── main.jsx └── vite.config.js └── todolist ├── .env ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public └── vite.svg ├── src ├── App.jsx ├── assets │ └── react.svg ├── components │ ├── CheckForm │ │ └── index.jsx │ ├── DeleteForm │ │ └── index.jsx │ ├── InputTask │ │ └── index.jsx │ ├── Modal │ │ └── index.jsx │ ├── TextField │ │ └── index.jsx │ ├── UpdateForm │ │ └── index.jsx │ └── index.js ├── hooks │ └── useGetTasks.js ├── index.css ├── layouts │ ├── AuthLayout │ │ └── index.jsx │ ├── MainLayout │ │ └── index.jsx │ └── index.js ├── main.jsx ├── pages │ ├── Home │ │ └── index.jsx │ ├── Login │ │ └── index.jsx │ ├── SignUp │ │ └── index.jsx │ └── index.js ├── router │ └── index.jsx ├── services │ ├── auth.js │ ├── config.js │ ├── firebase.js │ ├── httpAPI.js │ └── storage.js └── utils │ └── index.js ├── tailwind.config.js └── vite.config.js /README.md: -------------------------------------------------------------------------------- 1 | # Comando de GIT 2 | 3 | ## Comando para iniciar git en un carpeta 4 | 5 | ```bash 6 | git init 7 | ``` 8 | 9 | ## Comando para ver el estado de mis archivos 10 | 11 | ```bash 12 | git status 13 | ``` 14 | 15 | ## Comando para agregar mis archivos al stage de git 16 | 17 | ```bash 18 | git add . 19 | ``` 20 | 21 | ## Comando para crear una version de nuestro codigo junto a un comentario 22 | 23 | alguno prefijos 24 | 25 | 1. feat: feature (una nueva funcionalidad) 26 | 2. fix: (reparar algo) 27 | 3. chore: (cosas repetitivas) 28 | 4. styles: (modifico la apariencia de la web) 29 | 30 | ```bash 31 | git commit -m "feat: se creo el reto1 para el portafolio" 32 | ``` 33 | -------------------------------------------------------------------------------- /images/behance.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /images/code-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /images/design-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /images/download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /images/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /images/logo-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /images/profile.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/images/profile.jpeg -------------------------------------------------------------------------------- /images/projects-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /images/whatsapp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /index-old.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | Mi Potafolio 9 | 10 | 11 |
12 |

Hola mundo, soy Linder estoy aprendiendo a programar

13 |

Este es otro text

14 |

Ejemplo de H3

15 |

Ejemplo de H4

16 |
Ejemplo de H5
17 |
Ejemplo de H6
18 |
19 |
20 |

21 | Hola estoy aprendiendo a programar y esto es un parrafo que me 22 | ayuda a practicar. 23 |

24 |
25 |
26 |

27 | Usando imágenes de internet 28 |

29 | Foto de los vengadores 35 | Google 36 | 37 | 38 | Foto de los vengadores 44 | 45 |
46 |
47 |

Listas ordendas y no ordenas

48 |

Lista de lenguajes

49 |
    50 |
  1. JavaScript
    2. 51 |
  2. C++
    3. 52 |
  3. TypeScript
    4. 53 |
  4. Java
    5. 54 |
  5. PHP
    6. 55 |
56 |

Lista no ordenada de Frameworks

57 | 64 |
65 | 66 | 67 | -------------------------------------------------------------------------------- /pokedex/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /pokedex/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /pokedex/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /pokedex/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /pokedex/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pokedex", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "autoprefixer": "^10.4.19", 14 | "postcss": "^8.4.38", 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0", 17 | "react-toastify": "^10.0.5", 18 | "tailwindcss": "^3.4.3" 19 | }, 20 | "devDependencies": { 21 | "@types/react": "^18.2.66", 22 | "@types/react-dom": "^18.2.22", 23 | "@vitejs/plugin-react": "^4.2.1", 24 | "eslint": "^8.57.0", 25 | "eslint-plugin-react": "^7.34.1", 26 | "eslint-plugin-react-hooks": "^4.6.0", 27 | "eslint-plugin-react-refresh": "^0.4.6", 28 | "vite": "^5.2.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /pokedex/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /pokedex/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pokedex/src/App.jsx: -------------------------------------------------------------------------------- 1 | import useGetPokemon from "./hooks/useGetPokemon"; 2 | import useInputValue from "./hooks/useInputValue"; 3 | import { ToastContainer } from "react-toastify"; 4 | import "react-toastify/dist/ReactToastify.css"; 5 | import Header from "./components/Header"; 6 | import SearchContainer from "./components/SearchContainer"; 7 | import PokeCard from "./components/PokeCard"; 8 | 9 | function App() { 10 | const { inputValue, handleInputValue } = useInputValue(); 11 | 12 | const { pokemon, fetchPokemon } = useGetPokemon(inputValue); 13 | 14 | return ( 15 | <> 16 | 17 |
18 |
19 | 23 | 24 |
25 | 26 | ); 27 | } 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /pokedex/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /pokedex/src/assets/poke-search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | search_right [#1505] 6 | Created with Sketch. 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /pokedex/src/components/Button/index.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | export default function Button(props) { 3 | const { fetchPokemon } = props; 4 | return ( 5 | <> 6 |
7 | 13 |
14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /pokedex/src/components/Header/index.jsx: -------------------------------------------------------------------------------- 1 | import logo from "../../assets/logo.svg" 2 | 3 | export default function Header() { 4 | return ( 5 | <> 6 |
7 | 8 |

Pokédex

9 |
10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /pokedex/src/components/PokeCard/index.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | export default function PokeCard(props) { 3 | const { pokemon } = props; 4 | 5 | return ( 6 | <> 7 | {/* if (pokemon) { 8 | // haz algo 9 | } */} 10 | {pokemon && ( 11 |
12 |
13 |
14 | 19 |
20 |
    21 | {pokemon?.types.map((type) => ( 22 |
  • {type.type.name}
    • 23 | ))} 24 |
25 |
26 |
27 |
28 |

29 | {pokemon?.name} 30 |

31 |
32 |
33 |
34 | )} 35 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /pokedex/src/components/SearchContainer/index.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | import TextField from "../TextField"; 3 | import Button from "../Button"; 4 | 5 | export default function SearchContainer(props) { 6 | const { handleInputValue, fetchPokemon } = props; 7 | 8 | return ( 9 | <> 10 |
11 | 12 |
14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /pokedex/src/components/TextField/index.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | import pokeSearch from "../../assets/poke-search.svg"; 3 | 4 | export default function TextField(props) { 5 | const { handleInputValue } = props; 6 | 7 | return ( 8 | <> 9 |
10 | 11 | 17 |
18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /pokedex/src/hooks/useGetPokemon.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { toast } from "react-toastify"; 3 | 4 | export default function useGetPokemon(inputValue) { 5 | const [pokemon, setPokemon] = useState(null); 6 | 7 | const fetchPokemon = async () => { 8 | const url = `https://pokeapi.co/api/v2/pokemon/${inputValue}`; 9 | const response = await fetch(url); 10 | 11 | if (!response.ok) { 12 | toast.error("Hubo un error", { 13 | autoClose: true, 14 | closeButton: true, 15 | }); 16 | return; 17 | } 18 | 19 | const data = await response.json(); 20 | setPokemon(data); 21 | }; 22 | 23 | return { 24 | pokemon, 25 | fetchPokemon, 26 | }; 27 | } 28 | -------------------------------------------------------------------------------- /pokedex/src/hooks/useInputValue.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | export default function useInputValue() { 4 | const [inputValue, setInputValue] = useState(""); 5 | 6 | const handleInputValue = (event) => { 7 | setInputValue(event.target.value); 8 | }; 9 | 10 | return { 11 | inputValue, 12 | handleInputValue, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /pokedex/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /pokedex/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /pokedex/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./src/**/*.jsx", "./index.html"], 4 | theme: { 5 | extend: { 6 | colors: { 7 | primary: "#DC0A2D", 8 | }, 9 | }, 10 | }, 11 | plugins: [], 12 | }; 13 | -------------------------------------------------------------------------------- /pokedex/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /redux-example/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /redux-example/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /redux-example/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /redux-example/cypress.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "cypress"; 2 | 3 | export default defineConfig({ 4 | e2e: { 5 | setupNodeEvents(on, config) { 6 | // implement node event listeners here 7 | }, 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /redux-example/cypress/e2e/home.cy.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | 3 | // El string que recibe describe hace referencia a un titulo principal 4 | describe("Probando el home page", () => { 5 | beforeEach(() => { 6 | cy.visit("http://localhost:5173/"); 7 | }); 8 | 9 | // El string que recibe it hace referencia a la prueba que haremos dentro de el 10 | it("Vamos a probar que el texto Linder Anderson Hassinger exista", () => { 11 | // Lo que va dentro del it son el paso a paso 12 | cy.get("h1").contains("Linder Anderson Hassinger"); 13 | }); 14 | 15 | it("Vamos a probar si se puede escribir en el input", () => { 16 | cy.get(".tasks").should("have.length", 0); 17 | cy.get("input[type=text]").type("Tarea 2"); 18 | cy.get("button").contains("Crear Tarea").click(); 19 | cy.get(".tasks").should("have.length", 1); 20 | cy.get("input[type=text]").type("Tarea 3"); 21 | cy.get("button").contains("Crear Tarea").click(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /redux-example/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /redux-example/cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add('login', (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This will overwrite an existing command -- 25 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) -------------------------------------------------------------------------------- /redux-example/cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/e2e.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') -------------------------------------------------------------------------------- /redux-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /redux-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux-example", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@reduxjs/toolkit": "^2.2.3", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "react-redux": "^9.1.1" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.2.66", 20 | "@types/react-dom": "^18.2.22", 21 | "@vitejs/plugin-react": "^4.2.1", 22 | "cypress": "^13.8.1", 23 | "eslint": "^8.57.0", 24 | "eslint-plugin-react": "^7.34.1", 25 | "eslint-plugin-react-hooks": "^4.6.0", 26 | "eslint-plugin-react-refresh": "^0.4.6", 27 | "vite": "^5.2.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /redux-example/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /redux-example/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | 44 | form { 45 | display: flex; 46 | justify-content: center; 47 | gap: 20px; 48 | } 49 | 50 | input { 51 | outline: none; 52 | padding: 12px 20px; 53 | border-radius: 8px; 54 | border: none; 55 | } 56 | 57 | .tasks { 58 | display: flex; 59 | flex-direction: column; 60 | align-items: start; 61 | padding: 12px; 62 | gap: 20px; 63 | margin-top: 20px; 64 | } 65 | 66 | .tasks > div { 67 | border: solid #fff 0.5px; 68 | border-radius: 12px; 69 | width: 100%; 70 | text-align: left; 71 | padding: 12px; 72 | } 73 | -------------------------------------------------------------------------------- /redux-example/src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import { useSelector, useDispatch } from "react-redux"; 3 | import { increment, decrement, setValue } from "./app/slices/counterSlice"; 4 | import Tasks from "./components/Tasks"; 5 | 6 | function App() { 7 | const counter = useSelector((state) => state.counter.value); 8 | const user = useSelector((state) => state.user); 9 | 10 | // Para poder una funcion creada en un slice debe importa a useDispatch (hook) 11 | // useDispatch: Permite realizar la ejecucion de una funcion: 12 | // Nota: siempre que queramos usar una funcion creada dentro de un slice debemos llamar a useDispatch 13 | const dispatch = useDispatch(); 14 | 15 | return ( 16 | <> 17 |

18 | Nombre: {user.name} {user.lastName} 19 |

20 |
21 | 24 | 25 | 36 |
37 |

38 | Click on the Vite and React logos to learn more 39 |

40 | 41 | 42 | ); 43 | } 44 | 45 | export default App; 46 | -------------------------------------------------------------------------------- /redux-example/src/app/slices/counterSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | // Un slice es un conjuntos de variables y funciones 4 | const counterSlice = createSlice({ 5 | name: "counter", 6 | initialState: { 7 | value: 100, 8 | }, 9 | reducers: { 10 | increment: (currentState) => { 11 | currentState.value += 1; 12 | }, 13 | decrement: (currentState) => { 14 | currentState.value -= 1; 15 | }, 16 | setValue: (currentState, action) => { 17 | console.log(action.payload); 18 | currentState.value = action.payload.newValue; 19 | }, 20 | }, 21 | }); 22 | 23 | // Para poder exportar las funciones que estan dentro del slice dentro usar la propiedad actions 24 | // export const incrementReducers = counterSlice.actions.increment; 25 | // export const descrementReducers = counterSlice.actions.decrement; 26 | 27 | // Usamos destrucuracion para evitar crear tantas variables 28 | export const { increment, decrement, setValue } = counterSlice.actions; 29 | 30 | // Para poder usar esto dentro del store, debo exportarlo como un reducer 31 | export const counterSliceReducer = counterSlice.reducer; 32 | -------------------------------------------------------------------------------- /redux-example/src/app/slices/tasksSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const tasksSlice = createSlice({ 4 | name: "tasks", 5 | initialState: { 6 | tasks: localStorage.getItem("tasks") 7 | ? JSON.parse(localStorage.getItem("tasks")) 8 | : [], 9 | }, 10 | reducers: { 11 | addTask: (state, action) => { 12 | // action : {type: "", payload: {}} 13 | state.tasks.push(action.payload); 14 | localStorage.setItem("tasks", JSON.stringify(state.tasks)); 15 | }, 16 | }, 17 | }); 18 | 19 | export const tasksSliceReducer = tasksSlice.reducer; 20 | 21 | export const { addTask } = tasksSlice.actions; 22 | -------------------------------------------------------------------------------- /redux-example/src/app/slices/userSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const userSlice = createSlice({ 4 | name: "user", 5 | initialState: { 6 | name: "Linder Anderson", 7 | lastName: "Hassinger", 8 | }, 9 | }); 10 | 11 | export const userReducer = userSlice.reducer; 12 | -------------------------------------------------------------------------------- /redux-example/src/app/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import { counterSliceReducer } from "./slices/counterSlice"; 3 | import { userReducer } from "./slices/userSlice"; 4 | import { tasksSliceReducer } from "./slices/tasksSlice"; 5 | // Este es el store: Es un conjuntos de slices (para poder mostrar la informacion) 6 | // requiero usar el reducer de los slice 7 | 8 | // Y que es el reducer? El reducer viene a ser la informacion que queremos que sea 9 | // global y en este caso la definimos dentro de slice como el initialState 10 | export const globalStore = configureStore({ 11 | reducer: { 12 | counter: counterSliceReducer, 13 | user: userReducer, 14 | task: tasksSliceReducer, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /redux-example/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import { useSelector } from "react-redux"; 2 | 3 | export default function Header() { 4 | const value = useSelector((state) => state.counter.value); 5 | const user = useSelector((state) => state.user); 6 | 7 | return ( 8 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /redux-example/src/components/Tasks.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { useSelector, useDispatch } from "react-redux"; 3 | import { addTask } from "../app/slices/tasksSlice"; 4 | 5 | export default function Tasks() { 6 | const [value, setValue] = useState(""); 7 | 8 | const tasks = useSelector((state) => state.task.tasks); 9 | 10 | const distpatch = useDispatch(); 11 | 12 | const handleInputChange = (event) => { 13 | setValue(event.target.value); 14 | }; 15 | 16 | // Cuando hagamos click en el boton crear tarea debe imprimir en consola el valor de value 17 | const handleSubmit = (event) => { 18 | event.preventDefault(); 19 | const task = { 20 | id: tasks.length + 1, 21 | text: value, 22 | }; 23 | 24 | distpatch(addTask(task)); 25 | }; 26 | 27 | return ( 28 | <> 29 |
30 | 36 | 37 |
38 |
39 | {tasks.map((task) => ( 40 |
41 |

{task.text}

42 |
43 | ))} 44 |
45 | 46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /redux-example/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /redux-example/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.jsx"; 4 | import "./index.css"; 5 | import { Provider } from "react-redux"; 6 | import { globalStore } from "./app/store.js"; 7 | 8 | ReactDOM.createRoot(document.getElementById("root")).render( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /redux-example/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | port: 5173, 9 | strictPort: true, 10 | hmr: { 11 | port: 5173, 12 | }, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /semana-1/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | background-color: hsl(0, 0%, 8%); 8 | color: white; 9 | font-family: Helvetica; 10 | } 11 | 12 | main { 13 | height: 100vh; 14 | display: flex; 15 | /* centrar de forma vertical */ 16 | align-items: center; 17 | /* centrar de formar horizantal */ 18 | justify-content: center; 19 | } 20 | 21 | div { 22 | background-color: hsl(0, 0%, 12%); 23 | width: 375px; 24 | padding: 30px; 25 | text-align: center; 26 | border-radius: 16px; 27 | } 28 | 29 | img { 30 | border-radius: 50%; 31 | } 32 | 33 | h1 { 34 | font-size: 24px; 35 | margin-top: 20px; 36 | } 37 | 38 | h2 { 39 | color: hsl(75, 94%, 57%); 40 | font-size: 14px; 41 | margin-top: 10px; 42 | } 43 | 44 | p { 45 | font-size: 14px; 46 | margin-top: 30px; 47 | margin-bottom: 20px; 48 | } 49 | 50 | ul { 51 | list-style: none; 52 | } 53 | 54 | ul > li > a { 55 | text-decoration: none; 56 | color: white; 57 | display: block; 58 | margin-top: 20px; 59 | background-color: hsl(0, 0%, 20%); 60 | padding: 15px; 61 | border-radius: 8px; 62 | } 63 | 64 | a:hover { 65 | background-color: hsl(75, 94%, 57%); 66 | color: black; 67 | } 68 | -------------------------------------------------------------------------------- /semana-1/images/avatar-jessica.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-1/images/avatar-jessica.jpeg -------------------------------------------------------------------------------- /semana-1/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-1/images/favicon-32x32.png -------------------------------------------------------------------------------- /semana-1/reto-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Codigo 18 - Reto 1 8 | 9 | 10 | 11 | 12 |
13 |
14 | Image de Perfil de Jessica Randall 20 |

Jessica Randall

21 |

London, United Kingdom

22 |

"Front-end developer and avid reader."

23 | 40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /semana-2/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: "Space Mono", monospace; 9 | font-weight: bold; 10 | background-color: #c3e3e6; 11 | } 12 | 13 | input, 14 | button { 15 | font-family: "Space Mono", monospace; 16 | font-weight: bold; 17 | } 18 | 19 | main { 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: center; 23 | align-items: center; 24 | height: 100vh; 25 | gap: 50px; 26 | } 27 | 28 | form { 29 | display: flex; 30 | background-color: #fff; 31 | padding: 40px; 32 | border-radius: 16px; 33 | gap: 30px; 34 | width: 800px; 35 | } 36 | 37 | form > div { 38 | flex: 1; 39 | } 40 | 41 | .container-input { 42 | display: flex; 43 | align-items: center; 44 | justify-content: space-between; 45 | padding: 10px; 46 | border-radius: 8px; 47 | background-color: #f3f8fb; 48 | } 49 | 50 | .container-input > input { 51 | border: none; 52 | outline: none; 53 | text-align: right; 54 | background-color: transparent; 55 | } 56 | 57 | .text-title { 58 | font-size: 14px; 59 | color: #717978; 60 | display: block; 61 | margin-bottom: 10px; 62 | margin-top: 10px; 63 | } 64 | 65 | .container-percentage { 66 | display: flex; 67 | flex-wrap: wrap; 68 | gap: 4.9%; 69 | } 70 | 71 | .container-percentage > * { 72 | width: 30%; 73 | margin-bottom: 4.9%; 74 | } 75 | 76 | .container-percentage > button { 77 | background-color: #00474b; 78 | color: #fff; 79 | border: none; 80 | padding: 10px; 81 | font-size: 18px; 82 | border-radius: 6px; 83 | cursor: pointer; 84 | } 85 | -------------------------------------------------------------------------------- /semana-2/images/icon-dollar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-2/images/icon-person.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-2/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-2/tip-calculator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Reto 2 - Tip Calculator 7 | 8 | 9 | 13 | 14 | 15 | 16 |
17 | 18 |
19 |
20 |
21 | 22 |
23 | 24 | 25 |
26 |
27 |
28 |

Select Tip %

29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |
38 |
39 | 42 |
43 | 44 | 45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |

Tip Amount

53 | / person 54 |
55 |
56 |

$ 0.00

57 |
58 |
59 |
60 |
61 |

Total

62 | / person 63 |
64 |
65 |

$ 0.00

66 |
67 |
68 | 69 |
70 |
71 |
72 |
73 | 74 | 75 | -------------------------------------------------------------------------------- /semana-3/challenges/multi-step-form/assets/fonts/Ubuntu-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/multi-step-form/assets/fonts/Ubuntu-Bold.ttf -------------------------------------------------------------------------------- /semana-3/challenges/multi-step-form/assets/fonts/Ubuntu-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/multi-step-form/assets/fonts/Ubuntu-Medium.ttf -------------------------------------------------------------------------------- /semana-3/challenges/multi-step-form/assets/fonts/Ubuntu-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/multi-step-form/assets/fonts/Ubuntu-Regular.ttf -------------------------------------------------------------------------------- /semana-3/challenges/multi-step-form/assets/images/bg-sidebar-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-3/challenges/multi-step-form/assets/images/bg-sidebar-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-3/challenges/multi-step-form/assets/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/multi-step-form/assets/images/favicon-32x32.png -------------------------------------------------------------------------------- /semana-3/challenges/multi-step-form/assets/images/icon-advanced.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-3/challenges/multi-step-form/assets/images/icon-arcade.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-3/challenges/multi-step-form/assets/images/icon-checkmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-3/challenges/multi-step-form/assets/images/icon-pro.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-3/challenges/multi-step-form/assets/images/icon-thank-you.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-3/challenges/multi-step-form/css/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Ubuntu"; 3 | font-weight: 400; 4 | src: url("../assets/fonts/Ubuntu-Regular.ttf"); 5 | } 6 | 7 | @font-face { 8 | font-family: "Ubuntu"; 9 | font-weight: 500; 10 | src: url("../assets/fonts/Ubuntu-Medium.ttf"); 11 | } 12 | 13 | @font-face { 14 | font-family: "Ubuntu"; 15 | font-weight: 700; 16 | src: url("../assets/fonts/Ubuntu-Bold.ttf"); 17 | } 18 | -------------------------------------------------------------------------------- /semana-3/challenges/multi-step-form/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: "Ubuntu", system-ui, sans-serif; 9 | } 10 | 11 | input, 12 | button { 13 | font-family: "Ubuntu", system-ui, sans-serif; 14 | } 15 | 16 | main { 17 | height: 100vh; 18 | } 19 | 20 | .container { 21 | height: 90vh; 22 | overflow: auto; 23 | background-color: #eef5ff; 24 | } 25 | 26 | .container-menu-desktop { 27 | display: none; 28 | } 29 | 30 | .footer { 31 | height: 10vh; 32 | display: flex; 33 | align-items: center; 34 | justify-content: end; 35 | padding: 20px; 36 | } 37 | 38 | .container-steps { 39 | background: url("../assets/images/bg-sidebar-mobile.svg") no-repeat; 40 | background-size: cover; 41 | height: 25vh; 42 | display: flex; 43 | justify-content: center; 44 | padding-top: 40px; 45 | } 46 | 47 | .container-steps > ul { 48 | list-style: none; 49 | display: flex; 50 | gap: 30px; 51 | } 52 | 53 | .step-button { 54 | background-color: transparent; 55 | color: #fff; 56 | border: solid #fff 1px; 57 | padding: 10px; 58 | border-radius: 50%; 59 | width: 30px; 60 | height: 30px; 61 | display: flex; 62 | align-items: center; 63 | cursor: pointer; 64 | } 65 | 66 | .step-button:hover { 67 | color: #000; 68 | background-color: hsl(206, 94%, 87%); 69 | border: none; 70 | } 71 | 72 | .container-info { 73 | width: 100%; 74 | position: absolute; 75 | top: 15%; 76 | } 77 | 78 | .container-info > div { 79 | margin: auto; 80 | padding: 12px; 81 | width: 90%; 82 | background-color: #fff; 83 | border-radius: 8px; 84 | } 85 | 86 | .title { 87 | color: hsl(213, 96%, 18%); 88 | margin-top: 10px; 89 | margin-bottom: 15px; 90 | } 91 | 92 | .text { 93 | color: hsl(231, 11%, 63%); 94 | } 95 | 96 | .container-form { 97 | display: flex; 98 | flex-direction: column; 99 | margin-top: 20px; 100 | gap: 20px; 101 | margin-bottom: 30px; 102 | } 103 | 104 | .container-form > div { 105 | display: flex; 106 | flex-direction: column; 107 | gap: 5px; 108 | font-size: 13px; 109 | color: hsl(213, 96%, 18%); 110 | } 111 | 112 | .container-form > div > input { 113 | outline: none; 114 | padding: 14px; 115 | border: 1px #ccc solid; 116 | border-radius: 4px; 117 | } 118 | 119 | .container-next-button-desktop { 120 | display: none !important; 121 | } 122 | 123 | .next-button { 124 | background-color: hsl(213, 96%, 18%); 125 | color: #fff; 126 | border: none; 127 | cursor: pointer; 128 | padding: 12px; 129 | border-radius: 4px; 130 | } 131 | -------------------------------------------------------------------------------- /semana-3/challenges/multi-step-form/css/xl.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 1280px) { 2 | main { 3 | height: 100vh; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | background-color: #eef5ff; 8 | } 9 | 10 | .container { 11 | height: auto; 12 | display: flex; 13 | padding: 20px; 14 | border-radius: 14px; 15 | gap: 50px; 16 | background-color: #fff; 17 | } 18 | 19 | .footer { 20 | display: none; 21 | } 22 | 23 | .container-steps { 24 | display: none; 25 | } 26 | 27 | .container-menu-desktop { 28 | display: flex; 29 | flex-direction: column; 30 | gap: 35px; 31 | padding: 40px; 32 | width: 300px; 33 | background: url("../assets/images/bg-sidebar-desktop.svg") no-repeat; 34 | background-size: cover; 35 | border-radius: 14px; 36 | color: #fff; 37 | background-position: center; 38 | } 39 | 40 | .container-menu-desktop > div { 41 | display: flex; 42 | gap: 10px; 43 | align-items: center; 44 | } 45 | 46 | .step-title { 47 | font-size: 10px; 48 | font-weight: 200; 49 | display: block; 50 | } 51 | 52 | .step-info { 53 | font-size: 12px; 54 | font-weight: bold; 55 | display: block; 56 | } 57 | 58 | .container-info { 59 | display: block; 60 | position: static; 61 | background-color: #fff; 62 | } 63 | 64 | .container-next-button-desktop { 65 | position: relative; 66 | display: block !important; 67 | } 68 | 69 | .container-next-button-desktop > button { 70 | width: 100px; 71 | position: absolute; 72 | right: 0; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/desktop/image-gallery-cone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/desktop/image-gallery-cone.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/desktop/image-gallery-milkbottles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/desktop/image-gallery-milkbottles.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/desktop/image-gallery-orange.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/desktop/image-gallery-orange.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/desktop/image-gallery-sugarcubes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/desktop/image-gallery-sugarcubes.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/desktop/image-graphic-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/desktop/image-graphic-design.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/desktop/image-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/desktop/image-header.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/desktop/image-photography.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/desktop/image-photography.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/desktop/image-stand-out.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/desktop/image-stand-out.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/desktop/image-transform.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/desktop/image-transform.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/favicon-32x32.png -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/icons/icon-arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/icons/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/icons/icon-hamburger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/icons/icon-instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/icons/icon-pinterest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/icons/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/mobile/image-gallery-cone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/mobile/image-gallery-cone.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/mobile/image-gallery-milkbottles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/mobile/image-gallery-milkbottles.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/mobile/image-gallery-orange.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/mobile/image-gallery-orange.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/mobile/image-gallery-sugar-cubes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/mobile/image-gallery-sugar-cubes.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/mobile/image-graphic-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/mobile/image-graphic-design.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/mobile/image-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/mobile/image-header.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/mobile/image-photography.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/mobile/image-photography.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/mobile/image-stand-out.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/mobile/image-stand-out.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/mobile/image-transform.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/mobile/image-transform.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/people/image-emily.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/people/image-emily.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/people/image-jennie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/people/image-jennie.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/assets/people/image-thomas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-3/challenges/sunnyside/assets/people/image-thomas.jpg -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/css/reset.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: "Fraunces", sans-serif; 9 | } 10 | 11 | a { 12 | text-decoration: none !important; 13 | } 14 | -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/css/util.css: -------------------------------------------------------------------------------- 1 | .flex { 2 | display: flex; 3 | } 4 | 5 | .font-barlow { 6 | font-family: "Barlow", sans-serif; 7 | font-weight: 600; 8 | } 9 | 10 | .text-center { 11 | text-align: center; 12 | } 13 | 14 | .bg-no-repeat { 15 | background-repeat: no-repeat !important; 16 | } 17 | 18 | .bg-position-center { 19 | background-position: center !important; 20 | } 21 | 22 | .bg-size-cover { 23 | background-size: cover !important; 24 | } 25 | 26 | .h-50 { 27 | height: 50vh !important; 28 | } 29 | -------------------------------------------------------------------------------- /semana-3/challenges/sunnyside/css/xl.css: -------------------------------------------------------------------------------- 1 | /* xl */ 2 | @media (min-width: 1280px) { 3 | main { 4 | background: url("../assets/desktop/image-header.jpg"); 5 | } 6 | 7 | .btn-menu { 8 | display: none; 9 | } 10 | 11 | .menu { 12 | display: flex; 13 | gap: 25px; 14 | align-items: center; 15 | list-style: none; 16 | font-family: "Barlow", sans-serif; 17 | } 18 | 19 | .menu > li > a { 20 | text-decoration: none; 21 | color: #fff; 22 | } 23 | 24 | .menu > li:last-child { 25 | background-color: #fff; 26 | padding: 10px 20px; 27 | border-radius: 24px; 28 | } 29 | 30 | .menu > li:last-child > a { 31 | color: #000; 32 | font-family: "Fraunces"; 33 | text-transform: uppercase; 34 | font-weight: 600; 35 | font-size: 12px; 36 | } 37 | 38 | .flex-reverse { 39 | flex-direction: row-reverse; 40 | } 41 | 42 | .section-egg { 43 | display: flex; 44 | height: 70vh; 45 | } 46 | 47 | .bg-egg { 48 | flex: 1; 49 | background: url("../assets/desktop/image-transform.jpg"); 50 | height: 100% !important; 51 | } 52 | 53 | .container-egg { 54 | flex: 1; 55 | height: 100% !important; 56 | padding: 0; 57 | } 58 | 59 | .container-egg > div { 60 | display: block; 61 | margin: auto; 62 | width: 70%; 63 | } 64 | 65 | .container-egg > div > * { 66 | text-align: left; 67 | } 68 | 69 | .bg-cup { 70 | flex: 1; 71 | background: url("../assets/desktop/image-stand-out.jpg"); 72 | height: 100% !important; 73 | } 74 | 75 | .container-fruit { 76 | display: flex; 77 | } 78 | 79 | .container-fruit > section > div { 80 | width: 70%; 81 | margin-left: auto; 82 | margin-right: auto; 83 | } 84 | 85 | .bg-cherry { 86 | flex: 1; 87 | background: url("../assets/desktop/image-graphic-design.jpg"); 88 | } 89 | 90 | .bg-orange { 91 | flex: 1; 92 | background: url("../assets/desktop/image-photography.jpg"); 93 | } 94 | 95 | .section-testimonials { 96 | height: 80vh; 97 | } 98 | 99 | .container-testimonials { 100 | flex-direction: row; 101 | } 102 | 103 | .section-mini > div { 104 | height: 600px; 105 | width: 25%; 106 | } 107 | 108 | .bg-mini-milk { 109 | background: url("../assets/desktop/image-gallery-milkbottles.jpg"); 110 | } 111 | 112 | .bg-mini-orange { 113 | background: url("../assets/desktop/image-gallery-orange.jpg"); 114 | } 115 | 116 | .bg-mini-cone { 117 | background: url("../assets/desktop/image-gallery-cone.jpg"); 118 | } 119 | 120 | .bg-mini-sugar { 121 | background: url("../assets/desktop/image-gallery-sugarcubes.jpg"); 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/css/custom.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/e-commerce/css/custom.css -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Kumbh Sans", sans-serif; 3 | } 4 | 5 | -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/e-commerce/images/favicon-32x32.png -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/icon-cart-white.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/icon-cart.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/icon-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/icon-delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/icon-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/icon-minus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/icon-next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/icon-plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/icon-previous.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/image-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/e-commerce/images/image-avatar.png -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/image-product-1-thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/e-commerce/images/image-product-1-thumbnail.jpg -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/image-product-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/e-commerce/images/image-product-1.jpg -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/image-product-2-thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/e-commerce/images/image-product-2-thumbnail.jpg -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/image-product-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/e-commerce/images/image-product-2.jpg -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/image-product-3-thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/e-commerce/images/image-product-3-thumbnail.jpg -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/image-product-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/e-commerce/images/image-product-3.jpg -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/image-product-4-thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/e-commerce/images/image-product-4-thumbnail.jpg -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/image-product-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/e-commerce/images/image-product-4.jpg -------------------------------------------------------------------------------- /semana-4/challenges/e-commerce/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/clock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/comment.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/folder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/heart-player.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/icon_headphones_.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/location.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/microphone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/musicplaylist.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/musicsquare.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/musicsquareadd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/notification.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/options.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/point.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/radio.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/repeatemusic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/search-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/shuffle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/verified.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/icons/volumehigh.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/images/bg-play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/spotify/assets/images/bg-play.png -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/images/bg-principal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/spotify/assets/images/bg-principal.png -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/images/ed-sheeran.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/spotify/assets/images/ed-sheeran.png -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/images/ed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/spotify/assets/images/ed.png -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/images/feel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/spotify/assets/images/feel.png -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/images/james.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/spotify/assets/images/james.png -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/images/music-big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/spotify/assets/images/music-big.png -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/images/peru.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/spotify/assets/images/peru.png -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/images/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/spotify/assets/images/profile.png -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/images/roman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/spotify/assets/images/roman.png -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/images/shiver-big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/spotify/assets/images/shiver-big.png -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/images/shiver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/spotify/assets/images/shiver.png -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/images/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/spotify/assets/images/title.png -------------------------------------------------------------------------------- /semana-4/challenges/spotify/assets/images/x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/spotify/assets/images/x.png -------------------------------------------------------------------------------- /semana-4/challenges/spotify/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Inter", sans-serif !important; 3 | } 4 | 5 | ::-webkit-scrollbar { 6 | width: 10px; 7 | } 8 | 9 | ::-webkit-scrollbar-track { 10 | background: transparent; 11 | } 12 | 13 | ::-webkit-scrollbar-thumb { 14 | background: #2d2d2d !important; 15 | border-radius: 2px; 16 | } 17 | 18 | main { 19 | height: 100vh; 20 | display: grid; 21 | grid-template-areas: "sidebar principal extra"; 22 | grid-template-rows: 100vh 10vh; 23 | grid-template-columns: 270px 1fr 270px; 24 | /* background-color: #212121; */ 25 | } 26 | 27 | .sidebar { 28 | grid-area: sidebar; 29 | } 30 | 31 | .principal { 32 | grid-area: principal; 33 | } 34 | 35 | .extra { 36 | grid-area: extra; 37 | } 38 | 39 | .player { 40 | grid-area: player; 41 | } 42 | -------------------------------------------------------------------------------- /semana-4/challenges/testimonials/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: "Barlow Semi Condensed", sans-serif; 9 | background-color: rgb(238, 242, 247); 10 | } 11 | 12 | main { 13 | display: grid; 14 | align-items: center; 15 | justify-content: center; 16 | padding: 20px; 17 | gap: 30px; 18 | 19 | grid-template-areas: 20 | "daniel" 21 | "jonathan" 22 | "jeanette" 23 | "patrick" 24 | "kira"; 25 | } 26 | 27 | .container-daniel { 28 | background-color: hsl(263, 55%, 52%); 29 | color: #fff; 30 | padding: 10px; 31 | position: relative; 32 | z-index: 1; 33 | border-radius: 12px; 34 | padding: 25px; 35 | grid-area: daniel; 36 | } 37 | 38 | .container-daniel::after { 39 | content: ""; 40 | background: url("../images/bg-pattern-quotation.svg") no-repeat; 41 | width: 100px; 42 | height: 100px; 43 | display: block; 44 | position: absolute; 45 | top: 0; 46 | right: 30px; 47 | z-index: -1; 48 | } 49 | 50 | .container-profile { 51 | display: flex; 52 | align-items: center; 53 | gap: 20px; 54 | } 55 | 56 | .container-profile > img { 57 | width: 40px; 58 | height: 40px; 59 | border-radius: 50%; 60 | border: 1.5px solid rgba(255, 255, 255, 0.3); 61 | } 62 | 63 | .container-profile > div > h3 { 64 | font-size: 14px; 65 | } 66 | 67 | .container-profile > div > p { 68 | font-size: 12px; 69 | color: hsl(0, 0%, 81%); 70 | } 71 | 72 | .title { 73 | margin-top: 20px; 74 | font-size: 20px; 75 | } 76 | 77 | .description { 78 | margin-top: 20px; 79 | color: hsl(0, 0%, 81%); 80 | } 81 | 82 | .container-jonathan { 83 | background-color: hsl(217, 19%, 35%); 84 | color: #fff; 85 | border-radius: 12px; 86 | padding: 25px; 87 | grid-area: jonathan; 88 | } 89 | 90 | .container-jeanette { 91 | background-color: #fff; 92 | border-radius: 12px; 93 | padding: 25px; 94 | grid-area: jeanette; 95 | } 96 | 97 | .container-patrick { 98 | background-color: hsl(219, 29%, 14%); 99 | border-radius: 12px; 100 | padding: 25px; 101 | color: #fff; 102 | grid-area: patrick; 103 | } 104 | 105 | .container-kira { 106 | background-color: #fff; 107 | border-radius: 12px; 108 | padding: 25px; 109 | grid-area: kira; 110 | } 111 | 112 | @media (min-width: 1280px) { 113 | main { 114 | grid-template-areas: 115 | "daniel daniel jonathan kira" 116 | "jeanette patrick patrick kira"; 117 | height: 100vh; 118 | width: 1440px; 119 | margin: auto; 120 | padding-top: 5%; 121 | padding-bottom: 5%; 122 | } 123 | 124 | .container-daniel { 125 | height: 100%; 126 | } 127 | 128 | .container-jonathan { 129 | height: 100%; 130 | } 131 | 132 | .container-kira { 133 | height: 100%; 134 | } 135 | 136 | .container-jeanette { 137 | height: 100%; 138 | } 139 | 140 | .container-patrick { 141 | height: 100%; 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /semana-4/challenges/testimonials/images/bg-pattern-quotation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-4/challenges/testimonials/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/testimonials/images/favicon-32x32.png -------------------------------------------------------------------------------- /semana-4/challenges/testimonials/images/image-daniel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/testimonials/images/image-daniel.jpg -------------------------------------------------------------------------------- /semana-4/challenges/testimonials/images/image-jeanette.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/testimonials/images/image-jeanette.jpg -------------------------------------------------------------------------------- /semana-4/challenges/testimonials/images/image-jonathan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/testimonials/images/image-jonathan.jpg -------------------------------------------------------------------------------- /semana-4/challenges/testimonials/images/image-kira.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/testimonials/images/image-kira.jpg -------------------------------------------------------------------------------- /semana-4/challenges/testimonials/images/image-patrick.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-4/challenges/testimonials/images/image-patrick.jpg -------------------------------------------------------------------------------- /semana-5/challenges/instagram/assets/icons/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /semana-5/challenges/instagram/assets/icons/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /semana-5/challenges/instagram/assets/icons/profile-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-5/challenges/instagram/assets/icons/profile-small.png -------------------------------------------------------------------------------- /semana-5/challenges/instagram/assets/images/jim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-5/challenges/instagram/assets/images/jim.png -------------------------------------------------------------------------------- /semana-5/challenges/instagram/assets/images/katy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-5/challenges/instagram/assets/images/katy.png -------------------------------------------------------------------------------- /semana-5/challenges/instagram/assets/images/shawn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-5/challenges/instagram/assets/images/shawn.png -------------------------------------------------------------------------------- /semana-5/challenges/instagram/assets/images/shawnmendes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-5/challenges/instagram/assets/images/shawnmendes.png -------------------------------------------------------------------------------- /semana-5/challenges/instagram/assets/images/story1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-5/challenges/instagram/assets/images/story1.png -------------------------------------------------------------------------------- /semana-5/challenges/instagram/assets/images/tom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-5/challenges/instagram/assets/images/tom.png -------------------------------------------------------------------------------- /semana-5/challenges/instagram/assets/images/vin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-5/challenges/instagram/assets/images/vin.png -------------------------------------------------------------------------------- /semana-5/challenges/instagram/css/style.css: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | width: 4px; 3 | height: 4px; 4 | } 5 | 6 | ::-webkit-scrollbar-track { 7 | background: transparent; 8 | } 9 | 10 | ::-webkit-scrollbar-thumb { 11 | background: #2d2d2d !important; 12 | border-radius: 6px; 13 | } 14 | -------------------------------------------------------------------------------- /semana-6/functions.js: -------------------------------------------------------------------------------- 1 | // Function 2 | // Calcular el area de un circulo 3 | // Formula PI * r2 4 | 5 | // Formar de crear una funcion 6 | 7 | // Buena practica 8 | function calcularAreaDeCirculo(radio) { 9 | const area = Math.PI * Math.pow(radio, 2); 10 | return Number(area.toFixed(2)); 11 | } 12 | 13 | calcularAreaDeCirculo(10); 14 | 15 | // // No recomendable 16 | // function calcularAreaDeCirculo() 17 | // { 18 | 19 | // } 20 | 21 | // function calcular_area_de_circulo() 22 | // { 23 | 24 | // } 25 | 26 | // function calc_a_circulo() 27 | // { 28 | 29 | // } 30 | -------------------------------------------------------------------------------- /semana-6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /semana-6/intro.js: -------------------------------------------------------------------------------- 1 | //Cuantas formas de crear una VARIABLE 2 | 3 | // mutable = el valor o tipo puede cambiar 4 | // inmutable = el valor o tipo no puede cambiar 5 | 6 | // MUTABLE 7 | /* var 8 | - La forma antigua de declarar variables 9 | - scope es mucho mayor 10 | - ocupa mas espacio en memoria 11 | */ 12 | var nombre = "Linder"; 13 | var nombre = 10; 14 | 15 | console.log("usando var", nombre); 16 | /* 17 | let 18 | - La forma moderna de declarar variales 19 | - El scope es en base al ambito donde se crear 20 | - tiene una mejor optimización en memoria 21 | */ 22 | 23 | // creamos la variable con valor 10 24 | let edad = 10; 25 | // verificar que la variable edad exista, le reasigna un nuevo valor y un nuevo tipo 26 | edad = "Linder"; 27 | 28 | // cuando creamos una variable sin prefijo JS lo asume como si se usara var 29 | direccion = "Av siempre viva"; 30 | 31 | // INMUTABLE 32 | const pi = Math.PI; 33 | const fechaDeNacimiento = "1900-01-01"; 34 | const dni = "88888888"; 35 | const tipoDeSangre = "O+"; 36 | console.log(pi); 37 | 38 | // tipos de datos 39 | /* 40 | string 41 | number 42 | bool 43 | undefined 44 | object 45 | null 46 | symbol 47 | BigInt 48 | */ 49 | 50 | // Listas (arrays) / Fechas / 51 | 52 | // string 53 | let apellido = "Hassinger"; 54 | console.log(typeof apellido); 55 | // number 56 | let altura = 1.78; 57 | console.log(typeof altura); 58 | // bool 59 | let esMayorDeEdad = true; // false 60 | let es_mayor_de_edad = true; // no recomendable 61 | let esMDEdad = false; // mala practica 62 | console.log(typeof esMayorDeEdad); 63 | 64 | // undefined 65 | let numeroDeCelular = undefined; 66 | console.log(typeof numeroDeCelular); 67 | 68 | // null // se olvidaron de null 69 | let variable = null; 70 | console.log(typeof variable); 71 | 72 | let suma = 0; 73 | console.log(null + 10); 74 | console.log(0 + 10); 75 | 76 | const alumnos = ["Pepe", "Maria", "Juan"]; 77 | const persona = { 78 | nombre: "Linder", 79 | apellido: "Hassinger", 80 | }; 81 | console.log(typeof alumnos); 82 | console.log(typeof persona); 83 | 84 | const n1 = 10; 85 | const n2 = 10; 86 | console.log(n1 === n2); 87 | 88 | const n3 = Symbol(10); 89 | const n4 = Symbol(10); 90 | console.log(n4 === n3); 91 | 92 | const n5 = BigInt(999999999999999999999); 93 | const n6 = 999999999999999999999; 94 | console.log(typeof n5); 95 | console.log(typeof n6); 96 | console.log(n5 === n6); 97 | 98 | -------------------------------------------------------------------------------- /semana-6/problem4.js: -------------------------------------------------------------------------------- 1 | function manufacture(gifts, materials) { 2 | const results = []; 3 | gifts.forEach(function (gift) { 4 | let condition = true; 5 | for (let word of gift.split("")) { 6 | if (materials.indexOf(word) === -1) { 7 | condition = false; 8 | break; 9 | } 10 | } 11 | 12 | if (condition) results.push(gift); 13 | }); 14 | 15 | return results; 16 | } 17 | 18 | const gifts = ["tren", "oso", "pelota"]; 19 | const materials = "tronesa"; 20 | console.log(manufacture(gifts, materials)); // ["tren", "oso"] 21 | // 'tren' SÍ porque sus letras están en 'tronesa' 22 | // 'oso' SÍ porque sus letras están en 'tronesa' 23 | // 'pelota' NO porque sus letras NO están en 'tronesa' 24 | 25 | const gifts2 = ["juego", "puzzle"]; 26 | const materials2 = "jlepuz"; 27 | 28 | console.log(manufacture(gifts2, materials2)); // ["puzzle"] 29 | 30 | const gifts3 = ["libro", "ps5"]; 31 | const materials3 = "psli"; 32 | 33 | console.log(manufacture(gifts3, materials3)); // [] 34 | -------------------------------------------------------------------------------- /semana-6/problem5.js: -------------------------------------------------------------------------------- 1 | function findNaughtyStep(original, modified) { 2 | if (original === modified) return ""; 3 | 4 | const word = original.length > modified.length ? original : modified; 5 | const word2 = original.length < modified.length ? original : modified; 6 | 7 | for (let i in word) { 8 | if (word[i] !== word2[i]) { 9 | return word[i]; 10 | } 11 | } 12 | } 13 | 14 | const original = "abcd"; 15 | const modified = "abcde"; 16 | console.log(findNaughtyStep(original, modified)); // 'e' 17 | 18 | const original2 = "stepfor"; 19 | const modified2 = "steppfor"; 20 | console.log(findNaughtyStep(original2, modified2)); // 'f' 21 | 22 | const original3 = "abcde"; 23 | const modified3 = "abcde"; 24 | console.log(findNaughtyStep(original3, modified3)); // '' 25 | -------------------------------------------------------------------------------- /semana-6/problem6.js: -------------------------------------------------------------------------------- 1 | function adjustLights(lights) { 2 | const solution1 = validatePattern([...lights], "🟢"); 3 | const solution2 = validatePattern([...lights], "🔴"); 4 | return Math.min(solution1, solution2); 5 | } 6 | 7 | function validatePattern(lights, color) { 8 | let counter = 0; 9 | 10 | // Comprueba el primer elemento 11 | if (lights[0] !== color) { 12 | lights[0] = color; 13 | counter++; 14 | } 15 | 16 | // Itera sobre el resto de los elementos 17 | for (let i = 1; i < lights.length; i++) { 18 | if (lights[i] === lights[i - 1]) { 19 | lights[i] = lights[i] === "🔴" ? "🟢" : "🔴"; 20 | counter++; 21 | } 22 | } 23 | 24 | return counter; 25 | } 26 | 27 | // console.log(adjustLights(["🟢", "🔴", "🟢", "🟢", "🟢"])); 28 | // -> 1 (cambias la cuarta luz a 🔴) 29 | 30 | // console.log(adjustLights(["🔴", "🔴", "🟢", "🔴", "🟢"])); 31 | console.log(adjustLights(["🔴", "🔴", "🟢", "🟢", "🔴"])); 32 | // -> 1 (cambia la primera luz a verde) 33 | 34 | // console.log(adjustLights(["🔴", "🔴", "🟢", "🟢", "🔴"])); 35 | // -> 2 (cambias la segunda luz a 🟢 y la tercera a 🔴) 36 | 37 | // console.log(adjustLights(["🟢", "🔴", "🟢", "🔴", "🟢"])); 38 | // -> 0 (ya están alternadas) 39 | 40 | // console.log(adjustLights(["🔴", "🔴", "🔴"])); 41 | // -> 1 (cambias la segunda luz a 🟢) 42 | -------------------------------------------------------------------------------- /semana-6/problems2.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Reto #1 3 | * EL FAMOSO "FIZZ BUZZ" 4 | * Dificultad: FÁCIL 5 | * 6 | * Enunciado: Escribe un programa que muestre por consola (con un console.log) 7 | * los números de 1 a 100 (ambos incluidos y con un salto de línea entre cada impresión), 8 | * sustituyendo los siguientes: 9 | * - Múltiplos de 3 por la palabra "fizz". 10 | * - Múltiplos de 5 por la palabra "buzz". 11 | * - Múltiplos de 3 y de 5 a la vez por la palabra "fizzbuzz". 12 | * 13 | */ 14 | // 1,2,"fizz",4,"buzz","fizz",7,8,"fizz",10,11,"fizz",13,14,"fizzbuzz"...100 15 | function fizzBuzz(number) { 16 | if (number % 15 === 0) return "fizzbuzz"; 17 | if (number % 3 === 0) return "fizz"; 18 | if (number % 5 === 0) return "buzz"; 19 | return number; 20 | } 21 | 22 | for (let i = 1; i <= 100; i++) { 23 | console.log(fizzBuzz(i)); 24 | } 25 | -------------------------------------------------------------------------------- /semana-6/problems3.js: -------------------------------------------------------------------------------- 1 | // map y forEach 2 | const numbers = [10, 20, 34, 53]; 3 | /* 4 | numbers.map(function (item, index, array) { 5 | 6 | }) 7 | 8 | numbers.forEach(function (item, index, array) { 9 | 10 | }) 11 | 12 | */ 13 | 14 | // filter y find 15 | 16 | // filter : retorna un array con la informacion filtrada 17 | const number2 = numbers.filter(function (number) { 18 | return number > 20; 19 | }); 20 | 21 | console.log("Number2", number2); 22 | 23 | const books = [ 24 | { 25 | id: 1, 26 | title: "1984", 27 | country: "UK", 28 | pages: 328, 29 | isbn: "9780451524935", 30 | }, 31 | { 32 | id: 2, 33 | title: "hamlet", 34 | country: "Denmark", 35 | pages: 342, 36 | isbn: "9780743477123", 37 | }, 38 | ]; 39 | 40 | const filterBooks = books.filter(function (book) { 41 | return book.pages > 330; 42 | }); 43 | 44 | console.log(filterBooks); 45 | 46 | console.log("Indice de un element dentro de un array", numbers.indexOf(34)); 47 | console.log("Indice de un element dentro de un array", numbers.indexOf(99)); 48 | 49 | /* 50 | En la fábrica de juguetes del Polo Norte, cada juguete tiene un número de identificación único. 51 | 52 | Sin embargo, debido a un error en la máquina de juguetes, algunos números se han asignado a más de un juguete. 53 | 54 | ¡Encuentra el primer número de identificación que se ha repetido, donde la segunda ocurrencia tenga el índice más pequeño! 55 | 56 | En otras palabras, si hay más de un número repetido, debes devolver el número cuya segunda ocurrencia aparezca primero en la lista. Si 57 | */ 58 | 59 | function findFirstRepeated(gifts) { 60 | const cleanNumbers = gifts.filter(function (gift, index) { 61 | return gifts.indexOf(gift) !== index; 62 | }); 63 | 64 | return cleanNumbers[0] ?? -1; 65 | } 66 | // x 67 | const giftIds = [2, 1, 3, 5, 3, 2]; 68 | 69 | const firstRepeatedId = findFirstRepeated(giftIds); 70 | console.log("caso1", firstRepeatedId); // 3 71 | const giftIds2 = [1, 2, 3, 4]; 72 | const firstRepeatedId2 = findFirstRepeated(giftIds2); 73 | console.log("caso2", firstRepeatedId2); // -1 74 | // Aunque el 2 y el 3 se repiten 75 | // el 3 aparece primero por segunda vez 76 | 77 | // const giftIds2 = [1, 2, 3, 4] 78 | // const firstRepeatedId2 = findFirstRepeated(giftIds2) 79 | // console.log(firstRepeatedId2) // -1 80 | 81 | // Es -1 ya que no se repite ningún número 82 | 83 | // const giftIds3 = [5, 1, 5, 1] 84 | // const firstRepeatedId3 = findFirstRepeated(giftIds3) 85 | // console.log(firstRepeatedId3) // 5 86 | -------------------------------------------------------------------------------- /semana-6/test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * En la fábrica de juguetes del Polo Norte, cada juguete tiene un número de 3 | * identificación único. 4 | 5 | Sin embargo, debido a un error en la máquina de juguetes, algunos números 6 | se han asignado a más de un juguete. 7 | 8 | ¡Encuentra el primer número de identificación que se ha repetido, donde la 9 | segunda ocurrencia tenga el índice más pequeño! 10 | 11 | En otras palabras, si hay más de un número repetido, debes devolver el número 12 | cuya segunda ocurrencia aparezca primero en la lista. Si no hay números 13 | repetidos, devuelve -1. 14 | */ 15 | function findFirstRepeated(gifts) { 16 | const duplicates = gifts.filter( 17 | (item, index) => gifts.indexOf(item) !== index 18 | ); 19 | 20 | return duplicates[0] ?? -1; 21 | } 22 | 23 | const giftIds = [1, 2, 3, 4]; 24 | console.log(findFirstRepeated(giftIds)); 25 | -------------------------------------------------------------------------------- /semana-7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /semana-7/login/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

Welcome to Codigo Tecsup

16 |

Nombre del usuario

17 |

Email

18 | 24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /semana-7/login/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Login 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

Login Account

17 |

Welcome back Codigo Tecsup!

18 |
19 |

20 | Mini 21 | Shop 22 |

23 |
24 |
25 |
26 | 32 |
33 |
34 | 40 |
41 |
42 | 45 |
46 |
47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /semana-7/login/js/app.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector("form"); 2 | 3 | /** 4 | * Como hacemos para poder capturar el evento submit del form? 5 | * 6 | * Sencillo, solo debemos usar el evento onsubmit, ahora recordemos 7 | * que este evento es solo de los formularios 8 | * 9 | * Ejemplo 10 | * 11 | * form.onsubmit = function (event) { 12 | * ... 13 | * } 14 | */ 15 | 16 | form.onsubmit = function (event) { 17 | /** 18 | * Los formulario tienen la tendencia recargar la página 19 | * para evitar que el evento onSubmit recargue la pagina 20 | * vamos usar la funcion preventDefault() esta funcion es parte 21 | * del evento que recibimos en nuestra funcion 22 | */ 23 | event.preventDefault(); 24 | /** 25 | * Debemos saber que toda la informacion del formulario esta en event 26 | * console.log(event) 27 | */ 28 | const formInfo = Array.from(event.target) 29 | .filter(function (input) { 30 | return input.value; 31 | }) 32 | .map(function (input) { 33 | return input.value; 34 | }); 35 | 36 | const [email, password] = formInfo; 37 | 38 | /** 39 | * Debemos buscar dentro del array de users la info basada en email y password 40 | */ 41 | const result = users.find(function (user) { 42 | return user.email === email && user.password === password; 43 | }); 44 | 45 | if (!result) { 46 | // TODO: Mostrar alerta de error en este caso 47 | Swal.fire({ 48 | title: "Hubo un error!", 49 | text: "Email y/o password incorrectos", 50 | icon: "error", 51 | }); 52 | return; 53 | } 54 | 55 | // Vamos a guardar al usuario en localStorage 56 | /** 57 | * localStorage.setItem(key, value) 58 | * Esto recuerden es para crear un elemento en localStorage 59 | * 60 | * ojo: JSON.stringify(result) sirve para convertir un object a un string 61 | */ 62 | localStorage.setItem("user", JSON.stringify(result)); 63 | // TODO: Enviar a otra pagina 64 | location.href = "http://127.0.0.1:5500/semana-7/login/home.html"; 65 | }; 66 | -------------------------------------------------------------------------------- /semana-7/login/js/home.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Como podemos acceder a una variable que esta en localStorage? 3 | */ 4 | 5 | const user = localStorage.getItem("user"); 6 | // OJO cuando buscamos un elemento que no existe en localStorage, este retorna 7 | // NULL 8 | console.log(user); 9 | // Primero vamos a validar que user exista 10 | if (!user) { 11 | location.href = "http://127.0.0.1:5500/semana-7/login/"; 12 | } 13 | 14 | const fullName = document.querySelector("#name"); 15 | const email = document.querySelector("#email"); 16 | 17 | // Para covertir un string a un objeto JSON.parse() 18 | const userObj = JSON.parse(user); 19 | fullName.textContent = `${userObj.name} ${userObj.lastname}`; 20 | email.textContent = userObj.email; 21 | 22 | // Button para hacer logout 23 | const btnLogout = document.querySelector("#btn-logout"); 24 | 25 | btnLogout.onclick = function () { 26 | // Paso1: Vamos a mostrar un alerta para que el usuario confirme 27 | Swal.fire({ 28 | title: "Esta seguro?", 29 | text: "de cerrar sesión en Codigo Tecsup?", 30 | icon: "warning", 31 | showCancelButton: true, 32 | cancelButtonText: "Cancelar", 33 | confirmButtonText: "Si, estoy seguro", 34 | }).then(function (value) { 35 | if (!value.isConfirmed) { 36 | return; 37 | } 38 | // Paso1: Limpiamos localStorage 39 | // solo 1 elemento basado en el key 40 | // localStorage.removeItem("user"); 41 | // elimina todo lo que este en localStorage 42 | localStorage.clear(); 43 | 44 | location.href = "http://127.0.0.1:5500/semana-7/login/"; 45 | }); 46 | }; 47 | -------------------------------------------------------------------------------- /semana-7/login/js/users.js: -------------------------------------------------------------------------------- 1 | const users = [ 2 | { 3 | id: 1, 4 | name: "Linder", 5 | lastname: "Hassinger", 6 | email: "linder@gmail.com", 7 | password: "linder340", 8 | document_number: "88888", 9 | }, 10 | { 11 | id: 2, 12 | name: "Pepito", 13 | lastname: "Perez", 14 | email: "pepe@gmail.com", 15 | password: "pepe123", 16 | document_number: "777777", 17 | }, 18 | { 19 | id: 3, 20 | name: "Juan", 21 | lastname: "Zapata", 22 | email: "juan@gmail.com", 23 | password: "juan123", 24 | document_number: "1111111", 25 | }, 26 | ]; 27 | -------------------------------------------------------------------------------- /semana-7/problem7.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Reto #7 3 | * ¿ES UN ANAGRAMA? 4 | * 5 | * Enunciado: Escribe una función que reciba dos palabras (String) y retorne verdadero o falso (Bool) según sean o no anagramas. 6 | * Un Anagrama consiste en formar una palabra reordenando TODAS las letras de otra palabra inicial. 7 | * NO hace falta comprobar que ambas palabras existan. 8 | * Dos palabras exactamente iguales no son anagrama. 9 | * 10 | */ 11 | function sortWord(word) { 12 | return word.toLowerCase().split("").sort().join(""); 13 | } 14 | 15 | function isAnagram(word1, word2) { 16 | if (word1 === word2) return false; 17 | 18 | return sortWord(word1) === sortWord(word2); 19 | } 20 | 21 | console.log(isAnagram("hola", "hola")); 22 | console.log(isAnagram("arca", "cara")); 23 | console.log(isAnagram("lobo", "bolo")); 24 | console.log(isAnagram("cola", "loco")); 25 | -------------------------------------------------------------------------------- /semana-7/tip-calculator/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: "Space Mono", monospace; 9 | font-weight: bold; 10 | background-color: #c3e3e6; 11 | } 12 | 13 | input, 14 | button { 15 | font-family: "Space Mono", monospace; 16 | font-weight: bold; 17 | } 18 | 19 | main { 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: center; 23 | align-items: center; 24 | height: 100vh; 25 | gap: 50px; 26 | } 27 | 28 | .form { 29 | background-color: #fff; 30 | padding: 40px; 31 | border-radius: 16px; 32 | gap: 30px; 33 | } 34 | 35 | form > div { 36 | flex: 1; 37 | } 38 | 39 | .container-input { 40 | display: flex; 41 | align-items: center; 42 | justify-content: space-between; 43 | padding: 10px; 44 | border-radius: 8px; 45 | background-color: #f3f8fb; 46 | } 47 | 48 | .container-input > input { 49 | border: none; 50 | outline: none; 51 | text-align: right; 52 | background-color: transparent; 53 | } 54 | 55 | .text-title { 56 | font-size: 14px; 57 | color: #717978; 58 | display: block; 59 | margin-bottom: 10px; 60 | margin-top: 10px; 61 | } 62 | 63 | .container-percentage > button { 64 | background-color: #00474b; 65 | color: #fff; 66 | border: none; 67 | padding: 10px; 68 | font-size: 18px; 69 | border-radius: 6px; 70 | cursor: pointer; 71 | } 72 | 73 | .active { 74 | background-color: #2abfac !important; 75 | color: #00474b !important; 76 | } 77 | -------------------------------------------------------------------------------- /semana-7/tip-calculator/images/icon-dollar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-7/tip-calculator/images/icon-person.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-7/tip-calculator/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-7/tip-calculator/js/data.js: -------------------------------------------------------------------------------- 1 | // array con los valores de los botons 2 | let percentages = [ 3 | { 4 | type: "button", 5 | value: "5%", 6 | isCheck: false, 7 | }, 8 | { 9 | type: "button", 10 | value: "10%", 11 | isCheck: false, 12 | }, 13 | { 14 | type: "button", 15 | value: "15%", 16 | isCheck: false, 17 | }, 18 | { 19 | type: "button", 20 | value: "25%", 21 | isCheck: false, 22 | }, 23 | { 24 | type: "button", 25 | value: "50%", 26 | isCheck: false, 27 | }, 28 | { 29 | type: "input", 30 | value: "", 31 | isCheck: false, 32 | }, 33 | ]; 34 | -------------------------------------------------------------------------------- /semana-7/tip-calculator/js/selectors.js: -------------------------------------------------------------------------------- 1 | const containerBill = document.querySelector("#contailer-bill"); 2 | const containerPercentages = document.querySelector("#container-percentage"); 3 | const containerInputPeople = document.querySelector("#container-input-people"); 4 | 5 | const inputBill = document.querySelector("#input-bill"); 6 | const inputPeople = document.querySelector("#input-people"); 7 | 8 | const buttonCalculate = document.querySelector("#button-calculate"); 9 | 10 | const perPerson = document.querySelector("#per-person"); 11 | const total = document.querySelector("#total"); 12 | -------------------------------------------------------------------------------- /semana-7/tip-calculator/js/utils.js: -------------------------------------------------------------------------------- 1 | function validateInputIfNumber(element, type, container, input) { 2 | /** 3 | * Paso1: Es validar que unicamente podamos escribir numeros en el input 4 | * para ello primero vamos a capturar el valor actual del input 5 | * y vamos a evaluar lo siguiente 6 | */ 7 | const inputValue = type === "event" ? element.target.value : element.value; 8 | 9 | /** 10 | * En este caso estamos usando la funcion `isNaN` 11 | * isNaN: is Not a Number () 12 | * Si el valor del input is Not a Number vamos eliminar el ultimo caracter 13 | * que el usuariuo escribio, para ello uso la funcion slice con los valores 14 | * 0, -1, porque quiero inciar desde el ultimo caracter por ende uso el -1 15 | * para empezar a contar de derecha a izquierda 16 | */ 17 | if (isNaN(inputValue)) { 18 | input.value = inputValue.slice(0, -1); 19 | } 20 | 21 | /** 22 | * Si la primera letra de la palabra es igual a 0 vamos a colocar un border 23 | * rojos en el input y NO vamos a des seleccionar el button, por ede uso 24 | * return para que si entra a la condicion la funcion termine 25 | */ 26 | if (inputValue[0] === "0") { 27 | container.classList.add("border", "border-red-500"); 28 | return false; 29 | } else { 30 | container.classList.remove("border", "border-red-500"); 31 | } 32 | 33 | return true; 34 | } 35 | -------------------------------------------------------------------------------- /semana-8-refactor/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /semana-8-refactor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /semana-8-refactor/javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-8-refactor/main.js: -------------------------------------------------------------------------------- 1 | import "./style.css"; 2 | import { createTask } from "./src/form"; 3 | import { renderTasks } from "./src/render"; 4 | 5 | // Template string 6 | document.querySelector("#app").innerHTML = ` 7 |
8 |
9 | 15 | 16 |
17 | 18 |
19 |
20 | 69 | `; 70 | 71 | createTask( 72 | document.querySelector("#form"), 73 | document.querySelector("#input-task"), 74 | document.querySelector("#container-tasks") 75 | ); 76 | 77 | renderTasks(document.querySelector("#container-tasks")); 78 | -------------------------------------------------------------------------------- /semana-8-refactor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "semana-8-refactor", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "autoprefixer": "^10.4.19", 13 | "postcss": "^8.4.38", 14 | "tailwindcss": "^3.4.1", 15 | "vite": "^5.2.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /semana-8-refactor/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /semana-8-refactor/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-8-refactor/src/counter.js: -------------------------------------------------------------------------------- 1 | export function setupCounter(element) { 2 | let counter = 0 3 | const setCounter = (count) => { 4 | counter = count 5 | element.innerHTML = `count is ${counter}` 6 | } 7 | element.addEventListener('click', () => setCounter(counter + 1)) 8 | setCounter(0) 9 | } 10 | -------------------------------------------------------------------------------- /semana-8-refactor/src/form/index.js: -------------------------------------------------------------------------------- 1 | import { validateIfInputIsEmpty } from "../utils"; 2 | import { tasks, saveTasksInLocalStorage } from "../mock"; 3 | import { renderTasks } from "../render"; 4 | 5 | export function createTask(element, input, container) { 6 | element.onsubmit = function (event) { 7 | event.preventDefault(); 8 | if (!validateIfInputIsEmpty(input)) return; 9 | 10 | const task = { 11 | id: tasks.length + 1, 12 | text: input.value, 13 | status: 1, 14 | created_at: new Date(), 15 | }; 16 | 17 | tasks.push(task); 18 | 19 | input.value = ""; 20 | saveTasksInLocalStorage(); 21 | renderTasks(container); 22 | }; 23 | } 24 | -------------------------------------------------------------------------------- /semana-8-refactor/src/mock/index.js: -------------------------------------------------------------------------------- 1 | const validateTasksFromLocalStorage = localStorage.getItem("tasks"); 2 | 3 | export let tasks = validateTasksFromLocalStorage 4 | ? [...JSON.parse(validateTasksFromLocalStorage)] 5 | : []; 6 | 7 | export function saveTasksInLocalStorage() { 8 | localStorage.setItem("tasks", JSON.stringify(tasks)); 9 | } 10 | -------------------------------------------------------------------------------- /semana-8-refactor/src/modal/index.js: -------------------------------------------------------------------------------- 1 | function openModal(element) { 2 | element.classList.remove("hidden"); 3 | } 4 | 5 | function closeModal(element) { 6 | element.classList.add("hidden"); 7 | } 8 | -------------------------------------------------------------------------------- /semana-8-refactor/src/render/index.js: -------------------------------------------------------------------------------- 1 | import { tasks } from "../mock"; 2 | 3 | export function renderInnerTask(task) { 4 | // Concepto: Juntar variables + stering => Template String 5 | // `` => backtips 6 | // ? => Signo de pregunta (cierre) 7 | // : => dos puntos 8 | const taskCreated = ` 9 |

${task.text}

10 |
11 | 12 | 13 | 14 |
15 | `; 16 | 17 | const taksDone = ` 18 |

${task.text}

19 | `; 20 | return task.status === 1 ? taskCreated : taksDone; 21 | } 22 | 23 | export function renderTasks(element) { 24 | element.innerHTML = ""; 25 | 26 | tasks.forEach((task) => { 27 | element.innerHTML += ` 28 |
31 | ${renderInnerTask(task)} 32 |
`; 33 | }); 34 | } 35 | -------------------------------------------------------------------------------- /semana-8-refactor/src/utils/index.js: -------------------------------------------------------------------------------- 1 | export function validateIfInputIsEmpty(input) { 2 | if (input.value === "") { 3 | input.classList.add("error"); 4 | // error.textContent = "Debe completar este campo"; 5 | return false; 6 | } else { 7 | input.classList.remove("error"); 8 | // error.textContent = ""; 9 | return true; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /semana-8-refactor/style.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer components { 6 | .error { 7 | @apply border-red-500; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /semana-8-refactor/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | // deben especificar que archivos tendran acceso a tailwind 5 | "./index.html", 6 | "./src/**/*.js", 7 | "./main.js", 8 | ], 9 | theme: { 10 | extend: {}, 11 | }, 12 | plugins: [], 13 | }; 14 | -------------------------------------------------------------------------------- /semana-8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 20 | 21 |
22 | 23 |
24 |
25 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /semana-9/react-intro/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /semana-9/react-intro/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /semana-9/react-intro/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /semana-9/react-intro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /semana-9/react-intro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-intro", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.66", 18 | "@types/react-dom": "^18.2.22", 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "eslint": "^8.57.0", 21 | "eslint-plugin-react": "^7.34.1", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.6", 24 | "vite": "^5.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /semana-9/react-intro/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-9/react-intro/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linder3hs/codigo-18-frontend/d709645be506188d7b6aa5bca47caaaebc1de64d/semana-9/react-intro/src/App.css -------------------------------------------------------------------------------- /semana-9/react-intro/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { Header } from "./components/Header"; 3 | import { Footer } from "./components/Footer"; 4 | import { Counter } from "./components/Counter"; 5 | 6 | export default function App() { 7 | // const [today, setToday] = useState(new Date()); 8 | const [name, setName] = useState(""); 9 | // const [isOpen, setIsOpen] = useState(true); 10 | 11 | const handleInputValue = (event) => { 12 | setName(event.target.value); 13 | }; 14 | 15 | return ( 16 |
17 |
18 | 19 |

Inputs

20 |

Name: {name}

21 | 22 | {/* aumenten que el component Footer 23 | reciba un companyName */} 24 |
25 |
26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /semana-9/react-intro/src/components/Counter.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | export function Counter() { 4 | const [counter, setCounter] = useState(0); 5 | 6 | const sumar = () => setCounter(counter + 1); 7 | const restar = () => setCounter(counter - 1); 8 | const reboot = () => setCounter(0); 9 | 10 | return ( 11 |
12 |

Contador: {counter}

13 | 14 | 15 | 16 |
17 |
18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /semana-9/react-intro/src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | export function Footer(props) { 2 | return ( 3 |
4 |

{props.companyName}

5 |

Todos los derechos reservados

6 |
7 | ); 8 | } 9 | -------------------------------------------------------------------------------- /semana-9/react-intro/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | export function Header(props) { 2 | return ( 3 |
4 |
    5 |
  • Home
    • 6 |
  • About
    • 7 |
  • Contact me
    • 8 |
9 |
10 | Hola {props.name} {props.lastname} 11 |
12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /semana-9/react-intro/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | -------------------------------------------------------------------------------- /semana-9/react-intro/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | // Esta manera solo es para el css 5 | import './index.css' 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | , 11 | ) 12 | -------------------------------------------------------------------------------- /semana-9/react-intro/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /semana-9/todolist/.env: -------------------------------------------------------------------------------- 1 | username=linder 2 | password=linder340 3 | -------------------------------------------------------------------------------- /semana-9/todolist/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /semana-9/todolist/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /semana-9/todolist/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /semana-9/todolist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /semana-9/todolist/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todolist", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "firebase": "^10.11.0", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "react-router-dom": "^6.22.3", 17 | "uuid": "^9.0.1" 18 | }, 19 | "devDependencies": { 20 | "@types/react": "^18.2.66", 21 | "@types/react-dom": "^18.2.22", 22 | "@vitejs/plugin-react": "^4.2.1", 23 | "autoprefixer": "^10.4.19", 24 | "eslint": "^8.57.0", 25 | "eslint-plugin-react": "^7.34.1", 26 | "eslint-plugin-react-hooks": "^4.6.0", 27 | "eslint-plugin-react-refresh": "^0.4.6", 28 | "postcss": "^8.4.38", 29 | "tailwindcss": "^3.4.3", 30 | "vite": "^5.2.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /semana-9/todolist/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /semana-9/todolist/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /semana-9/todolist/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Router from "./router"; 2 | 3 | export default function App() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /semana-9/todolist/src/components/CheckForm/index.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | export default function CheckForm(props) { 3 | return ( 4 | <> 5 |

6 | Esta seguro de marcar como terminada la tarea{" "} 7 | {props.currentTask?.text} 8 |

9 |
10 | 16 | 22 |
23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /semana-9/todolist/src/components/DeleteForm/index.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | export default function DeleteForm(props) { 3 | return ( 4 | <> 5 |

Esta seguro de eliminar la tarea {props.currentTask?.text}

6 |
7 | 13 | 19 |
20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /semana-9/todolist/src/components/InputTask/index.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | export default function InputTask(props) { 3 | // dentro de un componente puedo crear funciones 4 | const handleFormSubmit = async (event) => { 5 | event.preventDefault(); 6 | 7 | const task = { 8 | text: props.task, 9 | status: 1, 10 | createdAt: Date.now(), 11 | }; 12 | 13 | await props.handleListTask(task); 14 | }; 15 | 16 | return ( 17 | <> 18 |
23 | 31 | 32 | 33 |
34 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /semana-9/todolist/src/components/Modal/index.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | 3 | export default function Modal(props) { 4 | return ( 5 | <> 6 | 26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /semana-9/todolist/src/components/TextField/index.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | export default function TextField(props) { 3 | const { type, name, value, onChange, placeholder } = props; 4 | 5 | return ( 6 |
7 | 15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /semana-9/todolist/src/components/UpdateForm/index.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | import { useState, useEffect } from "react"; 3 | 4 | export default function UpdateForm(props) { 5 | const [editedTask, setEditedTask] = useState(props.currentTask?.text); 6 | 7 | const handleEditTask = (event) => { 8 | setEditedTask(event.target.value); 9 | }; 10 | 11 | const handleFormEditSubmit = async (event) => { 12 | event.preventDefault(); 13 | 14 | await props.handleUpdateTask(props.currentTask, editedTask); 15 | }; 16 | 17 | useEffect(() => { 18 | setEditedTask(props.currentTask?.text); 19 | // Es una dependencia 20 | }, [props.currentTask?.text]); 21 | 22 | return ( 23 | <> 24 |
25 | 33 |
34 | 40 |
41 |
42 | 43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /semana-9/todolist/src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as InputTask } from "./InputTask"; 2 | export { default as Modal } from "./Modal"; 3 | export { default as UpdateForm } from "./UpdateForm"; 4 | export { default as DeleteForm } from "./DeleteForm"; 5 | export { default as CheckForm } from "./CheckForm"; 6 | export { default as TextField } from "./TextField"; 7 | -------------------------------------------------------------------------------- /semana-9/todolist/src/hooks/useGetTasks.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { getTasks } from "../services/httpAPI"; 3 | 4 | export default function useGetTasks() { 5 | const [listTasks, setListTask] = useState([]); 6 | 7 | const fetchTasks = async () => { 8 | const response = await getTasks(); 9 | setListTask(response); 10 | }; 11 | 12 | useEffect(function () { 13 | fetchTasks(); 14 | }, []); 15 | 16 | return { listTasks, setListTask }; 17 | } 18 | -------------------------------------------------------------------------------- /semana-9/todolist/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /semana-9/todolist/src/layouts/AuthLayout/index.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { Outlet, useNavigate } from "react-router-dom"; 3 | import { getCurrentUser } from "../../services/auth"; 4 | 5 | export default function AuthLayout() { 6 | const [showPage, setShowPage] = useState(false); 7 | const navigate = useNavigate(); 8 | 9 | const fetchUser = async () => { 10 | try { 11 | const user = await getCurrentUser(); 12 | 13 | if (user) { 14 | // redirect al home 15 | navigate("/"); 16 | } 17 | } catch (error) { 18 | setShowPage(true); 19 | } 20 | }; 21 | 22 | useEffect(() => { 23 | fetchUser(); 24 | }, []); 25 | 26 | return
{showPage && }
; 27 | } 28 | -------------------------------------------------------------------------------- /semana-9/todolist/src/layouts/MainLayout/index.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { Outlet } from "react-router-dom"; 3 | import { getCurrentUser } from "../../services/auth"; 4 | import { useNavigate } from "react-router-dom"; 5 | 6 | export default function MainLayout() { 7 | const [user, setUser] = useState(null); 8 | 9 | const navigate = useNavigate(); 10 | 11 | const fetchUser = async () => { 12 | try { 13 | const currentUser = await getCurrentUser(); 14 | console.log(currentUser.uid); 15 | setUser(currentUser); 16 | } catch (error) { 17 | navigate("/login"); 18 | } 19 | }; 20 | 21 | useEffect(() => { 22 | fetchUser(); 23 | }, []); 24 | 25 | return ( 26 |
27 | 40 | 41 |
42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /semana-9/todolist/src/layouts/index.js: -------------------------------------------------------------------------------- 1 | export { default as AuthLayout } from "./AuthLayout"; 2 | export { default as MainLayout } from "./MainLayout"; 3 | -------------------------------------------------------------------------------- /semana-9/todolist/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.jsx"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /semana-9/todolist/src/pages/Login/index.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { signIn } from "../../services/auth"; 3 | import { Link } from "react-router-dom"; 4 | import { TextField } from "../../components"; 5 | import { useNavigate } from "react-router-dom"; 6 | 7 | export default function Login() { 8 | const navigate = useNavigate(); 9 | 10 | const [values, setValues] = useState({ 11 | email: "", 12 | password: "", 13 | }); 14 | 15 | const handleInputChange = (event) => { 16 | const { name, value } = event.target; 17 | setValues({ 18 | ...values, 19 | [name]: value, 20 | }); 21 | }; 22 | 23 | const handleSubmit = async (event) => { 24 | event.preventDefault(); 25 | try { 26 | await signIn(values.email, values.password); 27 | navigate("/"); 28 | } catch (error) { 29 | console.log(error); 30 | } 31 | }; 32 | 33 | return ( 34 | <> 35 |
36 |
37 |
38 |

👋 Hola de nuevo

39 |
40 |
41 | 48 | 55 |
56 | 62 |
63 | 64 |
65 |
66 |

67 | ¿No tienes una cuenta?{" "} 68 | 69 | Regístrate 70 | 71 |

72 |
73 |
74 | 75 | ); 76 | } 77 | -------------------------------------------------------------------------------- /semana-9/todolist/src/pages/index.js: -------------------------------------------------------------------------------- 1 | export { default as HomePage } from "./Home"; 2 | export { default as LoginPage } from "./Login"; 3 | export { default as SignUpPage } from "./SignUp"; 4 | -------------------------------------------------------------------------------- /semana-9/todolist/src/router/index.jsx: -------------------------------------------------------------------------------- 1 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 2 | import { HomePage, LoginPage, SignUpPage } from "../pages"; 3 | import { AuthLayout, MainLayout } from "../layouts"; 4 | 5 | export default function Router() { 6 | return ( 7 | 8 | 9 | }> 10 | } /> 11 | 12 | }> 13 | } /> 14 | } /> 15 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /semana-9/todolist/src/services/auth.js: -------------------------------------------------------------------------------- 1 | import { 2 | createUserWithEmailAndPassword, 3 | signInWithEmailAndPassword, 4 | updateProfile, 5 | onAuthStateChanged, 6 | } from "firebase/auth"; 7 | import { auth } from "./firebase"; 8 | 9 | export async function createUser(email, password) { 10 | try { 11 | const authentication = await createUserWithEmailAndPassword( 12 | auth, 13 | email, 14 | password 15 | ); 16 | 17 | return authentication.user; 18 | } catch (error) { 19 | console.log(error.code); 20 | console.log(error.message); 21 | return null; 22 | } 23 | } 24 | 25 | export async function signIn(email, password) { 26 | try { 27 | const authentication = await signInWithEmailAndPassword( 28 | auth, 29 | email, 30 | password 31 | ); 32 | 33 | return authentication.user; 34 | } catch (error) { 35 | console.log(error.code); 36 | console.log(error.message); 37 | return null; 38 | } 39 | } 40 | 41 | export function getCurrentUser() { 42 | return new Promise((resolve, reject) => { 43 | const observer = onAuthStateChanged(auth, (user) => { 44 | if (user) { 45 | resolve(user); 46 | } else { 47 | reject("User not found"); 48 | } 49 | }); 50 | 51 | return observer; 52 | }); 53 | } 54 | 55 | export async function updateUser(name, photoURL) { 56 | const currentUser = auth.currentUser; 57 | 58 | const user = await updateProfile(currentUser, { 59 | displayName: name, 60 | photoURL: photoURL, 61 | }); 62 | 63 | return user; 64 | } 65 | -------------------------------------------------------------------------------- /semana-9/todolist/src/services/config.js: -------------------------------------------------------------------------------- 1 | export const BASE_URL = "https://6618a0f79a41b1b3dfbd8ad9.mockapi.io/tasks"; 2 | -------------------------------------------------------------------------------- /semana-9/todolist/src/services/firebase.js: -------------------------------------------------------------------------------- 1 | import { initializeApp } from "firebase/app"; 2 | import { getAuth } from "firebase/auth"; 3 | import { getStorage } from "firebase/storage"; 4 | 5 | const firebaseConfig = { 6 | apiKey: "AIzaSyBlWDKtkbgcHds1vyO13xev36wCI-NbCaM", 7 | authDomain: "react-codigo-g18-todolist.firebaseapp.com", 8 | projectId: "react-codigo-g18-todolist", 9 | storageBucket: "react-codigo-g18-todolist.appspot.com", 10 | messagingSenderId: "306360316725", 11 | appId: "1:306360316725:web:f88013f274d1687648127c", 12 | }; 13 | 14 | const app = initializeApp(firebaseConfig); 15 | 16 | export const auth = getAuth(app); 17 | export const storage = getStorage(app); 18 | -------------------------------------------------------------------------------- /semana-9/todolist/src/services/httpAPI.js: -------------------------------------------------------------------------------- 1 | import { BASE_URL } from "./config"; 2 | 3 | export async function getTasks() { 4 | const response = await fetch(BASE_URL); 5 | const tasks = await response.json(); 6 | 7 | return tasks; 8 | } 9 | 10 | export async function createTask(task) { 11 | const response = await fetch(BASE_URL, { 12 | method: "POST", 13 | body: JSON.stringify(task), 14 | headers: { 15 | "Content-Type": "application/json", 16 | }, 17 | }); 18 | const data = await response.json(); 19 | return data; 20 | } 21 | 22 | export async function updateTask(task) { 23 | const response = await fetch(`${BASE_URL}/${task.id}`, { 24 | method: "PUT", 25 | body: JSON.stringify(task), 26 | headers: { 27 | "Content-Type": "application/json", 28 | }, 29 | }); 30 | const data = await response.json(); 31 | return data; 32 | } 33 | 34 | export async function deleteTask(task) { 35 | const response = await fetch(`${BASE_URL}/${task.id}`, { 36 | method: "DELETE", 37 | headers: { 38 | "Contet-Type": "application/json", 39 | }, 40 | }); 41 | const data = await response.json(); 42 | return data; 43 | } 44 | -------------------------------------------------------------------------------- /semana-9/todolist/src/services/storage.js: -------------------------------------------------------------------------------- 1 | import { ref, uploadBytes, getDownloadURL } from "firebase/storage"; 2 | import { storage } from "./firebase"; 3 | 4 | export async function storeFile(file) { 5 | try { 6 | const storageRef = ref(storage, `images/${file.name}`); 7 | 8 | const snapshot = await uploadBytes(storageRef, file); 9 | 10 | const url = await getDownloadURL(snapshot.ref); 11 | 12 | return url; 13 | } catch (error) { 14 | console.log(error.code); 15 | console.log(error.message); 16 | return null; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /semana-9/todolist/src/utils/index.js: -------------------------------------------------------------------------------- 1 | const validateTasksFromLocalStorage = localStorage.getItem("tasks"); 2 | 3 | export let tasks = validateTasksFromLocalStorage 4 | ? [...JSON.parse(validateTasksFromLocalStorage)] 5 | : []; 6 | 7 | export function saveTasksInLocalStorage(tasks) { 8 | localStorage.setItem("tasks", JSON.stringify(tasks)); 9 | } 10 | -------------------------------------------------------------------------------- /semana-9/todolist/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./src/**/*.{js,jsx}", "./index.html"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /semana-9/todolist/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | --------------------------------------------------------------------------------