show-weather

An app to tell you the weather of your location or another city you want to search.

This app was made for #100DaysOfCode.

This project also belongs to #100DaysOfVue initiative.

Additional used components

• Vue.js framework.
• Open weather API.
• gravit and vectr for svg icons.
• The amazing SVGMG to compress the svg file.

Learned during the process

• I learned to BEM for CSS styles.
• How use a design program (a little bit 😅)
• I understood a little bit more about svg:

  • That defs tag is used to "define" the path to draw but It not rendered immediately. For render the paths needs a use tags with and href attribute with de id of the path to render.

  • The path and use tag can be grouped with the tag g. This g tag is useful to apply styles (e.g. fill, stroke, stroke-width) to all path inside of it much faster.

    <g fill="black" stroke-width="3px" stroke="yellow">
      <!-- All paths inside here have the properties of g tag
    </g>
    

  • How animate svg gradientes with animate tag.

• I learned to use Dynamic imports with vue. 💪
• How better use CSS custom properties for faster responsive design.
• How to apply vue animations.
• How to do error management with vue using fetch api.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint