文件列表:

public/
src/
index.html
main.js
package-lock.json
package.json
tsconfig.json

# Chas News ## Nyhetssida byggd med JavaScript, TypeScript, HTML och CSS, med integrerad anvndning av Firebase fr autentisering och databasfunktionalitet. ### Gruppuppgift frn Chas Academy. - William Bostrom: https://github.com/WilliamBostrom - Luay Asadsson: https://github.com/Luayasaadsson - Dennis Nilsson: https://github.com/dens0n - Simon Klausen: https://github.com/Simon-jmk - Besk live-sidan: https://nyhetssida.netlify.app/ - Agil planering: https://github.com/users/WilliamBostrom/projects/2 ## Beskrivning: Projektet utfrdes mellan 17 januari och 15 februari i grupper om 4-5 personer och var obligatoriskt fr att bedmas p fljande kursml: - Bygga frontend fr webbapplikationer med JavaScript utan ramverk/bibliotek (vanilla JS) - Implementera sprningskoder, hndelseprning och metadata fr externa tjnster - Anvnda TypeScript i frontendapplikationer med JavaScript utan ramverk Projektet fokuserade p att bygga en frontend fr en nyhetssida och tillmpade agila metoder fr systemutveckling och grupparbete. ## Om tjnsten: Uppgiften var att utveckla en nyhetssida inspirerad av Omnis nyhetsjnst. Projektet skulle genomfras i flera steg, och mlet var att ta fram den frsta betaversionen av tjnsten. _Bild p Omnis hemsida_  _Bild p Omnis sida fr mobil_  - Besk Omnis hemsida: https://www.omni.se/ ### Funktionalitet: Den frsta betaversionen av tjnsten skulle inkludera fljande grundlggande funktioner: 1. Anvndaren ska kunna lsa nyheter som hmtats frn ett ppet nyhets-API. 2. Anvndaren ska kunna sortera nyheter efter datum. 3. Anvndaren ska kunna filtrera nyheter utifrn ngot kriterium, exempelvis kategori. 4. Anvndaren ska kunna markera nyheter som favoriter och spara dem i sin personliga lista. 5. Anvndaren ska kunna hitta nyheter baserat p skord som exempelvis datum, frfattare eller kategori. ### Kravlista: Fljande punkter var absoluta krav som mste genomsyra och uppfyllas i projektet: - Responsiv design med mobile-first-metoden. - Anvndning av HTML5 och CSS3. - Inga stora JS-ramverk fick anvndas, ssom jQuery, React, Angular m.fl. - Semantisk HTML fr grundlggande tillgnglighetsanpassning. - Anvndning av Vite som modulbundler. - Minst en anvndarinteraktion som kan spras och analyseras i Google Analytics. - Projektet skulle till viss del skrivas i TypeScript. ### Backlog / "Extra krav": Fljande punkter var extra krav som inte var absoluta, men som man skulle strva efter att implementera: 1. Anvndaren ska kunna lsa innehll frn flera olika nyhetskllor via ppna API:er. 2. Anvndarna ska kunna registrera sig och logga in fr att spara sina instllningar och favoritnyheter, med anvndning av Firebase. 3. Anvndaren ska ha mjlighet till offline lsning av sina nyheter med hjlp av en Service Worker. ## Ytterligare funktionalitet p sidan Vi har genomfrt samtliga obligatoriska krav och bonuskrav i uppgiften fr att frbttra anvndarupplevelsen och tillhandahlla ett mer omfattande tjnsteutbud. Fr att ytterligare frbttra sidans funktionalitet har vi inkluderat flera extrafunktioner: - Lampknapp: Fr att frbttra anvndarupplevelsen har vi implementerat en lampknapp p hemsidan. Denna funktion ger anvndaren mjlighet att vlja mellan ljus- och mrkerlge fr att anpassa visningsinstllningarna efter deras preferenser. - Yahoo Finance API integration: Vi har integrerat Yahoo Finance API fr att visa OMXS30-brsdata p sidan, vilket ger anvndarna aktuella och relevanta ekonomiska uppgifter. - Namnsdagsfunktion med daglig uppdatering: Vi har inkluderat en omfattande JSON-fil med alla namnsdagar, vilken uppdateras dagligen fr att skerstlla korrekt information. - Vder-API med geolokalisering: Vi har integrerat en vder-API fr att ge anvndarna aktuell vderinformation fr deras aktuella plats med hjlp av geolokaliseringsteknik. - Klocka och datum: Fr att ytterligare frbttra anvndarupplevelsen har vi inkluderat en klocka och datumfunktion p sidan, vilket ger anvndarna snabb och enkel tillgng till aktuellt tid och datum. Dessa extrafunktioner bidrar till en mer omfattande och engagerande anvndarupplevelse p sidan. ## Vrt slutresultat _Bild p vrt slutresultat fr dator_  _Bild p vrt slutresultat fr mobil_  ## Installation Fr att kra detta projekt lokalt, flj stegen nedan: 1. **Klona detta repository till din lokala maskin:** ```bash git clone https://github.com/WilliamBostrom/Nyhetsida.git ``` 2. **G in i den klonade mappen::** ```bash cd ditt-repo ``` 3.**Installera projektets beroenden:** ```bash npm install ``` 4.**ppna sidan:** ```bash npm run dev ```

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：