Skip to content

Commit f9c8448

Browse files
msrihanreddy5-codemsrihanreddy5-code
authored
Add files via upload
1 parent 97f3683 commit f9c8448

9 files changed

+1443
-0
lines changed

‎Budget Tracker JavaScript.txt‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Budget Tracker</title>
6+
<link rel="stylesheet" href="styles.css">
7+
</head>
8+
<body>
9+
<div class="container">
10+
<h1>Budget Tracker</h1>
11+
<form id="entry-form">
12+
<input type="number" id="amount" placeholder="Amount" required>
13+
<input type="text" id="category" placeholder="Category" required>
14+
<select id="type">
15+
<option value="income">Income</option>
16+
<option value="expense">Expense</option>
17+
</select>
18+
<button type="submit">Add Entry</button>
19+
<button type="button" id="undo">Undo</button>
20+
</form>
21+
<div id="alert"></div>
22+
<div>
23+
<label>Show Chart:</label>
24+
<select id="chart-type">
25+
<option value="weekly">Weekly</option>
26+
<option value="monthly">Monthly</option>
27+
</select>
28+
</div>
29+
<canvas id="chart" width="400" height="200"></canvas>
30+
<ul id="entries"></ul>
31+
</div>
32+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
33+
<script src="app.js"></script>
34+
</body>
35+
</html>
36+
body {
37+
font-family: Arial, sans-serif;
38+
background: #f7f7f7;
39+
}
40+
41+
.container {
42+
max-width: 450px;
43+
margin: 30px auto;
44+
background: #fff;
45+
padding: 25px;
46+
border-radius: 9px;
47+
box-shadow: 0 2px 16px rgba(0,0,0,0.11);
48+
}
49+
50+
h1 {
51+
text-align: center;
52+
}
53+
54+
form {
55+
display: flex;
56+
gap: 10px;
57+
margin-bottom: 15px;
58+
}
59+
60+
#alert {
61+
color: red;
62+
font-weight: bold;
63+
margin: 12px 0;
64+
min-height: 20px;
65+
}
66+
67+
#entries {
68+
margin-top: 22px;
69+
list-style: none;
70+
padding: 0;
71+
}
72+
73+
#entries li {
74+
padding: 7px 0;
75+
border-bottom: 1px solid #eee;
76+
display: flex;
77+
justify-content: space-between;
78+
}
79+
80+
#entries .income { color: green; }
81+
#entries .expense { color: crimson; }
82+
const form = document.getElementById('entry-form');
83+
const entriesList = document.getElementById('entries');
84+
const alertBox = document.getElementById('alert');
85+
const chartType = document.getElementById('chart-type');
86+
const undoBtn = document.getElementById('undo');
87+
88+
let entries = JSON.parse(localStorage.getItem('budgetEntries') || '[]');
89+
let budget = 500; // Set your budget limit
90+
91+
function saveEntries() {
92+
localStorage.setItem('budgetEntries', JSON.stringify(entries));
93+
}
94+
95+
function renderEntries() {
96+
entriesList.innerHTML = '';
97+
entries.slice().reverse().forEach((entry, idx) => {
98+
const li = document.createElement('li');
99+
li.innerHTML = `
100+
<span class="${entry.type}">${entry.type === 'income' ? '+' : '-'}$${entry.amount} (${entry.category})</span>
101+
<span>${new Date(entry.date).toLocaleDateString()}</span>
102+
`;
103+
entriesList.appendChild(li);
104+
});
105+
}
106+
107+
function getTotalExpense() {
108+
return entries.filter(e => e.type === 'expense').reduce((t, e) => t + Number(e.amount), 0);
109+
}
110+
111+
function showAlertIfOverBudget() {
112+
const expense = getTotalExpense();
113+
if (expense > budget) {
114+
alertBox.textContent = `Alert: You are over budget! ($${expense} > $${budget})`;
115+
} else {
116+
alertBox.textContent = '';
117+
}
118+
}
119+
120+
function addEntry(amount, category, type) {
121+
entries.push({
122+
amount: Number(amount),
123+
category,
124+
type,
125+
date: new Date().toISOString()
126+
});
127+
saveEntries();
128+
renderEntries();
129+
showAlertIfOverBudget();
130+
renderChart();
131+
}
132+
133+
form.addEventListener('submit', e => {
134+
e.preventDefault();
135+
const amount = form.amount.value;
136+
const category = form.category.value;
137+
const type = form.type.value;
138+
if (amount <= 0 || !category) return;
139+
addEntry(amount, category, type);
140+
form.amount.value = '';
141+
form.category.value = '';
142+
});
143+
144+
undoBtn.addEventListener('click', () => {
145+
if (entries.length === 0) return;
146+
entries.pop();
147+
saveEntries();
148+
renderEntries();
149+
showAlertIfOverBudget();
150+
renderChart();
151+
});
152+
153+
// --- Chart code ---
154+
let chart;
155+
function renderChart() {
156+
const type = chartType.value;
157+
const now = new Date();
158+
let labels = [], dataIncome = [], dataExpense = [];
159+
if (type === 'weekly') {
160+
// Last 7 days
161+
for (let i = 6; i >= 0; i--) {
162+
const d = new Date(now);
163+
d.setDate(now.getDate() - i);
164+
labels.push(d.toLocaleDateString().slice(0,5));
165+
let income = 0, expense = 0;
166+
entries.forEach(e => {
167+
const ed = new Date(e.date);
168+
if (ed.toDateString() === d.toDateString()) {
169+
if (e.type === 'income') income += Number(e.amount);
170+
else expense += Number(e.amount);
171+
}
172+
});
173+
dataIncome.push(income);
174+
dataExpense.push(expense);
175+
}
176+
} else {
177+
// Last 6 months
178+
for (let i = 5; i >= 0; i--) {
179+
const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
180+
labels.push(d.toLocaleString('default', { month: 'short' }));
181+
let income = 0, expense = 0;
182+
entries.forEach(e => {
183+
const ed = new Date(e.date);
184+
if (ed.getFullYear() === d.getFullYear() && ed.getMonth() === d.getMonth()) {
185+
if (e.type === 'income') income += Number(e.amount);
186+
else expense += Number(e.amount);
187+
}
188+
});
189+
dataIncome.push(income);
190+
dataExpense.push(expense);
191+
}
192+
}
193+
194+
if (chart) chart.destroy();
195+
chart = new Chart(document.getElementById('chart'), {
196+
type: 'bar',
197+
data: {
198+
labels,
199+
datasets: [
200+
{ label: 'Income', data: dataIncome, backgroundColor: 'rgba(0,200,0,0.3)' },
201+
{ label: 'Expense', data: dataExpense, backgroundColor: 'rgba(200,0,0,0.3)' }
202+
]
203+
},
204+
options: {
205+
scales: { y: { beginAtZero: true } }
206+
}
207+
});
208+
}
209+
210+
chartType.addEventListener('change', renderChart);
211+
212+
renderEntries();
213+
showAlertIfOverBudget();
214+
renderChart();

