Team members: Hyejin Kim, Chris Genel, Will Satcher — The Golden Geese
+ HOW IT WORKS +•Users write stories, articles, etc. in main writing section
•Users can store or delete topics in the topics pane on the left
•Clicking a topic highlights all instances of that topic in the writing section
•Users can search for reference images in the reference section, top right. Images are pulled from the Pexels API
•Users can search for synonyms of words in the thesaurus section, bottom right. Words are pulled from the Big Huge Thesaurus API
•Users must be logged in to save text and topics. Text autosaves five seconds after user finishes typing in the writing section. Text and stored topics populate on login
•If a user types their password incorrectly, they are given the option of resetting their password via email
•Dark mode toggler on the footer implemented for late nights & weary-eyed writers
- DEPLOYMENT -This project is deployed here on Github Pages
! FUTURE ADDITIONS !•Chapter outline pane - possibly as a separate tab in the topics pane
•Highlight chapters simultaneously; highlight color corresponds to topic button color
•Drag-and-drop images from local storage into reference images pane for custom references - separate tab
•Ability to switch reference image, topics, and thesaurus panes (not really necessary in Firefox if familiar with right-to-left)
# NOTES #•If you use this app frequently, there is a possibility the API will hit its request quota. You can register for an API Key from Pexels or Big Huge Thesaurus fairly easily. To use your own API Key, simply insert it in your code in the pexels.js or thesaurus.js files as follows:
function makePexelsRequest (queryParamater, page){
// Enter your own API Key ↓↓↓
var APIKey = "[YOUR PEXELS API KEY]";
...}•If you make any changes in the login.js file, please be sure to input your own Firebase config information (found in Firebase project settings) first so there is no chance you overwrite another user's previously saved work. The Firebase config is as follows:
//Replace this config object with your own Firebase configuration ↓↓↓
var config = {
apiKey: "[YOUR API KEY]",
authDomain: "[YOUR AUTH DOMAIN]",
databaseURL: "[YOUR DATABASE URL]",
projectId: "[YOUR PROJECT ID]",
storageBucket: "[YOUR STORAGEBUCKET]",
messagingSenderId: "[YOUR MESSAGING SENDER ID]",
appId: "[YOUR APP ID]"
};
firebase.initializeApp(config);•If you would prefer to see anytonyms from the Thesaurus, you can change the code in thesaurus.js as follows:
var nounSyn = noun.syn; //Find this variable and change it as shown below--
var nounSyn = noun.ant; //Note that you will no longer see synonyms for words entered•To change the highlight color, simply change the background-color in the .highlight CSS class:
.highlight {
background-color: rgb(47, 255, 134);
}