38 |

Create a New Mnemo

39 | 44 |

49 | 				<button
50 | 					type="submit"
51 | 					onClick={ handleSubmit }
52 | 				>
53 | 				Create New Mnemo  
54 | 				</button>
55 | 		 </div>
56 | 	 </React.Fragment>
57 |   );
58 | }
59 | 
60 | export default AddText;

--------------------------------------------------------------------------------
/server/controllers/userController.js:
--------------------------------------------------------------------------------
 1 | const db = require('../models/pgModel.js');
 2 | 
 3 | const userController = {};
 4 | 
 5 | userController.createUser = (req, res, next) => {
 6 |   const { name, email, password } = req.body;
 7 |   const newUserValues = [name, email, password];
 8 |   const pgQuery = 
 9 |     `INSERT INTO readers (name, email, password)
10 |     VALUES ($1, $2, $3)
11 |     RETURNING _id, name;`;
12 |   
13 |   db.query(pgQuery, newUserValues)
14 |     .then(queryResult => { res.locals.user = queryResult.rows[0]; next(); })
15 |     .catch(error => { console.log(error); next(error); });
16 | 
17 | };
18 | 
19 | userController.validateUser = (req, res, next) => {
20 |   const { name, email, password } = req.body;
21 |   const checkUserValues = [email, password];
22 |   const pgQuery = 
23 |     `SELECT *
24 |     FROM readers
25 |     WHERE email = $1 AND password = $2;`;
26 | 
27 |   db.query(pgQuery, checkUserValues)
28 |     .then(queryResult => { res.locals.user = queryResult.rows[0]; next(); })
29 |     .catch(error => { console.log(error); next(error); });
30 | 
31 | }
32 | 
33 | userController.setSession = (req, res, next) => {
34 |   const date = new Date();
35 |   const newSessionValues = [ res.locals.user._id, date.toLocaleDateString(), date.toLocaleTimeString() ];
36 |   const pgQuery = 
37 |     `INSERT INTO sessions (reader_id, date, time)
38 |     VALUES ($1, $2, $3)
39 |     RETURNING *;`;
40 |   
41 |   db.query(pgQuery, newSessionValues)
42 |     .then(queryResult => { res.locals.session = queryResult.rows[0]; next(); })
43 |     .catch(error => { console.log(error); next(error); })
44 | }
45 | 
46 | module.exports = userController;

--------------------------------------------------------------------------------
/client/components/AddCard.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { useHistory } from 'react-router-dom';
 3 | 
 4 | const AddCard = props => {
 5 |   const [question, setQuestion] = useState('');
 6 | 	const [answer, setAnswer] = useState('');
 7 | 	const history = useHistory();
 8 | 
 9 |   const onQuestionChange = e => setQuestion(e.target.value);
10 |   const onAnswerChange = e => setAnswer(e.target.value);
11 | 
12 |   const handleSubmit = e => {
13 |     e.preventDefault();
14 | 
15 |     const data = { text_id: props.textId, question, answer, position: props.position };
16 |     const postOptions = {
17 |         method: 'POST',
18 |         headers: { 'Content-Type': 'application/json' },
19 |         body: JSON.stringify(data),
20 |     };
21 | 
22 | 		fetch('/newCard', postOptions)
23 | 			.then(response => {
24 | 				return response.json()
25 | 			})
26 | 		  .then((response) => {
27 | 				setQuestion('');
28 | 				setAnswer('');
29 | 				props.dismissCard(false);
30 | 			});
31 | 		
32 |   }
33 | 
34 |   return (
35 | 		<div className="modal">
36 | 			<div id="addCardWrapper">
37 | 				<h1>Add a Card After {props.position}</h1>
38 | 				<textarea 
39 | 					placeholder="Add a question"
40 | 					value={ question } 
41 | 					onChange={ onQuestionChange }
42 | 				/>
43 | 				<textarea 
44 | 					placeholder="Answer your question"
45 | 					value={ answer }
46 | 					onChange={ onAnswerChange } 
47 | 				/>
48 | 				<button
49 | 					type="submit"
50 | 					onClick={ handleSubmit }
51 | 				>
52 | 				Create New Card  
53 | 				</button>
54 | 				<button
55 | 					type='submit'
56 | 					onClick={ () => props.dismissCard(false) }
57 | 				>
58 | 					Cancel
59 | 				</button>
60 | 		  </div>
61 | 	 </div>
62 |   );
63 | }
64 | 
65 | export default AddCard;

