Esta primera evaluación parcial abarca los siguientes conceptos:
- Node.js
- HTML
- CSS
- TypeScript
- Git y GitHub
- Computadora personal con conectividad a Internet.
- Cuenta de GitHub dada de alta en el classroom de GitHub for Education del grupo.
- Enlace de la asignación en el classroom de GitHub for Education correspondiente al examen.
- Abre un navegador de Internet y autentícate en GitHub con la cuenta que tienes dada de alta para las asignaciones de la clase.
- Navega al enlace del examen (asignación en el classroom de GitHub for Education) y acepta la asignación.
- Navega al repositorio del examen (provisto al final del paso anterior).
- Crea e inicia un Codespace del repositorio del examen (Machine type: 2 cores).
- Opcionalmente podrás responder al examen clonando el repositorio a tu ambiente de desarrollo local el cual deberá contar con ambiente integrado de desarrollo, instalación de Node.js con las herramientas node y npm, capacidad de instalar paquetes externos de Node.js por medio de Node Package Manager (npm).
- Lleva a cabo las actividades descritas en el archivo README.md.
- Verifica que el código implementado cumpla con los requerimientos. Asegúrate que los archivos estén guardados.
- Por cada actividad completada del examen, registra los cambios de los archivos en el sistema de control de versiones local (commit) y publícalos al respositorio remoto (push).
- Envía un correo con título: "<NUM_GRUPO>-<MATRICULA>:Primer examen parcial", en el cuerpo del correo incluye el enlace al repositorio de tu examen al correo del Tec de tu profesor.
- Título de ejemplo: 400-AL123456: Enlace a primer examen parcial.
- Correo: marciano.moreno [arroba] tec.mx.
100 minutos
El examen iniciará al minuto 10 de la hora calendarizada de inicio la clase (p.e. para la hora de inicio de las 8:00 el examen iniciará a las 8:10).
El examen concluirá 10 minutos antes de la hora calendarizada de fin de la clase (p.e. para la hora de fin de las 10:00 el examen concluirá a las 9:50).
NOTA: Solo se evaluarán exámenes recibidos hasta la hora señalada de conclusión.
"Apegándome al Código de Ética de los Estudiantes del Tecnológico de Monterrey, me comprometo a que mi actuación en este examen esté regida por la honestidad académica".
Realiza las actividades descritas a continuación.
Inicializa un proyecto de node considerando los siguientes requerimientos:
-
Inicializa npm
npm init
-
Instala TypeScript como dependencia de desarrollo
npm install typescript --save-dev
-
Verifica que
package.json
en la secciónscripts
, cuente con los siguientes:"tsc": "tsc"
"tsc:w: "tsc --watch"
-
Inicializa TypeScript y genera su archivo de configuración de TypeScript
npm run tsc -- --init
-
Instala WebPack como dependencia de desarrollo
npm install --save-dev webpack
-
Instala el CLI de WebPack como dependencia de desarrollo
npm install --save-dev webpack-cli
-
Inicializa un proyecto de WebPack por medio de
npx webpack-cli init
considerando las propiedades listadas abajo
Would you like to install '@webpack-cli/generators' package? (That will run 'npm install -D @webpack-cli/generators') (Y/n) Y
? Which of the following JS solutions do you want to use? Typescript
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? CSS only
? Will you be using PostCSS in your project? Yes
? Do you want to extract CSS for every file? Only for Production
? Do you like to install prettier to format generated configuration? Yes
? Pick a package manager: npm
[webpack-cli] ℹ INFO Initialising project... conflict package.json
? Overwrite package.json? overwrite force package.json create src/index.ts conflict README.md
? Overwrite src/index.ts? do not overwrite
? Overwrite README.md? do not overwrite skip README.md create index.html create webpack.config.js conflict tsconfig.json
? Overwrite tsconfig.json? do not overwrite skip tsconfig.json create postcss.config.js
-
Asegúrate de contar con un archivo
.gitignore
que incluya las carpetas node_modules y dist. Visual Code Web podría presentar una alerta accionable al respecto o puedes crear el archivo de forma manual. -
[OPCIONAL] Añade la siguiente configuración a tsconfig.json:
- "outDir": "./dist"
Implementa los siguientes requerimientos en la página ./index.html
:
- Declarativa DOCTYPE html
- Elemento raíz
<html>
con los elementos descritos abajo y su tag de cierre al final
- Elemento
<head>
vacío
- Elemento
<body>
con los elementos descritos abajo y su tag de cierre al final - Encabezado de primer nivel
<h1>
con texto "Verificador de palabras" - Párrafo
<p>
con texto:Ingresa una palabra
- Caja de entrada de texto
<input>
con atributoid
igual ainputText
- Botón
<button>
con atributoid
igual abuttonSubmit
y texto Enviar. <div>
con atributoid
igual adivResult
Implementa los siguientes requerimientos en la hoja de estilo ./src/styles.css
(styles en plural es la práctica recomendada).
- estilo
palindrome
con los siguientes atributos:- tamaño de la fuente
large
- color
white
- color de fondo
blue
- tamaño de la fuente
- estilo
notPalindrome
con los siguientes atributos:- tamaño de la fuente
large
- color
white
- color de fondo
purple
- tamaño de la fuente
Implementa los siguientes requerimientos en el archivo nuevo src/checker.ts
:
- Implementa la función
isPalindrome
considerando:- Parámetro:
text
de tipostring
- Tipo de retorno:
boolean
- Escribir en consola el texto provisto como argumento
- isPalindrome es
true
si cada uno de sus caracteres de izquierda a derecha (índice 0 a indíce length -1) corresponde al caracter del texto en el orden inverso, de derecha a izquiera (índice length - 1 a índice 0). Ignorar la diferencia entre mayúsculas y minúsculas en la comparación.
- Parámetro:
Ejemplos:
isPalindrome('Anna') == true
isPalindrome('México') == false
- Exporta la función
isPalindrome
comodefault
del archivo./src/checker.ts
.
Implementa los siguientes requerimientos en src/index.ts
:
-
Importa la hoja de estilo
style.css
-
Importa la función
isPalindrome
de./checker
-
Implementa la función buttonSubmitClick considerando:
- No recibe argumentos.
- Obten una referencia denominada
inputText
de tipo<HTMLInputElement>
al elemento HTML con idinputText
- Invoca a la función
isPalindrome()
empleando como parámetro el valor de la caja de textoinputText
- Obten una referencia de tipo
<HTMLDivElement>
al elementodiv
con idresult
- Si el resultado de
isPalindrome()
estrue
:- Asigna al
div
el texto internoThe word is palindrome
- Asigna al div la clase CSS
palindrome
- Asigna al
- Si el resultado de
isPalindrome()
esfalse
:-
- Asigna al
div
el texto internoThe word is not palindrome
- Asigna al
- Asigna al div la clase CSS
notPalindrome
-
- Añade un bloque de código donde se añada un EventListener al botón con id
button
con callback a la funciónbuttonSubmitClick
- Ejecuta el comando
npm run serve
para verificar tu implementación.
Asegúrate que todos los cambios al código asociados con tu respuesta al examen se encuentren registrados en control de versiones local (commit) y publicados en el repositorio remoto (push).
- src
- checker.ts
- index.ts
- style.css
- .gitignore
- index.html
- package-lock.json
- package.json
- postcss.config.js
- tsconfig.json
- webpack.config.js
Responde a la pregunta en el examen de Canvas con en enlace de tu repositorio.
Gracias por tu participación y compromiso.