¿Qué vamos a construir?

Clase 44 de 51 • Fundamentos de JavaScript 2017

Clase anteriorSiguiente clase

Resumen

**Simón dice es un juego que te indicará qué teclas debes tocar, debes memorizarlas y hacer todo lo que Simón dice. **

En la sección de Archivos encontrarás el código para iniciar.

Waldry Diaz Martinez

student•

Estaba ansioso por hacer este curso

Diego Alejandro Ahumada Alzate

student•

Por si no les carga el html acá está

<html>
  <head>
    <title>Simon Dice</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="stylesheet" href="simon.css">
  </head>
  <body>
    <div class="keyboard">
      <div class="row">
        <div class="key">q</div>
        <div class="key">w</div>
        <div class="key">e</div>
        <div class="key">r</div>
        <div class="key">t</div>
        <div class="key">y</div>
        <div class="key">u</div>
        <div class="key">i</div>
        <div class="key">o</div>
        <div class="key">p</div>
      </div>
      <div class="row">
        <div class="key">a</div>
        <div class="key">s</div>
        <div class="key">d</div>
        <div class="key">f</div>
        <div class="key">g</div>
        <div class="key">h</div>
        <div class="key">j</div>
        <div class="key">k</div>
        <div class="key">l</div>
      </div>
      <div class="row last">
        <div class="key">z</div>
        <div class="key">x</div>
        <div class="key">c</div>
        <div class="key">v</div>
        <div class="key">b</div>
        <div class="key">n</div>
        <div class="key">m</div>
      </div>
    </div>
    <script>
      // Aquí tu código
    </script>
  </body>
</html>

Evert Escalante

student•

Bueno, vamos que vamos es mi tercera vez haciendo este curso, enserio necesito aprender js

Noe Mikhael Huaccharaque Ruiz

student•

Si les queda pegado el “divclass” … hacemos un “find replace” con “crtl + h”… Find: divclass , Replace: div class

KEVIN BRAYAN LUNA FIGUEROA

student•

Este juego se ve super interesante y con puro JavaScript!!

Eduardo Rasgado Ruiz

student•

Checa Three.js 🤘

Carlos Madrigal Ramos

student•

Por favor, traten de chequear el tema de descargar los archivos de esta clase. A mi no me esta funcionando… No se si el problema es general!..

Diego Forero

Team Platzi•

Al intentar descargar los archivos los esta abriendo en una pestaña nueva porque el navegador los interpreta, una vez se abre la pestaña solo tienes que dar click derecho y decirle guardar como.

Noe Mikhael Huaccharaque Ruiz

student•

copia y pega el codigo

Juan Jose Paredes

student•

no se escucha

Kath Sánchez

teacher•

¡Hola! He revisado el vídeo y se escucha bien, hay alguna parte en especial donde no lo escuches?

Jose Fabian Benavides Moreno

student•

Es muy interesante este tipo de clases donde realmente nos retan a aprender nuevas cosas, lo intentaré hacer solo y luego veré el siguiente video 😄

Luis Antonio Schmiel Paredes

student•

Que buena tarea!

Alejo Vera

student•

Hola, alguien por favor que copie y pegue el Html en los comentarios porque no se me descarga. Gracias!

Diego Forero

Team Platzi•

<html>
  <head>
    <title>Simon Dice</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="stylesheet" href="simon.css">
  </head>
  <body>
    <div class="keyboard">
      <div class="row">
        <div class="key">q</div>
        <div class="key">w</div>
        <div class="key">e</div>
        <div class="key">r</div>
        <div class="key">t</div>
        <div class="key">y</div>
        <div class="key">u</div>
        <div class="key">i</div>
        <div class="key">o</div>
        <div class="key">p</div>
      </div>
      <div class="row">
        <div class="key">a</div>
        <div class="key">s</div>
        <div class="key">d</div>
        <div class="key">f</div>
        <div class="key">g</div>
        <div class="key">h</div>
        <div class="key">j</div>
        <div class="key">k</div>
        <div class="key">l</div>
      </div>
      <div class="row last">
        <div class="key">z</div>
        <div class="key">x</div>
        <div class="key">c</div>
        <div class="key">v</div>
        <div class="key">b</div>
        <div class="key">n</div>
        <div class="key">m</div>
      </div>
    </div>
    <script>
      // AquÃ tu cÃģdigo
    </script>
  </body>
</html>

Diego Alejandro Ahumada Alzate

student•

Hay un error de espacios en lo que copiaste Gollum23

<html> <head> <title>Simon Dice</title> <link href=“<https://fonts.googleapis.com/css?family=Montserrat>” rel=“stylesheet”> <link rel=“stylesheet” href=“simon.css”> </head> <body> <div class=“keyboard”> <div class=“row”> <div class=“key”>q</div> <div class=“key”>w</div> <div class=“key”>e</div> <div class=“key”>r</div> <div class=“key”>t</div> <div class=“key”>y</div> <div class=“key”>u</div> <div class=“key”>i</div> <div class=“key”>o</div> <div class=“key”>p</div> </div> <div class=“row”> <div class=“key”>a</div> <div class=“key”>s</div> <div class=“key”>d</div> <div class=“key”>f</div> <div class=“key”>g</div> <div class=“key”>h</div> <div class=“key”>j</div> <div class=“key”>k</div> <div class=“key”>l</div> </div> <div class=“row last”> <div class=“key”>z</div> <div class=“key”>x</div> <div class=“key”>c</div> <div class=“key”>v</div> <div class=“key”>b</div> <div class=“key”>n</div> <div class=“key”>m</div> </div> </div> <script> // Aquí tu código </script> </body> </html>```

¿Qué vamos a construir?

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial