Γεια σας, σήμερα θα μάθουμε πώς να χρησιμοποιούμε HTML, CSS & JavaScript για να δημιουργήσουμε μια εφαρμογή προϋπολογισμού. Ακολουθώντας αυτές τις οδηγίες, μπορείτε απλώς να δημιουργήσετε αυτήν την Εφαρμογή προϋπολογισμού σε HTML, CSS και JavaScript. Απλώς τηρώντας τις διαδικασίες που αναφέρονται παρακάτω, θα μπορείτε να αναπτύξετε αυτήν την εκπληκτική εφαρμογή προϋπολογισμού.
Περιγραφή Έργου
Βήμα 1
Η HTML (Γλώσσα σήμανσης υπερκειμένου) θα μας βοηθήσει να δημιουργήσουμε τη δομή για τη λίστα με ορισμένα απαραίτητα χαρακτηριστικά και στοιχεία για τη δημιουργία Έργου εφαρμογής προϋπολογισμού.
Βήμα 2
Στη συνέχεια θα χρησιμοποιήσουμε το CSS (Cascading Stylesheet) το οποίο θα μας βοηθήσει να διαμορφώσουμε το στυλ ή να σχεδιάσουμε το έργο με κατάλληλη επένδυση και ευθυγράμμιση στο Budget App Project.
Βήμα 3
Επιτέλους θα χρησιμοποιήσουμε το JS (JavaScript) το οποίο θα προσθέσει μια λογική για να λειτουργήσει το Έργο εφαρμογής προϋπολογισμού από το τέλος του χρήστη.
Ελπίζω να έχετε μια ιδέα για το έργο.
Κώδικας HTML για την εφαρμογή προϋπολογισμού
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Budget App</title>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="sub-container">
<!-- Budget -->
<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>
<!-- Expenditure -->
<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>
<!-- Output -->
<div class="output-container flex-space">
<div>
<p>Total Budget</p>
<span id="amount">0</span>
</div>
<div>
<p>Expenses</p>
<span id="expenditure-value">0</span>
</div>
<div>
<p>Balance</p>
<span id="balance-amount">0</span>
</div>
</div>
</div>
<!-- List -->
<div class="list">
<h3>Expense List</h3>
<div class="list-container" id="list"></div>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Πρώτα θα ξεκινήσουμε με τη δημιουργία της δομής του έργου Budget App για αυτό, καθώς μπορείτε να δείτε τον παραπάνω κώδικα, χρησιμοποιήσαμε όλα τα απαραίτητα στοιχεία και χαρακτηριστικά για τη ρύθμιση της δομής. Ενημερώστε μας να κωδικοποιήσουμε το τμήμα CSS για να προσθέσουμε στυλ και να ευθυγραμμίσουμε τις ετικέτες.
Κωδικός CSS για την εφαρμογή προϋπολογισμού
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #f7f9fd;
}
.wrapper {
width: 90%;
font-size: 16px;
max-width: 43.75em;
margin: 1em auto;
}
.container {
width: 100%;
}
.sub-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3em;
}
.flex {
display: flex;
align-items: center;
}
.flex-space {
display: flex;
justify-content: space-between;
align-items: center;
}
.wrapper h3 {
color: #363d55;
font-weight: 500;
margin-bottom: 0.6em;
}
.container input {
display: block;
width: 100%;
padding: 0.6em 0.3em;
border: 1px solid #d0d0d0;
border-radius: 0.3em;
color: #414a67;
outline: none;
font-weight: 400;
margin-bottom: 0.6em;
}
.container input:focus {
border-color: #587ef4;
}
.total-amount-container,
.user-amount-container {
background-color: #ffffff;
padding: 1.25em 0.9em;
border-radius: 0.3em;
box-shadow: 0 0.6em 1.2em rgba(28, 0, 80, 0.06);
}
.output-container {
background-color: #587ef4;
color: #ffffff;
border-radius: 0.3em;
box-shadow: 0 0.6em 1.2em rgba(28, 0, 80, 0.06);
margin: 2em 0;
padding: 1.2em;
}
.output-container p {
font-weight: 500;
margin-bottom: 0.6em;
}
.output-container span {
display: block;
text-align: center;
font-weight: 400;
color: #e5e5e5;
}
.submit {
font-size: 1em;
margin-top: 0.8em;
background-color: #587ef4;
border: none;
outline: none;
color: #ffffff;
padding: 0.6em 1.2em;
border-radius: 0.3em;
cursor: pointer;
}
.list {
background-color: #ffffff;
padding: 1.8em 1.2em;
box-shadow: 0 0.6em 1.2em rgba(28, 0, 80, 0.06);
border-radius: 0.6em;
}
.sublist-content {
width: 100%;
border-left: 0.3em solid #587ef4;
margin-bottom: 0.6em;
padding: 0.5em 1em;
display: grid;
grid-template-columns: 3fr 2fr 1fr 1fr;
}
.product {
font-weight: 500;
color: #363d55;
}
.amount {
color: #414a67;
margin-left: 20%;
}
.icons-container {
width: 5em;
margin: 1.2em;
align-items: center;
}
.product-title {
margin-bottom: 1em;
}
.hide {
display: none;
}
.error {
color: #ff465a;
}
.edit {
margin-left: auto;
}
.edit,
.delete {
background: transparent;
cursor: pointer;
margin-right: 1.5em;
border: none;
color: #587ef4;
}
@media screen and (max-width: 600px) {
.wrapper {
font-size: 14px;
}
.sub-container {
grid-template-columns: 1fr;
gap: 1em;
}
}
Δεύτερος έρχεται ο κώδικας CSS, ο οποίος αναφέρεται παραπάνω, καθώς έχουμε διαμορφώσει το στυλ για τη δομή που έχουμε συμπληρώσει καθώς και ευθυγραμμίσαμε το έργο Budget App έτσι ώστε να είναι σωστά τοποθετημένο και να μην ανακατεύεται με τα κατάλληλα στοιχεία CSS. Τώρα δημιουργήσαμε τη δομή χρησιμοποιώντας HTML και διαμορφώσαμε το στυλ της ιστοσελίδας χρησιμοποιώντας CSS, ήρθε η ώρα να προσθέσουμε τη λειτουργικότητα χρησιμοποιώντας JavaScript σε αυτό το έργο.
Κώδικας JavaScript για την εφαρμογή προϋπολογισμού
let totalAmount = document.getElementById("total-amount");
let userAmount = document.getElementById("user-amount");
const checkAmountButton = document.getElementById("check-amount");
const totalAmountButton = document.getElementById("total-amount-button");
const productTitle = document.getElementById("product-title");
const errorMessage = document.getElementById("budget-error");
const productTitleError = document.getElementById("product-title-error");
const productCostError = document.getElementById("product-cost-error");
const amount = document.getElementById("amount");
const expenditureValue = document.getElementById("expenditure-value");
const balanceValue = document.getElementById("balance-amount");
const list = document.getElementById("list");
let tempAmount = 0;
//Set Budget Part
totalAmountButton.addEventListener("click", () => {
tempAmount = totalAmount.value;
//empty or negative input
if (tempAmount === "" || tempAmount < 0) {
errorMessage.classList.remove("hide");
} else {
errorMessage.classList.add("hide");
//Set Budget
amount.innerHTML = tempAmount;
//Set Balance
balanceValue.innerText = tempAmount - expenditureValue.innerText;
//Clear Input Box
totalAmount.value = "";
}
});
//Function To Disable Edit and Delete Button
const disableButtons = (bool) => {
let editButtons = document.getElementsByClassName("edit");
Array.from(editButtons).forEach((element) => {
element.disabled = bool;
});
};
//Function To Modify List Elements
const modifyElement = (element, edit = false) => {
let parentDiv = element.parentElement;
let currentBalance = balanceValue.innerText;
let currentExpense = expenditureValue.innerText;
let parentAmount = parentDiv.querySelector(".amount").innerText;
if (edit) {
let parentText = parentDiv.querySelector(".product").innerText;
productTitle.value = parentText;
userAmount.value = parentAmount;
disableButtons(true);
}
balanceValue.innerText = parseInt(currentBalance) + parseInt(parentAmount);
expenditureValue.innerText =
parseInt(currentExpense) - parseInt(parentAmount);
parentDiv.remove();
};
//Function To Create List
const listCreator = (expenseName, expenseValue) => {
let sublistContent = document.createElement("div");
sublistContent.classList.add("sublist-content", "flex-space");
list.appendChild(sublistContent);
sublistContent.innerHTML = `<p class="product">${expenseName}</p><p class="amount">${expenseValue}</p>`;
let editButton = document.createElement("button");
editButton.classList.add("fa-solid", "fa-pen-to-square", "edit");
editButton.style.fontSize = "1.2em";
editButton.addEventListener("click", () => {
modifyElement(editButton, true);
});
let deleteButton = document.createElement("button");
deleteButton.classList.add("fa-solid", "fa-trash-can", "delete");
deleteButton.style.fontSize = "1.2em";
deleteButton.addEventListener("click", () => {
modifyElement(deleteButton);
});
sublistContent.appendChild(editButton);
sublistContent.appendChild(deleteButton);
document.getElementById("list").appendChild(sublistContent);
};
//Function To Add Expenses
checkAmountButton.addEventListener("click", () => {
//empty checks
if (!userAmount.value || !productTitle.value) {
productTitleError.classList.remove("hide");
return false;
}
//Enable buttons
disableButtons(false);
//Expense
let expenditure = parseInt(userAmount.value);
//Total expense (existing + new)
let sum = parseInt(expenditureValue.innerText) + expenditure;
expenditureValue.innerText = sum;
//Total balance(budget - total expense)
const totalBalance = tempAmount - sum;
balanceValue.innerText = totalBalance;
//Create list
listCreator(productTitle.value, userAmount.value);
//Empty inputs
productTitle.value = "";
userAmount.value = "";
});
Τελευταίο στάδιο του έργου το JavaScript στο οποίο έχουμε προσθέσει το λογικό και κωδικοποιημένο σύμφωνα με την απαίτηση με κάποιες προϋποθέσεις. Σε αυτόν τον κώδικα έχουμε παραθέσει την κάθε ετικέτα που δημιουργείται στον κώδικα HTML και αργότερα τις χρησιμοποιήσαμε για να κάνουμε αυτό το έργο να λειτουργεί σύμφωνα με το τέλος του χρήστη. Ας δούμε το τελικό αποτέλεσμα του έργου Εφαρμογή προϋπολογισμού με χρήση HTML, CSS και JavaScript (Πηγαίος κώδικας).
Δημιουργήσαμε με επιτυχία την Εφαρμογή προϋπολογισμούχρησιμοποιώντας HTML, CSS και JavaScript. Μπορείτε να χρησιμοποιήσετε αυτό το έργο για τις προσωπικές σας ανάγκες και οι αντίστοιχες γραμμές κώδικα δίνονται με τον σύνδεσμο πένας που αναφέρεται παραπάνω.
Εάν βρίσκετε αυτό το Ιστολόγιο χρήσιμο, τότε φροντίστε να αναζητήσετε τυχαία κώδικα στο google για Έργα Front End με πηγαίους κωδικούς και φροντίστε να ακολουθήσετε τη σελίδα Κώδικας με Τυχαίο Instagram.
Code Idea — codingartist
Γράφτηκε από — Harsh Sawant
Κωδικός από — @harshh9
