reiyua
/
RayRaysWordBingo
mirror of https://github.com/reiyua/RayRaysWordBingo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Various formatting

This commit is contained in:
Ray 2023-12-27 12:49:02 +00:00 committed by GitHub
parent f5d99b05d8
commit 67f7db340d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 81 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/App.js
View File

@ -1,90 +1,92 @@
import { firebaseConfig } from "./config/Config.js" import { firebaseConfig } from "./config/Config.js"
import { getApp, initializeApp } from "firebase/app" import { getApp, initializeApp } from "firebase/app"
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { getFirestore, import {
getFirestore,
collection, collection,
getDoc, getDoc,
doc, doc,
getDocs } from "firebase/firestore"; getDocs
import {getStorage} from "firebase/storage" } from "firebase/firestore";
import Form from 'react-bootstrap/Form'; import { getStorage } from "firebase/storage"
import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form';
import 'bootstrap/dist/css/bootstrap.min.css'; import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col'; import 'bootstrap/dist/css/bootstrap.min.css';
import Col from 'react-bootstrap/Col';
import './App.css' import './App.css'
function MyForm() { function MyForm() {
const [selectedOptions, setSelectedOptions] = useState([]); const [selectedOptions, setSelectedOptions] = useState([]);
const handleCheckboxChange = (event) => { const handleCheckboxChange = (event) => {
const { value, checked } = event.target; const { value, checked } = event.target;
if (checked) { if (checked) {
setSelectedOptions([...selectedOptions, value]); setSelectedOptions([...selectedOptions, value]);
} else { } else {
setSelectedOptions(selectedOptions.filter((option) => option !== value)); setSelectedOptions(selectedOptions.filter((option) => option !== value));
}
};
return (
<Form>
<Form.Group>
<Form.Label style={{ fontSize: '40px' }}>Ray Ray's Word Bingo</Form.Label>
<Col sm={2}></Col>
<Col sm={8}>
<Form.Label style={{ fontSize: '30px' }}>Enter submitter name:</Form.Label>
<Form.Control type="text"
placeholder="Name" />
<Form.Label style={{ fontSize: '30px' }}>Enter the date the shennanigans occurred (dd-mm-yyyy):</Form.Label>
<Form.Control type="text" placeholder="Date" />
<Form.Label style={{ fontSize: '30px' }}>Enter context for this tamper tantrum:</Form.Label>
<Form.Control type="text"
placeholder="Enter context here" />
<Form.Label style={{ fontSize: '30px' }}>Select the words used by Ray during his little tamper tantrum:</Form.Label>
<Form.Check
type="checkbox"
label="poop"
value="poop"
checked={selectedOptions.includes('poop')}
onChange={handleCheckboxChange}
/>
<Form.Check
type="checkbox"
label="snot"
value="snot"
checked={selectedOptions.includes('snot')}
onChange={handleCheckboxChange}
/>
<Form.Check
type="checkbox"
label="brain"
value="brain"
checked={selectedOptions.includes('brain')}
onChange={handleCheckboxChange}
/>
<Form.Check
type="checkbox"
label="fart"
value="fart"
checked={selectedOptions.includes('fart')}
onChange={handleCheckboxChange}
/>
</Col>
<Col sm={2}></Col>
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
<Form.Group>
<h3>Existing entries</h3>
<p>To be added</p>
</Form.Group>
</Form>
);
} }
};
export default MyForm; return (
<Form>
<Form.Group>
<Form.Label style={{ fontSize: '40px' }}>Ray Ray's Word Bingo</Form.Label>
<Col sm={2}></Col>
<Col sm={8}>
<Form.Label style={{ fontSize: '30px' }}>Enter submitter name:</Form.Label>
<Form.Control type="text"
placeholder="Name" />
<Form.Label style={{ fontSize: '30px' }}>Enter the date the shennanigans occurred (dd-mm-yyyy):</Form.Label>
<Form.Control type="text" placeholder="Date" />
<Form.Label style={{ fontSize: '30px' }}>Enter context for this tamper tantrum:</Form.Label>
<Form.Control type="text"
placeholder="Enter context here" />
<Form.Label style={{ fontSize: '30px' }}>Select the words used by Ray during his little tamper tantrum:</Form.Label>
<Form.Check
type="checkbox"
label="poop"
value="poop"
checked={selectedOptions.includes('poop')}
onChange={handleCheckboxChange}
/>
<Form.Check
type="checkbox"
label="snot"
value="snot"
checked={selectedOptions.includes('snot')}
onChange={handleCheckboxChange}
/>
<Form.Check
type="checkbox"
label="brain"
value="brain"
checked={selectedOptions.includes('brain')}
onChange={handleCheckboxChange}
/>
<Form.Check
type="checkbox"
label="fart"
value="fart"
checked={selectedOptions.includes('fart')}
onChange={handleCheckboxChange}
/>
</Col>
<Col sm={2}></Col>
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
<Form.Group>
<h3>Existing entries</h3>
<p>To be added</p>
</Form.Group>
</Form>
);
}
export default MyForm;