--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
 1 | // Import libraries
 2 | const path = require('path');
 3 | const express = require('express');
 4 | const bodyParser = require('body-parser');
 5 | const cookieParser = require('cookie-parser');
 6 | 
 7 | // Import Controllers
 8 | const textController = require('./controllers/textController.js');
 9 | const userController = require('./controllers/userController.js');
10 | 
11 | // Create Express server instance
12 | const app = express();
13 | 
14 | // Handle parsing request body
15 | 
16 | app.use(bodyParser.json());
17 | app.use(bodyParser.urlencoded({ extended: true }));
18 | app.use(cookieParser());
19 | 
20 | app.get('/getTexts', textController.getTexts, (req, res, next) => {
21 |   res.json(res.locals.textList);
22 | });
23 | 
24 | app.get('/getTextContent/:textId', textController.getTextContent, (req, res, next) => {
25 |   res.json(res.locals.textContent);
26 | });
27 | 
28 | app.get('/getCards/:textId', textController.getCards, (req, res, next) => {
29 |   res.json(res.locals.cards);
30 | });
31 | 
32 | app.post('/newText', textController.parseMarkdown, textController.storeNewText, (req, res, next) => { 
33 |   res.status(200).json(res.locals.storedText);
34 | });
35 | 
36 | app.post('/newCard', textController.addCard, (req, res, next) => { 
37 |   res.status(200).json(res.locals.newCard)
38 | });
39 | 
40 | app.post('/login', userController.validateUser, userController.setSession, (req, res, next) => {
41 |   res.cookie('id', res.locals.user._id);
42 |   res.status(200).json(res.locals.user);
43 | });
44 | 
45 | app.post('/signup', userController.createUser, userController.setSession, (req, res, next) => {
46 |   res.cookie('id', res.locals.user._id);
47 |   res.status(200).json(res.locals.newUser);
48 | })
49 | 
50 | // Serve main app: build(=dist) folder and html
51 | app.use('/build', express.static(path.resolve(__dirname, '../build')));
52 | app.get('/', (req, res) => {
53 |   res.sendFile(path.join(__dirname, '../index.html'));
54 | });
55 | 
56 | // Start server
57 | const PORT = 3000;
58 | app.listen(PORT, () => {
59 |   console.log(`Server listening on port: ${PORT}`);
60 | });
61 | 
62 | module.exports = app;

--------------------------------------------------------------------------------
/client/components/RenderText.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { useParams } from 'react-router-dom';
 3 | import parse from 'html-react-parser';
 4 | 
 5 | const RenderText = props => {
 6 | 	const [body, setBody] = useState([]);
 7 | 	const [title, setTitle] = useState('');
 8 | 	const [cards, setCards] = useState([]);
 9 | 	const { textId } = useParams();
10 | 	
11 | 	useEffect(() => {
12 | 		fetch(`/getCards/${textId}`)
13 | 			.then(queryResults => queryResults.json())
14 | 			.then(queryResults => {
15 | 				const cardObj = queryResults.reduce((acc, card) => {
16 | 					if(!acc[card.position]) {
17 | 						acc[card.position] = { count: 1, cards: [{ question: card.question, answer: card.answer }] };
18 | 						return acc;
19 | 					} else {
20 | 						acc[card.position].count++;
21 | 						acc[card.position].cards.push({ question: card.question, answer: card.answer });
22 | 					}
23 | 				}, 
24 | 				{});
25 | 				
26 | 				setCards(cardObj);
27 | 				
28 | 			});
29 | 		
30 | 		fetch(`/getTextContent/${textId}`)
31 | 			.then(queryResults => queryResults.json())
32 | 		  .then((queryResults) => {
33 | 				const bodyElements = queryResults.text.map((chunk) => {
34 | 					const { type, position, content } = chunk;
35 | 					let element;
36 | 					
37 | 					if (type === 'heading-1') {
38 | 						element = <h1 key={position} id={`heading-${position}`}>{content}</h1>
39 | 					} else if (type === 'heading-2') {
40 | 						element = <h2 key={position} id={`heading-${position}`}>{content}</h2>
41 | 					} else if (type === 'heading-3') {
42 | 						element = <h3 key={position} id={`heading-${position}`}>{content}</h3>
43 | 					} else if (type === 'paragraph') {
44 | 						element = <p key={position} id={`paragraph-${position}`}>{parse(content)}</p>
45 | 					}
46 | 					return element;
47 | 				});
48 | 				setBody(bodyElements);
49 | 				setTitle(queryResults.title);
50 | 			});
51 | 	}, [setBody, setTitle, setCards]);
52 | 
53 |   return (
54 | 		<article className="mnemoText">
55 | 		  <div className="mnemoTitle">{title}</div>
56 | 			{ body }
57 | 		</article>
58 |   );
59 | }
60 | 
61 | export default RenderText;

