Pr1

script.js

@@ -0,0 +1,53 @@
+const questionContainer = document.getElementById('question');
+const answersContainer = document.getElementById('answers');
+const submitButton = document.getElementById('submit-btn');
+const resultContainer = document.getElementById('result');
+
+// A simple question with options
+const question = {
+    questionText: "What is the capital of France?",
+    options: ["Paris", "London", "Berlin", "Madrid"],
+    correctAnswer: "Paris"
+};
+
+// Display the question and options
+function displayQuestion() {
+    questionContainer.textContent = question.questionText;
+
+    answersContainer.innerHTML = '';
+    question.options.forEach(option => {
+        const label = document.createElement('label');
+        const input = document.createElement('input');
+        input.type = "radio";
+        input.name = "answer";
+        input.value = option;
+        label.appendChild(input);
+        label.appendChild(document.createTextNode(option));
+        answersContainer.appendChild(label);
+        answersContainer.appendChild(document.createElement('br'));
+    });
+}
+
+// Check the user's answer
+function checkAnswer() {
+    const selectedOption = document.querySelector('input[name="answer"]:checked');
+    if (!selectedOption) {
+        resultContainer.textContent = "Please select an answer!";
+        return;
+    }
+
+    const userAnswer = selectedOption.value;
+    if (userAnswer === question.correctAnswer) {
+        resultContainer.textContent = "Correct! Well done.";
+        resultContainer.style.color = 'green';
+    } else {
+        resultContainer.textContent = "Oops! That's incorrect. Try again.";
+        resultContainer.style.color = 'red';
+    }
+}
+
+// Event listener for the submit button
+submitButton.addEventListener('click', checkAnswer);
+
+// Display the question when the page loads
+displayQuestion();

src/App.js

@@ -4,6 +4,7 @@ import About from './components/About';
 import Navbar from './components/Navbar';
 import TextForm from './components/TextForm';
 import Alert from './components/Alert';
