Problem:
Expense Tracker is a simple HTML and CSS application where user's can enter details of their expenses.
- Create an Expense Tracker app in which users can track expenses incurred by them.
- Develop front-end content using HTML and CSS.
- Create 4 HTML pages and 1 CSS page. Creating HTML Pages
- Every HTML page must have the main content inside a div tag class named main-content.
- Every HTML page must have a header and a footer tag.
- To mark the current page in the navbar use the class name current in the anchor tag to indicate that the current page is being accessed.
index.html
- For the home page, create a simple web page containing a header, footer, and a div class named main-content.
- Use the current class to mark the link to the home page. Refer to the following screenshot:
login.html
In main-content, use the form tag to create a form containing 2 input fields, 1 button, and a link to redirect to the registration page for users who are not registered (no login credentials). Refer to the following screenshot:
register.html
In main-content, use the form tag to create a form containing 3 input fields, 1 button, and a link to redirect to the login page for users who are already registered. Refer to the following screenshot:
expense.html
In main-content, use the form tag to create a form containing a drop-down menu (Card, Cash, Cryptocoin, and Other), 3 input fields, and 1 button. Refer to the following screenshot:
Creating CSS Page
- Refer to the screenshots for details about the styling of the page
- Use a relative position and place the content of the div tag class main-content in the center of the page.
- Use proper color specifications for all the text and backgrounds on the page. Note: There is a linear-gradient type of styling on the background of each page.
Notes:
- Use appropriate headings and font size.
- Use appropriate placeholders for form elements.
- Link the style page with all the static HTML pages.
Solution:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Expense Tracker</title>
</head>
<body>
<header>
<nav>
<a href="index.html" class="current">Home</a>
<a href="login.html">Login</a>
<a href="register.html">Register</a>
<a href="expense.html">Note Expense</a>
</nav>
</header>
<div class="main-content">
<h1>Welcome to the expense tracker system!!!!!</h1>
<h3>Quote of the day:</h3>
<p>Being in control of your finances is a great stress reliever!!!!!</p>
</div>
<footer>Copyright © 2020 All Rights Reserved</footer>
</body>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Login</title>
</head>
<body>
<header>
<nav>
<a href="index.html">Home</a>
<a href="login.html" class="current">Login</a>
<a href="register.html">Register</a>
<a href="expense.html">Note Expense</a>
</nav>
</header>
<div class="main-content">
<form action="">
<input type="text" placeholder="username" name="username">
<input type="password" placeholder="password" name="password">
<button>Login</button>
<p>Not registered? <a href="register.html">Create an account</a></p>
</form>
</div>
<footer>Copyright © 2020 All Rights Reserved</footer>
</body>
</html>
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Register</title>
</head>
<body>
<header>
<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="register.html" class="current">Register</a>
<a href="expense.html">Note Expense</a>
</nav>
</header>
<div class="main-content">
<form action="">
<input type="text" name="name" placeholder="name">
<input type="password" name="password" placeholder="password">
<input type="text" name="email address" placeholder="email address">
<button>Create</button>
<p>Already registered? <a href="login.html">Sign In</a></p>
</form>
</div>
<footer>Copyright © 2020 All Rights Reserved</footer>
</body>
</html>
expense.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Note Expense</title>
</head>
<body>
<header>
<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="register.html">Register</a>
<a href="expense.html" class="current">Note Expense</a>
</nav>
</header>
<div class="main-content">
<form action="">
<h1>Add a new item:</h1>
<label for="type">Type:</label>
<select name="type" id="type">
<option value="card">Card</option>
<option value="cash">Cash</option>
<option value="cryptocoin">Cryptocoin</option>
<option value="other">Other</option>
</select>
<label for="name">Name:</label>
<input type="text" placeholder="What did you spend on?" name="name">
<label for="date">Date:</label>
<input type="date" name="date">
<label for="amount">Amount:</label>
<input type="number" placeholder="How much?" name="amount">
<button>Add a new expense</button>
</form>
</div>
<footer>Copyright © 2020 All Rights Reserved</footer>
</body>
</html>
style.css
*{
box-sizing: border-box;
}
body {
background: linear-gradient(to left, rgb(0, 0, 0), rgb(128, 128, 128));
position: relative;
padding: 0;
margin: 0;
}
header{
background: rgb(51, 51, 51) none repeat scroll 0% 0% / auto padding-box border-box;
position: fixed;
top: 0;
width: 100%;
padding: 0.5rem;
}
nav a, nav a:visited, nav a:link{
color: white;
padding: 0.5rem;
text-decoration: none;
}
nav a:hover{
background-color: white;
color: black;
}
nav a.current{
background-color: rgba(211, 211, 211, 1);
}
footer{
background: rgb(51, 51, 51) none repeat scroll 0% 0% / auto padding-box border-box;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
padding: 0.5rem;
color: white;
}
.main-content{
background-color:rgba(255, 255, 255, 1);
position: relative;
text-align:center;
max-width: 500px;
padding: 2rem 1.5rem;
margin: 5rem auto 1rem;
}
form p {
color: #999;
}
form a{
color: black;
text-decoration: none;
}
input, button, select{
display: block;
width: 100%;
padding: 0.75rem;
margin: 0.5rem;
}
input, select{
background-color: #ddd;
border: 1px solid #ddd;
}
button{
background-color: black;
color: white;
border-radius: 0;
border: 1px solid black;
text-transform: uppercase;
}
button:hover{
color: black;
background-color: white;
}
Output:
Index Page
Login Page
Register Page
Note Expense Page
