Added a new route for ciphers and updated the navigation bar. Impleme…

…nted Ceaser Cipher algorithm.

public/data/key-terms-chapter-2.json

@@ -0,0 +1,20 @@
+{
+    "Access Control": "Mechanisms that enforce access rights to resources.",
+    "Active Attack": "An attack that attempts to alter system resources or affect their operation.",
+    "Asymmetric Encryption Algorithms": "Encryption algorithms that use two related keys: a public key and a private key.",
+    "Attack": "Any action that compromises the security of information.",
+    "Authentication": "A process used to verify the identity of a user, process, or system.",
+    "Authentication Exchange": "A mechanism to ensure the identity of an entity through information exchange.",
+    "Authenticity": "The property that ensures the entity is who it claims to be.",
+    "Availability": "Ensures that systems work promptly and service is not denied to authorized users.",
+    "Block Cipher": "A symmetric encryption algorithm that operates on fixed-size blocks of data.",
+    "Confidentiality": "Preserving authorized restrictions on information access and disclosure.",
+    "Cryptographic Hash Function": "A function that turns variable text into a fixed-length value, useful in cryptographic algorithms.",
+    "Cryptography": "A branch of mathematics dealing with the transformation of data for secure storage and transmission.",
+    "Cybersecurity": "The practice of protecting systems, networks, and programs from digital attacks and unauthorized access.",
+    "Data Authenticity": "Ensures the integrity and origin of data through verification.",
+    "Data Confidentiality": "Ensures that data is not disclosed to unauthorized parties.",
+    "Data Integrity": "Ensures that data remains accurate, consistent, and unaltered during processing and storage.",
+    "Data Origin Authentication": "Ensures that the claimed source of information is authentic.",
+    "Denial of Service": "An attack that makes a system or network unavailable to users."
+}

src/App.css

@@ -31,4 +31,4 @@ html, body {
 
 .card-back {
   transform: rotateY(180deg);
-}
+}

src/App.js

@@ -7,16 +7,20 @@ import KeyTermsCarousel from "./components/KeyTermsCarousel";
 import Home from "./components/Home";
 import NavigationBar from "./components/NavigationBar";
 import PrepareQuiz from "./components/PrepareQuiz";
