HvA Enquete 📝

HvA enquete is a school project I made where HvA students can rate the courses. The project is focused on progressive enhancement, a principle that makes sure the website is accesible for everyone

Click here for the live demo

Table of Contents 🧭

1. Goal
2. Getting started
3. Wishlist
4. Practises
5. Packages

Goal 💪🏻

I want to be able to fill in a survey about the minor Web Development, with various answer options. If I don't finish the survey, I want to pick up where I left off later. (translate)

The goal of HvA enquete is to provide the HvA with data about their students. The information will be send to a correctly structured database, where the HvA admin can look at the results.

Getting started ✨

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Technical requirements

To run this project you'll need Git, Nodejs and any code editor

📥 Installing

1. Clone this repository 👯

Before we can get started, we'll need to clone this repository. We can do this by typing the following line of code in the terminal:

git clone https://github.com/InjuMichorius/hva-enquete.git

2. Install the packages 💻

First we need to install the used NPM packages.

npm install

3. Start developer environment 🎬

Now we can run our application, by running the following line of code in your terminal:

npm run dev

4. Navigate to localhost 🌐

Congratulations! If everything works, you should be able to see the application running in your browser. Please note that the port won't always be the same number.

http://localhost:3000

Feature wishlist / backlog 👑

Below is a list of features I'd love to add to this application. The features are split up using the MoSCoW method.

M - Must haves These features are requirements for the end product

• Overview page with avaible books
• Possibilty to change pages

S - Should haves These features are wanted, but not necessary for a usable product

• Accessible styling
• Easy audio controls

C - Could haves These features can be added if there is enough time to do so

• Database that stores all mp3 files

W - Would haves These features can be added in the future

• Easy way for firends to upload mp3 files

Design patterns and Best Practices 👩🏻‍💻

Code standards are important when working on any project; your code stays consistent and is readable for everyone. I defined code standards for HTML, CSS and JS while working on this project.

Javascript code standards

• Variables & functions are written in camelCase
• Promises are handled with async functions using await
• I don't use var, only const or let
• I put spaces around operators ( = + - * / ) and after commas (exception for for loops)
• I use indentation with TAB
• I always end a statement with a semi-colon;
• Functions have their opening bracket on the same line as the name, with 1 space in between
• I use ES6 syntax where possible

CSS code standards

• I try to avoid !important as much as possible
• Layout/general styling is always above more specific styling
• Selectors are not unnecessary long nor short
• I use CSS3 syntax where possible
• I avoid old display properties like float
• CSS Selectors must have a space between the name and bracket

HTML code standards

• I only use IDs when the element is present once on a page and it's necessary for styling or Javascript
• I always write semantic HTML according to W3C Validator
• Divs are only used when necessary for styling purposes
• Classes allow easy re-usage
• Indentation is always clear

Packages used 📦

• Express - Used to setup the server
• Body-parser - Used to refer to html elements
• Ejs - Used for templating
• Nodemon - Used for auto refreshing the server

License 🔐

This project is licensed under the MIT license by © Inju Michorius, 2021. See the LISENCE.md file for details.