Description
COM S/SE 319 : Software Construction and User Interfaces HW 1
1. APPLICATION SECTION: Server Client/Thread
Create a chat application. You will need to create both the server and the client codes.
The server and clients should run on localhost. Below are some features that you should
incorporate. Note, we may have under-specified what you need to do. If so, make up your
own rules on what to do for those situations. In other cases, follow the requirements
carefully.
1.1 Connect to Server (15 points)
a) When you start a client, it should come up with a prompt, you should make it entirely
text based. (5 points)
> Enter your Name: (Type in your name, then press Enter)
b) After the user enters a name, the client should be connected to your server. (10 points)
1.2 Send text message to server (25 points)
a) Send user name and message to server. (5 points)
b) Then the server broadcast client’s text message to every other currently connected
clients (i.e. not to the sending client). (10 points)
c) Messages should be printed in each client’s console and the server’s console.
(10 points)
1
2. What to Submit:
Submit via Canvas a compressed file (.zip) (rename it with your LAST NAME) containing
the following:
1. Zip your Eclipse project and submit on Canvas along with README file and the
report. Make sure to include all the files that are needed in order to run your program(s).
[ All APPLICATION SECTION points = 5+10+5+10+10 =40 points]
2. A README file explaining how to compile and run the program. [5 points]
3. A report (.docx or .pdf) describing your solution approach and screenshots of every
required output. [5 points].
COM S/SE 319 : Software Construction and User Interfaces HW 2
1. Warm Up: Try Some Examples (HTML & Javascript)
a. First, open canvas, go to Assignments, and then download HW02.zip file into
your workspace (U:\workspace or something like that!). Then, unzip.
b. Play with each of the given examples (in the examples directory). Open them
using a text editor of your choice and modify parts of the html or js files to learn
how the different instructions work. If you want to use eclipse instead of notepad
or vim or emacs etc., create a new static web project and create new html file and
open it with a browser.
Note: w3schools.com is a good site to learn about web technologies.
Note that the assignment assumes you have understood these examples.
Note: Please always use relative path in your homeworks and Portfolios
2. Form Validation
2.1 Create a form in HTML and validate entries of the form using javascript. [25
points]
2.1.1 Create two files validation1.html and validation1.js.
2.1.2 The TITLE of the validation1.html page should be “Validation Form”.
2.1.3 Create a HTML form in validation1.html:
a) Containing the fields as in the table below.
b) In addition, it should also have a “Continue” button.
c) Make it look reasonably good.
Validation rules will be explained in next step.
1
FIELD LABEL Field Type Validation rule RESULT
First name TextField *Required.
Must contain only
alphabetic or numeric
characters.
/
Last name TextField *Required.
Must contain only
alphabetic or numeric
characters.
/
Gender Dropdown(male,
female)
*Required
/
State Dropdown(Californi
a, Florida, New
York, Texas,
Hawaii,
Washington,
Colorado,Virginia,
Iowa, Arizona)
*Required
Select from given list.. /
*Required field = Cannot be Empty.
d) Read https://www.w3schools.com/js/js_validation.asp.
e) Now, write Javascript code in validation1.js so that when user clicks
“Continue” button it does the following:
● It validates the entries (as per the table above) and for each entry
displays if the validation was successful, else it displays
. (These images are included in the lab’s zip file as
correct.png and wrong.png.)
● Once the validation is successful, it goes to the next page
(validation2.html)
f) Remember to include validation1.js in the head element of
validation.html.
2.2 Create a form in HTML and validate entries of the form using javascript. [20
points]
2.2.1 Create two files validation2.html and validation2.js.
2
2.2.2 The TITLE of the validation2.html page should be “Contact information”.
2.2.3 Create a HTML form in validation2.html:
a) Containing the fields as in the table below.
b) In addition, it should also have a “Submit” button.
c) Make it look reasonably good.
Validation rules will be explained in next step.
FIELD LABEL Field Type Validation rule RESULT
Email TextField *Required.
Must be in the form
xxx@xxx.xxx
x should be
alphanumeric (e.g. no
special symbols).
/
Phone TextField *Required.
Must be in the form
xxx-xxx-xxxx or
xxxxxxxxxx.
x should be numeric
/
Address TextField *Required
Must be in the form of
city & state. example:
Ames,IA
/
*Required field = Cannot be Empty.
d) Read https://www.w3schools.com/tags/att_input_pattern.asp. Also, do look
at validation example in ExamplesJS folder.
e) Write Javascript code in validation2.js to validate the form as per the
rules in the above table when the user clicks Submit button
f) Your code should display if the validation was successful, or if
there was an error, display .
g) Remember to include validation2.js in the head section of
validation2.html.
3
2. What to Submit:
Make sure your solutions work on Chrome (which is what TAs will use to grade the assignment).
Submit via Canvas a compressed file (.zip) (rename it with your LAST NAME) containing the
following:
1. All the files (.html and .js) which are needed in order to run your program(s). [45 points]
2. A report (.docx or .pdf) describing your solution approach and screenshots of every
required output. [5 points].
COM S/SE 319 : Software Construction and User Interfaces HW 3
This assignment is focused on UI and event driven programming and Event Handling
Task 1: UI and Event Driven Programming: (30 points)
Objectives:
Learn to use Javascript objects, functions, and closures to implement UI and event driven
programming.
Warm-up:
NOTE 1: One suggestion (to help you play with javascript) is to use online Javascript code tool like
https://codepen.io/pen/ or https://jsbin.com. They are very useful for trying javascript examples as you can
change the html or javascript directly on the website, and you can immediately see the results of your
changes.
NOTE 2: You will need to also learn how to use the available tools for JS debugging.
Firefox has tools->WebDeveloper->Debugger,
Chrome has Tools->Developer Tools (ctrl-shift-I).
NOTE 3: Play with each of the given examples (in the examples directory). Open them using a text
editor of your choice and modify parts of the html or js files to learn how the different instructions work.
Task:
A complete example of another program (Matching game) is provided in folder SampleProgram.
Please take a look at that one first. A starting template is provided in folder ExerciseHelp. Your
assignment is to use this template to create a simple decimal calculator programs using objects,
functions, and closures. This calculator should look approximately like the below picture.
You can look at a normal calculator to figure out the functionality of M+, M-, MR and MC.
For decimal calculator,
1. “ + ”, “ – ”, “ * ” , “ / ” should be used respectively for addition, subtraction, multiplication and
division. (2×4 = 8 points)
2. “ . ” should be used for operation with decimals. (3 points)
3. Negative number operations e.g., “(-2)-3 = -5” (3 points)
4. Assume that the calculator does not need to calculate complex operations such as 5 + 5 * 5.
Instead, expect users to press “=” operator after a basic operation. So, press 5 + 5 followed by =.
At this point it should show 10. Then, press “*” and then 5 followed by “=”. At this point show
50. When an operator button is pressed, the operator button’s font becomes red. In other words,
assume that we are expecting user to enter only “operand1 operator operand2 = “. However, we
can use the results of the previous operation as the first operand for the next operation.
Check list:
[ ] Your javascript file should be named “calculator.js”.
[ ] Use relative path in all of your files.
[ ] Name your Objects based on their purpose. Do the same with your JavaScript functions.
[ ] Show UI Display for decimal calculator correctly. (3 points)
[ ] MR (shows memory value on screen) (2 points)
[ ] MC (clears memory value) (2 points)
[ ] M+ (Whatever is on screen gets added to memory) (2 points)
[ ] M- (Whatever is on screen gets subtracted from memory) (2 points)
[ ] C (clears screen value, clear the last operation, press “=” will not repeat the last operation) (2points)
[ ] = (shows results of an operation) and highlight the last button (any digit/ operator) clicked (3 points)
[ ] Make sure that your variables are not global (so that if someone includes some other js files with
same names for variables, then your code still works ok).
Task 2: Event Handling (15 points)
Write a Javascript and HTML code (named snake.html and snake.js) to implement the functionality
shown in ‘Problem2Output.mp4’ included in the zip file.
Note:
1. The line you create can go over any previous paths. [4 points]
2. The line will bend left when left button is clicked. [4 points]
3. The line will bend right when right button is clicked. [4 points]
4. The line should stop if it touches any boundary. [3 points]
Hints:
1. Use HTML5 Canvas (see https://www.w3schools.com/graphics/canvas_intro.asp)
2. Make sure to use a timer (see example below) to update the canvas (so that the snake keeps
moving). A Timer has two main functionalities that can be used in the project.
a. The setInterval(function, delay) schedules the “code” after every “delay”
microseconds.
b. The clearInterval removes the timer
Here is an example of timer code. This will countdown from 100 until you press stop!
What to Submit:
Make sure your solutions work on Chrome as TAs will use it to grade the assignment.
Submit via Canvas a compressed file (.zip) containing the following:
● lab.html, calculator.js, for Task 1 and snake.html and snake.js for Task 2. [Task 1+Task 2 =
30+15 = 45 Points]
● README file explaining how to compile and run your program & a Report (.docx or .pdf)
describing your solution approach and screenshots of every required output. [5 points].
COM S/SE 319 : Software Construction and User Interfaces HW 4
This assignment is focused on node.js
Task 1: (45 points)
Objectives:
Learn to use node.js programming.
Warm-up:
NOTE 1: Play with the given example. Open using a text editor of your choice and modify to learn how
the different instructions work.
Task:
*It will be a console based application:
Your assignment is to create a simple binary calculator programs. This calculator should look
approximately like the given warm-up exercise.
For binary calculator,
1. Note that for some operations on the binary calculator, it may be more convenient to convert the
binary numbers to integers and then do the operation. (It is a suggestion, you can implement your
own logic).
2. You can assume that only positive binary numbers are represented and used. For example,
positive 9 is represented as 1001.
3. Binary operator “+” represents plus operation (5 points)
4. Binary operator “*” represents multiply (5 points)
5. Binary operator “/” represents division (5 points)
6. Binary operator “%” represents mod or remainder (i.e. divide the first value by the second, what
is remaining, only works on positive numbers) (5 points)
7. Unary operator “<<” represents one bit-shift left (i.e. insert zeros in the vacated position on the
left, only works on positive numbers) e.g. (101 << gives 1010) (5 points)
8. Unary operator “>>” represents one bit-Shift right (insert zeros in the vacated position on the
right, only works on positive numbers) e.g. (101 >> gives 10) (5 points)
9. Binary operator “&” represents AND (only works on positive numbers) e.g. (101 & 1011 gives
0001) (5 points)
10. Binary operator “|” represents OR (only works on positive numbers) e.g. (101 | 1010 gives 1111)
(5 points)
11. Unary operator “~” represents not (i.e. invert each bit of the binary value, only works on positive
numbers) e.g. (101 ~ gives 10) (5 points)
What to Submit:
Submit via Canvas a compressed file (.zip) containing the following:
● code(s) for Task 1. [Task 1= 45 Points]
● README file explaining how to compile and run your program & a Report (.docx or .pdf)
describing your solution approach and screenshots of every required output. [5 points].
COM S/SE 319 : Software Construction and User Interfaces HW 5
Task:
Implement a Turn Based human vs human tic-tac-toe game with suitable GUI. Typically
Tic-tac-toe (also known as noughts and crosses or Xs and Os) is a paper-and-pencil game for
two players, X and O, who take turns marking the spaces in a 3×3 grid. The player who
succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.
The given example of the game is won by the first player, X which has been illustrated in the
below figure 1 : (More about Tic-tac-toe:https://en.wikipedia.org/wiki/Tic-tac-toe)
Figure 1: Tic-tac-toe Game
You have to implement this task using Java code and JavaFX GUI components.
Check list:
1. Use the provided images (included in the zip file) for marking X and O. [5 points]
2. Show which player’s turn while playing the game. [5 points]
3. Click on the blank cell to mark X or O (unmarked cell should be checked and marked cell can
not be marked again). [10 points]
4. When one player wins, stop the game and show ”Congratulations, X win the game” or
”Congratulations, O win the game” in your designed GUI. [10 points]
5. When all cells are filled in and no one wins, stop the game and show ”Draw”. [10 points]
6. When the game is over, show the option to restart a new game. [5 points]
1
What to Submit:
Submit via Canvas a compressed file (.zip) [rename it with your LAST NAME] containing the
following:
● All of your source code (e.g., .java files). [Task 1= 45 Points]
● README file explaining how to compile and run your program & a Report (.docx or .pdf)
describing your solution approach and screenshots of every required output. [5 points].
_________________________________
