jkopyto / coderscamp2020.project.javascript.newsservice Goto Github PK

Weather

Poprawki dla podstrony:

• Dodaj style globalne z projektu dla buttona i inputa
• Proponuje wrzucić te poszczególne bloki do pojedynczych div'ów z border-radius 12px i białym tłem
• Możliwość wyszukiwania za pomocą enteru (aktualnie jest tylko button click)
• Dodanie bardziej czytelnego komunikatu po wpisaniu błędnej nazwy miasta
• Responsywność
  

Acceptance criteria

New css global project styles (main menu, button, input)

• Update App.css
• Create classes for frequently used items
• Style homepage calendar

Food

Poprawki dla podstrony:

• Dodaj style globalne z projektu dla buttonów, checkbox'ów i inputa
• Proponuje wrzucić ten główny blok z wyszukiwaniem do jednego div'a z border-radius 12px i białym tłem, naotmiast te wyszukane do kolejnego z tożsamymi stylami
• Możliwość wyszukiwania za pomocą enteru (aktualnie jest tylko button click)
• Dodanie komunikatu po wpisaniu błędnej nazwy składnika, jakaś walidacja
• Responsywność
  

Acceptance criteria

CSS files have to be dynamically added and deleted when we change subpages

• npm i -D parcel-bundler parcel-plugin-css-to-string
• Add these settings to package.json

"parcel-plugin-css-to-string": {
    "assetType": [
      "css"
    ],
    "minify": true,
    "enableCSS": true
  },

• Remove type="module" from "index.html"
• Create file Subpage.js in src/subpages

class Subpage {
    stylesheet
    constructor(stylesheet){
        this.stylesheet = stylesheet
    }

    initStylesheet = () => {
        const css = document.createElement("style")
        css.innerText = this.stylesheet
        document.getElementsByTagName("head")[0].appendChild(css)
    }

    removeStylesheet = () => {
        this.stylesheet && this.stylesheet.remove()
    }
}

export default Subpage

• Now every subpage class file needs to extend this Subpage class, like class WeatherSubpage extends Subpage
• In your subpage classes please ensure that method which fires the script is named render()
• In your subpage classes you need to import your css file like `import css from "./weather-subpage.css"
• Pass it to super in constructor: `super(css)
• Rebuild Router.js

export class Router {
  SubpageClass = null

  constructor() {
    window.addEventListener("hashchange", (event) => this.onRouteChange(event))
    this.slot = document.querySelector("#slot")
  }

  onRouteChange() {
    const hashLocation = window.location.hash.substring(1)
    this.loadContent(hashLocation)
  }

  loadContent = async (uri) => {
    let content
    this.SubpageClass && this.SubpageClass.removeStylesheet()

    switch (uri) {
      case "sport":
        content = sportSubpage
        break
      case "food":
        content = foodSubpage
        break
      case "weather":
        content = weatherSubpage
        this.SubpageClass = new WeatherSubpage()
        break
      case "news":
        content = newsSubpage
        break
      case "cryptocurrency":
        content = cryptocurrencySubpage
        break
      default:
        content = homepage
        this.SubpageClass = new Homepage()
        break
    }
    this.updateSlot(content)
  }

  initScript = () => {
    if(this.SubpageClass) {
      this.SubpageClass.initStylesheet()
    }
  }

  updateSlot = (content) => {
    this.SubpageClass && this.SubpageClass.initStylesheet()
    this.slot.innerHTML = content
    this.SubpageClass.render()
  }
}

export default Router

Additional info

If you find some troubles and strange errors try to delete node_modules .cache and package-lock and then npm install && npm run start:dev

If you still dont have your own CSS file, you can pass an empty string to super: super("")

Feel free to contact me

Create the content of README.

• Description of the project
• Installation of the project (if needed)
• Contributors

Acceptance criteria

Functioning service that implements methods from SportDataAPI

• Create new service in service folder
• Implement proper methods based on proposed functionalities Wiki
• Test them by console.logging them (see how responses exactly looks like)
• Remove console log and write tests

Homepage

Poprawki dla podstrony:

• Dodaj style globalne z projektu dla buttonów
• Proponuje wrzucić te poszczególne bloki slidera do pojedynczych div'ów z border-radius 12px
• Ustawić wysokość dla slidera, ponieważ przy tej animacji zmienia się jej wartość i skacze footer
• Title + favicon
• Responsywność
• Warto wykorzystać style, które są na mojej podstronie do kalendarza
  

