Skip to content

Siem-P/fivespark

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

📣 Fivespark - pricing landingpage

Een dynamische frontend waar verschillende contracten worden gerepresentateerd. Hier wordt een overzicht aangeboden waar prijzen, servicecontracten en activiteiten bij horen.

🗃️ Inhoudsopgave

📜 Beschrijving

In dit project ben ik aan de slag gegaan met het maken van een landingspagina waar klanten een weergave krijgen van verschillende service contracten.

image

🪚 Gebruik

Deze landingspage is bedoelt om gebruiker (klanten) een idee te geven wat deze service contracten inhouden, wat ze bieden, kosten en wat de vergelijkingen zijn met betrekking tot andere contracten.

🎭 Kenmerken

Dit project is gemaakt met:

Tools

  • 💻 Visual Studio Code
  • 🎨 Concepts
  • 🖼 Figma

Tech

  • 🔑 Dotenv
  • ⚙️ NodeJS
  • 🖼️ EJS
  • 📡 ExpressJS
  • 🖌️ CSS

NodeJS

NodeJS is een JavaScript runtime omgeving waarmee JavaScript buiten de browser kan worden uitgevoerd. Met Node js kun je gebruik maken van server side scripting en command-line tools.

EJS

EJS is een templating language voor het genereren van HTML met JavaScript. Het zorgt ervoor dat ik HTML files kan renderen met JavaScript data. Ook kan ik gebruik maken van partials om mijn HTML code zo DRY mogelijk te maken.

ExpressJS

ExpressJS is een NodeJS framework. Express helpt binnen dit project bij het verwerken van API requests en responses.

The HUB (Fivespark API)

Deze website maakt gebruik van data uit de HUB. In de .env.example staat uitgelegd hoe je hier van gebruik kan maken.

Voorbeeldje van het .env bestand.

ACCESS_TOKEN="Vul hier je token in"

UltiTV API

📥 Installatie

  1. Clone of download deze repository naar de gewenste folder.
  2. Open de root directory van dit project en open het project in een code editor naar keuze.
  3. Gebruik npm install om de benodigde packages te downloaden voor dit project.
  4. Vul je ACCESS_TOKEN in het .env bestand in.
  5. Start een server met npm run start.

📘 Bronnen

ExpressJS

EJS

Fetch API

Mobile pricing page design & Explanations

Designing pricing pages on desktop

🪪 Licentie

This project is licensed under the terms of the MIT license.

About

Ontwerp en maak een data driven online concept voor een opdrachtgever

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 52.7%
  • EJS 30.6%
  • JavaScript 16.7%