Giter Club home page Giter Club logo

nytimesheadlines's Introduction

New York Times Headlines

A React App showing the top NY Times headlines. You can view my app by clicking here.

Technologies Used

  • HTML5
  • JSX
  • CSS3
  • ES6
  • React
  • Bootstrap

Approach Taken

First I looked into easy APIs to use. Then I decided to build a project around it. I decided to use the top NY Times headlines because I am a total news junkie. I focused on building one div at a time. So the first day I worked on getting the article headlines to load and get an iFrame to load with the story. However, I abadoned the iFrame when I learned that the 10 article limit still applies. Then I worked an adding it to my list and adding a note. That is when I realized that I my current project was a bit advanced, but decided to use it as a learning opportunity.

Screenshots

First the top articles display First the top articles display Then you can click to read an abstract, get the link, and add it to your article list Then you can click to read an abstract and get the link Then you can add a note, when you edit the note, it will display the old note. Then you can add a note, when you edit the note, it will display the old note.

Wireframe

Wireframe I decided to try to wireframe using pen and paper to decide what wireframe method I like the most. I like it better than whiteboarding for this project, but I also found it was more time consuming when it comes to making changes. When I decided to get rid of my notes div, I didn't re-wireframe because I knew what my plan was and I thought it would be too time consuming.

MVP

  • Get the article headlines to load in one div
  • In a new div, get the article headline, abstract, and URL to load.
  • Then in a third div get the article headline to be added along with an editable note.

Unsolved Problems

  • Be able to delete the note.

nytimesheadlines's People

Contributors

dependabot[bot] avatar jenniferabowd avatar

nytimesheadlines's Issues

Adding a note with an edit function

CONTEXT

WHAT USER STORY YOU ARE WORKING ON:

I am working editing a note within the files App.JS and MyStoryListItem.js.

WHAT YOU ARE TRYING TO DO:

Right now I have a blank note created when I add a story to my list. I am trying to access this note, then edit it so it renders on the page. I changed the formatting of My List and my notes to this:

  1. Article Headline from NY Times
  • Note about the article above
  1. Second article headline
  • Note about the article above

DETAILED DESCRIPTION OF THE BUG/ERROR:

Right now, my entire list of articles I added to my Database is not rendering, let alone the notes.

WHAT I'VE TRIED

I was initially very confused on how to do this. I decided to base my edit functionality off the todos lab with Paris. I have since majorly edited it to suit my own needs. This was not going well, so then I ScreenHero-ed with Chris. We got it to have zero errors, but it still isn't working.

QUESTION
Can you help me get the figure out how to properly get my editing a note functionality working? Since I added the note when I add the article into Firebase, I don't think I need to actually add a note. I think I just need to edit what is in Firebase, then get that to render on the page.

@thoughtbyte

Help getting story to render onClick

CONTEXT

WHAT USER STORY YOU ARE WORKING ON:

I am working on the user story "User selects story to view"

WHAT YOU ARE TRYING TO DO:
I am trying to get the story to render in an iFrame when it is clicked.

DETAILED DESCRIPTION OF THE BUG/ERROR:
screen shot 2017-01-13 at 3 47 26 pm
That is the error. I am trying to create an if else statement for my click event, however before it was saying it was "null" but I have an else for if there is nothing selected. I canceled out a bunch of code and the problem seems to be that it can't read the props even though I passed them down.

WHAT I'VE TRIED
I have been working on this for over an hour. I worked on it with Chris, but it is still not working. I'm not sure what to Google since I think I am calling the variables wrong, but I'm not sure what I'm doing wrong.

QUESTION
Can you help me get the figure out why this is not reading my property correctly?

@thoughtbyte

Help with getting an object from within an object.

CONTEXT

WHAT USER STORY YOU ARE WORKING ON:

I am working on the user story "User views the top stories"

WHAT YOU ARE TRYING TO DO:
I am trying to get the stories to render onto the page.

DETAILED DESCRIPTION OF THE BUG/ERROR:
I have an object within an object. I am trying to access the title, abstract, and URL from within that second object.

WHAT I'VE TRIED
Well there is no error message as everything is loading as I am telling it to. I worked on it with Alex and we determined that there is an object within an object that I somehow need to get access to. He wasn't sure how to do it. I did some googling and maybe I need to use .filter, but I'm not sure how to use it either.

QUESTION
Can you help me get the properties from the object within the object?

@thoughtbyte

Getting note input to render with current note and being able to edit current note

CONTEXT

WHAT USER STORY YOU ARE WORKING ON:

I am working editing a note within the files App.JS and MyStoryListItem.js.

WHAT YOU ARE TRYING TO DO:

I am trying to get it so when a user goes to add/edit a note, it displays the current note text, then they can save the updated note.

BUG/ERROR:

Right now, I cannot get the current note text to render, nor can I edit it.

WHAT I'VE TRIED

I met with Vince. Now I'm trying to use that to find the path for the note text in Firebase so it can appear in the input box.

QUESTION
Can you help me get this note text to appear in the input and on its own line when it isn't being edited? Then can you help me get the edit functionality working?

@thoughtbyte

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.