GitFitCode · xixBlue · Sep 14, 2020 · Sep 20, 2020 · Sep 20, 2020
diff --git a/app.js b/app.js
@@ -1,8 +1,71 @@
-/**
- * @param {string} paragraph
- * @param {string[]} banned
- * @return {string}
- */
+// Removes punctuation and converts paragraph to lower case
+const removePunctuationAndLowerCase = paragraph => {
+  newParagraph = paragraph.replace(/[!?',;.]/g,"").toLowerCase();
+  return newParagraph;
+}
+
+// trasnforms paragraph to an array
+const paragraphToArray = paragraph => {
+  // Splitting string into array
+  const arr = paragraph.split(" ");
+  return arr; // Return the array
+}
+
+// removes ban word from array
+const removeBanWord = (paragraphArray, ban) => {
+  // setting arr to paragraph array to not mutate the original array
+  let arr = paragraphArray; 
+  // iterating over the array
+  for (let i = 0; i<arr.length; i++){ 
+    // if ban is in array, splice it
+    if (arr[i] === ban){
+      arr.splice(i , 1);  
+    } 
+  }
+  return arr; // return the array
+}
+
+// uses the first three functions to trim down paragraph to a workable array
+const getWorkableArray = (paragraph, banned) => {
+  // remove punctiations and lowercase
+  const newParagraph = removePunctuationAndLowerCase(paragraph);
+  // convert paragraph to array
+  const paragraphArray = paragraphToArray(newParagraph);
+  // remove banned from array
+  const bannedRemoved = removeBanWord(paragraphArray, banned);
+
+  return bannedRemoved;
+}
+
+// converts array to word object with number of occasions for each
+const getWordsObject = (paragraph, banned) => {
+  // fetch a workable array with all lower case and punctuations stripped and banned removed
+  const workableArray = getWorkableArray(paragraph, banned);
+  // create empty object to populate
+  const words = {};
+  // iterate over workable array and add to object
+  workableArray.forEach(element => {
+    !words[element] ? words[element] = 1 : words[element] += 1;
+  });
+
+  return words;
+}
+
+// finds all the words with the greatest number of ocassions
 const mostCommonWord = (paragraph, banned) => {
+    // get a words object from paragraph
+  words = getWordsObject(paragraph, banned);
+    // array for multiple common words
+  const mostCommonWords = []
+  // iterate through whole object and reduce to find the max word
+  const mostCommonWord = Object.keys(words).reduce((a, b) => words[a] > words[b] ? a : b);
+
+  // iterate through object to find other common words
+  for (number in words){
+    if (words[number] >= words[mostCommonWord]){
+      mostCommonWords.push(number)
+    }
+  }
 
-};
+  return mostCommonWords;
+}
diff --git a/dom.js b/dom.js
@@ -0,0 +1,10 @@
+const paragraph = document.getElementById('paragraph');
+const banned = document.getElementById('banned');
+const enter = document.getElementById('enter');
+const mcw = document.getElementById('mcw');
+
+
+enter.addEventListener('click', function() { 
+  if(paragraph.value === '') alert('Please enter a paragraph.');
+  mcw.innerText = mostCommonWord(paragraph.value, banned.value);
+})
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <script src="app.js" defer></script>
+  <script src="dom.js" defer></script>
+  <title>Most Common Word</title>
+</head>
+<body>
+  <section id="main-section">
+    <p>Please enter a paragraph and an optional banned word to find the most common word.</p>
+    <section class="sub-section">
+      <div>
+        <label>Paragraph:</label><br>
+        <textarea id="paragraph" name="paragraph" rows="5" cols="30"></textarea>
+      </div>
+      <div>
+        <label>Banned Word:</label><br>
+        <input id="banned"></input>
+      </div>
+    </section>
+    <section class="sub-section">
+      <div>
+        <button id="enter">Enter</button>
+      </div>
+    </section>
+    <div>
+      <br>
+      <label>Most Common Word:  </label><label id="mcw">MCW</label>
+    </div>
+  </section>  
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,20 @@
+#main-section{
+  padding: 2%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 7px solid lightblue;
+  background-color: lightgoldenrodyellow;
+}
+.sub-section{
+  margin: 2%;
+  padding: 2%;
+}
+body{
+  background-color: blueviolet;
+}
+button{
+  width: 100px;
+  height: 30px;
+  background-color: blueviolet;
+}