--------------------------------------------------------------------------------
/client/components/RenderEditableText.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { useParams, useHistory } from 'react-router-dom';
 3 | import parse from 'html-react-parser';
 4 | import AddCard from './AddCard.jsx';
 5 | 
 6 | const RenderEditableText = props => {
 7 | 	const [body, setBody] = useState([]);
 8 | 	const [title, setTitle] = useState('')
 9 | 	const [addCard, setAddCard] = useState(false);
10 | 	const [clickedElement, setClickedElement] = useState(null);
11 | 	const { textId } = useParams();
12 | 	const history = useHistory();
13 | 	
14 | 	useEffect(() => {
15 | 		fetch(`/getTextContent/${textId}`)
16 | 			.then(queryResults => queryResults.json())
17 | 		  .then((queryResults) => {
18 | 				const bodyElements = queryResults.text.map((chunk) => {
19 | 					const { type, position, content } = chunk;
20 | 					let element;
21 | 					
22 | 					if (type === 'heading-1') {
23 | 						element = <h1 key={position} id={`heading-${position}`}>{content}</h1>
24 | 					} else if (type === 'heading-2') {
25 | 						element = <h2 key={position} id={`heading-${position}`}>{content}</h2>
26 | 					} else if (type === 'heading-3') {
27 | 						element = <h3 key={position} id={`heading-${position}`}>{content}</h3>
28 | 					} else if (type === 'paragraph') {
29 | 						element = <p key={position} id={`paragraph-${position}`}>{parse(content)}</p>
30 | 					}
31 | 					return element;
32 | 				});
33 | 				setBody(bodyElements);
34 | 				setTitle(queryResults.title);
35 | 			});
36 | 	}, [setBody, setTitle]);
37 | 
38 | 	const handleAddCardClick = (e) => {
39 | 		document.addEventListener('click', handleElementClick);
40 | 	}
41 | 
42 | 	const handleElementClick = (e) => {
43 | 		setClickedElement(e.target.id);
44 | 		setAddCard(true);
45 | 		document.removeEventListener('click', handleElementClick);
46 | 	}
47 | 
48 |   return (
49 | 		<article className="mnemoText">
50 | 		  <div className="mnemoTitle">{title}</div>
51 | 			<div className="buttonWrapper">
52 | 				<button id="addCard" onClick={handleAddCardClick}>+ Add Card</button>
53 | 				<button id="finishedAddingCards" onClick={() => history.push('/mnemos')}>Finished</button>
54 | 			</div>
55 | 			  { addCard && 
56 | 				  <AddCard textId={textId} position={clickedElement} dismissCard={setAddCard} /> 
57 | 				}
58 |         { body }
59 | 		</article>
60 |   );
61 | }
62 | 
63 | export default RenderEditableText;

