My Online Wallet

Headings

Headings are used to introduce new sections (e.g. accounts, expenses...). The lowest heading should be h4. If there is need for a lower heading, restructure the content so that the lowest heading is h4. The color of the heading may be changed to fit the context, the font-size, margin and font-weight must however stay the same as the given example.

/*CSS*/
h1{
    font-size: 35px;
    font-weight: 700;
    color: #85bdbf;
    margin: 20px 0 10px;
}

h2{
    font-size: 30px;
    font-weight: 700;
    margin: 15px 0 8px;
}

h3{
    font-size: 25px;
    font-weight: 700;
    color: #85bdbf;
    margin: 10px 0 5px;
}

h4{
    font-size: 20px;
    font-weight: 700;
    margin: 8px 0 4px;
}

Lists

Lists are used to list multiple parts of content in one block (e.g. different accounts, expenses, navigation). Lists are always coded with the "ul" tags (unordered list) and "ol" tags (ordered list) and the list points with "li" tags. When creating a list for navigation, always enclose the list in the semantic "nav" tag. In order to keep the design consistent, we only use the following listpoints:

Code:

/*CSS*/
ul{
    list-style: none;
}

li::before{
    /*bullet*/
    content: "\2022";  /* unicode for a bullet */
    font-size: 30px;
    color: #85bdbf;
    font-weight: bold;
    display: inline-block; /*space between the bullet and the text */
    width: 1em; /* Also for the space */
    margin-left: -1em;
}

li::before{
    /*arrow*/
    content: "\25B6";  /* unicode for a arrow */
    font-size: 15px;
    color: #85bdbf;
    font-weight: bold;
    display: inline-block; /*space between the arrow and the text */
    width: 2em; /* Also for the space */
    margin-left: -2em;
}

Links

Code:

/*CSS*/
a{
    color: #85bdbf; 
    font-weight: 700;
    text-decoration: none;
    font-style: italic;
}
a:hover{
    text-decoration: underline;
}

Media blocks

The My Online Wallet website is structured in media blocks. All content (e.g. forms, accounts, diagrams...) is contained in blocks. All blocks of content must be enclosed in a "section" tag. The edges must be rounded with using border-radius and the value 10px. The background color of the block can be chosen to fit the context, it must however be distinguishable from the background behind the media block. The text color must also be adapted to provide enough contrast to the media block background color. The text-align must always be left. The width depends on the amount and type of content. It should not however exceed 500px. Any blocks wider than 500px should be broken down into smaller blocks with a maximum width of 500px.

Code:

<!--HTML-->
<section class="media-block">
    <h2>Tip of the day</h2>
    <p>Never go shopping for food on an empty stomach! This leads to you buying more than you need.</p>
</section>

/*CSS*/
.media-block{
    background:#dfedee;
    border-radius: 10px;
    text-align: left;
    padding:10px;
    width:300px; 
    margin:20px 0;      
}

Navigation

