kpoeltler/astronomy-flashcard-app

front side of card displays an astronomical object and the backside of the card reveals facts about the object

astronomy-flashcard-app's Issues

use bootstrap to organize the look

jupyter.org/widgets

using jupyter.org widgets with our data
Ideas on how to incorporate would be awesome

Create PUT route for path '/api/description'

Create a PUT route the accesses the req.body and updates the userDesc in the db where the id matches.

This issue is complete when:

• A PUT route exists for path '/api/description'
• the route recieves the req.body
• the db is updated appropriately
• the new entry is returned to the front-end

NASA EPIC API

deciding to use EPIC as a picture source instead of the APOD API.
https://www.programmableweb.com/api/nasa-epic

Unit tests required for all functions

Unit Tests are required for each function.
Here is a list of functions that will need to be included in this project:

• a toggle function for flipping the card
  -api ajax call function
  -incorporate pictures and data from api function
  -I have a drop-down menu function links to the deck of cards

Prior to implementing a function, use Mocha and Chai to write unit tests against it.

Write Basic Pure functions

This is complete when

• increment function
• decrement function
• resetCount function
• updateArr function
• resetArr function
• removeSubject
• All tests pass

create great ReadMe

source license

This project needs to have a license file due to the use of the starter code from Stanford's CS Homework assignment 3

put shadow on main-menu button

Testing userDesc field e.g. Must not contain JS Script

Be able to edit Description by user

TESTING
-- Must not have " inside the input from used -- escape them
-- Must not be HTML or JS Script too protect the integrity of the db from attack

SQL Code
USE astronomy_db;

INSERT INTO cards (userDesc)
values ("");

install npm packages

install npm init
express
body-parser
mysql
path
httr
jsonlite packages

Make a GET request to '/api/all' route

Make sure we are getting data from our server for '/api/all' route

This issue is complete when

• Use AJAX to make a get request to path '/api/all'
• console.log the data

{
    copyright: "Xiaohan Wang",
    date: "2018-03-06",
    explanation: "Why would the sky glow like a giant repeating rainbow?  Airglow.  Now air glows all of the time, but it is usually hard to see. A disturbance however -- like an approaching storm -- may cause noticeable rippling in the Earth's atmosphere. These gravity waves are oscillations in air analogous to those created when a rock is thrown in calm water.  Red airglow likely originates from OH molecules about 87-kilometers high, excited by ultraviolet light from the Sun, while orange and green airglow is likely caused by sodium and oxygen atoms slightly higher up.  While driving near Keluke Lake in Qinghai Provence in China, the photographer originally noticed mainly the impressive central band of the Milky Way Galaxy.  Stopping to photograph it, surprisingly, the resulting sensitive camera image showed airglow bands to be quite prominent and span the entire sky. The featured image has been digitally enhanced to make the colors more vibrant.    Follow APOD on: Facebook,  Google Plus,  Instagram, or Twitter",
    hdurl: "https://apod.nasa.gov/apod/image/1803/AirglowRings_Wang_3887.jpg",
    media_type: "image",
    service_version: "v1",
    title: "Colorful Airglow Bands Surround Milky Way",
    url: "https://apod.nasa.gov/apod/image/1803/AirglowRings_Wang_1080.jpg",
    userDesc : ""
}

APOD API

Using the APOD API
-https://api.nasa.gov/api.html
-see what the data looks like at https://api.nasa.gov/index.html#live_example
-read the documentation to find out which parameters we can get from the Ajax request.
-parse the images
-importing the APOD data into the MySQL database.
-need at least 365 pictures coupled with its matching data/description.
If the picture does not have a description one will be written for it and added to the database

Incorporate Authentication (JSON Web Tokens, Sessions, Etc.)

add a click listener to the image on the page

This issue is complete when:

• a click on the image is registered
• we are logging the image description on click

Replace photo with description on click

clicking the image should toggle to the description

This issue is complete when:

• Clicking image replaces the card HTML with the description

Create a Model for cards

We need a model for card items

This issue is complete when:

• There is an astronomy db
• There is a model synced to the db
• The model has all the fields from issue #35

MySQL

creating a database of star names. Here is a url
https://www.naic.edu/~gibson/starnames/starnames.html

clean code for syntax and global variables and for loops

Is deployed using Heroku

This issue is complete when:

• the project is deployed to heroku

Create a GET route '/api/all'

Add a get route for the path '/api/all' return a sample JSON

{
    copyright: "Xiaohan Wang",
    date: "2018-03-06",
    explanation: "Why would the sky glow like a giant repeating rainbow?  Airglow.  Now air glows all of the time, but it is usually hard to see. A disturbance however -- like an approaching storm -- may cause noticeable rippling in the Earth's atmosphere. These gravity waves are oscillations in air analogous to those created when a rock is thrown in calm water.  Red airglow likely originates from OH molecules about 87-kilometers high, excited by ultraviolet light from the Sun, while orange and green airglow is likely caused by sodium and oxygen atoms slightly higher up.  While driving near Keluke Lake in Qinghai Provence in China, the photographer originally noticed mainly the impressive central band of the Milky Way Galaxy.  Stopping to photograph it, surprisingly, the resulting sensitive camera image showed airglow bands to be quite prominent and span the entire sky. The featured image has been digitally enhanced to make the colors more vibrant.    Follow APOD on: Facebook,  Google Plus,  Instagram, or Twitter",
    hdurl: "https://apod.nasa.gov/apod/image/1803/AirglowRings_Wang_3887.jpg",
    media_type: "image",
    service_version: "v1",
    title: "Colorful Airglow Bands Surround Milky Way",
    url: "https://apod.nasa.gov/apod/image/1803/AirglowRings_Wang_1080.jpg",
    userDesc: ""
}

This issue is complete when:

• a GET route is created with the path '/api/all'
• when the route is hit the above JSON is returned to the front-end.

Test logic for API - match titles from API to column headings, remove titles

For example
-- Receiving and testing

-- GET the API data after midnight of every day
Set a default of "" empty string - just in case the INSERT INTO cards do not match
E.g. the 3rd one did not have a copyright

PUT the API call into db cards table

Match titles from API with column names
Remove column titles "copyright" :
Remove { at the start and } at the beginning and the end
Trim each value using trim()

Scaffold Back-End

This issue is complete when:

• The server is listening
• The public folder is indicated as the express static folder
• a routes folder exists with and api-routes.js
• a models folder exists with card.js, index.js
• a config folder exists with config.json

Prior to implementing a feature, use Nightmare to write a functional test for it.

Create Database. Insert data I have manually collected

Create Database. Insert data I have manually collected through myPHPAdmin

Meet good quality coding standards (indentation, scoping, naming)

deciding which new library to use

I think using this would be cool,http://www.chartjs.org/docs/latest/

Render Image

Write a function to render the image to the page

This issue is complete when:

• add each object in the result to an array called cardsArr
• add a currentCard var that defaults to 0
• hdurl property of the cardArr[currentCard] is rendered to the page as an image

Has a polished frontend / UI;

Use Handlebars for Server-Side Templating

Sue

Test PUT route

Make an AJAX put request to test the PUT route.

This issue is complete when:

• A PUT request is made with path '/api/description'
• an object is sent with a userDesc and id
• an object is returned from the server and console.logged

Wireframe

Wireframe Front-end

This issue is complete when:

• and index.html exists in public folder with a link to the css and js files
• style.css file exists in public/css
• app.js file exists in public/js
• index.html has the following divs:
  • div with id card

Has folder structure that meets MVC Paradigm;

This should be done on the first day