--------------------------------------------------------------------------------
/server/controllers/textController.js:
--------------------------------------------------------------------------------
 1 | const db = require('../models/pgModel');
 2 | const markdownParser = require('./markdownParser.js');
 3 | 
 4 | const textController = {};
 5 | 
 6 | textController.parseMarkdown = (req, res, next) => {
 7 |   // TODO: Add author when login complete
 8 |   const { title, body } = req.body;
 9 |   const text = markdownParser(body);
10 |   
11 |   res.locals.newText = { title, text };
12 | 
13 |   next();
14 | };
15 | 
16 | textController.storeNewText = (req, res, next) => {
17 |   const textElements = [ Number(req.cookies.id), res.locals.newText.title, JSON.stringify(res.locals.newText.text) ];
18 |   const pgQuery = 
19 |     `INSERT INTO texts (author_id, title, text)
20 |     VALUES ($1, $2, $3)
21 |     RETURNING *;`;
22 |   
23 |   db.query(pgQuery, textElements)
24 |     .then(queryResponse => { res.locals.storedText = queryResponse.rows[0]; next(); })
25 |     .catch(error => { console.log(error); next(error); });
26 |  
27 | };
28 | 
29 | textController.getTexts = (req, res, next) => {
30 | 	const pgQuery = 
31 | 		`SELECT title, _id
32 | 		FROM texts;`
33 | 	
34 | 	db.query(pgQuery)
35 | 	  .then(queryResponse => {res.locals.textList = queryResponse.rows; next(); });
36 | };
37 | 
38 | textController.getTextContent = (req, res, next) => {
39 | 	const pgQuery = 
40 | 		`SELECT *
41 | 		FROM texts
42 | 		WHERE _id=$1;`
43 | 	
44 | 	
45 | 	db.query(pgQuery, [ req.params.textId ])
46 | 	  .then(queryResponse => { 
47 | 			const parsedText = JSON.parse(queryResponse.rows[0].text);
48 | 			res.locals.textContent = queryResponse.rows[0];
49 | 			res.locals.textContent.text = parsedText;
50 | 			next(); });
51 | };
52 | 
53 | textController.addCard = (req, res, next) => {
54 | 	const { text_id, question, answer, position } = req.body;
55 | 	const newCardValues = [text_id, question, answer, position];
56 | 	const pgQuery = 
57 | 	`INSERT INTO cards (text_id, question, answer, position)
58 | 	VALUES ($1, $2, $3, $4)
59 | 	RETURNING *;`;
60 | 
61 | 	db.query(pgQuery, newCardValues)
62 | 		.then((queryResponse) => {
63 | 		res.locals.newCard = queryResponse.rows[0];
64 | 		next();
65 | 	});
66 | };
67 | 
68 | textController.getCards = (req, res, next) => {
69 | 	const pgQuery = 
70 | 	 `SELECT *
71 | 	 FROM cards
72 | 	 WHERE text_id=$1;`;
73 | 
74 | 	 db.query(pgQuery, [ req.params.textId ])
75 | 	   .then(queryResponse => {
76 | 			 console.log(queryResponse.rows);
77 | 			 res.locals.cards = queryResponse.rows;
78 | 			 next();
79 | 		 });
80 | }
81 | 
82 | module.exports = textController;

--------------------------------------------------------------------------------
/client/components/GetUser.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import { Redirect } from 'react-router-dom';
  3 | 
  4 | const GetUser = props => {
  5 | 	const [key, value] = document.cookie.split('=');
  6 | 	
  7 | 	const [name, setName] = useState('');
  8 |   const [email, setEmail] = useState('');
  9 |   const [password, setPassword] = useState('');
 10 | 	const [isLoggedIn, setLoggedIn] = useState({ loggedIn: key === 'id' ? true : undefined, userId: key === 'id' ? value : undefined });
 11 | 	// const [isLoggedIn, setLoggedIn] = useState({ loggedIn: undefined, userId: undefined })
 12 | 
 13 |   const onNameChange = e => setName(e.target.value);
 14 |   const onEmailChange = e => setEmail(e.target.value);
 15 |   const onPasswordChange = e => setPassword(e.target.value);
 16 |   const onLogin = (e, status) => setLoggedIn(status)
 17 | 
 18 |   const handleSubmit = e => {
 19 |     e.preventDefault();
 20 | 
 21 |     const user = { name, email, password };
 22 |     const postOptions = {
 23 |         method: 'POST',
 24 |         headers: { 'Content-Type': 'application/json' },
 25 |         body: JSON.stringify(user),
 26 |     };
 27 | 
 28 |     const action = e.target.id
 29 |     if (action === 'loginButton') {
 30 |       fetch('http://localhost:8080/login', postOptions)
 31 |         .then((response) => { 
 32 |           const [key, value] = document.cookie.split('=');
 33 |           if (response.ok) { 
 34 | 			onLogin(e, { loggedIn: true, userId: Number(value) });
 35 | 						
 36 |           } else {
 37 |             onLogin(e, { loggedIn: false, userId: undefined });
 38 |           }
 39 |         })
 40 |         .catch((error) => {
 41 |           
 42 |         });
 43 |     } else if (action === 'signupButton') {
 44 |       fetch('http://localhost:8080/signup', postOptions)
 45 |         .then((response) => { 
 46 |           const [key, value] = document.cookie.split('=');
 47 |           if (response.ok) { 
 48 |             onLogin(e, { loggedIn: true, userId: Number(value) });
 49 |           } else {
 50 |             onLogin(e, { loggedIn: false, userId: undefined });
 51 |           }
 52 |         })
 53 |         .catch((error) => {
 54 |         
 55 |         });;
 56 |     }
 57 |     
 58 |     // Reset input fields after submit
 59 |     setName('');
 60 |     setEmail('');
 61 |     setPassword('');
 62 |   }
 63 | 
 64 |   return (
 65 | 	<React.Fragment>
 66 |   	{ (isLoggedIn.loggedIn) && <Redirect to='/mnemos' /> }
 67 | 		<img src="assets/mnemozine.png" />
 68 |     <h1>Learn and Remember More</h1>
 69 |     <div id="getUserWrapper">
 70 | 			<h1>Log In or Sign Up</h1>
 71 | 			<input 
 72 | 				placeholder="Name"
 73 | 				value={ name } 
 74 | 				onChange={ onNameChange }
 75 | 			/>
 76 | 			<input 
 77 | 				placeholder="Email"
 78 | 				value={ email }
 79 | 				onChange={ onEmailChange } 
 80 | 			/>
 81 | 			<input 
 82 | 				placeholder="Password"
 83 | 				type="password"
 84 | 				value={ password }
 85 | 				onChange={ onPasswordChange } 
 86 | 			/>
 87 | 			<div id="buttonWrapper">
 88 | 				<button
 89 | 					type="submit"
 90 | 					id="loginButton"
 91 | 					onClick={ handleSubmit }
 92 | 				>
 93 | 				Log In  
 94 | 				</button>
 95 | 				<button
 96 | 					type="submit"
 97 | 					id="signupButton"
 98 | 					onClick={ handleSubmit }
 99 | 				>
100 | 				Sign Up  
101 | 				</button>
102 | 				{ (isLoggedIn.loggedIn) && <Redirect to='/mnemos' /> }
103 | 				{ isLoggedIn.loggedIn === false &&
104 | 					<p>Credentials do not match. Please try again or create a new account.</p>
105 | 				}
106 | 			</div>
107 | 		</div>
108 |     </React.Fragment>
109 |   );
110 | }
111 | 
112 | export default GetUser;

