Week 6: Programming the Event Search (JavaScript)

This week, I started to think more about the kinds of interaction we want to have on our mobile website, especially when people scan the QR codes. I also discussed with my team today and we agreed on some things, but for the events I was soon sure that I was going to enable the user to do the following:

• Pick a category of events

• Pick a time span in which the event should take place

• Retrieve the events that correspond to the event from the database

---

Planned Content of the Database

For this, I did a lot of research on uitinenschede.nl - they have an awesome event search functionality. I won't be able to produce such great work myself, but I wanted to attempt a simpler version of the same thing. In the database, I will create an event table and enter all the events that I can find on uitinenschede.nl with these columns:

• Primary key

• Event ID (self-created)

• Event name (heading)

• Event info (paragraph) - Possibly split the text into several paragraphs so it looks nicer on the website later on

• Event image - My boyfriend advised me to link the image with a URL because this will be easier than having to upload it on the database

• Event URL - From this, I will create a button "To the event" and the user can get to the website of the event if he wants to learn more.

---

Functionality of the website

The website works as follows. First, the user has to select one or several categories of events that he/she is interested in. Then, he/she has to specify a start month and an end month between which the event should take place by using two dropdown menus. The end month cannot be earlier than the start month. Before selecting the end date, you have to select the start date. If you select the start month, the dropdown menu of the second date starts at the month that was selected for the first date. If you renew the start month, the end month gets emptied again, so at no time, the start month can be later than the end month.

Before starting the event search by clicking on the "Search Events" button, the user has to select at least one category and specify a start date as well as an end date. Otherwise there will be a warning that he/she has to do these things first (see video). Also, when the search is started, the category and month selection menu is hidden so there is more space for the results to be displayed on the mobile device. The text on the button changes to "Change your search", when you click the button again, the category and month selection menu opens up again and you can adjust your search.

It does not sound like much of an effort, but with the pedestal and the shopping at Hubo, I had lots of stuff to do and the programming was super tricky, to cover all the scenarios. It took me in total three days to program this, and the database has not even been built or used yet.