Web app to take the news from the New York Times database, and display it according to Design team specifications.
- Download initial documents from Instanews App
- Create initial folder and files such as
js
index.html
sass
. - On the project folder in your terminal install
npm install
. - Instal gulp with
npm install gulp --save-dev
. - Install sass
npm install -g sass
. - Create
gulpfile.js
and install all modules required.
gulp = require('gulp'),
terser = require('gulp-terser'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
autoprefixer = require("gulp-autoprefixer"),
cssnano = require("gulp-cssnano"),
eslint = require('gulp-eslint');
- According to the configuration in gulpFile.js, all the files on
js
andsass
folder will convert to the min version inbuild
folder. - Run
gulp
on the terminal, the index.html file will open on the browser.
- Go to New York and sing in.
- Create a new project and copy the API.
- Paste the KEY on
configFile.js
. - Create the link to get access to the news from new york times database:
https://api.nytimes.com/svc/topstories/v2/science.json?api-key=yourkey
- Design first for mobile version then adapt to Tablet and Desktop.
- The
header
element adapt to screen size using FLEX - The CARDS are grouped using a GRID BOX.
- The
select
element is stylized using Jquery - using
JQUERY
to add another class to the header element. The new class adapts the element to the top of the website usingtransition: all 1s;
on the sass file. - Using
transition
functionality on css the article abstract moves on y-axe. Also the tittle displays when the element is hover.