Code Monkey home page Code Monkey logo

verkefni10's Introduction

Verkefni 10

Útfæra skal vefsíðu sem sækir mynd af handahófi frá NASA. Nota skal öll þau tól sem við höfum séð í vetur. Búið er að setja alla pakka og scriptur í package.json og upphafsstillingar fyrir rollup og babel í rollup.config.js. Allt útlit er gefið með sass ásamt viðeigandi HTML skrám. Leyfilegt er að breyta því sem gefið er.

Dæmi um virkni er gefin í demo.mp4.

NASA APOD API

Í þessu verkefni munum við nota API sem NASA býður upp á.

Við munum notast við Astronomy Picture of the Day Apann, grunnslóðin að honum er https://api.nasa.gov/planetary/apod. Síðan þarf að bæta við slóðina URL viðföngunum api_key og date. Dæmi um fulla slóð er t.d.

https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&date=2019-11-13

Þið getið notað DEMO_KEY fyrir nokkrar fyrirspurnir, en þar sem hann leyfir aðeins lítið magn af fyrirspurnum þá þurfið þið eflaust að sækja um API lykil. Það er ókeypis, og auðvelt er að öðlast hann (sjá myndband).

Dæmi um svar frá vefþjón er að finna í apod.json

{ 
  "date":"string",
  "explanation":"string",
  "hdurl":"string",
  "media_type":"string",
  "service_version":"string",
  "title":"string",
  "url":"string"
}

media_type getur verið image eða video. Hægt er að næla sér í aukastig ef passað er að myndskeið verði birt rétt í þau fáu skipti sem APOD skilar myndskeiði í staðin fyrir mynd. (sjá mat).

elsta dagsetningin sem APINN býður uppá er 16. júní 1995. Svo þið þurfið að velja einhverja dagsetningu af handahófi á milli 16. júní 1995 og deginum í dag (hvaða dagur sem það nú er).

Forsíða

Þegar forsíðan er hlaði skal sækja mynd frá NASA API og birta hana strax ásamt titil myndarinnar og útskýringar texta. Á forsíðunni eru síðan 3 takkar.

  • Þegar smellt er á efsta takkann er ný mynd sótt frá NASA og birt. Valið á mynd skal vera handahófskennt.
  • Þegar smellt er á miðju takkann þá er núverandi mynd vistuð í Local Storage.
  • Þegar smellt er á neðsta takkann þá er farið inná Favourites síðuna.

Favourites

Á favourites síðunni er birt allar myndirnar sem hafa verið vistaðar ásamt titli þeirra.

Tól og grunnkóði

Í verkefninu eru eftirfarandi tól uppsett:

  • rollup til að pakka kóða
  • babel til að transpilea kóða og gera aðgengilegri fyrir fleiri vafra
  • node-sass fyrir Sass
  • eslint fyrir lint á JavaScript
  • stylelint fyrir lint á Sass
  • browser-sync til að keyra verkefni
> npm install
> npm test -s
# Upp koma villur
> npm run dev
# Vefþjónn keyrir á localhost:3000

Allur grunnkóði er undir src/ en þýddur kóði undir dist/. index.html vísar rétt í þýddar skrár.

Í gefnum kóða eru föll með athugasemdum. Leyfilegt er að breyta að öllu leiti.

Mat

  • 10% – Snyrtilegur kóði, engar villur þegar npm test er keyrt
  • 30% – Virkni á forsíðu rétt.
  • 30% – Vista myndir rétt
  • 30% – Favourites birtir vistaðar myndir.
  • 50% - Hægt er að næla sér í aukastig ef þið passið að birta youtube myndskeið í þeim tilfellum sem það gerist.

Sett fyrir

Verkefni sett fyrir í miðvikudaginn 13. nóvember 2019.

Skil

Skila skal undir „Verkefni og hlutaprófa“ á Uglu í seinasta lagi fyrir lok dags fimmtudaginn 21. nóvember 2019.

Skilaboð skulu innihalda:

  • Slóð á verkefni á heimasvæði
  • Slóð á GitHub repo fyrir verkefni, og öllum dæmatímakennurum skal hafa verið boðið í repo (sjá leiðbeiningar). Notendanöfn þeirra eru anz1e, gunnnnii, magdadianaa, OlafurjonHI og Wolfcoder13 .

Einkunn

Sett verða fyrir tíu minni verkefni þar sem átta bestu gilda 3,5% hvert, samtals 28% af lokaeinkunn.

Sett verða fyrir tvö hópverkefni þar sem hvort um sig gildir 11%, samtals 22% af lokaeinkunn.


Útgáfa 0.1

verkefni10's People

Contributors

hallurkrist avatar

Watchers

James Cloos avatar  avatar

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.