updates, still not functional

ManiacalMaynard · ManiacalMaynard · commit 6bc4c6269b4d · 2023-08-31T15:43:21.000-07:00
diff --git a/index.html b/index.html
@@ -1,20 +1,24 @@
 <!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">
+  <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="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
     <title>CodeWars Testing Suite</title>
-</head>
-<body>
+  </head>
+  <body>
     <div id="container">
-        <div id="challenge">Challenge Text</div>
-        <div>Your input was: <span id="input"></span></div>
-        <div>Your output is: <span id="primus">error Will Robinson!</span></div>
-
+      <div id="challenge">Challenge Text</div>
+      <div>
+        <form action="">
+          <label for="input">Your input:</label>
+          <input type="text" id="input" name="input" />
+        </form>
+      </div>
+      <div>Your output is: <span id="primus">error Will Robinson!</span></div>
     </div>
-</body>
-<script src="./middlePermutation.js"></script>
-</html>
+  </body>
+  <script src="./reverseWords.js" defer></script>
+</html>
diff --git a/reverseWords.js b/reverseWords.js
@@ -0,0 +1,23 @@
+// Complete the function that accepts a string parameter, and reverses each word in the string. All spaces in the string should be retained.
+
+// Examples:
+// "This is an example!" ==> "sihT si na !elpmaxe"
+// "double  spaces"      ==> "elbuod  secaps"
+let output = document.getElementById('primus');
+let input = document.getElementById('input').innerText;
+
+function reverseWords(string) {
+  let array = string.split(' ');
+  let newString = [];
+  for (i = array.length; i > 0; i--) {
+    newString.push(array[i]);
+  }
+  output.innerText = newString.join(' ');
+}
+
+document
+  .getElementById('input')
+  .addEventListener('change', reverseWords(input));
+
+// testing purposes, safely ignore the below
+console.log('world hello!');
diff --git a/styles.css b/styles.css
@@ -1,30 +1,30 @@
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
 
 body {
-    background-color: black;
-    color: #aaa;
-    margin: 0;
-    padding: 0;
-    font-size: 1rem;
-    font-family: Lato, sans-serif;
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: center;
-    align-items: center;
+  background-color: black;
+  color: #aaa;
+  margin: 0;
+  padding: 0;
+  font-size: 1rem;
+  font-family: Lato, sans-serif;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
 }
 
 #container {
-    width: 60%;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    align-items: center;
-    text-align: center;
+  width: 60%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  text-align: center;
 }
 
-#input, #primus {
-    color: white;
-    font-size: 1.5rem;
-    font-weight: 800;
-}
+#input,
+#primus {
+  font-size: 1.5rem;
+  font-weight: 800;
+}