--------------------------------------------------------------------------------
/client/stylesheets/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   margin: 0;
  3 |   font-family: Arial, Helvetica, sans-serif;
  4 |   font-size: 17px;
  5 | }
  6 | 
  7 | body {
  8 | 	display: flex;
  9 | 	flex-direction: column;
 10 | 	justify-content: center;
 11 | 	align-items: center;
 12 | 	background: no-repeat linear-gradient(180deg, rgba(17,16,16,0.4) 0%, rgba(17,16,16,0.2) 30%, rgba(255,255,255,1) 50%);
 13 |   
 14 | }
 15 | 
 16 | #app {
 17 |   display: flex;
 18 |   flex-direction: column;
 19 |   justify-content: center;
 20 |   align-items: center;
 21 |   padding: 20px;
 22 | }
 23 | 
 24 | h1 {
 25 |   font-size: 2rem;
 26 | }
 27 | 
 28 | img {
 29 |   width: 500px;
 30 | } 
 31 | 
 32 | 
 33 | #addTextWrapper,
 34 | #getUserWrapper {
 35 |   display: flex;
 36 |   flex-direction: column;
 37 |   justify-content: center;
 38 |   align-items: center;
 39 | 	width: 1200px;
 40 |   padding: 50px;
 41 |   background-color: rgba(220,220,220,0.8);
 42 |   border-radius: 10px;
 43 |   box-shadow: 10px 10px 10px -5px rgba(17,16,16,0.67);
 44 |   margin: 25px;
 45 | }
 46 | 
 47 | #addTextWrapper h1 {
 48 |   align-self: flex-start;
 49 | }
 50 | 
 51 | textarea,
 52 | input {
 53 |   font-size: 1.25rem;
 54 |   font-family: Arial, Helvetica, sans-serif;
 55 |   width: 75%;
 56 |   border: 0px solid black;
 57 |   border-radius: 10px;
 58 |   box-shadow: 10px 10px 10px -5px rgba(17,16,16,0.67);
 59 |   margin-bottom: 20px;
 60 |   padding: 10px;
 61 | }
 62 | 
 63 | textarea {
 64 |   height: 750px;
 65 | }
 66 | 
 67 | textarea:focus,
 68 | input:focus {
 69 |   outline: none;
 70 |   background-color:rgba(40, 158, 87, 0.15);
 71 |   color: rgba(17,16,16,1);
 72 | }
 73 | 
 74 | button {
 75 |   background-color: #188444;
 76 |   color: #ffffff;
 77 |   border: none;
 78 |   border-radius: 5px;
 79 |   box-shadow: 10px 10px 10px -5px rgba(17,16,16,0.67);
 80 |   padding: 20px;
 81 |   font-size: 1.5rem;
 82 |   margin: 20px;
 83 | }
 84 | 
 85 | #headerWrapper {
 86 | 	display: flex;
 87 | 	align-items: center;
 88 | 	font-size: 1.25rem;
 89 | 	font-weight: bold;
 90 | }
 91 | 
 92 | #headerWrapper img {
 93 | 	height: 15%;
 94 | 	width: 15%;
 95 | }
 96 | 
 97 | #outerTextsWrapper {
 98 | 	width: 75%;
 99 | }
