Goal of this second lab assignment is to get familiar with some important aspects of web app development:
The material to use is:
lab2 folder in the git repository (https://github.com/bmmeijers/geo1007-2025) of the courseThe software needed for this assignment is:
The assignment has two parts:
These assignments will again include experimentation, debugging, reading source code and making small changes to existing web pages and web apps. Putting in the work and getting to the end earns you five of 10 points. You earn these points by including all required material in the Proof of Completition items below.
The remaining five points are earned by answering the additional Summative questions at the end of this lab.
Questions marked as Reflective do not need answers in the final report. You are expected to do the work and think through the questions, but you are free to do this in the way that best suits your learning style: taking notes, discussing with peers, sketching ideas, or using another source to help you reason through the material.
Questions marked as Summative do need to be present in your final report. These are intended to be more synthetic and should show what you understood from the practical work in both Part A and Part B.
CSS stands for Cascading Style Sheets, and is used to add style to HTML pages.
To look up information you can use these sources:
Start Apache Tomcat (your web server) if it does not run, with start.bat
(see Apache Tomcat instructions).
Go to http://localhost:8080/geoweb/lab2/styling/amaze3 to see how that web page looks.
In order to see how this is achieved: open in your text editor the file
style.css in the folder
geo1007/apache-tomcat-<version>/webapps/geoweb/lab2/styling/amaze3
Examine the content and especially look at the type of selector or
combination of selectors that are used in style.css.
🤨 Reflective Question
1a. As you inspect
style.css, what different patterns do you notice in the way elements are being targeted? Look for recurring selector styles and think about how each one connects CSS rules to parts of the HTML page.
Go to the start page of lab2, that is: http://localhost:8080/geoweb/lab2/index.html
Your task is to change the style (layout, colors) of the start page.
There is a choice where to add your CSS rules (it is up to you):
<style> element in the <head> of the index.html file.css file, and include a link to that file in
the <head> element of index.htmlMake the following changes in the styling of geoweb/lab2/index.html, and
test for each change if the effect is as you expected (if not: you might have
to refresh the web page in your browser):
<p> paragraph text (thicker than the
other borders)Proof of Completition
A. After these changes and a final test:
- Make a screenshot of how the web page finally looks in the browser and save it for your report
- Include the changed
index.htmland, if applicable, the separate.cssfile in your submission
This part of the assignment focuses on JavaScript as language for client-side processing in web pages.
Purpose is to get some idea about how user input can be handled, and how requests are made to other web services.
To look up information you can use these sources (and others if needed):
So far, you have been exploring HTML elements (via the Document Object Model) and CSS (Cascading Style Sheets). Now, it is time to delve into how JavaScript interacts with HTML and CSS.
Go to: http://localhost:8080/geoweb/lab2/interaction/add2dom/index.html
Your task is to understand the interplay between JavaScript, HTML, and CSS on this webpage.
🤨 Reflective Question
3a. Explore the different roles of HTML, CSS, and JavaScript in two scenarios:
- when the webpage is initially loaded
- when a user adds a new Todo item
As a hint: pay attention to which parts define structure, which parts control appearance, and which parts react to user actions and update the page.
The following web app is a more advanced example of how data from other web servers can be requested and presented in your own web page. It sends a request to one of the web services maintained by the GeoNames project:
Go to http://localhost:8080/geoweb/lab2/interaction/placenames
Try out some inputs of postal code to see if the postal code is found. If possible test a non-Dutch postal code as well (for example the postal code of down town London).
Note: you will also see the ‘raw’ JSON data that comes as response from the web
service of GeoNames. From that JSON data then the table row with the place name
and the latitude and longitude of the center of that postal code area is
created. (The other possibility to see the JSON data is through the Firefox or
Chrome Developer tools, as you used them in lab1.)
Open the file lab2/interaction/placenames/app.js in your text editor and
examine the JavaScript code.
🤨 Reflective Questions
4a. In the JavaScript code there are some events defined, that will be fired when there is an action by the user (a click or some other input). As you read the code, where do you see the page waiting for user interaction?
4b. In those event-handling statements, how does the code point to particular elements on the page? Compare this with the idea of selectors you saw earlier in CSS.
4c. Once an event happens, how can you trace which function or functions are carried out next?
4d. Follow the flow of the code: where does the application move from user input to actually building and sending a request to the GeoNames service?
4e. When the JSON response comes back, how is it handled in the code and how does it end up changing what the user sees on the page?
As an example of how the output of one web service can be used as the input for a request to another web service we made a small extension to the placenames app:
Go to http://localhost:8080/geoweb/lab2/interaction/placenamesAndMore
Two buttons have been added to the row(s) in the result table (try a postal code search to see the buttons). A click on the first button requests a map fragment from OpenStreetMap, a click on the second button sends a request to another GeoNames service, one that finds the nearest road intersection to a (lat/long) point. The output of this GeoNames service is XML.
🤨 Reflective Question
5a. Examine the way the XML output of this second GeoNames web service is handled. Compare this with the postal code -> place name web service from Task
- As a hint, look at both the overall flow and the data format: what seems to stay the same, and what changes when the response is XML rather than JSON?
As you have seen probably when using the buttons to get a map or to request the nearest intersection, the results of previous button clicks stay on the screen.
This is rather confusing (leads to inconsistent information, which is not good).
What you have to do is: change the code in placenamesAndMore/app.js to fix
this bug.
In other words:
Proof of Completition
B. After fixing the bug:
- Include in your report the code fragment(s) that you changed
- Briefly motivate why you chose that solution
- Include the changed file or files of
placenamesAndMorein your submission (or, if it is easier, include the completeplacenamesAndMorefolder)
📝 Summative Question 1 — Styling with CSS Expectations: Between 1 and 2 pages of text, images optional but encouraged. Less is more!
Question: Tell the story of how CSS reshapes an HTML page. You may choose your own angle, for example by focusing on selectors, on the relationship between HTML structure and visual appearance, or on the effect of a few styling choices you made in Part A. The goal is to make clear how CSS rules connect to page elements and how those rules influence what the user eventually sees. Use at least one concrete example from your own edits.
Grading (5 points): Lower-range answers typically show a basic understanding that CSS affects how a page looks in the browser. Mid-range answers usually make clearer connections between selectors, rules, and the HTML elements they affect. Strong answers tend to use concrete examples from the student’s own styling changes and explain convincingly how those choices shaped the final page. The strongest answers are clear, well-structured, and use terminology with confidence and care.
📝 Summative Question 2 — Client-side interaction and web requests Expectations: Between 1 and 2 pages of text, images optional but encouraged. Less is more!
Question: Pick a pathway through one or more of the web apps from Part B and explain how JavaScript makes that pathway work. You might focus on what happens after a user action, on how a request travels to another web service and back, on how JSON or XML is turned into something visible in the page, or on what your bug fix reveals about keeping an interface clear and consistent. Choose what you think is most revealing, but make sure your answer shows how events, code execution, requests, responses and page updates work together. Include at least one concrete example from the code or from the bug fix you made.
Grading (5 points): Lower-range answers typically show the basic idea that JavaScript responds to user actions. Mid-range answers usually trace more of the interaction flow, for example from an event to a function call, or from a request to a response. Strong answers tend to use a concrete example from the explored code or the bug fix and explain how data is handled and shown in the page. The strongest answers bring events, requests, responses and DOM updates together into one coherent explanation, with terminology used accurately and confidently.
Submit the work for this lab2 together with the work for lab1.
Submission date and time is on Brightspace.
What to include for lab2:
☐ Proof of Completition A ☐ Proof of Completition B ☐ Summative Question 1 ☐ Summative Question 2
In addition, include these changed files or folders with your submission:
index.html and, if applicable, the
.css file added by youplacenamesAndMore
(or the complete folder)Because you have to submit several items (report and files or folders) it is advised to zip everything into one zipfile and submit that.