<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1717380123642/98f0501e-4748-4e7d-9555-c78c718d6777.jpeg" alt class="image--center mx-auto" />
Bienvenido,
Nuestra misión será crear un componente gráfico de gastos, usando HTML, CSS y JavaScript; y lograr que se parezca lo más posible al diseño.
Los usuarios deberían poder:
<ol>
<li>Ver un diseño óptimo en pantallas grandes(<code>1200px</code>) y pequeñas(<code>375px</code>).
</li>
<li>Ver el gráfico de barras y superponer el cursor sobre las barras individuales para ver las cantidades correctas para cada día.
</li>
<li>Ver la barra del día actual resaltada en un color diferente al de las otras barras.
</li>
</ol>
Consideraciones:
<ol>
<li>Agregar icono favicon al proyecto.
</li>
<li>Renombrar URL fácil de recordar (ej. expenses-chart-component).
</li>
<li>Agregar título al proyecto (ej. Expenses Chart Component - Frontend Club).
</li>
<li>Bonus: Documenta el proyecto con un archivo <a target="_blank" href="http://readme.md">readme.md</a>
</li>
</ol>
<h2 id="heading-recursos">Recursos</h2>
Lista de recursos para ayudarte a completar el reto.
<ol>
<li><a target="_blank" href="https://github.com/frontend-club/100daysofprojects">Clonar proyecto inicial</a>
</li>
<li><a target="_blank" href="https://www.frontendmentor.io/challenges/expenses-chart-component-e7yJBUdjwt">Visualizar diseño original</a>
</li>
</ol>
<h3 id="heading-referencias">Referencias</h3>
Nuestro agradecimiento a las fuentes que hacen posible los recursos y nos inspiran a seguir compartiendo conocimiento.
<ul>
<li><a target="_blank" href="https://www.w3schools.com/">W3Schools</a>
</li>
<li><a target="_blank" href="https://www.w3schools.com/">UI Desi</a><a target="_blank" href="https://www.uidesigndaily.com/">gn D</a><a target="_blank" href="https://www.w3schools.com/">aily</a>
</li>
<li><a target="_blank" href="https://www.w3schools.com/">F</a><a target="_blank" href="https://www.uidesigndaily.com/">rontend Me</a><a target="_blank" href="https://www.w3schools.com/">ntor</a>
</li>
</ul>
El diseño de este proyecto es propiedad de: <a target="_blank" href="https://www.frontendmentor.io/challenges/expenses-chart-component-e7yJBUdjwt">Frontend Mentor</a>
<hr />
<blockquote>
"La mejor manera de aprender a programar es practicando todos los días"
</blockquote>

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717380123642/98f0501e-4748-4e7d-9555-c78c718d6777.jpeg align="center")

Bienvenido,

Nuestra misión será crear un **componente gráfico de gastos**, usando HTML, CSS y JavaScript; y **lograr que se parezca lo más posible al diseño**.

**Los usuarios deberían poder:**

1. Ver un diseño óptimo en pantallas grandes(`1200px`) y pequeñas(`375px`).
    
2. Ver el gráfico de barras y superponer el cursor sobre las barras individuales para ver las cantidades correctas para cada día.
    
3. Ver la barra del día actual resaltada en un color diferente al de las otras barras.
    

**Consideraciones:**

1. Agregar icono favicon al proyecto.
    
2. Renombrar URL fácil de recordar (ej. expenses-chart-component).
    
3. Agregar título al proyecto (ej. Expenses Chart Component - Frontend Club).
    
4. **Bonus**: Documenta el proyecto con un archivo [readme.md](http://readme.md)
    

## Recursos

Lista de recursos para ayudarte a completar el reto.

1. [Clonar proyecto inicial](https://github.com/frontend-club/100daysofprojects)
    
2. [Visualizar diseño original](https://www.frontendmentor.io/challenges/expenses-chart-component-e7yJBUdjwt)
    

### Referencias

Nuestro agradecimiento a las fuentes que hacen posible los recursos y nos inspiran a seguir compartiendo conocimiento.

* [W3Schools](https://www.w3schools.com/)
    
* [UI Desi](https://www.w3schools.com/)[gn D](https://www.uidesigndaily.com/)[aily](https://www.w3schools.com/)
    
* [F](https://www.w3schools.com/)[rontend Me](https://www.uidesigndaily.com/)[ntor](https://www.w3schools.com/)
    

El diseño de este proyecto es propiedad de: [Frontend Mentor](https://www.frontendmentor.io/challenges/expenses-chart-component-e7yJBUdjwt)

---

> *"La mejor manera de aprender a programar es practicando todos los días"*

Crea un componente gráfico de gastos con HTML, CSS y JavaScript, optimizado para diferentes tamaños de pantalla.

Expenses Chart Component - Frontend Club

PROY36: Expenses Chart Component

"La mejor manera de aprender a programar es practicando todos los días".
