Tutorial del proyecto JavaScript de calificación de emojis

Archivos completos del proyecto

Créalo a partir del código fuente

Crea los archivos del proyecto, copia el código y abre el archivo HTML en tu navegador.

1Crea 3 archivos
→
2Copia el código
→
3Ejecuta index.html

Antes de ejecutarlo

Mantén todos los archivos del proyecto juntos en la misma carpeta.

Estructura del proyecto

emoji-rating/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Emoji Rating</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
      integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="feedback-container">
      <div class="emoji-container">
        <i class="far fa-angry fa-3x"></i>
        <i class="far fa-frown fa-3x"></i>
        <i class="far fa-meh fa-3x"></i>
        <i class="far fa-smile fa-3x"></i>
        <i class="far fa-laugh fa-3x"></i>
      </div>
      <div class="rating-container">
        <i class="fas fa-star fa-2x active"></i>
        <i class="fas fa-star fa-2x"></i>
        <i class="fas fa-star fa-2x"></i>
        <i class="fas fa-star fa-2x"></i>
        <i class="fas fa-star fa-2x"></i>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Clasificación de emojis

Clasificación de emojis

Créalo a partir del código fuente

Practica con proyectos relacionados

Sección de pestañas

Barra de progreso de pasos

Interfaz de usuario de comentarios

Sección de pestañas

Barra de progreso de pasos

Interfaz de usuario de comentarios