‎CALCULATOR JAVASCRIPT.txt‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
// CALCULATOR PROGRAM
2+
3+
const display = document.getElementById("display");
4+
5+
function appendToDisplay(input){
6+
display.value += input;
7+
}
8+
9+
function clearDisplay(){
10+
display.value ="";
11+
}
12+
13+
function calculate(){
14+
try{
15+
display.value = eval(display.value);
16+
}
17+
catch(error){
18+
display.value = "Error";
19+
}
20+
}
21+
22+
23+
24+
25+
26+
27+
28+
<!DOCTYPE html>
29+
<html lang="en">
30+
<head>
31+
<meta charset="UTF-8">
32+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
33+
<title>Calculator</title>
34+
<link rel="stylesheet" href="styles.css">
35+
</head>
36+
<body>
37+
38+
<div id="calculator">
39+
<input id="display" readonly>
40+
<div id="Keys">
41+
<button onclick="appendToDisplay('+')" class="operator-btn">+</button>
42+
<button onclick="appendToDisplay('7')">7</button>
43+
<button onclick="appendToDisplay('8')">8</button>
44+
<button onclick="appendToDisplay('9')">9</button>
45+
<button onclick="appendToDisplay('-')" class="operator-btn">-</button>
46+
<button onclick="appendToDisplay('4')">4</button>
47+
<button onclick="appendToDisplay('5')">5</button>
48+
<button onclick="appendToDisplay('6')">6</button>
49+
<button onclick="appendToDisplay('*')" class="operator-btn">*</button>
50+
<button onclick="appendToDisplay('1')">1</button>
51+
<button onclick="appendToDisplay('2')">2</button>
52+
<button onclick="appendToDisplay('3')">3</button>
53+
<button onclick="appendToDisplay('/')" class="operator-btn">/</button>
54+
<button onclick="appendToDisplay('0')">0</button>
55+
<button onclick="appendToDisplay('.')">.</button>
56+
<button onclick="calculate()">=</button>
57+
<button onclick="clearDisplay()" class="operator-btn">C</button>
58+
</div>
59+
</div>
60+
61+
62+
<script src="index.js"></script>
63+
</body>
64+
</html>
65+
66+
67+
68+
69+
body{
70+
margin: 0;
71+
display: flex;
72+
justify-content: center;
73+
align-items:center;
74+
height: 100vh;
75+
background-color: hsl(0, 0%, 95%);
76+
}
77+
#calculator{
78+
font-family: Arial, sans-serif;
79+
background-color: hsl(0,0%,15%);
80+
border-radius: 15px;
81+
max-width: 500px;
82+
overflow: hidden;
83+
}
84+
#display{
85+
width: 100%;
86+
padding: 20px;
87+
font-size: 5rem;
88+
text-align: left;
89+
border: none;
90+
background-color: hsl(0,0%,20%);
91+
color: white;
92+
}
93+
#Keys{
94+
display: grid;
95+
grid-template-columns: repeat(4,1fr);
96+
gap: 10px;
97+
padding: 25px;
98+
}
99+
button{
100+
width: 100px;
101+
height: 100px;
102+
border-radius: 50px;
103+
border: none;
104+
background-color: hsl(0,0%,30%);
105+
color: white;
106+
font-size: 3rem;
107+
font-weight: bold;
108+
cursor: pointer;
109+
}
110+
button:hover{
111+
background-color: hsl(0,0%,40%);
112+
}
113+
button:active{
114+
background-color: hsl(0,0%,50%);
115+
}
116+
.operator-btn{
117+
background-color: hsl(35,100%,55%);
118+
}
119+
.operator-btn:hover{
120+
background-color: hsl(35, 100%, 65%);
121+
}
122+
.operator-btn:hover{
123+
background-color: hsl(35, 100%, 75%);
124+
}

0 commit comments

Comments
 (0)