├── .gitignore ├── css ├── index.css └── styles.css ├── img └── logo.png ├── preview1.png ├── preview2.png ├── js ├── utils │ ├── datetime.js │ ├── auth │ │ ├── authentication.js │ │ └── jwt.js │ ├── content │ │ └── random.js │ ├── api │ │ ├── endpoints.js │ │ ├── config.js │ │ └── request.js │ └── consts.js ├── components │ └── TableProgrammersRow.js └── index.js ├── data └── programmers.json ├── README.md └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | #main-title { 2 | font-style: italic; 3 | } 4 | -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UskoKruM/frontend-folders-structure/HEAD/img/logo.png -------------------------------------------------------------------------------- /preview1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UskoKruM/frontend-folders-structure/HEAD/preview1.png -------------------------------------------------------------------------------- /preview2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UskoKruM/frontend-folders-structure/HEAD/preview2.png -------------------------------------------------------------------------------- /js/utils/datetime.js: -------------------------------------------------------------------------------- 1 | const getCurrentYear = () => new Date().getFullYear(); 2 | 3 | export { getCurrentYear }; 4 | -------------------------------------------------------------------------------- /js/utils/auth/authentication.js: -------------------------------------------------------------------------------- 1 | const validateToken = () => {}; 2 | 3 | const closeSession = () => {}; 4 | 5 | export { validateToken, closeSession }; 6 | -------------------------------------------------------------------------------- /js/utils/auth/jwt.js: -------------------------------------------------------------------------------- 1 | //JavaScript 2 | import { TOKEN_STORAGE_NAME } from "../consts.js"; 3 | 4 | const getToken = () => { 5 | console.log(TOKEN_STORAGE_NAME); 6 | }; 7 | 8 | const removeToken = () => {}; 9 | 10 | const setToken = () => {}; 11 | 12 | export { getToken, removeToken, setToken }; 13 | -------------------------------------------------------------------------------- /js/utils/content/random.js: -------------------------------------------------------------------------------- 1 | const generateUUID = () => { 2 | return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) { 3 | const r = (Math.random() * 16) | 0; 4 | const v = c === "x" ? r : (r & 0x3) | 0x8; 5 | return v.toString(16); 6 | }); 7 | }; 8 | 9 | export { generateUUID }; 10 | -------------------------------------------------------------------------------- /js/utils/api/endpoints.js: -------------------------------------------------------------------------------- 1 | //JavaScript 2 | import { getAPI_URL } from "./config.js"; 3 | 4 | const API_URL = getAPI_URL(); 5 | 6 | const EP_AUTH = `${API_URL}auth`; 7 | const EP_AUTH_GENERATETOKEN = `${EP_AUTH}/generateToken`; 8 | const EP_AUTH_GETROLES = `${EP_AUTH}/getRoles`; 9 | 10 | export { EP_AUTH_GENERATETOKEN, EP_AUTH_GETROLES }; 11 | -------------------------------------------------------------------------------- /js/utils/api/config.js: -------------------------------------------------------------------------------- 1 | //JavaScript 2 | import { API_URL_DEV, API_URL_PROD } from "./../consts.js"; 3 | 4 | const HOSTNAME = window.location.hostname; 5 | const ENVIRONMENT = HOSTNAME === "localhost" ? "dev" : "prod"; 6 | 7 | const getAPI_URL = () => { 8 | return ENVIRONMENT === "dev" ? API_URL_DEV : API_URL_PROD; 9 | }; 10 | 11 | export { getAPI_URL }; 12 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-black: #000000; 3 | --color-white: #ffffff; 4 | } 5 | 6 | * { 7 | box-sizing: border-box; 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | body { 13 | background-color: var(--color-black); 14 | color: var(--color-white); 15 | margin: 20px 80px; 16 | } 17 | 18 | .centered { 19 | text-align: center; 20 | vertical-align: middle; 21 | } 22 | -------------------------------------------------------------------------------- /js/components/TableProgrammersRow.js: -------------------------------------------------------------------------------- 1 | class TableProgrammersRow { 2 | constructor(props) { 3 | this.props = props; 4 | } 5 | 6 | render = function () { 7 | const tr = document.createElement("tr"); 8 | tr.classList.add("centered"); 9 | 10 | for (let value of this.props.values) { 11 | const td = document.createElement("td"); 12 | td.innerText = value; 13 | tr.appendChild(td); 14 | } 15 | 16 | return tr; 17 | }; 18 | } 19 | 20 | export { TableProgrammersRow }; 21 | -------------------------------------------------------------------------------- /data/programmers.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Andrea Thomas", 4 | "languages": ["C#", "Kotlin", "Java"] 5 | }, 6 | { 7 | "name": "Ervin Howell", 8 | "languages": ["JavaScript", "PHP"] 9 | }, 10 | { 11 | "name": "Jaime Díaz", 12 | "languages": ["Python", "PHP", "Perl"] 13 | }, 14 | { 15 | "name": "Clementine Bauch", 16 | "languages": ["Java", "C++", "Dart"] 17 | }, 18 | { 19 | "name": "Pierina López", 20 | "languages": ["Python", "Dart", "C++", "Java"] 21 | }, 22 | { 23 | "name": "Juan Ramírez", 24 | "languages": ["Perl", "C#", "JavaScript"] 25 | } 26 | ] 27 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | //JavaScript 2 | import { EVENT_LOAD } from "./utils/consts.js"; 3 | 4 | //Components 5 | import { TableProgrammersRow } from "./components/TableProgrammersRow.js"; 6 | 7 | //Data 8 | import programmers from "./../data/programmers.json" assert { type: "json" }; 9 | 10 | //Utils 11 | import { generateUUID } from "./utils/content/random.js"; 12 | 13 | const initialLoad = () => { 14 | for (let programmer of programmers) { 15 | const languages = programmer.languages.toString().replaceAll(",", " | "); 16 | const score = (Math.random() * 5 + 5).toFixed(2); 17 | 18 | const tableProgrammersRow = new TableProgrammersRow({ 19 | values: [generateUUID(), programmer.name, languages, score] 20 | }); 21 | document.getElementById("tableProgrammers_Body").appendChild(tableProgrammersRow.render()); 22 | } 23 | }; 24 | 25 | window.addEventListener(EVENT_LOAD, () => { 26 | initialLoad(); 27 | }); 28 | -------------------------------------------------------------------------------- /js/utils/api/request.js: -------------------------------------------------------------------------------- 1 | //JavaScript 2 | import { getToken } from "./../auth/jwt.js"; 3 | import { HTTP_CONTENT_JSON, HTTP_METHOD_GET, HTTP_METHOD_POST, HTTP_METHOD_PUT, MESSAGE_ERROR_ALERT, MESSAGE_ERROR, MESSAGE_OK } from "./../consts.js"; 4 | 5 | const getHttpResponseCodes = () => 6 | Object.freeze({ 7 | 200: "OK", 8 | 400: "Bad Request", 9 | 401: "Unauthorized", 10 | 404: "Not Found", 11 | 422: "Unprocessable Content", 12 | 500: "Internal Server Error" 13 | }); 14 | 15 | const request = async (API_URL, method = HTTP_METHOD_GET, body = {}) => { 16 | let options = { method: method, mode: "cors" }; 17 | 18 | options.headers = { 19 | Accept: HTTP_CONTENT_JSON, 20 | "Content-Type": HTTP_CONTENT_JSON, 21 | Authorization: `Bearer ${getToken()}` 22 | }; 23 | 24 | if ([HTTP_METHOD_POST, HTTP_METHOD_PUT].includes(method)) { 25 | options.body = JSON.stringify(body); 26 | } 27 | 28 | try { 29 | const response = await fetch(API_URL, options); 30 | return !response.ok ? { message: getHttpResponseCodes()[response.status], statusCode: response.status, success: false } : await response.json(); 31 | } catch (ex) { 32 | console.log(document.title, MESSAGE_ERROR_ALERT, MESSAGE_ERROR, MESSAGE_OK); 33 | } 34 | }; 35 | 36 | export { request }; 37 | -------------------------------------------------------------------------------- /js/utils/consts.js: -------------------------------------------------------------------------------- 1 | //Common 2 | const EMPTY_STRING = ""; 3 | 4 | //Config 5 | const API_URL_DEV = "http://127.0.0.1:5000/"; 6 | const API_URL_PROD = "https://www.uskokrum2010.com/"; 7 | 8 | //DOM Events 9 | const EVENT_CHANGE = "change"; 10 | const EVENT_CLICK = "click"; 11 | const EVENT_INPUT = "input"; 12 | const EVENT_LOAD = "load"; 13 | const EVENT_MOUSEENTER = "mouseenter"; 14 | const EVENT_MOUSELEAVE = "mouseleave"; 15 | const EVENT_RESET = "reset"; 16 | const EVENT_SUBMIT = "submit"; 17 | 18 | //HTTP Commons 19 | const HTTP_CONTENT_JSON = "application/json"; 20 | 21 | //HTTP Methods 22 | const HTTP_METHOD_GET = "GET"; 23 | const HTTP_METHOD_POST = "POST"; 24 | const HTTP_METHOD_PUT = "PUT"; 25 | const HTTP_METHOD_DELETE = "DELETE"; 26 | 27 | //HTTP Message 28 | const MESSAGE_ERROR = "ERROR"; 29 | const MESSAGE_ERROR_ALERT = "Ocurrió un error inesperado..."; 30 | const MESSAGE_INFO = "INFO"; 31 | const MESSAGE_NOTFOUND = "NOTFOUND"; 32 | const MESSAGE_OK = "Ok"; 33 | const MESSAGE_SUCCESS = "SUCCESS"; 34 | const MESSAGE_WARNING = "WARNING"; 35 | 36 | //JWT 37 | const TOKEN_STORAGE_NAME = "uskokrum2010.token"; 38 | 39 | export { 40 | EMPTY_STRING, 41 | API_URL_DEV, 42 | API_URL_PROD, 43 | EVENT_CHANGE, 44 | EVENT_CLICK, 45 | EVENT_INPUT, 46 | EVENT_LOAD, 47 | EVENT_MOUSEENTER, 48 | EVENT_MOUSELEAVE, 49 | EVENT_RESET, 50 | EVENT_SUBMIT, 51 | HTTP_CONTENT_JSON, 52 | HTTP_METHOD_GET, 53 | HTTP_METHOD_POST, 54 | HTTP_METHOD_PUT, 55 | HTTP_METHOD_DELETE, 56 | MESSAGE_ERROR, 57 | MESSAGE_ERROR_ALERT, 58 | MESSAGE_INFO, 59 | MESSAGE_NOTFOUND, 60 | MESSAGE_OK, 61 | MESSAGE_SUCCESS, 62 | MESSAGE_WARNING, 63 | TOKEN_STORAGE_NAME 64 | }; 65 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML, CSS y Vanilla JS: Estructura de Carpetas y Archivos 2 | 3 | Aprende a estructurar un proyecto web frontend con HTML, CSS y JavaScript puro organizando tus archivos y carpetas de forma ordenada, incluyendo directorios para: css (estilos), data (json), fonts, js (javascript), entre otros. 4 | 5 |
6 | 7 | ![](./preview1.png) 8 |

