ibrahimmoalim
diff --git a/‎problemSolvingPractices/problems/p1.js‎
Lines changed: 0 additions & 44 deletions b/‎problemSolvingPractices/problems/p1.js‎
Lines changed: 0 additions & 44 deletions
diff --git a/‎problemSolvingPractices/problems/p2.js‎
Lines changed: 0 additions & 43 deletions b/‎problemSolvingPractices/problems/p2.js‎
Lines changed: 0 additions & 43 deletions
diff --git a/‎problemSolvingPractices/problems/p3-BinaryConversion/index.html‎
Lines changed: 21 additions & 0 deletions b/‎problemSolvingPractices/problems/p3-BinaryConversion/index.html‎
Lines changed: 21 additions & 0 deletions
diff --git a/‎problemSolvingPractices/problems/p3-BinaryConversion/p3-BinaryConversion.js‎
Lines changed: 88 additions & 0 deletions b/‎problemSolvingPractices/problems/p3-BinaryConversion/p3-BinaryConversion.js‎
Lines changed: 88 additions & 0 deletions
diff --git a/‎problemSolvingPractices/problems/p3-BinaryConversion/style.css‎
Lines changed: 32 additions & 0 deletions b/‎problemSolvingPractices/problems/p3-BinaryConversion/style.css‎
Lines changed: 32 additions & 0 deletions
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<html lang='en'>
+<head>
+  <meta charset='UTF-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+  <title>Binary Conversion</title>
+  <link rel='stylesheet' href='style.css'>
+  <script src='p3-BinaryConversion.js' defer></script>
+</head>
+<body>
+  <h3> Convert an IPv4 address from Binary to Decimal </h3><br>
+  <!-- <h3> Example: 10101100.00010000.00100010.00000011(Binary) to 172.16.34.3 </h3><br> -->
+
+  <input type="text" placeholder="Example: 10101100.00010000.00100010.00000011" id="input1">
+  <button id="but1">Convert</button>
+  <br><br>
+  <h4 id="result"></h4>
+
+</body>
+</html>
@@ -0,0 +1,88 @@
+// Binary to Decimal
+//
+
+
+const Binary = document.getElementById('input1')
+const ConvertButton = document.getElementById('but1')
+
+ConvertButton.addEventListener('click', () => {
+  // .trim() gets rid of spaces at start or end of string
+  const result = BinaryToDecimal(Binary.value.trim())
+
+  document.getElementById('result').innerText = result
+})
+
+Binary.addEventListener('keydown', (event) => {
+  if (event.key === 'Enter') {
+
+    const result = BinaryToDecimal(Binary.value.trim())
+
+    document.getElementById('result').innerText = result
+
+  }
+})
+
+
+
+const errorMsg1 = 'Please insert an IPv4 address in Binary (4 bytes)'
+const errorMsg2 = 'Please make sure the input format is correct and each Octet is exactly 8 numbers'
+
+function BinaryToDecimal(Binary){
+
+  if (!Binary) return errorMsg1
+  if (Binary.length !== 35) return errorMsg1;
+
+  const chart = [128,64,32,16,8,4,2,1]
+
+  let firstOctetDecimal = 0
+  let secondOctetDecimal = 0
+  let thirdOctetDecimal = 0
+  let fourthOctetDecimal = 0
+
+
+  const octets = Binary.split('.')
+
+  if (octets[0].length < 8) return errorMsg2
+
+  const firstOctet = octets[0].split('')
+
+  for (let i=0; i < chart.length; i++) {
+    if (firstOctet[i] === '1') {
+      firstOctetDecimal += chart[i]
+    }
+  };
+
+  if (octets[1].length < 8) return errorMsg2
+  
+  const secondOctet = octets[1].split('')
+
+  for (let i=0; i < chart.length; i++) {
+    if (secondOctet[i] === '1') {
+      secondOctetDecimal += chart[i]
+    }
+  };
+
+  if (octets[2].length < 8) return errorMsg2
+
+  const thirdOctet = octets[2].split('')
+
+  for (let i=0; i < chart.length; i++) {
+    if (thirdOctet[i] === '1') {
+      thirdOctetDecimal += chart[i]
+    }
+  };
+
+  if (octets[3].length < 8) return errorMsg2
+
+  const fourthOctet = octets[3].split('')
+
+  for (let i=0; i < chart.length; i++) {
+    if (fourthOctet[i] === '1') {
+      fourthOctetDecimal += chart[i]
+    }
+  };
+
+
+  return IPAddressInDecimal = `Result: ${firstOctetDecimal}.${secondOctetDecimal}.${thirdOctetDecimal}.${fourthOctetDecimal}`
+
+}
@@ -0,0 +1,32 @@
+* {
+  padding: 0;
+  margin: 0;
+  font-family: Arial;
+}
+
+input:focus {
+  outline: 1px solid lightslategray;
+}
+
+input {
+  width: 350px;
+  padding: 2px 2px;
+  font-weight: bold;
+}
+
+button {
+  background-color: white;
+  padding: 3px 2px;
+  border: 1px solid black;
+  border-radius: 5px;
+  font-weight: bold;
+}
+
+button:hover {
+  opacity: 0.8;
+  cursor: pointer;
+}
+
+button:active {
+  opacity: 0.5;
+}