Add Roman Number Converter Project and Add Decimal To Binary Converte…

…r Project
fullStackRacc · Mar 23, 2024 · f265be1 · f265be1
1 parent 7d7ff0d
commit f265be1
Show file tree

Hide file tree

Showing 6 changed files with 348 additions and 0 deletions.
diff --git a/Decimal_To_Binary/index.html b/Decimal_To_Binary/index.html
@@ -0,0 +1,27 @@
+<!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" />
+    <title>Decimal to Binary Converter</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Decimal to Binary Converter</h1>
+    <div class="input-container">
+      <label for="number-input">Enter a decimal number:</label>
+      <input
+        value=""
+        type="number"
+        name="decimal number input"
+        id="number-input"
+        class="number-input"
+      />
+      <button class="convert-btn" id="convert-btn">Convert</button>
+    </div>
+    <output id="result" for="number-input"></output>
+    <div id="animation-container"></div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Decimal_To_Binary/script.js b/Decimal_To_Binary/script.js
@@ -0,0 +1,89 @@
+const numberInput = document.getElementById("number-input");
+const convertBtn = document.getElementById("convert-btn");
+const result = document.getElementById("result");
+const animationContainer = document.getElementById("animation-container");
+const animationData = [
+  {
+    inputVal: 5,
+    marginTop: 300,
+    addElDelay: 1000,
+    msg: 'decimalToBinary(5) returns "10" + 1 (5 % 2). Then it pops off the stack.',
+    showMsgDelay: 15000,
+    removeElDelay: 20000,
+  },
+  {
+    inputVal: 2,
+    marginTop: -200,
+    addElDelay: 1500,
+    msg: 'decimalToBinary(2) returns "1" + 0 (2 % 2) and gives that value to the stack below. Then it pops off the stack.',
+    showMsgDelay: 10000,
+    removeElDelay: 15000,
+  },
+  {
+    inputVal: 1,
+    marginTop: -200,
+    addElDelay: 2000,
+    msg: 'decimalToBinary(1) returns "1" (base case) and gives that value to the stack below. Then it pops off the stack.',
+    showMsgDelay: 5000,
+    removeElDelay: 10000,
+  }
+];
+
+const decimalToBinary = (input) => {
+  if (input === 0 || input === 1) {
+    return String(input);
+  } else {
+    return decimalToBinary(Math.floor(input / 2)) + (input % 2);
+  }
+};
+
+const showAnimation = () => {
+  result.innerText = "Call Stack Animation";
+
+  animationData.forEach((obj) => {
+    setTimeout(() => {
+      animationContainer.innerHTML += `
+        <p id="${obj.inputVal}" style="margin-top: ${obj.marginTop}px;" class="animation-frame">
+          decimalToBinary(${obj.inputVal})
+        </p>
+      `;
+    }, obj.addElDelay);
+
+    setTimeout(() => {
+      document.getElementById(obj.inputVal).textContent = obj.msg;
+    }, obj.showMsgDelay);
+
+    setTimeout(() => {
+      document.getElementById(obj.inputVal).remove();
+    }, obj.removeElDelay);
+  });
+
+  setTimeout(() => {
+result.textContent = decimalToBinary(5)
+  }, 20000);
+};
+
+const checkUserInput = () => {
+  const inputInt = parseInt(numberInput.value);
+
+  if (!numberInput.value || isNaN(inputInt)) {
+    alert("Please provide a decimal number");
+    return;
+  }
+
+  if (inputInt === 5) {
+    showAnimation();
+    return;
+  }
+
+  result.textContent = decimalToBinary(inputInt);
+  numberInput.value = "";
+};
+
+convertBtn.addEventListener("click", checkUserInput);
+
+numberInput.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") {
+    checkUserInput();
+  }
+});
diff --git a/Decimal_To_Binary/styles.css b/Decimal_To_Binary/styles.css
@@ -0,0 +1,85 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --light-grey: #f5f6f7;
+  --dark-blue: #1b1b32;
+  --orange: #f1be32;
+}
+
+body {
+  background-color: var(--dark-blue);
+  font-family: "Times New Roman", Times, serif;
+  font-size: 18px;
+  color: var(--light-grey);
+  padding: 0 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+h1 {
+  text-align: center;
+  font-size: 2.3rem;
+  margin: 20px 0;
+}
+
+.input-container {
+  margin: 10px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+}
+
+.convert-btn {
+  background-color: var(--orange);
+  cursor: pointer;
+  border: none;
+  padding: 4px;
+}
+
+.number-input {
+  height: 25px;
+}
+
+#result {
+  margin: 10px 0;
+  min-width: 200px;
+  width: fit-content;
+  min-height: 80px;
+  word-break: break-word;
+  padding: 15px;
+  border: 5px solid var(--orange);
+  font-size: 2rem;
+  text-align: center;
+}
+
+#animation-container {
+  margin: auto;
+  max-width: 300px;
+}
+
+.animation-frame {
+  margin: 250px auto 0;
+  padding: 15px 10px;
+  border: 5px solid var(--orange);
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+@media screen and (min-width: 500px) {
+  .input-container {
+    flex-direction: row;
+  }
+
+  #result {
+    max-width: 460px;
+  }
+}
diff --git a/Roman_Numeral_Converter/index.html b/Roman_Numeral_Converter/index.html
@@ -0,0 +1,26 @@
+<!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" />
+    <title>Decimal to Binary Converter</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Convert Number to Roman Numerals</h1>
+    <div class="input-container">
+      <label for="number">Enter a number less than 4000:</label>
+      <input
+        value=""
+        type="number"
+        name="decimal number input"
+        id="number"
+        class="number"
+      />
+      <button class="convert-btn" id="convert-btn">Convert</button>
+    <div id="output"></div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Roman_Numeral_Converter/script.js b/Roman_Numeral_Converter/script.js
@@ -0,0 +1,49 @@
+//Set Constants
+const number = document.getElementById("number");
+const convertBtn = document.getElementById("convert-btn");
+const output = document.getElementById("output");
+
+//Check if input is valid
+const checkUserInput = () => {
+  const inputInt = parseInt(number.value);
+
+  if (!inputInt || isNaN(inputInt)) {
+    output.innerHTML = `<p>Please enter a valid number</p>`;
+  } else if (inputInt <= 0) {
+    output.innerHTML = `<p>Please enter a number greater than or equal to 1</p>`
+  } else if (inputInt >= 4000) {
+    output.innerHTML = `<p>Please enter a number less than or equal to 3999</p>`
+  } else {
+      output.innerHTML = convertToRoman(inputInt);
+  }
+}
+
+//Function to convert to Roman Numerals
+
+function convertToRoman(num) {
+
+  // Set Up Constants
+  const M = ["","M","MM","MMM"];
+  const C = ["","C","CC","CCC","CD","D","DC","DCC","DCCC","CM"];
+  const X = ["","X","XX","XXX","XL","L","LX","LXX","LXXX","XC"];
+  const I = ["","I","II","III","IV","V","VI","VII","VIII","IX"];
+
+  const thousandsInt = Math.floor(num/1000);
+  const hundredsInt = Math.floor((num%1000)/100);
+  const tensInt = Math.floor((num%100)/10);
+  const unitsInt = Math.floor(num%10);
+  const thousandsRoman = M[thousandsInt];
+  const hundredsRoman = C[hundredsInt];
+  const tensRoman = X[tensInt];
+  const unitsRoman = I[unitsInt];
+  return thousandsRoman + hundredsRoman + tensRoman + unitsRoman;
+}
+
+//Set Event Listeners
+convertBtn.addEventListener("click", checkUserInput);
+
+number.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") {
+    checkUserInput();
+  }
+});
diff --git a/Roman_Numeral_Converter/styles.css b/Roman_Numeral_Converter/styles.css
@@ -0,0 +1,72 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --light-grey: #f5f6f7;
+  --dark-blue: #1b1b32;
+  --orange: #f1be32;
+}
+
+body {
+  background-color: var(--dark-blue);
+  font-family: "Times New Roman", Times, serif;
+  font-size: 18px;
+  color: var(--light-grey);
+  padding: 0 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+h1 {
+  text-align: center;
+  font-size: 2.3rem;
+  margin: 20px 0;
+}
+
+.input-container {
+  margin: 10px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+}
+
+.convert-btn {
+  background-color: var(--orange);
+  cursor: pointer;
+  border: none;
+  padding: 4px;
+}
+
+.number {
+  height: 25px;
+}
+
+#output {
+  margin: 10px 0;
+  min-width: 200px;
+  width: fit-content;
+  min-height: 80px;
+  word-break: break-word;
+  padding: 15px;
+  border: 5px solid var(--orange);
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media screen and (min-width: 500px) {
+  .input-container {
+    flex-direction: row;
+  }
+
+  #result {
+    max-width: 460px;
+  }
+}