Commit 5a7fc7be authored by ingunnsund's avatar ingunnsund
Browse files

Merge branch '2-write-documentation' of...

Merge branch '2-write-documentation' of https://gitlab.stud.idi.ntnu.no/IT2810-H19/teams/team-43/project-2 into 2-write-documentation
parents 50d29726 820ed583
Pipeline #50442 passed with stages
in 4 minutes
......@@ -12,7 +12,7 @@ $ npm start
```
## React
This project uses both functional components and a class component (`ButtonGroup`) to show the different ways to implement components in `React`. The class component uses states in the constructor. The rest of the components are functional components and uses the hooks `useState()` and `useEffect()` for states and lifecycle event handling. All components are made from scratch. This project is written with use of ES6 using `let`, `const`, template literals, object descructuring, import/export and arrow functions.
This project uses both functional components and a class component (`ButtonGroup`) to show the different ways to implement components in `React`. The class component uses states in the constructor. The rest of the components are functional components and uses the hooks `useState()` and `useEffect()` for states and lifecycle event handling. All components are made from scratch. This project is written with use of ES6 using `let`, `const`, template literals, object descructuring, `import`/`export` and arrow functions.
## AJAX
`AJAX` (Asynchronous JavaScript And XML) was used to load all the assets needed in the website. This was the `SVG`s (images) and the `JSON`s (quotes and credits). This was done using the built in function `fetch()`. To reduce the loading time and number of calls to the server, the resources were only fetched if they were not previously loaded in recent time. When switching back and forth between the exhibitions the content is retrieved from the client and not the server. This was done using the built in caching mechanism in the browsers and using the session storage. The audio is not fetched and is just using the `HTML 5` `audio`-tag.
......@@ -24,7 +24,7 @@ In this solution it is used both local storage and session storage.
Local Storage was used to store favorited exhibition combinations. The `localStorage` stores its data in the web browser between each session of the web browser. To favorite a combination its added a star in the top right corner of a exhibition. If the user clicks twice it will not be favorited anymore. The website is implemented so that the user can view all its favorited exhibitions by clicking a button and open a modal. This opens a similar view to the main exhibition view, but its content is just the favorited combinations. When removing a combinations from the favorites it will be removed from `localStorage` aswell.
### Session Storage
Session Storage was used to store the recently loaded exhibtion content (as a cache). This made it possible to not fetch all resources every time they was needed. Algough the browser have a built in cache when fetching these files, this was implemented as a challenge and to use the `sessionStorage`. The `sessionStorage` does only keep its data in each session of the webbrowsers tab of the website. This makes it much more usefull for something that one does not need to keep over a longer time (e.g. cache).
Session Storage was used to store the recently loaded exhibition content (as a cache). This made it possible to not fetch all resources every time they was needed. Algough the browser have a built in cache when fetching these files, this was implemented as a challenge and to use the `sessionStorage`. The `sessionStorage` does only keep its data in each session of the webbrowsers tab of the website. This makes it much more usefull for something that one does not need to keep over a longer time (e.g. cache).
## Node.js and NPM
This project is created using Node.js and uses the NPM (Node Package Manager) for knowing which version of each dependency of the project. This is stated in the `dependencies` and `devDependencies` in the `package.json` and the `package-lock.json` files. To create and develop this project/repository, it was used the package `create-react-app`.
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment