diff --git a/src/Components/DropDownQuestion/DropDownQuestion.jsx b/src/Components/DropDownQuestion/DropDownQuestion.jsx new file mode 100644 index 00000000..fbf97f13 --- /dev/null +++ b/src/Components/DropDownQuestion/DropDownQuestion.jsx @@ -0,0 +1,26 @@ +const region = [ + 'Not selected', + 'Asia', + 'Africa', + 'Europe', + 'North America', + 'South America', + 'Australia/Oceania' +]; + +function DropDownQuestion({ onChange, value }) { + const handleLocationChange = e => { + onChange(e.target.value); + }; + + return ( + + ); +} + +export default DropDownQuestion; diff --git a/src/Components/Pages/AboutPage/AboutPage.jsx b/src/Components/Pages/AboutPage/AboutPage.jsx index 402fc918..3564c5a9 100644 --- a/src/Components/Pages/AboutPage/AboutPage.jsx +++ b/src/Components/Pages/AboutPage/AboutPage.jsx @@ -1,8 +1,15 @@ function AboutPage() { return ( -
+ Weather data is provided by{' '} + + Foreca + {' '} + service. +
+ > ); } diff --git a/src/Components/Pages/ContactPage/ContactPage.jsx b/src/Components/Pages/ContactPage/ContactPage.jsx index 1b85d05f..fe29f850 100644 --- a/src/Components/Pages/ContactPage/ContactPage.jsx +++ b/src/Components/Pages/ContactPage/ContactPage.jsx @@ -1,8 +1,58 @@ +import { useCallback, useState } from 'react'; +import RadioButtonQuestion from '../../RadioButtonQuestion/RadioButtonQuestion'; +import DropDownQuestion from '../../DropDownQuestion/DropDownQuestion'; + function ContactPage() { + const [frequencyAnswer, setFrequencyAnswer] = useState(); + const [textareaValue, setTextareaValue] = useState(); + const [regionValue, setRegionValue] = useState('Not selected'); + const [isError, setIsError] = useState(false); + + const handleOptionChange = useCallback(option => { + setFrequencyAnswer(option); + }, []); + + const handleTextareaChange = useCallback(e => { + setTextareaValue(e.target.value); + }, []); + + const handleLocationChange = useCallback(option => { + setRegionValue(option); + }, []); + + const handleFormSubmit = e => { + e.preventDefault(); + if (!frequencyAnswer || !textareaValue) { + setIsError(true); + } else { + setIsError(false); + localStorage.setItem('SurveyResult', `${frequencyAnswer}, ${textareaValue}, ${regionValue}`); + setTextareaValue(''); + setFrequencyAnswer(null); + setRegionValue('Not selected'); + } + }; + return ( -