From 01318a81a648c3b479acb81b073dcfbb29ca03dc Mon Sep 17 00:00:00 2001 From: VinayakRao028 Date: Fri, 16 May 2025 13:22:47 +0530 Subject: [PATCH 1/2] Create script.js --- script.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 script.js 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(); From b7d13379a037d59f52bd7bc1531da71a41c28d36 Mon Sep 17 00:00:00 2001 From: vinayak Date: Fri, 30 May 2025 13:39:07 +0530 Subject: [PATCH 2/2] TestingSync --- .appmodconfig | 0 src/App.js | 62 +++++++++++----------- src/components/HelpPage.js | 63 +++++++++++++++++++++++ src/components/Navbar.js | 33 ++++++------ src/components/__tests__/HelpPage.test.js | 33 ++++++++++++ 5 files changed, 147 insertions(+), 44 deletions(-) create mode 100644 .appmodconfig create mode 100644 src/components/HelpPage.js create mode 100644 src/components/__tests__/HelpPage.test.js diff --git a/.appmodconfig b/.appmodconfig new file mode 100644 index 0000000..e69de29 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

+
    +
  • Convert to Uppercase: Transforms all text to uppercase letters.
    • +
  • Convert to Lowercase: Transforms all text to lowercase letters.
    • +
  • Clear Text: Removes all text from the text area.
    • +
  • Copy Text: Copies the current text to your clipboard.
    • +
  • Remove Extra Spaces: Eliminates unnecessary spaces between words.
    • +
+
+ +
+

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 ( -