+import HelpPage from './components/HelpPage';
 import {
   BrowserRouter as Router,
   Switch,
@@ -14,55 +15,58 @@ function App() {
   const [mode, setMode] = useState('light');
   const [alert, setAlert] = useState(null);
 
-  const showAlert = (message,type)=> {
+  const showAlert = (message, type) => {
     setAlert({
-      msg : message,
-      type : type
+      msg: message,
+      type: type
     })
     setTimeout(() => {
       setAlert(null)
     }, 1500);
   }
 
-  const togglePMode = () =>{
-      setMode("purple");
-      document.body.style.backgroundColor = '#a98eda';
-      showAlert("Purple mode has been enabled","success");
+  const togglePMode = () => {
+    setMode("purple");
+    document.body.style.backgroundColor = '#a98eda';
+    showAlert("Purple mode has been enabled", "success");
   }
 
-  const toggleLMode = () =>{
+  const toggleLMode = () => {
     setMode("light");
     document.body.style.backgroundColor = 'white';
-    showAlert("Light mode has been enabled","success");
+    showAlert("Light mode has been enabled", "success");
   }
 
-  const toggleDMode = () =>{
+  const toggleDMode = () => {
     setMode("dark");
     document.body.style.backgroundColor = '#212529';
-    showAlert("Dark mode has been enabled","success");
+    showAlert("Dark mode has been enabled", "success");
   }
 
-
   return (
     <>
-    <Router>
-      <Navbar title="TextUtils" mode={mode} toggleDMode={toggleDMode} toggleLMode={toggleLMode} togglePMode={togglePMode}/>
-      <Alert alert = {alert}/>
-      <div className="container my-3">
-      <Switch>
-          <Route exact path="/about">
-            <About mode={mode} toggleDMode={toggleDMode} toggleLMode={toggleLMode} togglePMode={togglePMode}/>
-          </Route>
+      <Router>
+        <Navbar title="TextUtils" mode={mode} toggleDMode={toggleDMode} toggleLMode={toggleLMode} togglePMode={togglePMode} />
+        <Alert alert={alert} />
+        <div className="container my-3">
+          <Switch>
+            <Route exact path="/about">
+              <About mode={mode} toggleDMode={toggleDMode} toggleLMode={toggleLMode} togglePMode={togglePMode} />
+            </Route>
+
+            <Route exact path="/help">
+              <HelpPage mode={mode} />
+            </Route>
 
-          <Route exact path="/TextUtils-React">
-          <TextForm showAlert={showAlert}  heading="TextUtils - Word Counter, Character Counter,
-          Remove Extra Spaces and Many more.." mode={mode} toggleDMode={toggleDMode} toggleLMode={toggleLMode} togglePMode={togglePMode}/>
-          </Route>
-        </Switch>
-      </div>
-    </Router>
-    </> 
+            <Route exact path="/TextUtils-React">
+              <TextForm showAlert={showAlert} heading="TextUtils - Word Counter, Character Counter,
+          Remove Extra Spaces and Many more.." mode={mode} toggleDMode={toggleDMode} toggleLMode={toggleLMode} togglePMode={togglePMode} />
+            </Route>
+          </Switch>
+        </div>
+      </Router>
+    </>
   );
 }
 
-export default App;
+export default App;

src/components/HelpPage.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const HelpPage = ({ mode }) => {
+  const textColor = mode === 'light' ? 'text-dark' : 'text-light';
+
+  return (
+    <div className={`container my-4 ${textColor}`}>
+      <h1 className="mb-4">Help Center</h1>
+
+      <section className="mb-4">
+        <h2>Getting Started</h2>
+        <p>Welcome to TextUtils! This application helps you manipulate and analyze text. Here's how to get started:</p>
+        <ol>
+          <li>Enter or paste your text in the main text area on the home page.</li>
+          <li>Use the buttons below the text area to perform various operations on your text.</li>
+          <li>View the results and text statistics in real-time.</li>
+        </ol>
+      </section>
+
+      <section className="mb-4">
+        <h2>How to Use the Application</h2>
+        <ul>
+          <li><strong>Convert to Uppercase:</strong> Transforms all text to uppercase letters.</li>
+          <li><strong>Convert to Lowercase:</strong> Transforms all text to lowercase letters.</li>
+          <li><strong>Clear Text:</strong> Removes all text from the text area.</li>
+          <li><strong>Copy Text:</strong> Copies the current text to your clipboard.</li>
+          <li><strong>Remove Extra Spaces:</strong> Eliminates unnecessary spaces between words.</li>
+        </ul>
+      </section>
+
+      <section className="mb-4">
+        <h2>Frequently Asked Questions</h2>
+        <dl>
+          <dt>Q: Is my text saved anywhere?</dt>
+          <dd>A: No, TextUtils does not store any of your text. All operations are performed locally in your browser.</dd>
+
+          <dt>Q: Can I use TextUtils offline?</dt>
+          <dd>A: TextUtils requires an internet connection to load initially, but once loaded, most features will work offline.</dd>
+
+          <dt>Q: How do I change the application's theme?</dt>
+          <dd>A: Use the mode toggle switch in the navigation bar to switch between Light and Dark modes.</dd>
+        </dl>
+      </section>
+
+      <section className="mb-4">
+        <h2>Contact / Support Information</h2>
+        <p>If you need further assistance or want to report an issue, please contact our support team:</p>
+        <ul>
+          <li>Email: support@textutils.com</li>
+          <li>Twitter: @TextUtilsSupport</li>
+          <li>GitHub: <a href="https://github.com/yourusername/TextUtils-React" target="_blank" rel="noopener noreferrer">TextUtils-React Repository</a></li>
+        </ul>
+      </section>
+    </div>
+  );
+};
+
+HelpPage.propTypes = {
+  mode: PropTypes.string.isRequired,
+};
+
+export default HelpPage;

src/components/Navbar.js

@@ -1,19 +1,19 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {Link} from "react-router-dom";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from "react-router-dom";
 
-const navstyle=(mode)=>{
-    if(mode === 'purple'){
+const navstyle = (mode) => {
+    if (mode === 'purple') {
         return {
-            backgroundColor : '#432874',
+            backgroundColor: '#432874',
             color: 'white'
         }
     }
 }
 
 export default function Navbar(props) {
     return (
-        <nav style={navstyle(props.mode)} className ={ `navbar border-bottom border-${props.mode==='light'?'dark':'light'} navbar-expand-lg navbar-${props.mode==='light'?'light':'dark'} bg-${props.mode}` }>
+        <nav style={navstyle(props.mode)} className={`navbar border-bottom border-${props.mode === 'light' ? 'dark' : 'light'} navbar-expand-lg navbar-${props.mode === 'light' ? 'light' : 'dark'} bg-${props.mode}`}>
             <div className="container-fluid">
                 <Link className="navbar-brand" to="/TextUtils-React">{props.title}</Link>
                 <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -27,16 +27,19 @@ export default function Navbar(props) {
                         <li className="nav-item">
                             <Link className="nav-link" to="/about">{props.aboutText}</Link>
                         </li>
+                        <li className="nav-item">
+                            <Link className="nav-link" to="/help">Help</Link>
+                        </li>
                     </ul>
-                    <div style={{backgroundColor :'white'}} class="mx-3 btn-group" role="group" aria-label="Basic radio toggle button group">
-                        <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off"  onClick={props.toggleLMode}/>
-                        <label class="btn btn-outline-primary" htmlFor="btnradio1">Light Mode</label>
+                    <div style={{ backgroundColor: 'white' }} className="mx-3 btn-group" role="group" aria-label="Basic radio toggle button group">
+                        <input type="radio" className="btn-check" name="btnradio" id="btnradio1" autoComplete="off" onClick={props.toggleLMode} />
+                        <label className="btn btn-outline-primary" htmlFor="btnradio1">Light Mode</label>
 
-                        <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" onClick={props.toggleDMode}/>
-                        <label class="btn btn-outline-primary" htmlFor="btnradio2">Dark Mode</label>
+                        <input type="radio" className="btn-check" name="btnradio" id="btnradio2" autoComplete="off" onClick={props.toggleDMode} />
+                        <label className="btn btn-outline-primary" htmlFor="btnradio2">Dark Mode</label>
 
-                        <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off" onClick={props.togglePMode}/>
-                        <label class="btn btn-outline-primary" htmlFor="btnradio3">Purple Mode</label>
+                        <input type="radio" className="btn-check" name="btnradio" id="btnradio3" autoComplete="off" onClick={props.togglePMode} />
+                        <label className="btn btn-outline-primary" htmlFor="btnradio3">Purple Mode</label>
                     </div>
                 </div>
             </div>
@@ -52,4 +55,4 @@ Navbar.propTypes = {
 Navbar.defaultProps = {
     title: 'Set title here',
     aboutText: 'About'
-  };
+}

src/components/__tests__/HelpPage.test.js

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import HelpPage from '../HelpPage';
+
+describe('HelpPage', () => {
+  test('renders HelpPage component', () => {
+    render(<HelpPage mode="light" />);
+    expect(screen.getByText('Help Center')).toBeInTheDocument();
+  });
+
+  test('contains all required sections', () => {
+    render(<HelpPage mode="light" />);
+    expect(screen.getByText('Getting Started')).toBeInTheDocument();
+    expect(screen.getByText('How to Use the Application')).toBeInTheDocument();
+    expect(screen.getByText('Frequently Asked Questions')).toBeInTheDocument();
+    expect(screen.getByText('Contact / Support Information')).toBeInTheDocument();
+  });
+
+  test('applies correct text color based on mode', () => {
+    const { container: lightContainer } = render(<HelpPage mode="light" />);
+    expect(lightContainer.firstChild).toHaveClass('text-dark');
+
+    const { container: darkContainer } = render(<HelpPage mode="dark" />);
+    expect(darkContainer.firstChild).toHaveClass('text-light');
+  });
+
+  test('renders correct content in each section', () => {
+    render(<HelpPage mode="light" />);
+    expect(screen.getByText('Convert to Uppercase:')).toBeInTheDocument();
+    expect(screen.getByText('Is my text saved anywhere?')).toBeInTheDocument();
+    expect(screen.getByText('Email: support@textutils.com')).toBeInTheDocument();
+  });
+});