The navigation should have the "Glacier" (#85bdbf) background-color and the font color should be white. The navigation should be positioned inside a "nav" tag. The navigation should be structured as an unordered list. The "a" tag should always be placed inside the "li" tag and not the other way around. Navigation is used for the main menu points and also for links in the footer. It is also used to toggle between the different diagram types.

Code:

<!--HTML-->
<nav>
    <ul>
        <li><a href="">Accounts</a></li>
        <li><a href="">Outgoings</a></li>
        <li><a href="">Incomings</a></li>
        <li><a href="">Diagrams</a></li>
    </ul>
</nav>

Code:

/*CSS*/
nav ul{
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: #85bdbf;
}
nav a{
    color: white;
    text-decoration: none;
    font-style:normal;
    font-weight:400;
}
nav a:hover{
    text-decoration: underline;
} 

Buttons

Tags that fall under as buttons are "button" tags, "input[type=submit]" tags and "a" tags that are used as buttons. Icons are also used as buttons. The buttons must be consistent throughout the website and they must appear to the user as buttons (in a border). When the mouse hovers over the button, the style should change to a white background and glacier colored text. When the cursor is on the button, it should become a pointer, so that the user can quickly tell that it is clickable. The border-radius should always be 5px. The size of the buttons must be big enough for smartphone users to be able to tap the button with ease.

Code:

<!--HTML-->
<button>Button</button>
<input type="submit" value="Submit Button">
<a href="" class="a-button">Anchor link</a>
        

/*CSS*/
button, input[type=submit], .a-button{
    background: #85bdbf;
    color: white;
    min-width: 80px;
    border: 1px solid white;
    font-weight: 400;
    font-style: normal;
    padding: 5px;
    font-size: 20px;
    font-family: 'Overlock', sans-serif;
    border-radius:5px;
    text-decoration:none;
    cursor:pointer;
}
button:hover, input[type=submit]:hover, .a-button:hover{
    background: white;
    color: #85bdbf;
}

Form elements

Forms on The Online Wallet are used for giving feedback, adding expenses and creating categories. It is important to always place the form contents inside a "form" tag. We use CSS Grid to style our forms, as it lines the inputs and labels up neatly. The most efficient way to do this is by using grid-auto-flow which automatically places items of the form in to the correct grid row/column

Code:

<!--HTML-->
<form>
    <label for="amount">Amount</label>
    <input type="text" id="amount">
    <label for="category">Category</label>
    <input type="text" id="category">
    <label for="payment">Payment type</label>
    <input type="text" id="payment">
    <label for="comments">Comments</label>
    <input type="text" id="comments">
    <input type="submit" value="Add">
</form>

/*CSS*/
form{
    display: grid;
    grid-template-columns: [labels] auto [controls] 1fr;
    grid-auto-flow: row;
    grid-gap: 20px 40px;
    margin-bottom: 30px;
}

Diagrams

Since the unique selling proposition of My Online Wallet is the visualisation of expenses through diagrams, it is important that these consistent in design and self explanatory. The Online Wallet uses the JavaScript library "Chart.js" to create these charts. To depict the diagrams that explain the categories and their budgets, the chart type "doughnut" is used (with various cutoutPercentage). In order to compare the monthly outgoings, the chart type "line" is used. There are some example code snippets below, but please refer to the Chart.js documentation for further information, chart types, options and examples.

Code:

<!--HTML-->
<canvas id="myChart" width="200" height="200"></canvas>
<canvas id="myChart2" width="200" height="200"></canvas>
<canvas id="myChart3" width="200" height="200"></canvas>
        

//js
import Chart from 'chart.js';

//Chart 1 (all categories)
let ctx = document.getElementById("myChart").getContext('2d');
let myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Food", "Clothes", "Housing", "Travel", "Other"],
        datasets: [{
            label: '# of outgoings',
            data: [12, 19, 3, 5, 2],
            backgroundColor: [
                '#f7c1c0',
                '#85bdbf',
                '#c7cbe7',
                '#9ad1e1',
                '#eab669'
            ],
            borderColor: [
                '#FFFFFF'
            ],
            borderWidth: 3
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});


//Chart 2 (one category)
ctx = document.getElementById("myChart2").getContext('2d');
let myChart2 = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Spent", "What's left"],
        datasets: [{
            label: '# of outgoings',
            data: [12, 3],
            backgroundColor: [
                '#f7c1c0',
                '#c4c4c4'
            ],
            borderColor: [
                '#FFFFFF'
            ],
            borderWidth: 0
        }]
    },
    options: {
        cutoutPercentage: 80,   //percentag of how much is cut out of the middle of the circle (0 = pie chart, 50 = doughnut chart)
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});


//Chart 3 (monthly outgoings)
ctx = document.getElementById("myChart3").getContext('2d');
let myChart3 = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May"],
        datasets: [{
            label: '€ of outgoings',
            data: [420, 190, 300, 250, 200],
            backgroundColor: [
                'rgba(255, 255, 255, 0)',
            ],
            borderColor: [
                '#eab669'
            ],
            borderWidth: 3
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
        

Icons

Icons are used as buttons for adding, editing and removing content.

Code:

<!--HTML-->
<img src="img/add.svg" alt="Add icon, circle with a black outline and a black plus inside it.">
<img src="img/edit.svg" alt="Edit icon, circle with a black outline and a black pencil inside it.">
<img src="img/delete.svg" alt="Edit icon, circle with a black outline and a black bin inside it.">

Example:

My Accounts

Bank

Savings account.....................3354.90€

Download the icons (SVG):