Today’s Movies in U.S. Theaters with updated Statistics from tmdb.org

Movie	Average Vote	Days in Theaters	Popularity
Final Destination Bloodlines	★★★☆★ 7.2	44	710
Lilo & Stitch	★★★☆★ 7.1	41	402
How to Train Your Dragon	★★★★★ 7.9	21	337
KPop Demon Hunters	★★★★★ 8.6	7	307
28 Years Later	★★★☆★ 7.1	9	290
STRAW	★★★★★ 8	22	183
Diablo	★★★☆★ 7.2	14	206
F1 The Movie	★★★★★ 8	2	159
Predator: Killer of Killers	★★★★★ 8	22	148
28 Days Later	★★★☆★ 7.2	NA	139
Sinners	★★★☆★ 7.6	72	142
Mission: Impossible - The Final Reckoning	★★★☆★ 7.2	41	125
Deep Cover	★★★★★ 6.7	15	111
Jurassic World Rebirth	★★★☆★ 7.2	NA	104
Ballerina	★★★☆★ 7.1	23	99
K.O.	★★★★★ 6.7	22	93
Elio	★★★★★ 6.8	9	80
Den stygge stesøsteren	★★★☆★ 7.2	112	80
The Phoenician Scheme	★★★☆★ 6.9	35	84
Warfare	★★★☆★ 7.2	79	72

movies_df_ojs = await FileAttachment("data/movies_data_simplified.json").json()

viewof movieDropdown = Inputs.select(
  movies_df_ojs.map(d => d.original_title),
  {
    label: "Choose a movie",
    unique: true
  }
)

Last updated: 2025-06-27 13:24:12

selectedMovie = movies_df_ojs.find(d => d.original_title === movieDropdown)

// Formatear los números
formattedVoteAverage = selectedMovie.vote_average.toFixed(1)
formattedPopularity = new Intl.NumberFormat('en-US').format(Math.round(selectedMovie.popularity))

// Agregar iconos y ajustar el formato
html`<div style="display: flex; flex-direction: column; align-items: center; color: white;">
  <!-- Sección del póster -->
  <div style="width: 100%; display: flex; justify-content: center; margin-bottom: 20px;">
    <img src="${selectedMovie.backdrop_url}"
         alt="${selectedMovie.original_title}"
         style="max-width: 80%; 
                max-height: 400px;
                width: auto;
                height: auto;
                object-fit: contain;">
  </div>

  <!-- Sección de estadísticas -->
  <div style="width: 90%; text-align: center;">
    <h2>${selectedMovie.original_title}</h2>
    <p style="font-size: 0.8em;"><strong>Release Date:</strong> ${selectedMovie.release_date}</p>
    <p style="font-size: 0.8em;">
      <img src="https://img.icons8.com/emoji/48/000000/star-emoji.png" width="18" style="vertical-align: middle;" /> 
      <strong>Average Vote:</strong> ${formattedVoteAverage}
    </p>
    <p style="font-size: 0.8em;">
      <img src="https://img.icons8.com/ios-filled/50/000000/thumb-up.png" width="18" style="vertical-align: middle; filter: invert(1) brightness(2);" /> 
      <strong>Vote Count:</strong> ${selectedMovie.vote_count}
    </p>
    <p style="font-size: 0.8em;">
      <img src="https://img.icons8.com/ios-filled/50/000000/fire-element.png" width="18" style="vertical-align: middle; filter: invert(1) brightness(2);" /> 
      <strong>Popularity:</strong> ${formattedPopularity}
    </p>
    <p style="font-size: 0.8em; text-align: justify;"><strong>Overview:</strong> ${selectedMovie.overview}</p>
  </div>
</div>`