styles refactored and js quiz added (#625)

src/data/javascript-quiz.ts

@@ -118,6 +118,28 @@ const javascriptQuiz = [
       "shift() removes elements from the front of the array, which means the entire array needs to be re-indexed. In contrast, pop() and push() both work from the 'back' of the array and don't require re-indexing.",
     Link: "https://www.freecodecamp.org/news/the-complexity-of-simple-algorithms-and-data-structures-in-javascript-11e25b29de1e/"
   },
+  {
+    Question:
+      "In JavaScript, if let n = 12345.6789, then what will be the result for console.log(n.toFixed())?",
+    Answer: "12346",
+    Distractor1: "12345",
+    Distractor2: "12345.6789",
+    Distractor3: "Undefined. toFixed() must take parameters",
+    Explanation:
+      "Parameters are optional. If not passed, it will round the given number, leaving with no fractional part",
+    Link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed#examples"
+  },
+  {
+    Question:
+      "In JavaScript, what will be the value for console.log(((a, b = 1, c) => {}).length)?",
+    Answer: "1",
+    Distractor1: "3",
+    Distractor2: "2",
+    Distractor3: "0",
+    Explanation:
+      "length property inside the function indicates the expected number of parameters. But, only paramaters before the first one with a default value are counted.",
+    Link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length"
+  },
   {
     Question:
       "What is the process of converting a value from one data type to another called?",
@@ -1959,7 +1981,8 @@ const javascriptQuiz = [
     Link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"
   },
   {
-    Question: "In JavaScript, what is the name for a variable that can be changed?",
+    Question:
+      "In JavaScript, what is the name for a variable that can be changed?",
     Answer: "Mutable Variable",
     Distractor1: "Volatile Variable",
     Distractor2: "Dynamic Variable",

src/stylesheets/App.css

@@ -33,19 +33,21 @@ a:hover {
   display: block;
 }
 
-/*Quiz styles*/
-
-.select-quiz-styles {
+/* Common shared styles */
+.select-quiz-styles,
+.quiz-div,
+.results-div {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
+/*Quiz styles*/
 .quiz-heading,
 .results-heading {
-  text-align: center;
   font-family: "Roboto Mono", monospace;
+  text-align: center;
 }
 
 .select-btn-div {
@@ -56,13 +58,13 @@ a:hover {
 
 .select-btns,
 .answers-btns {
-  cursor: pointer;
-  padding: 10px;
-  border-radius: 15px;
+  font-size: 1.2rem;
   margin: 10px 0;
+  padding: 10px;
   background-color: #ffffff;
+  border-radius: 15px;
   border: none;
-  font-size: 1.2rem;
+  cursor: pointer;
 }
 
 .quiz-btn,
@@ -74,13 +76,6 @@ a:hover {
   padding: 5px;
 }
 
-.quiz-div {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
 .quiz-answers-div {
   display: flex;
   flex-direction: column;
@@ -95,8 +90,8 @@ a:hover {
 
 .quiz-text {
   display: flex;
-  padding: 0 10px;
   justify-content: space-evenly;
+  padding: 0 10px;
   font-size: 1.4rem;
 }
 
@@ -117,14 +112,6 @@ a:hover {
 }
 
 /*Results styles*/
-
-.results-div {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
 .results-text {
   font-size: 1.3rem;
   margin-top: 20px;

src/stylesheets/Button.css

@@ -5,29 +5,29 @@
 .btn-default {
   width: 100px;
   margin: 10px;
-  color: #0a0a23;
+  font-family: Roboto Mono, monospace;
   font-size: 18px;
+  color: #0a0a23;
   background-color: #feac32;
   background-image: linear-gradient(#fecc4c, #ffac33);
   border-color: #feac32;
   border-width: 3px;
-  font-family: Roboto Mono, monospace;
 }
 
 .transparent-btn {
-  color: var(--gray-00, #fff);
   height: 32px;
-  font-size: 18px;
   font-family: lato, sans-serif;
-  cursor: pointer;
-  border: 1px solid var(--gray-00, #fff);
+  font-size: 18px;
   background: transparent;
+  color: var(--gray-00, #fff);
+  border: 1px solid var(--gray-00, #fff);
+  cursor: pointer;
 }
 
 .transparent-btn:hover {
+  font-weight: bold;
   background-color: var(--gray-00, #fff);
   color: #0a0a23;
-  font-weight: bold;
 }
 
 .large-btn {

src/stylesheets/HeroSection.css

@@ -23,39 +23,24 @@
 }
 
 .hero-text {
-  background-color: #0a0a23f2;
   padding: 20px;
   font-family: Lato, sans-serif;
   text-align: center;
   letter-spacing: 1px;
   line-height: 1.5em;
+  background-color: #0a0a23f2;
   box-shadow: inset -5px -6px #0a0a232e;
 }
 
 .question-count {
   font-size: 2rem;
 }
+
 .hero-text h1 {
   font-weight: bold;
-  font-size: 2.1rem;
+  font-size: clamp(2.1rem, 7vw, 3.75rem);
 }
 
 .hero-text h2 {
-  font-size: 1.5rem;
-}
-
-@media screen and (min-width: 768px) {
-  .hero-text h1 {
-    font-size: 3.1rem;
-  }
-
-  .hero-text h2 {
-    font-size: 1.8rem;
-  }
-}
-
-@media screen and (min-width: 1000px) {
-  .hero-text h1 {
-    font-size: 3.75rem;
-  }
+  font-size: clamp(1.5rem, 4vw, 1.8rem);
 }

src/stylesheets/HomepageRow.css

@@ -3,17 +3,17 @@ p {
 }
 
 .featurette-heading {
-  font-weight: 700;
   margin: 22px;
+  font-weight: 700;
 }
 
 .content-section-img {
   width: 80%;
 }
 
 .content-row-container {
-  display: flex;
   width: 100vw;
+  display: flex;
   align-items: center;
   justify-content: center;
   padding-top: 20px;
@@ -22,12 +22,12 @@ p {
 }
 
 .content-text-container {
-  padding: 20px 30px !important;
-  justify-content: center;
+  max-width: 485px !important;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
-  max-width: 485px !important;
+  justify-content: center;
+  padding: 20px 30px !important;
 }
 
 .lead {
@@ -50,18 +50,18 @@ p {
 }
 
 #divider {
+  height: 2px;
   margin-top: 0;
   margin-bottom: 0;
   color: white;
-  height: 2px;
   opacity: 0.8;
 }
 
 #fcc-image {
   width: 100%;
   height: 100%;
-  object-fit: contain;
   padding-left: 10px;
+  object-fit: contain;
 }
 
 @media screen and (min-width: 768px) {

src/stylesheets/Navbar.css

@@ -3,7 +3,7 @@ header {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 10px 10px;
+  padding: 10px;
   background-color: #0a0a23;
 }
 
@@ -23,15 +23,14 @@ header {
 
 .website-logo {
   display: flex;
+  width: auto;
   height: 35px;
   margin: 7px 0;
-  width: auto;
 }
 
 @media screen and (max-width: 590px) {
   .homepage-navbar {
     display: block;
-    justify-content: center;
   }
 
   .navbar-buttons {