Maak een nieuw project aan met de naam newspaper en installeer express volgens de instructies in de theorie les.
Zorg ervoor dat ejs wordt geinstalleerd en dat je de view engine instelt op ejs.
We bouwen in deze oefening een kleine applicatie om krantenartikels te tonen. Hier onder vind je een overzicht over alle routes die deze applicatie moet aanbieden en wat ze allemaal moeten doen.
Je kan starten van deze code die al een aantal artikels bevat:
import express from"express";constapp=express();app.set("view engine","ejs");app.set("port",3000);app.use(express.static("public"));interfaceNewsArticle { id:number; title:string; content:string; topic:string;}consttopics:string[] = ["politics","economy","sports","entertainment","technology"];constarticles:NewsArticle[] = [ { id:1, title:"Local Duck Accidentally Elected Mayor, Promises Unlimited Bread for Parks", content:"In an unexpected turn of events, a local duck was elected mayor after a mix-up at the ballot box. The duck's first order of business? Unlimited bread for all parks. Residents are quacking up over the decision.", topic:"politics" }, { id:2, title:"Economy Crashes as Bitcoin is Replaced by Dogecoin as Leading Currency", content:"In a shocking turn of events, Dogecoin has overtaken Bitcoin as the world's leading cryptocurrency, causing the economy to spin into a frenzied tailspin. Investors are advised to buckle up for a bumpy ride to the moon.", topic:"economy" }, { id:3, title:"Esports Team Drafts AI Bot, Claims It's a 'Real Gamer'", content:"An up-and-coming esports team has drafted an AI bot as their latest player, claiming it's not just a machine but a 'real gamer'. The bot's favorite snack? Bytes and bits.", topic:"sports" }, { id:4, title:"Breaking: Cats to Star in a Remake of 'The Matrix', Internet Pawsitively Excited", content:"In an unexpected announcement, a new version of 'The Matrix' will star an all-cat cast. The internet is already purring with excitement, and the feline actors are ready to show off their bullet-dodging skills.", topic:"entertainment" }, { id:5, title:"New Programming Language 'CaffeineScript' Only Functions with Coffee Machine Connected", content:"Tech innovators have unveiled 'CaffeineScript', a new programming language that only compiles when a coffee machine is detected. Programmers are now brewing up code more than ever.", topic:"technology" }, { id:6, title:"Penguins Protest Lack of Linux Support at Local Zoo", content:"A group of tech-savvy penguins at the local zoo have started a peaceful protest over the lack of Linux support in their habitat's computer systems. 'We demand open source fish tracking!' one penguin was quoted.", topic:"politics" }, { id:7, title:"World Bank Announces New Currency Based on Avocado Toast", content:"In a bid to appeal to millennials, the World Bank has announced the launch of a new currency based on the stable value of avocado toast. Economists are puzzled, brunch enthusiasts are thrilled.", topic:"economy" }, { id:8, title:"Chess Boxing Championship Draws Tech Crowd with Live Coding Rounds", content:"The latest craze in the sports world, Chess Boxing, has added live coding rounds to the competition, drawing a massive tech crowd. Participants must checkmate or code their way to victory.", topic:"sports" }, { id:9, title:"Aliens Invade Hollywood, Demand Roles in Sci-Fi Films", content:"A group of aliens has landed in Hollywood, not with plans for world domination, but with headshots and resumes, demanding to be cast in authentic sci-fi roles. Directors are reportedly considering their demands.", topic:"entertainment" }, { id:10, title:"Internet Explorer Launches Comeback as Hipster Browser, Features 'Slow Surf' Mode", content:"In an unexpected twist, Internet Explorer is making a comeback as the browser of choice for hipsters, featuring an exclusive 'Slow Surf' mode for a more 'authentic' browsing experience.", topic:"technology" }, { id:11, title:"Politicians Debate Over Who Gets to Control the Weather Machine", content:"A heated debate has erupted among politicians over who should have the control over the newly invented weather machine. Proposals range from 'Rainy Day Funds' to 'Sunny Money Policies'.", topic:"politics" }, { id:12, title:"Global Economy Now Backed by Memes, 'Pepe' Declared Reserve Currency", content:"In a bold move, global economies have shifted to a meme-based standard, with 'Rare Pepes' being declared as the new reserve currency. Financial analysts are scrambling to adjust their portfolios.", topic:"economy" }, { id:13, title:"Virtual Reality Marathon Running: Athletes Compete from Couches", content:"The first-ever Virtual Reality Marathon allows athletes to compete from the comfort of their couches. Participants report severe thumb cramps but high levels of satisfaction.", topic:"sports" }, { id:14, title:"Time Travel Film Festival Confuses Audiences with Non-Linear Schedule", content:"The first Time Travel Film Festival has left audiences bewildered as the schedule is presented in a non-linear format. Films start in the middle, end at the beginning, and tickets are sold last week.", topic:"entertainment" }, { id:15, title:"'Quantum Debugging' Becomes New Buzzword Among Programmers, Still No One Understands It", content:"The tech world is abuzz with the latest trend: 'Quantum Debugging'. Despite its popularity, no one can explain what it is, but it reportedly fixes bugs not even created yet.", topic:"technology" }];app.listen(app.get("port"), () => {console.log(`Server is running on port ${app.get("port")}`);});
Zorg nu voor de volgende routes (je moet nog geen dynamische routes maken):
/ laat alle artikels zien
/politics laat enkel de artikels zien die over politiek gaan
/economy laat enkel de artikels zien die over economie gaan
/sports laat enkel de artikels zien die over sport gaan
/entertainment laat enkel de artikels zien die over entertainment gaan
/technology laat enkel de artikels zien die over technologie gaan
Voorzie ook een 404 pagina die getoond wordt als de gebruiker een route probeert te bezoeken die niet bestaat.
Alle routes gebruiken dezelfde ejs template om de artikels te tonen. Buiten de 404 pagina, die een eigen ejs template gebruikt.
Hieronder een aantal voorwaarden waaraan je applicatie moet voldoen:
Bovenaan de pagina moet een navigatiebalk staan met links naar alle topics
De topics moeten dynamisch gegenereerd worden op basis van de topics array. (Via een for loop in de ejs template)
De artikels moeten <article> elementen gebruiken om de artikels te tonen.
Zorg voor styling van de artikels.
Zorg voor 2 partials header en footer die je kan includen in je ejs template.