100 | 
101 | #textsWrapper {
102 | 	display: flex;
103 | 	flex-direction: row;
104 | 	justify-content: center;
105 |   align-items: center;
106 |   flex-wrap: wrap;
107 | }
108 | 
109 | .titles {
110 |   background: rgba(24,132,68,0.75);
111 | 	border: none;
112 | 	border-radius: 10px;
113 |   box-shadow: 10px 10px 10px -5px rgba(17,16,16,0.67);
114 |   padding: 20px;
115 | 	font-size: 1.2rem;
116 | 	font-weight: bold;
117 | 	color: #ffffff;
118 | 	height: 125px;
119 | 	width: 250px;
120 | 	text-align: center;
121 | 	display: flex;
122 | 	justify-content: center;
123 | 	align-items: center;
124 | }
125 | 
126 | #createNew {
127 | 	color: rgba(24,132,68,1);
128 | 	background: rgba(255,255,255,1);
129 | 	border: 1px solid rgba(24,132,68,1);
130 | }
131 | 
132 | /* .titles {
133 |   width: 200px;
134 |   height: 115.47px;
135 |   background: rgba(24,132,68,0.75);
136 |   position: relative;
137 |   box-shadow: none;
138 |   border-radius: 0px;
139 |   margin: 5px;
140 | }
141 | 
142 | .titles::before {
143 |   content: "";
144 |   position: absolute;
145 |   top: -57.735px;
146 |   left: 0;
147 |   width: 0;
148 |   height: 0;
149 |   border-left: 100px solid transparent;
150 |   border-right: 100px solid transparent;
151 |   border-bottom: 57.735px solid rgba(24,132,68,0.75);
152 | }
153 | 
154 | .titles::after {
155 |   content: "";
156 |   position: absolute;
157 |   bottom: -57.735px;
158 |   left: 0;
159 |   width: 0;
160 |   height: 0;
161 |   border-left: 100px solid transparent;
162 |   border-right: 100px solid transparent;
163 |   border-top: 57.735px solid rgba(24,132,68,0.75);
164 | }
165 | 
166 | #createNew {
167 |   width: 200px;
168 |   height: 115.47px;
169 |   background: rgba(17,16,16,0.67);
170 | 	position: relative;
171 | 	box-shadow: none;
172 | 	border-radius: 0px;
173 | 	margin: 5px;
174 | }
175 | #createNew::before {
176 |   content: "";
177 |   position: absolute;
178 |   top: -57.735px;
179 |   left: 0;
180 |   width: 0;
181 |   height: 0;
182 |   border-left: 100px solid transparent;
183 |   border-right: 100px solid transparent;
184 | 	border-bottom: 57.735px solid rgba(17,16,16,0.67);
185 | }
186 | #createNew::after {
187 |   content: "";
188 |   position: absolute;
189 |   bottom: -57.735px;
190 |   left: 0;
191 |   width: 0;
192 |   height: 0;
193 |   border-left: 100px solid transparent;
194 |   border-right: 100px solid transparent;
195 |   border-top: 57.735px solid rgba(17,16,16,0.67);
196 | } */
197 | 
198 | #textsWrapperHeader {
199 | 	font-size: 2rem;
200 | 	margin-bottom: 100px;
201 | 	margin-top: 100px;
202 | }
203 | 
204 | .mnemoText {
205 | 	display: flex;
206 | 	flex-direction: column;
207 | 	justify-content: flex-start;
208 | 	align-items: flex-start;
209 | 	width: 1000px;
210 | 	font-family: 'Courier New', Courier, monospace;
211 | }
212 | 
213 | .mnemoTitle {
214 | 	font-size: 5rem;
215 | 	font-weight: bold;
216 | 	color: rgba(24,132,68,0.75);
217 | 	padding-bottom: 50px;
218 | 	padding-top: 100px;
219 | }
220 | 
221 | .mnemoText h1 {
222 | 	font-size: 2rem;
223 | 	font-weight: bold;
224 | 	margin-top: 3rem;
225 | }
226 | 
227 | .mnemoText h2 {
228 | 	font-size: 1.5rem;
229 | 	font-weight: bold;
230 | 	margin-top: 3rem;
231 | }
232 | 
233 | .mnemoText h3 {
234 | 	font-size: 1.25rem;
235 | 	font-weight: bold;
236 | 	margin-top: 3rem;
237 | }
238 | 
239 | .mnemoText p {
240 | 	font-size: 1rem;
241 | 	margin-top: 10px;
242 | 	margin-bottom: 10px;
243 | }
244 | 
245 | .modal {
246 | 	position: fixed; /* Stay in place */
247 |   z-index: 1; /* Sit on top */
248 |   left: 0;
249 |   top: 0;
250 |   width: 100%; /* Full width */
251 |   height: 100%; /* Full height */
252 |   overflow: hidden; /* Enable scroll if needed */
253 |   background-color: rgb(0,0,0); /* Fallback color */
254 |   background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
255 | }
256 | 
257 | #addCardWrapper {
258 |   margin: 15% auto; /* 15% from the top and centered */
259 |   border: 1px solid #888;
260 | 	width: 50%; /* Could be more or less, depending on screen size */
261 | 	display: flex;
262 |   flex-direction: column;
263 |   justify-content: center;
264 |   align-items: center;
265 |   padding: 50px;
266 |   background-color: rgba(220,220,220,0.95);
267 |   border-radius: 10px;
268 |   box-shadow: 10px 10px 10px -5px rgba(17,16,16,0.67);
269 | }
270 | 
271 | #addCardWrapper textarea {
272 | 	height: 100px;
273 | }
274 | 
275 | #addCardWrapper h1 {
276 | 	align-self: flex-start;
277 | }
278 |

