generate

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,68 +1,156 @@
-# Project 2 @cmda-minor-web 2022 - 2023
+# 👋🏼 Dicho di Hubentut ~ Youth poetry
+![logo](https://github.com/RainbowJM/dicho-hackaton/blob/main/public/images/PW2%20-%20Hackaton%20trans.png)
 
-## Responsible IT Hackathon
 
-In een week bouwt iedere student aan de hand van een user story een eigen prototype. Technieken geleerd bij [Browser Technologies](https://github.com/cmda-minor-web/browser-technologies-2223) en [Progressive Web Apps](https://github.com/cmda-minor-web/progressive-web-apps-2223) worden toegepast bij het bouwen van de de prototypes.
+## 👁️ Demo Link! 👁️
+[dicho-hackaton-production.up.railway.app/](dicho-hackaton-production.up.railway.app/)
 
-### Kickoff
+--- 
 
-Op dinsdag heeft Yuri Westplat een kick-off gegeven over de mogelijke opdrachten waar je deze week uit kan kiezen. Het thema van deze week draait om AI toegankelijk maken voor gebruikers door middel van interfaces.
+## 💻 Projectweek 3: Hackathon 💻
+Teammates:
+- 👩🏾 Jevona Magdalena 
+- 👩🏾 Keïsha Alexander
+- 👩🏻 Hilal Tapan 
+- 👩🏽 Laiba Choudhry
 
-## Opdrachtomschrijvingen
+---
 
-Voor deze week zijn er twee mogelijke opdrachten:
+## 📇 Concept 📇
+During the projectweek we are given a choice between 2 projects, we have decided to go with the project Prompts engineering with poems. For this assignment we will have to fetch an api where you can generate poems based on themes and types. The user has a few types to choose from and fir the theme they can write anything they want.
 
-### Opdracht 1: Prompt-engineering (oranje)
+---
 
-Voor deze opdracht is je target een 75" scherm met touch. Als je specifiek front-end maakt voor dit soort schermen gebeuren er allemaal rare dingen. Tijdens Browser Technologies heb je leren werken met obscure apparaten. Je gaat de hele week prototypen hiermee om een interface te maken waar gebruikers "prompts" kunnen invoeren.
+## 📖 Job story 📖
+When I am in a museum I would like to be able to generate poems based on themes.
 
-### Opdracht 2: AI muziekinstrument (blauw)
+---
 
-Een front-end voor een muziekinstrumenten die op basis van data muziekvisualisaties genereren. Je wil de gebruiker de kans geven om het eindresultaat aan te passen. "Dingen" als DALL-E en Midjourney hebben een vrij lineare output, namelijk een input en een output. Tijdens dit project wil een gebruiker met meerdere momenten van input de output "sturen" als het ware.
+## 💻 Intallation guide 💻
+### Install nvm
+1. To install the server you need node and express. You can do that with nvm. Nvm is package installer where you can install different packages. With this code you can install the latest versions of npm and node in your terminal:
+```
+nvm install 19.8.1
+```
 
-## Weekplanning
+### Clone repo
+2. Clone this repository by running:
+```
+git clone https://github.com/RainbowJM/dicho-hackaton.git
+```
 
-| Dag  | Tijd | Wat |
-|---|---|--|
-| Maandag 10/04 | Hele dag | Tweede paasdag |
-| Dinsdag 11/04 | 9:30 | Kickoff w/ Yuri Westplat |
-|  | 11:00 - 16:00 uur | Werken aan de opdracht |
-| Woensdag 12/04 | 9:30 - 16:00 uur | Standups met coaches |
-| Donderdag 13/04 | 9:30 - 16:00 uur | Werken aan de opdracht|
-| Vrijdag 14/04 | 12:00 uur | Presentaties |
+### NPM install
+3. Install the dependencies by running:
+```
+npm install 
+```
 
+### Start server 
+Run the following code to start the server: 
+```
+node app.js
+```
 
-### Werkwijze
-Full-time week werken aan (technisch) bewijzen van een concept-idee. Vrijdag is de pitch! Student laat zien dat hij/zij de vakken [Browser Technologies](https://github.com/cmda-minor-web/browser-technologies-2223) en [Progressive Web Apps](https://github.com/cmda-minor-web/progressive-web-apps-2223) begrijpt en beheerst.
+---
 
-Op maandag, woensdag en vrijdag zijn er coaches aanwezig voor coaching en feedback. Maandag is de kickoff, woensdag zijn er standups om de status door te spreken. Waar ben je mee bezig? Loop je ergens vast of heb je hulp nodig? Waar sta je? Vrijdag is de beoordeling.
+## 🛠️ Features combined 🛠️ 
+- Can generate poems
+- Can put own input
+- Works on 73 inch screen
+- Works on touchscreen
+- preview mode on input fields
 
-### Beoordeling
-Tijdens de beoordeling krijg je feedback op het resultaat en op je functioneren. De vakdocenten kijken niet naar je code, maar beoordelen In hoeverre je in het project laten zien dat je de bijhorende vakken beheerst en goed hebt toegepast. 
+---
 
-Het project telt als AVV mee met de Meesterproef.
+## 📄 Licence 📄 
+This project has a MIT License - see the license file for more details.
 
-### Feedback over functioneren
-Je hebt een leergierig, gedreven en zelfredzame houding nodig om de minor te kunnen halen. Welke vaardigheden heb je laten zien? Onderzoekend vermogen? Creativiteit? Conceptueel? In hoeverre komen je houding en verworven vaardigheden overeen met wat een frontender in de praktijk nodig heeft?
+---
 
-### Oplevering & criteria
-- Presentatie. 
-- Github met je code en readme.
+## 💾 Used technologies 💾
+- EJS templating engine
+- Node.js
+- Service worker
+- Express
 
-<!-- Add a link to your live demo in Github Pages 🌐-->
+---
 
-<!-- ☝️ replace this description with a description of your own work -->
+## 🖊 Schetsen 🖊
+### Schets 1
+![schets1](https://github.com/RainbowJM/dicho-hackaton/blob/main/public/images/idee-0.png)
 
-<!-- replace the code in the /docs folder with your own, so you can showcase your work with GitHub Pages 🌍 -->
+### Schets 2
+![schets1](https://github.com/RainbowJM/dicho-hackaton/blob/main/public/images/idee-1.png)
 
-<!-- Add a nice poster image here at the end of the week, showing off your shiny frontend 📸 -->
 
-<!-- Maybe a table of contents here? 📚 -->
+### Schets 3
+![schets1](https://github.com/RainbowJM/dicho-hackaton/blob/main/public/images/idee-2.png)
 
-<!-- How about a section that describes how to install this project? 🤓 -->
 
-<!-- ...but how does one use this project? What are its features 🤔 -->
+### Schets 4
+![schets1](https://github.com/RainbowJM/dicho-hackaton/blob/main/public/images/idee-3.png)
 
-<!-- Maybe a checklist of done stuff and stuff still on your wishlist? ✅ -->
+### Startpage schets
+![startpage](https://github.com/RainbowJM/dicho-hackaton/blob/main/public/images/startpage.png)
 
-<!-- How about a license here? 📜 (or is it a licence?) 🤷 -->
+### Loading state schets
+![startpage](https://github.com/RainbowJM/dicho-hackaton/blob/main/public/images/loading-state.png)
+
+---
+
+## 🔮 Hi fi prototype 🔮
+### Startpagina
+![startpage](https://github.com/RainbowJM/dicho-hackaton/blob/Tapan/public/images/Startpagina.png)
+
+### Generate 1
+![startpage](https://github.com/RainbowJM/dicho-hackaton/blob/Tapan/public/images/Startpagina.png)
+
+
+### Generate 2
+![startpage](https://github.com/RainbowJM/dicho-hackaton/blob/Tapan/public/images/prompt%20forms.png)
+
+
+### Generate 3
+![startpage](https://github.com/RainbowJM/dicho-hackaton/blob/Tapan/public/images/propmpt-page.png)
+
+### Loading
+![startpage](https://github.com/RainbowJM/dicho-hackaton/blob/Tapan/public/images/loading.png)
+
+### Poems
+![startpage](https://github.com/RainbowJM/dicho-hackaton/blob/Tapan/public/images/poems%20page.png)
+
+---
+
+## 👩🏼 User test 👩🏼
+We conducted a user test on 3 users. We asked if they could just scroll and navigate through our application. During the user test we discover various things like, the user can’t use the keyboard. 
+
+We noted all the obstacle the user had while using our application. Per user we have described what they went through
+
+--- 
+
+### User 1: 
+Remove on the home page the home button, because he thought that he wasn’t on the home page. 
+On the screen you can’t type in the text in the input fields, no keyboard
+The touchscreen is basically just a mouse
+Keep in mind the touch screen
+
+### User 2: 
+Everything went smoothly
+He knew where to navigate and what to click 
+
+
+### User 3:
+The UI of the application has to change a bit, it is not that easy to navigate
+Give the user feedback, so that they know they are right on track, the user she was really confused on where exactly to go
+She was second doubting everything, she was really confused on the page where she had to generate the poems. 
+
+
+In the future if we want to continue with the application, we will keep these notes in mind and try to implement it to our code. 
+
+---
+
+## 📁 Sources 📁
+* https://codepen.io/hilallx/pen/LYgpmGr 
+* https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting
+
+---

app.js

@@ -0,0 +1,35 @@
+const express = require('express');
+const app = express();
+const port = 8000;
+// let minifyHTML = require('express-minify-html');
+
+let options = {
+  maxAge: '2y',
+  etag: false
+}
+
+// Setup the template engine ejs
+app.set('view engine', 'ejs');
+app.set('views', 'views')
+
+app.use(express.static('public', options));
+
+// app.use(minifyHTML({
+//   override:      true,
+//   exception_url: false,
+//   htmlMinifier: {
+//       removeComments:            true,
+//       collapseWhitespace:        true,
+//       collapseBooleanAttributes: true,
+//       removeAttributeQuotes:     true,
+//       removeEmptyAttributes:     true,
+//       minifyJS:                  true
+//   }
+// }));
+
+var poemsRouter = require('./routes/poems');
+app.use('/', poemsRouter);
+
+app.listen(port, () => {
+  console.log(`Example app listening on port ${port}`)
+})