Expense Chart - Frontend Mentor

VirtualPuja — Tue, 29 Aug 2023 19:49:32 +0000

The Prerequisites

Creating the Expense Chart

HTML5 and CSS

The first container with the balance and SVG should be within a "div" element, which can be styled with Flexbox.

<div class="balance">
        <div class="bal-section">
          <h2>My balance</h2>
          <p class="monthly-balance">$921.48</p>
        </div>
        <div class="svg">
          <i class="uil uil-adjust-circle"></i>
        </div>
      </div>

.balance {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background-color: var(--primary-color);
  width: 450px;
  height: 100px;
  border: none;
  border-radius: 20px;
  box-sizing: border-box;
  margin-top: 20px;
}

The second container will reference the chart along with the monthly total. The "canvas" element is a container for the expense chart, which will be created via JavaScript.

 <div class="chart-div">
        <h1>Spending - Last 7 days</h1>
        <div class="js-chart">
          <canvas id="myChart" style="width:100%;max-width:700px"></canvas>
        </div>
        <hr />
        <div class="bottom-data">
          <div class="left">
            <h3>Total this month</h3>
            <p class="monthly-total">$478.33</p>
          </div>
          <div class="right">
            <h4>+2.4%</h4>
            <p class="per">from last month</p>
          </div>
        </div>
      </div>

JavaScript

You should create three variables for the labels, data, and the background colors for each of the bars. These variable will be used in the expense chart object.

const weekday = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const expenseValue = [17.45, 34.91, 52.36, 37.07, 23.79, 43.28, 25.48];
const barColors = ["#f4ceb8", "#e2cbd9", "#c2a2c2", "#bfd1d0", "#e9a7b8", "#a4d4dc", "#dfefc6"];

By using the "new" keyword, you can create an instance of the "chart" object. You must reference the "id" from the "canvas" element to acquire the chart, which will allow you to add all the values to the properties.

new Chart("myChart", { 
  type: "bar",
  data: {
    labels: weekday,
    datasets: [{
      backgroundColor: barColors,
      data: expenseValue
    }]
  },
  options: {
    scales: {
        x: {
            grid: {
               display: false
            }
         },
         y: {
            grid: {
               display: false
            }
         }
   },
   plugins: {
    legend: {display: false}
  }}
});

I hope you enjoyed this tutorial!

Wave Divider SVG

VirtualPuja — Thu, 13 Jul 2023 21:03:33 +0000

Adding a waves or shape divider is a modern and creative way to separate the sections on a website. The simplest way to create this effect is to add a SVG to your HTML. You can generate one on (https://getwaves.io/).

While the HTML is pretty straight-forward, it is necessary to use CSS to place the header element in front of the background image and SVG, which can be achieved with the z-index property. Also, you will need to set the position property of the SVG to absolute in order for it to be placed on top of the image rather than above it. You should set the top and right properties to 0, so that the "wave" is pinned regardless of the screen size.

  <body>
    <main>
      <section class="menu">
        <h2 class="text-center menu-title">Menu</h2>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
          <path
            fill="#FAF883"
            fill-opacity="1"
            d="M0,96L60,122.7C120,149,240,203,360,240C480,277,600,299,720,261.3C840,224,960,128,1080,128C1200,128,1320,224,1380,272L1440,320L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"
          ></path>
        </svg>
        <img src="gallery-background.jpg" alt="" class="gallery-background" />
      </section>
    </main>
  </body>