--------------------------------------------------------------------------------
/sample.md:
--------------------------------------------------------------------------------
 1 | If humanity ever makes contact with alien intelligences, will those aliens possess computers? In science fiction, alien computers are commonplace. If that's correct, it means there is some way aliens can discover computers independently of humans. After all, we’d be very surprised if aliens had independently invented Coca-Cola or Pokémon or the Harry Potter books. If aliens have computers, it’s because computers are the answer to a question that naturally occurs to both human and alien civilizations.
 2 | 
 3 | Here on Earth, the principal originator of computers was the English mathematician **Alan Turing**. In his paper, published in 1936, Alan M. Turing, __On Computable Numbers, with an Application to the Entscheidungsproblem__ (1936). Turing wasn’t trying to invent a clever gadget or to create an industry. Rather, he was attacking a problem about the nature of mathematics posed by the German mathematician David Hilbert in 1928. That sounds abstruse, but it’s worth understanding the gist of Hilbert and Turing’s thinking, since it illuminates where computers come from, and what computers will become in the future.
 4 | 
 5 | Through his career, Hilbert was interested in the ultimate limits of mathematical knowledge: what can humans know about mathematics, in principle, and what (if any) parts of mathematics are forever unknowable by humans? Roughly speaking, Hilbert’s 1928 problem asked whether there exists a general algorithm a mathematician can follow which would let them figure out whether any given mathematical statement is provable. Hilbert’s hoped-for algorithm would be a little like the paper-and-pencil algorithm for multiplying two numbers. Except instead of starting with two numbers, you’d start with a mathematical conjecture, and after going through the steps of the algorithm you’d know whether that conjecture was provable. The algorithm might be too time-consuming to use in practice, but if such an algorithm existed, then there would be a sense in which mathematics was knowable, at least in principle.
 6 | 
 7 | In 1928, the notion of an algorithm was pretty vague. Up to that point, algorithms were often carried out by human beings using paper and pencil, as in the multiplication algorithm just mentioned, or the long-division algorithm. Attacking Hilbert’s problem forced Turing to make precise exactly what was meant by an algorithm. To do this, Turing described what we now call a Turing machine: a single, universal programmable computing device that Turing argued could perform any algorithm whatsoever.
 8 | 
 9 | Today we’re used to the idea that computers can be programmed to do many different things. In Turing’s day, however, the idea of a universal programmable computer was remarkable. Turing was arguing that a single, fixed device could imitate any algorithmic process whatsoever, provided the right program was supplied. It was an amazing leap of imagination, and the foundation of modern computing.
