Scribd
Upload
10 views3 pages

Budget

This document is an HTML template for a budget application. It includes input fields for setting a total budget and entering expenses, along with error messages for validation. The layout features sections for displaying total budget, expenses, balance, and a list of expenses.

Uploaded by

odunsal5
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views3 pages

Budget

This document is an HTML template for a budget application. It includes input fields for setting a total budget and entering expenses, along with error messages for validation. The layout features sections for displaying total budget, expenses, balance, and a list of expenses.

Uploaded by

odunsal5
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/


all.min.css">

<link rel="stylesheet" href="style.css">

<title> Budget App </title>

</head>

<body>

<div class="wrapper">

<div class="container">

<div class="sub-container">

<div class="total-amount-container">

<h3>Budget</h3>

<p class="hide error" id="budget-error">

Value cannot be empty or negative

</p>

<input type="number" id="total-amount" placeholder="Enter Total Amount">

<button class="submit" id="total-amount-button">

Set Budget
</button>

</div>

<div class="user-amount-container">

<h3>Expenses</h3>

<p class="hide error" id="product-title-error">

Values cannot be empty

</p>

<input type="text" class="product-title" id="product-title" placeholder="Enter Title Of


Product">

<input type="number" id="user-amount" placeholder="Enter Cost Of Product">

<button class="submit" id="check-amount">Check Amount</button>

</div>

</div>

<div class="output-container flex-space">

<div>

<p>Total Budget</p>

<span id="amount">

</span>

</div>

<div>

<p>Expenses</p>

<span id="expenditure-value">

0
</span>

</div>

<div>

<p>Balance</p>

<span id="balance-amount">

</span>

</div>

</div>

</div>

<div class="list">

<h3>Expenses List</h3>

<div class="list-container" id="list"></div>

</div>

</div>

<script src="index.js"></script>

</body>

</html>

You might also like