start frameworks logic

Author: Kernix13

frameworks.html

@@ -86,10 +86,10 @@
         <label for="aspnet2" class="radio">ASP.NET</label>
       </fieldset>
 
-      <button type="submit" class="btn-submit" disabled>Compare</button>
+      <button type="submit" class="btn-submit">Compare</button>
     </form>
 
-    <h1 id="frameworks-heading">Compare React to Vue.js</h1>
+    <h1 id="frameworks-heading"></h1>
     <p><em>Hard coded examples</em></p>
 
     <!-- Start -->
@@ -234,6 +234,7 @@ <h2>codeCompare</h2>
   </footer>
 
   <script src="./js/global.js"></script>
+  <script src="./js/data/frameworksEls.js"></script>
   <script src="./js/frameworks.js"></script>
   <script src="./js/prism.js"></script>
 </body>

js/data/frameworksEls.js

@@ -0,0 +1,28 @@
+const React = {
+  listEls: [],
+  preEls: []
+}
+const Vue = {
+  listEls: [],
+  preEls: []
+}
+const Svelte = {
+  listEls: [],
+  preEls: []
+}
+const Angular = {
+  listEls: [],
+  preEls: []
+}
+const Django = {
+  listEls: [],
+  preEls: []
+}
+const Laravel = {
+  listEls: [],
+  preEls: []
+}
+const ASP = {
+  listEls: [],
+  preEls: []
+}

js/details.js

@@ -148,7 +148,7 @@ function handleMethodSelect(e) {
 // 6. Form submit
 function handleDetailsFormSubmit(e) {
   e.preventDefault();
-  console.log('Form submit')
+  
   setLocalStorage('type-selection', dataTypeSelect.selectedIndex);
   setLocalStorage('method-selection', methodsSelect.selectedIndex);
 

js/frameworks.js

@@ -17,9 +17,20 @@ const secondaryRadios = document.querySelectorAll(
 );
 const h1 = document.getElementById('frameworks-heading'); 
 
+const frameworks = {
+  React,
+  Vue,
+  Svelte,
+  Angular,
+  Django,
+  Laravel,
+  ASP
+};
+
 const state = {
   primaryFW: '',
-  secondaryFW: ''
+  secondaryFW: '',
+  heading: ''
 };
 
 /**
@@ -28,24 +39,44 @@ const state = {
 // 1. On page visit
 function initFrameworksPage() {
   console.log('DOMContentLoaded')
+  state.primaryFW = getLocalStorage('primary-fw') || '';
+  state.secondaryFW = getLocalStorage('secondary-fw') || '';
+  state.heading = getLocalStorage('fw-heading') || 'Choose a primary framework and a secondary framework';
+
+  h1.textContent = state.heading;
+  
 }
 
 // 2. Primary radio button check
 function handlePrimaryCheck(e) {
   if (!e.target.checked) return;
   console.log(e.target.value)
+
+  state.primaryFW = e.target.value;
+  setLocalStorage('primary-fw', state.primaryFW);
 }
 
 // 3. Secondary radio button check
 function handleSecondaryCheck(e) {
   if (!e.target.checked) return;
-  console.log(e.target.value)
+  console.log(e.target.value);
+
+  state.secondaryFW = e.target.value;
+  setLocalStorage('secondary-fw', state.secondaryFW);
 }
 
 // 4. Form submit
 function handleFrameworksFormSubmit(e) {
   e.preventDefault();
-  console.log('Form submit')
+  console.log(e)
+
+  state.detailsPrimary
+  const primaryFramewrok = getLocalStorage('primary-fw');
+  const secondaryFramewrok = getLocalStorage('secondary-fw');
+  state.heading = `Compare ${primaryFramewrok} to ${secondaryFramewrok}`;
+  h1.textContent = state.heading;
+
+  setLocalStorage('fw-heading', state.heading);
 }
 
 /**
@@ -55,14 +86,20 @@ function handleFrameworksFormSubmit(e) {
 document.addEventListener('DOMContentLoaded', initFrameworksPage);
 
 // 2. Radio button check for user's primary language
-primaryRadios.forEach(radio =>
-  radio.addEventListener('change', handlePrimaryCheck)
-);
+primaryRadios.forEach(radio => {
+  radio.addEventListener('change', handlePrimaryCheck);
+  getLocalStorage('primary-fw') === radio.value 
+    ? radio.checked = true 
+    : false;
+});
 
 // 3. Radio button check for user's language to compare to their primary
-secondaryRadios.forEach(radio =>
-  radio.addEventListener('change', handleSecondaryCheck)
-);
+secondaryRadios.forEach(radio => {
+  radio.addEventListener('change', handleSecondaryCheck);
+  getLocalStorage('secondary-fw') === radio.value 
+    ? radio.checked = true 
+    : false;
+});
 
 // 4. form listener
 frameworksForm.addEventListener('submit', handleFrameworksFormSubmit);