10 | 
11 | In order to argue that his machine could imitate any algorithmic process, Turing considered what operations a human mathematician could perform when carrying out an algorithm. For each such operation, he had to argue that his machine could always do the same thing. His argument is too long to reproduce in full here, but it’s fun and instructive to see the style of Turing’s reasoning:
12 | 
13 | ...
14 | 
15 | # Part I: The state of a qubit
16 | 
17 | As you know, in ordinary, everyday computers the fundamental unit of information is the bit. It’s a familiar but astonishing fact that all the things those computers do can be broken down into patterns of 00s and 11s, and simple manipulations of 00s and 11s. For me, I feel this most strongly when playing video games. I’ll be enjoying playing a game, when I’ll suddenly be hit by a realization of the astounding complexity behind the imaginary world visible on my screen:
18 | 
19 | Underlying every such image is millions of pixels, described by tens of millions of bits. When I move the game controller, I am effectively conducting an orchestra, tens of millions strong, organized through many layers of intermediary ideas, in such a way as to create enjoyment and occasionally sheer delight.
20 | 
21 | I’ve described a bit as an abstract entity, whose state is 00 or 11. But in the real world, not the world of mathematics, we must find some way of storing our bits in a physical system. That can be done in many different ways. In your computer’s memory chips, bits are most likely stored as tiny electric charges on nanometer-scale capacitors (i.e., little reservoirs of charge), just above the surface of the chip. Old-fashioned hard disks take a different approach, using tiny magnets to store bits. Furthermore, different types of memory use different types of capacitor; different types of hard disk use different approaches to magnetization.
22 | 
23 | ...
24 | 
25 | For our purposes in this essay none of this matters, no more than you should worry about what type of capacitor is storing the bits inside your computer’s RAM. What you should take away is that: (a) qubits have a state; (b) much like a bit, that state is an abstract mathematical object; but (c) whereas a bit’s abstract state is a number, 00 or 11, the state of a qubit is a 22-dimensional vector; (d) we call the 22-dimensional vector space where states live state space.
26 | 
27 | Alright, let’s review what we’ve learnt. Please indulge me by answering the questions just below. It’ll only take a few seconds – for each question, think about what you believe the answer to be, click to reveal the actual answer, and then mark whether you remembered or not. If you can recall, that’s great. If not, that’s also fine, just note the correct answer, and continue.
28 | 
29 | ## A medium which makes memory a choice
30 | 
31 | Perhaps you correctly recalled the answers to all three questions just now. Even if so, will you remember the answers in a week? In a year? Human memory is fallible. If your memory is like mine, you might vaguely remember the answers in a week: “what’s the state of a qubit, oh yes, it’s a vector!” But the chances you’ll remember in a month or a year are low. And if you forget such things, you won’t have any durable understanding of quantum computing.
32 | 
33 | How can we ensure you don’t remember these answers for just a few minutes or a few hours, but well into the future, perhaps even permanently?
34 | 
35 | One way is for you to be supremely virtuous, to keep coming back and re-reviewing the material until it’s firmly locked in your memory. If you are such a virtuous person, congratulations! But for the other 99 percent of us that’s not likely. What can we do?
36 | 
37 | For more than a century, cognitive scientists have studied human memory. And they’ve figured out some simple strategies that ensure you’ll remember something permanently. The single most important idea is to re-test you on your knowledge, with expanding time intervals between tests.
38 | 
39 | ...
40 | 
41 | This question is similar to an earlier question: “How many dimensions does the state space of a qubit have?” It may seem inefficient to have such similar questions, but it helps build fluency with the material when you have the “same” information encoded into memory in multiple ways, triggering off different associations. And so many of the questions below have this nature, elaborating ideas in multiple ways.
42 | 
43 | ## Connecting qubits to bits: the computational basis states
44 | 
45 | Let’s get back to understanding qubits. I’ve described what the state of a qubit is, but given no hint about how (or whether) that’s connected to the state of a classical bit. (Henceforth we’ll use the phrase “classical bit” instead of “conventional bit”, after “classical physics”). In fact, there are two special quantum states which correspond to the 00 and 11 states of a classical bit. The quantum state corresponding to 00 is usually denoted |0\rangle∣0⟩. That’s a fancy notation for the following vector:
46 | 
47 | ...
48 | 
49 | Time for a few more questions. A reminder that these have a different purpose to conventional textbook exercises. Textbook exercises are about setting you challenges; the point of the questions below is instead to help you commit the answer to long-term memory.
50 | 
51 | ## How to use (or not use!) the questions
52 | 
53 | __Mathematics is a process of staring hard enough with enough perseverance at the fog of muddle and confusion to eventually break through to improved clarity. I’m happy when I can admit, at least to myself, that my thinking is muddled, and I try to overcome the embarrassment that I might reveal ignorance or confusion. Over the years, this has helped me develop clarity in some things, but I remain muddled in many others.__ — William Thurston, Fields-medal winning mathematician
54 | 
55 | How should you think about it when you get one of these embedded questions wrong? Often in life testing means being judged, and being judged can be uncomfortable. If you don’t know the answer to a question you may feel like you’ve failed.

--------------------------------------------------------------------------------

Learn and Remember More

Choose a Mnemo

Learn and Remember More

Create a New Mnemo