Cryptocurrency

Poprawki dla podstrony:

• Ujednolicenie przycisków oraz wyświetlanie mniejszej ilości walut na podstronie (przykładowo 80 na podstronie)
  
  na przykład coś takiego
  
  wykorzystywane do tego klasy w projekcie dla buttona class="button offer-button"

• Modal najlepiej jakby był wyświetlany w postaci box'a a nie przykrywał całą stronę włącznie z menu, również dostosowanie przycisku i inputa do globalnych styli (pojawia się też dla niego niepotrzebny scroll na osi x)
  

Acceptance criteria

As a user I want to be able to see topbar with tabs that redirect me to the proper subpage

• Create a TopBar with tabs
• Add onClick callbacks that redirect user to the proper subpage
• If user open a subpage, a proper tab in a topbar should be distinguished

Additional info

Feel free to discuss

do poprawy style w App.css

News

Poprawki dla podstrony:

• Postaraj się w taki sposób dorzucić klucz api albo ewentualnie więcej niż jeden w sytuacji gdy zwraca status code 429, bo będzie problem z zaprezentowaniem podstrony, gdy nie będzie dostępu do api w trakcie prezentacji
  
• Proponuje wrzucić te poszczególne newsy pojedynczych div'ów z border-radius 12px
• Jest dziwne zachowanie po zmianie tych newsów, pierwsze wyświetlone mają spoko hover efekt natomiast kolejne już nie, dodatkowo dodaj margines bo aktualnie rozciągany jest ten tak i kliknięcie pomiedzy newsami powoduje otworzenie jednego z nich
• Wydaje mi się że mogą być one nieco niższe
• Responsywność najlepiej chyba będzie na flexbox'ie

Acceptance criteria

A new service provider named ResourceProvider will be created and registered to the provider

• Create ResourceProvider with proper methods
• Register it to the provider

Naming convention

JS Classes: UpperCase
other js files: camelCase
CSS files: snake-case

Please ensure that your files are named like above

Acceptance criteria

As a user I want to be able, to click on tabs and move to new pages

• Watch this simple tutorial https://www.youtube.com/watch?v=1g1fICJR8YQ
• Implement it

Additional info

Hashchange event is one of the possibilities of making a routing throught the page. If you decide to make it in a different way - just do it

Acceptance criteria

As a user I want to see a carousel with images that refer to the subpages. After clicking on a image I want to be redirected to the proper subpage

• Implement Carousel (here is the sample: https://glidejs.com/)
• Prepare some pictures that refer to our subpages
• Implement onClick methods that redirect users to the proper subpage

Additional info

Feel free to discuss

Acceptance criteria

*Project will be free of unnecessary files and description from Readme

• Clean these things

Additional info

Acceptance criteria

Functioning service that implements methods from WeatherAPI

• Create new service in service folder
• Implement proper methods based on proposed functionalities Wiki
• Test them by console.logging them (see how responses exactly looks like)
• Remove console log and write tests

Bug description
Test bug

Environment
production

Steps to reproduction

1. Open application

Acceptance criteria

Functioning service that implements methods from FoodAPI

• Create new service in service folder
• Implement proper methods based on proposed functionalities Wiki
• Test them by console.logging them (see how responses exactly looks like)
• Remove console log and write tests

1. Bardzo wolne wyszukiwanie monet/tokenów

• pierwsze wyszkukanie od 3 znaków

2. Na pierwszej stronie wciąż można kliknąć Previous Page a na ostatnie Next Page

• Zablokować przyciski

Acceptance criteria

Functioning service that implements methods from CryptoCurrencyAPI

• Create new service in service folder
• Implement proper methods based on proposed functionalities Wiki
• Test them by console.logging them (see how responses exactly looks like)
• Remove console log and write tests

Acceptance criteria

Functioning service that implements methods from NewsAPI

• Create new service in service folder
• Implement proper methods based on proposed functionalities Wiki
• Test them by console.logging them (see how responses exactly looks like)
• Remove console log and write tests

Bug description
If we refresh the application when a subpage is open we are not able to see this subpage again

Steps to reproduction

1. Open app
2. Go to subpage (ex. #weather)
3. Press F5