DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Hagamos un widget del clima con alpine.js y open weather map
Angel Cruz
Angel Cruz

Posted on • Originally published at angelcruz.dev

Hagamos un widget del clima con alpine.js y open weather map

Alpine.js ofrece las propiedades reactivas y declarativas de grandes frameworks como Vue o React con un coste mucho menor. Mantiene el DOM, pudiendo mejorar y perfeccionar el comportamiento como mΓ‘s convenga. PodrΓ­amos considerarlo como un Tailwind para JavaScript.

Alpine nos ofrece 14 directivas y 6 propiedades mΓ‘gicas que puedes conocer leyendo su documentaciΓ³n.

Hagamos un pequeΓ±o ejemplo para entender mejor que es alpinejs

Bueno, pongamos manos a la obra y trabajemos en un widget para el clima que se verΓ‘ mΓ‘s o menos como esto:

proyecto alpinejs

template original de iaminos.

Para hacer este proyecto necesitamos conocer sobre:

  • template strings
  • algunas directivas de alpine:
    • x-data: Declara un nuevo scope del componente.
    • x-init: Ejecuta una expresiΓ³n cuando un componente se inicializa.
    • x-text: Actualiza el innerText del elemento.
  • tener una llave api de open weather map.

Asumiendo que bajaron el template vamos a irlo modificando poco a poco.

En el <head> vamos a incluir esta estiqueta javascript:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

Ya con esto tendremos alpine inicializado.

Ahora vamos a crear una etiqueta script y vamos a incluir lo siguiente:

function temp() {
    return {
        temp: {},
        init() {
            // todo
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Si quieres saber como continua, te invito a mi blog.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.