Git Product home page Git Product logo

ra-p2's Introduction

RA-P2

New York Time API

Instanews App Objective: Create a one-page, responsive website that allows a user to filter top news story categories via the New York Times API.

Design Specifications: The base font size is 16px and it HEX code is #ffffff. The body font family is Open Sans Light. The medium grey colour of the text in the footer is #c2c2c2. Dynamically fetch story data and populate it in a webpage via the Top Stories API based a user’s selection from a field Resize the header area (i.e. logo plus ) so that it transitions from occupying the entire screen on page. Load to only auto height after the field is changed (you will need jQuery for this) Link each returned image to its URL on the NYT website Must Haves: Contain a single .html file and an external, minified .css file Adequately reflect the designer’s vision for the website when built out using HTML and CSS Demonstrate effective organization of the project’s root directory Have a Git repository initialized in its root directory with an appropriately customized .gitignore file Be pushed to GitHub (with all of your commits synced to it) Contain a README.md file describing the project (e.g. technologies used, personal learnings, etc.) Use Gulp for running build tasks, such as minification, Sass compilation, and error checking Use Sass as a preprocessor, with CSS properly compiled and minified Use Asynchronous HTTP requests to fetch data from the NYT Top Stories endpoint Only display a maximum of 12 stories in the grid, and only display a story if it has a photo associated with it Transition users between UI states, starting where no stories have been returned, and then subsequently transitioning where stories populate the grid (by incorporating a loading gif) Be responsively designed using a mobile-first approach Be optimized for 3 screen sizes: mobile, min-width: 600px, and min-width:1000px Stretch goals: Incorporate a field with custom styles applied (you will need a jQuery plugin for this such as Heapbox) Incorporate a combination of jQuery and CSS3-based animation to animate the movement of the header on the change Be sure to test your project completely in all major browsers (Chrome, Firefox, Safari, Opera, IE11) when you think you’re finished Use CSS3 transitions to show and hide the article abstract on hover Personal Challanges: During the coding of the sites, it was very easy to split up the tast at hand. Though while coding there was a lot of code that was made up to make the parts stick together. Result was a lot of exsesive code lines. Going though the code though developer mode, it was found a lot of classes where not needed. Trying to write the whole page in javascript was not as hard as I thought it would be, though recommended to be done in jQuery. Many task where written out fully giving me a better understanding of what was exactly being done, rather then to relay on jQeury's shortcuts.

ra-p2's People

Contributors

j4y88 avatar

Watchers

James Cloos avatar

Forkers

usotnyk eapostol

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.