added html page to bank account project

Techtonica · Jul 28, 2022 · 68daef1 · 68daef1
1 parent c1ecfe7
commit 68daef1
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/...ect-example/week-1/bank-account/README.md → .../week-1/bank-account/phase-1-JS/README.md b/...ect-example/week-1/bank-account/README.md → .../week-1/bank-account/phase-1-JS/README.md
diff --git a/project-example/week-1/bank-account/index.js → ...e/week-1/bank-account/phase-1-JS/index.js b/project-example/week-1/bank-account/index.js → ...e/week-1/bank-account/phase-1-JS/index.js
diff --git a/project-example/week-1/bank-account/phase-2-HTML/README.md b/project-example/week-1/bank-account/phase-2-HTML/README.md
@@ -0,0 +1,41 @@
+# Modeling a bank account Phase-1
+
+Write a program that creates an `account` object with the following characteristics:
+
+- A `name` property.
+- A `balance` property set to 0.
+- A `deposit` method adding the (positive or negative) value passed as an argument to the account balance.
+- A `describe` method returning the account description.
+- A `transfer` method with two paramethers: the name of the account that will receive the transfer, and the amount of money to transfer.
+
+### Test
+
+- Create an account for Billy, Rosie, Jack and Jill
+- Give each of the accounts a deposity on money
+- Print a string describing the current amount of money on each account
+- Transfer positive values between Billy and Jack and negative values between Rosie and Jack
+
+### Extra
+
+- Can you thing how a `credit` method should work?
+
+(NOTE: this portion of the assignement will be in JS only, you will build upon it in the future to add HTML)
+
+# Practice using HTML with your Bank Account Phase-2
+
+The look and feel of your bank account is up to you, but make sure that you pratice this options:
+
+- Insert an element after or before other element.
+- Replace an element (for example each time someone do a transfer).
+- Remove an element (if someone does a transfer in negative, how do you update the value of the balance).
+- Show or hide an element (if someone doesn't have "money" hide the transfer money button).
+- Add .addEventListener() to your buttons
+- Select an element or list of elements
+
+### Test
+
+- At this point your buttons, list or forms should work with your JS file. If you want to prove your Event Listeners please add `console.log` method to them
+
+### Extra
+
+- Can you thing how Toggle an element should work?
diff --git a/project-example/week-1/bank-account/phase-2-HTML/index.html b/project-example/week-1/bank-account/phase-2-HTML/index.html
@@ -0,0 +1,37 @@
+<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="style.css" />
+    <title>Bank account</title>
+  </head>
+  <body>
+    <header><h1>Banking Application</h1></header>
+    <main>
+      <h3 id="display-balance">
+        You have $<span id="amount">0</span> in your account
+      </h3>
+
+      <br />
+      <br />
+
+      <form action="" id="deposit-form">
+        <label>Deposit Amount</label>
+        <input type="number" id="input-deposit" name="deposit" />
+
+        <button id="submit-deposit">Submit</button>
+      </form>
+      <br />
+      <form action="" id="transfer-form">
+        <label>Transfer Amount</label>
+        <input type="number" id="input-transfer" name="transfer" />
+
+        <button id="submit-transfer" value="Submit">Submit</button>
+      </form>
+    </main>
+    <div id="error-message"></div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/project-example/week-1/bank-account/phase-2-HTML/script.js b/project-example/week-1/bank-account/phase-2-HTML/script.js
@@ -0,0 +1,61 @@
+// creating a class Account
+class Account {
+  constructor(name) {
+    this.name = name;
+    this.balance = 0;
+  }
+
+  // adding method deposit
+  deposit(amount) {
+    if (typeof amount !== "number") {
+      throw new Error("amount should be number");
+    }
+    this.balance += amount;
+  }
+  // adding method describe
+  describe() {
+    return `${this.name}'s current balance is  $${this.balance}.`;
+  }
+
+  // adding method transfer
+  transfer(amount) {
+    this.balance -= amount;
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  let account = new Account();
+  const depositBtn = document.getElementById("submit-deposit");
+  const withdrawBtn = document.getElementById("submit-transfer");
+  const totalAmtDisplay = document.getElementById("amount");
+  const displayAmount = document.getElementById("display-balance");
+  displayAmount.style.visibility = "hidden";
+  const transferForm = document.getElementById("transfer-form");
+  transferForm.style.visibility = "hidden";
+
+  depositBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    const depositAmt = Number(document.getElementById("input-deposit").value);
+
+    account.deposit(depositAmt);
+
+    totalAmtDisplay.innerText = account.balance;
+    displayAmount.style.visibility = "visible";
+    transferForm.style.visibility = "visible";
+    document.querySelector("form").reset();
+  });
+
+  withdrawBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    const transferAmt = Number(document.getElementById("input-transfer").value);
+    account.transfer(transferAmt);
+    if (account.balance < 1) {
+      const errorDiv = document.getElementById("error-message");
+      const errorMessage = document.createElement("p");
+      errorMessage.textContent = "You have insufficient Balance";
+      errorMessage.style.color = "red";
+      errorDiv.appendChild(errorMessage);
+    } else totalAmtDisplay.innerText = account.balance;
+    document.querySelector("form").reset();
+  });
+});
diff --git a/project-example/week-1/bank-account/phase-2-HTML/style.css b/project-example/week-1/bank-account/phase-2-HTML/style.css
@@ -0,0 +1,3 @@
+.main-button {
+  display: flex;
+}