diff --git a/Decimal_To_Binary/index.html b/Decimal_To_Binary/index.html new file mode 100644 index 0000000..61e9f52 --- /dev/null +++ b/Decimal_To_Binary/index.html @@ -0,0 +1,27 @@ + + + + + + + Decimal to Binary Converter + + + +

Decimal to Binary Converter

+
+ + + +
+ +
+ + + \ No newline at end of file diff --git a/Decimal_To_Binary/script.js b/Decimal_To_Binary/script.js new file mode 100644 index 0000000..f486e3e --- /dev/null +++ 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 += ` +

+ decimalToBinary(${obj.inputVal}) +

+ `; + }, 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(); + } +}); \ No newline at end of file diff --git a/Decimal_To_Binary/styles.css b/Decimal_To_Binary/styles.css new file mode 100644 index 0000000..e666d25 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/Roman_Numeral_Converter/index.html b/Roman_Numeral_Converter/index.html new file mode 100644 index 0000000..e765897 --- /dev/null +++ b/Roman_Numeral_Converter/index.html @@ -0,0 +1,26 @@ + + + + + + + Decimal to Binary Converter + + + +

Convert Number to Roman Numerals

+
+ + + +
+
+ + + \ No newline at end of file diff --git a/Roman_Numeral_Converter/script.js b/Roman_Numeral_Converter/script.js new file mode 100644 index 0000000..e7baf19 --- /dev/null +++ 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 = `

Please enter a valid number

`; + } else if (inputInt <= 0) { + output.innerHTML = `

Please enter a number greater than or equal to 1

` + } else if (inputInt >= 4000) { + output.innerHTML = `

Please enter a number less than or equal to 3999

` + } 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(); + } +}); \ No newline at end of file diff --git a/Roman_Numeral_Converter/styles.css b/Roman_Numeral_Converter/styles.css new file mode 100644 index 0000000..bd508a5 --- /dev/null +++ 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; + } +} \ No newline at end of file