sirserje/bootcamp-simple

collaborate development for studying JS

bootcamp-simple's Issues

Feature: add controls to switch town / time format

Application should have select trip down who is about to reach him to show list of towns and submit button. After pressing submit button, new data should fetch and widget will update

Add JSON parser

this is current response from server.

Create pure function, which receives this JSON as 1 param and return object (original means, where you can get info from API's response JSON):

{
  name: "Kiev",
  region: "Ukraine",
  time: "2019-03-26 14:01", //original: localtime
  temperature: {
    real:"30", /original: /temp_c
    feels_like: "25", //original: feelslike_c
    },
  wind: {
    "speed":"11", //original: wind_kph
     "direction": "SN", //original: wind:dir
    },
  pressure:"", //original: pressure_mb
  visibility:"5", //original: vis_km
  precipitation: "23", //original: precip_m m
  humidity: "45", //original: humidity
}

Create file for parser /app/responseParser.js

Create readme

Readme should include:

• Project goal
• Workflow

Add update time

If application is opened more than 30minutes, make update, which will re-render whole widget.

Create tests for response parser method

Functionality from #8 should covered with test

Create pure arrow function to create button, input field, text block

• All functions should receive at least 1 parameter (name)
• Name should have default value
• Function should be arrow and pure

Here is simple example:

// app/render/elementCreator.js :

const createButton = (name='Button Name') => {
  // some magical operations
  // ...
  return button
}

export { createButton }

Feature: add favorite town(s) to local storage

Validate response correct

Необходимо гарантировать что parser при получении неправильных данных вернет что-то вменяемое, решение:
написать функцию которая проверит, валидные ли данные вернул сервер и если невалидные, чтобы парсер вернул предупреждение, но выполнение программы не сломалось

Create utility to convert 12 hour time into 24 and back

We want to have ability know, what is the display time not only in 12 hour mode.

Create pure function, which will receive string like "06:50 PM" and will return string "18:50"
Create separate file for this in app/util/timeConvert.js, it will looks like

const twelveToTwenty = function(twelve) {
  //your code goes here
  return twenty;
}

const twentyToTwelve = function(twenty) {
 //your code goes here
  return twelve;
}
export twelveToTwenty;
export twentyToTwelve

Before commit, try to run import this in index.js and run some convert.

Convert fetch request to async

How to do this?
https://dev.to/johnpaulada/synchronous-fetch-with-asyncawait

Fix linting issues

Our project has some code style issues. Fix it please (Travis After success fix will show green light)

First request

• connect to http://api.apixu.com/v1/current.json?key=XXXXXX&q=Paris, where XXXXXX - your API key from https://www.apixu.com/my/
• make fetch request to this endpoint, receive data, log it to console, for example in index.js file
• when this job will be done, move this code to separate file, which will have path: app/utils/request.js and export it by default export default request .... Import it into index.js
• render this response in any way you want to index page in raw format
• ! Remember ! Your public key shouldn’t be committed. So, create in app directory ‘privte/apikey.js’ and place your api key as a string and import it into request.js. Add this apikey.js to gitignore. This helps you to avoid this file while you will make commit.

Finally you will place code into app/utils/request.js, which imports in app/index.js. request.js fetch data from endpoint and at index.html you should render response in raw format without any changes. .gitignore file should be updated and apikey.js will present only on your computer

Setup continuous integration

Free available option - Travis CI.
CI task should include : installing dependencies with proper node, testing, linting.

Setup project boilerplate

Setup all webpack stuff to properly work with project.

Setup unit testing with Jest

Or any another library, if Jest will not suitable.
Add to scripts in package.json test command, which will run at least 1 dummy test

Nice to have: logging code coverage

Add Linter

Create render function

All code should render in ... (you can create in html template this element)

Function should render whole widget according to design #12 and receives as parameter parsed json from #8

Probably this task maybe too big, in this case it will split.

Add button to fetch data

Currently, when you run an app, data fetches immediately.
Please, add button and when you press on it, request() function should fetch data each time you press on it. Also, add some message, if request will fail.

1. remove request() on app start
2. add button
3. add on click event handler, which will call request()
4. in request add error handling (write some message)

Create design template

According to design picture (will attach it later) create html with css + svg and put into ‘project/mock’. (Obviously, this html will run without webpack)