9 | ![](./preview2.png) 10 | 11 | # 🌍 Por si deseas contactarme 👨‍💻 : 12 | 13 | [![LinkedIn](https://img.shields.io/badge/LinkedIn-Oscar_Garcia-0077B5?style=for-the-badge&logo=linkedin&logoColor=white&labelColor=101010)](https://pe.linkedin.com/in/uskokrum2010) 14 | [![YouTube](https://img.shields.io/badge/YouTube-UskoKruM2010-FF0000?style=for-the-badge&logo=youtube&logoColor=white&labelColor=101010)](https://youtube.com/uskokrum2010) 15 | [![Twitter](https://img.shields.io/badge/Twitter-@uskokrum2010-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white&labelColor=101010)](https://twitter.com/uskokrum2010) 16 | [![Instagram](https://img.shields.io/badge/Instagram-@uskokrum2010-E4405F?style=for-the-badge&logo=instagram&logoColor=white&labelColor=101010)](https://instagram.com/uskokrum2010) 17 | [![Facebook](https://img.shields.io/badge/Facebook-@uskokrum2010-1877F2?style=for-the-badge&logo=facebook&logoColor=white&labelColor=101010)](https://facebook.com/uskokrum2010) 18 | [![Udemy](https://img.shields.io/badge/Udemy-Oscar_Garcia-EC5252?style=for-the-badge&logo=udemy&logoColor=white&labelColor=101010)](https://www.udemy.com/course/sql-para-administracion-de-bases-de-datos-con-mysql/) 19 | [![Web](https://img.shields.io/badge/My_Website-uskokrum2010.com-14a1f0?style=for-the-badge&logo=dev.to&logoColor=white&labelColor=101010)](https://uskokrum2010.com) 20 | [![Email](https://img.shields.io/badge/uskokrum2010@gmail.com-mi_email_personal-D14836?style=for-the-badge&logo=gmail&logoColor=white&labelColor=101010)](mailto:uskokrum2010@gmail.com) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Index 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Hello World!

17 |
18 |
19 |
20 | 21 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
22 | Programmer's Table 23 |
IdProgrammerLanguagesScore
34 |
35 |
36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | --------------------------------------------------------------------------------