+import CeaserCipher from "./components/ciphers/CeaserCipher";
 
 const App = () => {
   return (
     <Router>
       <NavigationBar />
       <Routes>
       <Route path="/" element={<Home />} />
-      <Route path="/chapter/:chapter/flashcards" element={<KeyTermsCarousel chapter="1"/>} />
       <Route path="/chapter/:chapter" element={<KeyTerms chapter="1"/>} />
+      <Route path="/chapter/:chapter" element={<KeyTerms chapter="2"/>} />
+      <Route path="/chapter/:chapter/flashcards" element={<KeyTermsCarousel chapter="1"/>} />
+      <Route path="/chapter/:chapter/flashcards" element={<KeyTermsCarousel chapter="2"/>} />
       <Route path="/chapter/:chapter/multiplechoicequiz" element={<PrepareQuiz chapter="1"/>} />
+      <Route path="/ciphers/:ceaser-cipher" element={<CeaserCipher />} />
       </Routes>
     </Router>
   );

src/components/KeyTerms.js

@@ -1,18 +1,19 @@
 import React, { useEffect, useState } from 'react';
-import "../App.css";
+import { useParams } from 'react-router-dom';
 
-const KeyTermsComponent = (props) => {
+const KeyTerms = () => {
+  const { chapter } = useParams();
   const [keyTerms, setKeyTerms] = useState([]);
 
   useEffect(() => {
-    fetch(`${process.env.PUBLIC_URL}/data/key-terms-chapter-${props.chapter}.json`)
+    fetch(`${process.env.PUBLIC_URL}/data/key-terms-chapter-${chapter}.json`)
       .then((response) => response.json())
       .then((data) => setKeyTerms(Object.entries(data)));
-  }, [props.chapter]);
+  }, [chapter]);
 
   return (
     <div className="container-fluid d-flex flex-column mt-5">
-      <h1 className="display-6 mt-4 mb-4">Key Terms: Chapter {props.chapter}</h1>
+      <h1 className="display-6 mt-4 mb-4">Key Terms: Chapter {chapter}</h1>
       <div className="row g-4 justify-content-center">
         {keyTerms.map(([term, definition]) => (
           <div key={term} className="col-12 col-md-6 col-lg-4">
@@ -29,4 +30,4 @@ const KeyTermsComponent = (props) => {
   );
 };
 
-export default KeyTermsComponent;
+export default KeyTerms;

src/components/KeyTermsCarousel.js

@@ -1,14 +1,19 @@
 import React, { useEffect, useState } from "react";
 import KeyTermCard from "./KeyTermCard";
+import { useParams } from 'react-router-dom';
 
 const KeyTermsCarousel = (props) => {
   const [keyTerms, setKeyTerms] = useState([]);
-
+  const { chapter } = useParams();
+
   useEffect(() => {
-    fetch(`${process.env.PUBLIC_URL}/data/key-terms-chapter-${props.chapter}.json`)
+    // Clear keyTerms state when switching chapters
+    setKeyTerms([]);
+
+    fetch(`${process.env.PUBLIC_URL}/data/key-terms-chapter-${chapter}.json`)
     .then((response) => response.json())
       .then((data) => setKeyTerms(Object.entries(data)));
-  }, [props.chapter]);
+  }, [chapter]);
 
   return (
     <div className="container-fluid h-100 p-0">

src/components/NavigationBar.js

@@ -41,6 +41,7 @@ const NavigationBar = () => {
                 aria-labelledby="navbarDropdown"
               >
                 <Link className="dropdown-item" to="/chapter/1">Chapter 1</Link>
+                <Link className="dropdown-item" to="/chapter/2">Chapter 2</Link>
               </div>
             </li>
 
@@ -61,6 +62,7 @@ const NavigationBar = () => {
                 aria-labelledby="navbarDropdown"
               >
                 <Link className="dropdown-item" to="/chapter/1/flashcards">Chapter 1</Link>
+                <Link className="dropdown-item" to="/chapter/2/flashcards">Chapter 2</Link>
               </div>
             </li>
 
@@ -83,6 +85,25 @@ const NavigationBar = () => {
                 <Link className="dropdown-item" to="/chapter/1/multiplechoicequiz">Chapter 1</Link>
               </div>
             </li>
+            <li className="nav-item dropdown">
+              <a
+                className="nav-link dropdown-toggle"
+                href="/"
+                id="navbarDropdown"
+                role="button"
+                data-bs-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+              >
+                Ciphers
+              </a>
+              <div
+                className="dropdown-menu mt-2"
+                aria-labelledby="navbarDropdown"
+              >
+                <Link className="dropdown-item" to="/ciphers/ceaser-cipher/">Ceaser Cipher</Link>
+              </div>
+            </li>
           </ul>
         </div>
       </div>

src/components/ciphers/CeaserCipher.js

@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+import "./ceaser-cipher.css"; // Import CSS for styling (you can create this file)
+
+const CaesarCipher = () => {
+  const [message, setMessage] = useState("");
+  const [shift, setShift] = useState(0);
+  const [encryptedMessage, setEncryptedMessage] = useState("");
+  const [animation, setAnimation] = useState([]);
+  const [isEncrypting, setIsEncrypting] = useState(false);
+
+  // Function to perform Caesar Cipher encryption
+  const encrypt = (text, shift) => {
+    return text
+      .split("")
+      .map((char) => {
+        const code = char.charCodeAt(0);
+        if (code >= 65 && code <= 90) {
+          return String.fromCharCode(((code - 65 + shift) % 26) + 65);
+        } else if (code >= 97 && code <= 122) {
+          return String.fromCharCode(((code - 97 + shift) % 26) + 97);
+        } else {
+          return char;
+        }
+      })
+      .join("");
+  };
+
+  // Function to handle message change
+  const handleChangeMessage = (e) => {
+    if (!isEncrypting) {
+      setMessage(e.target.value);
+    }
+  };
+
+  // Function to handle shift change
+  const handleChangeShift = (e) => {
+    setShift(parseInt(e.target.value));
+  };
+
+  // Function to animate the cipher transformation
+  const animateCipher = () => {
+    setIsEncrypting(true);
+    setAnimation([]); // Reset animation array
+    let animationArray = [];
+    for (let i = 0; i < message.length; i++) {
+      const char = message[i];
+      animationArray.push({ char, animated: false });
+    }
+    setAnimation(animationArray);
+
+    let encrypted = "";
+    for (let i = 0; i < message.length; i++) {
+      const char = message[i];
+      const encryptedChar = encrypt(char, shift);
+      setTimeout(() => {
+        setAnimation((prevAnimation) => {
+          const updatedAnimation = [...prevAnimation];
+          updatedAnimation[i].char = encryptedChar.toUpperCase();
+          updatedAnimation[i].animated = true;
+          return updatedAnimation;
+        });
+      }, i * 300);
+      encrypted += encryptedChar;
+    }
+    setEncryptedMessage(encrypted.toUpperCase());
+    setTimeout(() => {
+      setIsEncrypting(false);
+    }, message.length * 300);
+  };
+
+  // Function to handle clearing the fields
+  const handleClear = () => {
+    setMessage("");
+    setShift(0);
+    setEncryptedMessage("");
+    setAnimation([]);
+    setIsEncrypting(false);
+  };
+  // JSX for the component
+  return (
+    <div className="container-fluid mt-5 p-5 d-flex justify-content-center align-items-center flex-column">
+      <div className="">
+        <h2>Caesar Cipher</h2>
+        <div className="text-end">
+          <div>
+            <label>Message:</label>
+            <input
+              type="text"
+              value={message}
+              onChange={handleChangeMessage}
+              disabled={isEncrypting}
+              onKeyPress={(e) => {
+                const charCode = e.charCode;
+                if (
+                  !(charCode >= 97 && charCode <= 122) && // a-z
+                  charCode !== 0 &&
+                  !(charCode === 32) // Allow space
+                ) {
+                  e.preventDefault();
+                }
+              }}
+            />
+          </div>
+          <div className="">
+            <label>Shift:</label>
+            <input
+              type="number"
+              value={shift}
+              disabled={isEncrypting}
+              onChange={handleChangeShift}
+            />
+          </div>
+        </div>
+        <div className="text-center p-2 d-flex justify-content-around">
+          <button onClick={animateCipher} disabled={isEncrypting}>
+            Encrypt
+          </button>
+          <button onClick={handleClear} disabled={isEncrypting}>
+            Clear
+          </button>
+        </div>
+      </div>
+      <div className="array-container w-100 d-flex justify-content-center border-top border-dark pt-5">
+        {animation.map((item, index) => (
+          <div
+            key={index}
+            className={`array-item ${item.animated ? "animated" : ""}`}
+          >
+            {item.char}
+          </div>
+        ))}
+      </div>
+      <div>
+        <h5>Encrypted Message: {encryptedMessage} </h5>
+      </div>
+    </div>
+  );
+};
+
+export default CaesarCipher;

src/components/ciphers/ceaser-cipher.css

@@ -0,0 +1,25 @@
+.array-container {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 20px;
+  }
+
+  .array-item {
+    border: 1px solid black;
+    padding: 5px;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: bold;
+    transition: background-color 0.5s ease;
+  }
+
+  .array-item.animated {
+    background-color: lightgreen;
+  }
+