diff --git a/.appmodconfig b/.appmodconfig new file mode 100644 index 0000000..e69de29 diff --git a/script.js b/script.js new file mode 100644 index 0000000..47fdce7 --- /dev/null +++ b/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(); diff --git a/src/App.js b/src/App.js index 8ea5777..582bd32 100644 --- a/src/App.js +++ b/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 ( <> - - - -
- - - - + + + +
+ + + + + + + + - - - - -
- - + + + + +
+ + ); } -export default App; \ No newline at end of file +export default App; diff --git a/src/components/HelpPage.js b/src/components/HelpPage.js new file mode 100644 index 0000000..ace1774 --- /dev/null +++ b/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 ( +
+

Help Center

+ +
+

Getting Started

+

Welcome to TextUtils! This application helps you manipulate and analyze text. Here's how to get started:

+
    +
  1. Enter or paste your text in the main text area on the home page.
    2. +
  2. Use the buttons below the text area to perform various operations on your text.
    3. +
  3. View the results and text statistics in real-time.
    4. +
+
+ +
+

How to Use the Application

+ +
+ +
+

Frequently Asked Questions

+
+
Q: Is my text saved anywhere?
+
A: No, TextUtils does not store any of your text. All operations are performed locally in your browser.
+ +
Q: Can I use TextUtils offline?
+
A: TextUtils requires an internet connection to load initially, but once loaded, most features will work offline.
+ +
Q: How do I change the application's theme?
+
A: Use the mode toggle switch in the navigation bar to switch between Light and Dark modes.
+
+
+ +
+

Contact / Support Information

+

If you need further assistance or want to report an issue, please contact our support team:

+ +
+
+ ); +}; + +HelpPage.propTypes = { + mode: PropTypes.string.isRequired, +}; + +export default HelpPage; \ No newline at end of file diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 855b60b..492322f 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,11 +1,11 @@ -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' } } @@ -13,7 +13,7 @@ const navstyle=(mode)=>{ export default function Navbar(props) { return ( -