COMP308M23Lab1
.docx
keyboard_arrow_up
School
Centennial College *
*We aren’t endorsed by this school
Course
308
Subject
Computer Science
Date
Apr 3, 2024
Type
docx
Pages
5
Uploaded by HighnessPencil13770
Emerging Technologies COMP-308
Lab Assignment #1
Due Date:
Sunday midnight, Week 4.
Purpose:
The purpose of this assignment is to learn the basics of React by creating a comprehensive evaluation platform that allows students to evaluate their courses or rate their favorite games
. This assignment is designed to cater to both software engineering students and gaming students, providing an opportunity for them to apply their React skills in a project that aligns with their interests. More specifically, you will:
Become familiar with modern front-end frameworks
Become familiar with function components
Develop a UI using React, Next.js, or Svelte
References:
Read the reference textbook, lecture slides, and class examples. This material provides the necessary information that you need to complete the exercises.
Be sure to read the following general instructions carefully:
- This assignment must be completed individually by all the students.
- See the naming and submission rules at the end of this document
- You will have to demonstrate your solution
in class and upload the solution on eCentennial through the assignment link.
Exercise 1 (for Software Engineering Technology Students)
Create a UI that allows students to evaluate their courses. You will have to provide a login form, a comments form, and a “Thank You” form. Implement a login for
m that enables students to log in using their email address and password. Figure 1. Login form
Design a comments form
that allows students to enter their feedback on the course.
The comments form should automatically populate the email
field with the student’s email value entered in login form and allow the student to enter the course code, course name
, and
comments
. Provide also two other Lab #1 Page 1
of 5
Emerging Technologies COMP-308
fields
in this form that will be different for each student. For example, you can add fields for a favorite topic
, favorite assignment
, strongest technical skill obtained in this course
, etc. Implement a "Thank You"
form that acknowledges and appreciates the student for providing their course feedback.
Build a folder structure for your application similar to class examples. Design nice and friendly forms.
Figure 2. Student Comments page
Lab #1 Page 2
of 5
Emerging Technologies COMP-308
Figure 3. Thank You form
(10 marks)
Evaluation table: Functionality (including code explanation during demonstration):
Percentage of total mark
UI forms (
login
, comments
, thankyou
)
25%
Correct event handling code ((
login
, comments)
20%
Correct use of props (
login
, comments, thankyou)
20%
Correct implementation of application architecture
10%
Correct main.jsx and index.html
files, correct naming of files
10%
Friendliness
Alignments of UI elements
Friendly I/O
Demonstration with explanations
15%
Total
100%
Exercise 2 (for Game – Programming students)
Create a React UI that allows students to rate and review their favorite games. You will have to provide a login form
to allow the students to login, a game rating form
to allow the students to rate and review games, and a Thank You form
. The login form should accept the student’s email address and password.
The game rating form should allow students to select a game from a list, rate it on a scale (e.g., 1-5 stars), and provide a written review. Additionally, include fields in the form for favorite game genre, preferred gaming platform, and any additional comments.
Lab #1 Page 3
of 5
Your preview ends here
Eager to read complete document? Join bartleby learn and gain access to the full version
- Access to all documents
- Unlimited textbook solutions
- 24/7 expert homework help
Related Questions
Project
Read the following scenario: and then: Suppose you want to build animation mobile app and the app will be used by children who have age between 3 - 9, your app should be different from others to achieve excellent user experience (ux) and the user interfaces should be amazing in order to attract users' attention.Suppose you have 50 users can use the app currently to collect the feedback from them.
Second: answer the following questions:Q1- What are the owner and user's goals?user's goals: Get rid of boredom and spend some free time with fun.Owner goals: Represented by the gains that the business wants to achieve, such as some material gains and access to a larger number of users.Q2- Suggest a name for the app? Cartoon4kidsQ3- Is the app possible to reach to the users? If yes, so what are the features that will be included in the app in order to be successful and different from other apps?Yes, Choosing content that is close to children’s understanding, the possibility of voice…
arrow_forward
System Analysis & Design
arrow_forward
Create activity diagrams for the following scenarios. visual paradigm
SCHOLARSHIP PROCESS
Admin opens the scholarship registration system and enters the applicant's information.
Admin checks documents.
If documents are not complete, reject the application and end the process.
However, if documents are complete, forward them to the scholarship committee.
The scholarship committee reviews the applicant’s documents.
If the application is not accepted, send a message to the applicant and end the process.
If the applicant is accepted, send simultaneous messages to the registration and accounting offices.
Accounting and registration offices begin and complete the necessary procedures.
After completion of the process, both offices send messages back to the scholarship committee.
The scholarship committee sends an acceptance message to the student and ends the process
arrow_forward
DIRECTION: The aim of this activity is for you to design an innovative
timepiece for your own use. This could be in the form of a
wristwatch, a mantelpiece clock, an electronic clock, or any
other kind of clock you like. Your goal is to be inventive and
exploratory.
Nowadays, timepieces (such as clocks, wristwatches etc.) have a variety of
functions. They not only tell the time and date but they can speak to you,
remind you when it's time to do something, and provide a light in the dark,
among other things. Mostly, the interface for these devices, however, shows
the time in one of two basic ways: as a digital number such as 23:40 or
through an analog display with two or three hands-one to represent the hour,
one for the minutes, and one for the seconds.
Task No. 1:
(a) Think about the interactive product you are designing: what do you
want it to do it for you? Find 1-3 potential users and ask them what they
would want. Write a list of requirements for the clock, together with
some…
arrow_forward
Fria Lexa Santos, a Grade 11 HUMSS student, together with her groupmates, is currently working on a
research paper for her Practical Research 1 class. She has thoroughly read and researched her topic. She
gave a proper citation to the authors of the articles that she used. To Fria's dismay, her groupmates just
relied on her to do the research, and on their part, they only copied the works of other authors. She
poured out her frustration over her group mates and called their attention on Facebook. To finish the
group's research and submit it on time, she included her members' copied articles in her research work.
She was so relieved that her teacher accepted the output, and it was uploaded in their Facebook Social
Learning Group; however, she felt uneasy and guilty about the output submitted.
Jhanna Zia Delos Reyes is known in her school as a social butterfly. Everybody likes her, and she has a
wide circle of friends. Most of her senior high school acquaintances are updated with her…
arrow_forward
Userexperience Design concept.
Describe the worst interface that you have ever worked with and critique it relative to the concepts.
arrow_forward
short answer
a project has the following general attributes.
A project has an established objective.
A project has a beginning and an end.
A project is unique.
A project has schedule, cost, and scope constraints.
A project needs resources.
whats are the specifics about one of the attributes of the Getta Byte Software - New Billing System project
arrow_forward
Instructions
To prepare you for this assignment, read the module 2 content and follow the embedded learning activities.
Read the following scenario:
Code&Code is a small company dedicated to Software Development. Their engineering team, to which you belong, is working on writing a Web Application as an MVP for a new customer.
The code name for this App is “Loggy”, which is meant to offer functionality for a personal journal where users can log their daily activities through text, voice and video.
The first step will be to write the main functionality, which is essentially a Microblogging System where all the posts are automatically annotated with voice, video or text.
As an initial step, you must create the skeleton of the model for the core Microblogging System under these assumptions:
Activity logs recorded only by one user.
Each log is dated with a timestamp that is used as the key for displaying it in the feed
Each log should have a name, a description and a date.
Each…
arrow_forward
When refactoring or revising a project, we make sure that we don't have to change the right code just to make the wrong code work again. This is a goal of which SOLID principle? (SRP, OCP, LSP, ISP, or DIP)
The Single Responsibility Principle (SRP)The Open-Closed Principle (OCP)The Liskov Substitution Principle (LSP)The Interface Segregation Principle (ISP)The Dependency Inversion Principle (DIP)
arrow_forward
Assume the role of a new software developer in a technology company. Your team leader comes to you with a project he's been given for your team to complete. The project is in the proposal phase, and he wants you to review the information and come up with a proposal for what technology the team should use for the project.
The project details are a little thin, but, essentially the company wants a web site or a web-based application (they aren't really sure which or what the difference is) to track customer complaints. They know there are tools available on the market, but they want something home-grown that will be a web-base version of the manual tracking and reporting they currently do. Access would only be from the company's network - no access via the Internet. There will need to be a login for the various users (techs and admins basically). The techs will need to be able to add and update customer complaints and the admins will need to be able to view complaint data in various…
arrow_forward
Assume the role of a new software developer in a technology company. Your team leader comes to you with a project he's been given for your team to complete. The project is in the proposal phase, and he wants you to review the information and come up with a proposal for what technology the team should use for the project.
The project details are a little thin, but, essentially the company wants a web site or a web-based application (they aren't really sure which or what the difference is) to track customer complaints. They know there are tools available on the market, but they want something home-grown that will be a web-base version of the manual tracking and reporting they currently do. Access would only be from the company's network - no access via the Internet. There will need to be a login for the various users (techs and admins basically). The techs will need to be able to add and update customer complaints and the admins will need to be able to view complaint data in various…
arrow_forward
Determine what documentation a developer should have at the conclusion of a project.
arrow_forward
Collaboration is essential for any development team working on a smart phone's user interface.How challenging would you say it is to design a user interface for a computer? Give a detailed account of the procedures that are followed.When designing an interface, how do you know when an item has been shown or a list's categories have been shown?
arrow_forward
ObjectiveTo develop a simple database application using modern programming tools.ToolsStudents should use Visual studio for their codes and They can also choose either one of the database management systems SQLite, MySQL, PostgreSQL, and Microsoft SQL Server.GuidelinesEach student should agree to work with one student from the class as a teammate. Otherwise, the student works alone and gets penalized by getting at most 75% of the project grade. Teams should work independently toward the same project goal. Each team has to prepare a report presenting all the details about the work done and the job division. The number of pages should not pass twenty.Description of the ProjectThe project is to develop a simple university management system. The application should let three different kinds of users to work, namely, the student, the instructor, and the faculty coordinator. Users should have the following functionalities in the system:Faculty coordinator Log in to the system Add a new…
arrow_forward
Overview
This project involves a case study based on a fictional company, Healthy Home Care, Inc. You’ll assume the role of office manager, who is responsible for creating the literature for a Welcome Package. The promotional documents will be printed and placed in a folder to be mailed to the director of a senior center. For this project, you’ll complete four documents for the package:
A cover letter discussing your partnership with a senior center
A fact sheet highlighting the services and amenities you offer
A flier promoting the next wellness clinic
A pre-registration form
Instructions
Create the following documents. Your score will be based on the rubric found in the scoring guidelines.
Create and Edit a Cover Letter
The Welcome Package includes a letter to the director of a senior center.
Start Word and create a new document.
Change the style of the blank paragraph to No Spacing.
Type the text shown below, pressing Enter to place one blank line where indicated, four blank…
arrow_forward
It's possible that a miscommunication between users and designers can compromise the success of a certain project.
arrow_forward
Er diagram to er model
arrow_forward
You must provide for your project:
State diagram: at least one
For each diagram, provides a written explanation of the diagram and how it supports the system's functionnality.
Non-functional requirements of the project named Fuel Finder:
Fuel Finder should be able to show satellite images, and perhaps google street views, of every gas station on the app. This would make them easier to find for a driver.
The app should not only display each gas station in your area, but list the price, in USD, of their regular and premium gas, as well as diesel. It should also show a rating for the quality of gas, represented by an easy to understand 5-star style display. Tapping any gas station on the app will also show more details.
arrow_forward
Instruction: First, read the scenario in the image then answer the following question.
Question1 :
Which stakeholders should be involved during the process of determining the requirements of the Harbour Management System?
arrow_forward
Become A Change Agent
Purpose
To assess your ability to:
Evaluate yourself as a change agent.
Create a plan for developing yourself as a change agent.
Overview
This module builds on the work you are doing in Assignment 4-2 in which you evaluated yourself as a change agent. In this discussion post, you will summarize your findings and your plans and will share then with the rest of your class. You will then review your peers’ plans and identify two from which you would also benefit.
arrow_forward
The aim of this assignment is for you to apply higher order thinking skills to showcase your ability to reach the outcomes of this study unit. This assignment is project based. This means that you'll receive some minimum requirements for developing your own application. You'll need to come up with a concept, design the graphical user interface, and write the code. 2. Project_SU3_1 MINIMUM REQUIREMENTS MARK INPUT Three (3) variables in total 1 One (1) constant variable 1 PROCESSING One (1) nested decision structure (including else statements) 3 OUTPUT Format output accordingly 1 CONTROLS Appropriate controls used for input and output 1 One (1) container (GroupBox or Panel) OTHER Apply simple exception handling Neat and organised appearance Compile and Run 1 TOTAL 10
arrow_forward
PLease answer asap in 10 minutes.
First read the scenario in the image then answer the following question.
Question:
The team is not sure if they should follow a formal or informal development process. Provide an argument that will convince them that a formal process is the better option.
arrow_forward
SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Computer Science
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:McGraw-Hill Education
Starting Out with Python (4th Edition)
Computer Science
ISBN:9780134444321
Author:Tony Gaddis
Publisher:PEARSON
Digital Fundamentals (11th Edition)
Computer Science
ISBN:9780132737968
Author:Thomas L. Floyd
Publisher:PEARSON
C How to Program (8th Edition)
Computer Science
ISBN:9780133976892
Author:Paul J. Deitel, Harvey Deitel
Publisher:PEARSON
Database Systems: Design, Implementation, & Manag...
Computer Science
ISBN:9781337627900
Author:Carlos Coronel, Steven Morris
Publisher:Cengage Learning
Programmable Logic Controllers
Computer Science
ISBN:9780073373843
Author:Frank D. Petruzella
Publisher:McGraw-Hill Education
Related Questions
- Project Read the following scenario: and then: Suppose you want to build animation mobile app and the app will be used by children who have age between 3 - 9, your app should be different from others to achieve excellent user experience (ux) and the user interfaces should be amazing in order to attract users' attention.Suppose you have 50 users can use the app currently to collect the feedback from them. Second: answer the following questions:Q1- What are the owner and user's goals?user's goals: Get rid of boredom and spend some free time with fun.Owner goals: Represented by the gains that the business wants to achieve, such as some material gains and access to a larger number of users.Q2- Suggest a name for the app? Cartoon4kidsQ3- Is the app possible to reach to the users? If yes, so what are the features that will be included in the app in order to be successful and different from other apps?Yes, Choosing content that is close to children’s understanding, the possibility of voice…arrow_forwardSystem Analysis & Designarrow_forwardCreate activity diagrams for the following scenarios. visual paradigm SCHOLARSHIP PROCESS Admin opens the scholarship registration system and enters the applicant's information. Admin checks documents. If documents are not complete, reject the application and end the process. However, if documents are complete, forward them to the scholarship committee. The scholarship committee reviews the applicant’s documents. If the application is not accepted, send a message to the applicant and end the process. If the applicant is accepted, send simultaneous messages to the registration and accounting offices. Accounting and registration offices begin and complete the necessary procedures. After completion of the process, both offices send messages back to the scholarship committee. The scholarship committee sends an acceptance message to the student and ends the processarrow_forward
- DIRECTION: The aim of this activity is for you to design an innovative timepiece for your own use. This could be in the form of a wristwatch, a mantelpiece clock, an electronic clock, or any other kind of clock you like. Your goal is to be inventive and exploratory. Nowadays, timepieces (such as clocks, wristwatches etc.) have a variety of functions. They not only tell the time and date but they can speak to you, remind you when it's time to do something, and provide a light in the dark, among other things. Mostly, the interface for these devices, however, shows the time in one of two basic ways: as a digital number such as 23:40 or through an analog display with two or three hands-one to represent the hour, one for the minutes, and one for the seconds. Task No. 1: (a) Think about the interactive product you are designing: what do you want it to do it for you? Find 1-3 potential users and ask them what they would want. Write a list of requirements for the clock, together with some…arrow_forwardFria Lexa Santos, a Grade 11 HUMSS student, together with her groupmates, is currently working on a research paper for her Practical Research 1 class. She has thoroughly read and researched her topic. She gave a proper citation to the authors of the articles that she used. To Fria's dismay, her groupmates just relied on her to do the research, and on their part, they only copied the works of other authors. She poured out her frustration over her group mates and called their attention on Facebook. To finish the group's research and submit it on time, she included her members' copied articles in her research work. She was so relieved that her teacher accepted the output, and it was uploaded in their Facebook Social Learning Group; however, she felt uneasy and guilty about the output submitted. Jhanna Zia Delos Reyes is known in her school as a social butterfly. Everybody likes her, and she has a wide circle of friends. Most of her senior high school acquaintances are updated with her…arrow_forwardUserexperience Design concept. Describe the worst interface that you have ever worked with and critique it relative to the concepts.arrow_forward
- short answer a project has the following general attributes. A project has an established objective. A project has a beginning and an end. A project is unique. A project has schedule, cost, and scope constraints. A project needs resources. whats are the specifics about one of the attributes of the Getta Byte Software - New Billing System projectarrow_forwardInstructions To prepare you for this assignment, read the module 2 content and follow the embedded learning activities. Read the following scenario: Code&Code is a small company dedicated to Software Development. Their engineering team, to which you belong, is working on writing a Web Application as an MVP for a new customer. The code name for this App is “Loggy”, which is meant to offer functionality for a personal journal where users can log their daily activities through text, voice and video. The first step will be to write the main functionality, which is essentially a Microblogging System where all the posts are automatically annotated with voice, video or text. As an initial step, you must create the skeleton of the model for the core Microblogging System under these assumptions: Activity logs recorded only by one user. Each log is dated with a timestamp that is used as the key for displaying it in the feed Each log should have a name, a description and a date. Each…arrow_forwardWhen refactoring or revising a project, we make sure that we don't have to change the right code just to make the wrong code work again. This is a goal of which SOLID principle? (SRP, OCP, LSP, ISP, or DIP) The Single Responsibility Principle (SRP)The Open-Closed Principle (OCP)The Liskov Substitution Principle (LSP)The Interface Segregation Principle (ISP)The Dependency Inversion Principle (DIP)arrow_forward
- Assume the role of a new software developer in a technology company. Your team leader comes to you with a project he's been given for your team to complete. The project is in the proposal phase, and he wants you to review the information and come up with a proposal for what technology the team should use for the project. The project details are a little thin, but, essentially the company wants a web site or a web-based application (they aren't really sure which or what the difference is) to track customer complaints. They know there are tools available on the market, but they want something home-grown that will be a web-base version of the manual tracking and reporting they currently do. Access would only be from the company's network - no access via the Internet. There will need to be a login for the various users (techs and admins basically). The techs will need to be able to add and update customer complaints and the admins will need to be able to view complaint data in various…arrow_forwardAssume the role of a new software developer in a technology company. Your team leader comes to you with a project he's been given for your team to complete. The project is in the proposal phase, and he wants you to review the information and come up with a proposal for what technology the team should use for the project. The project details are a little thin, but, essentially the company wants a web site or a web-based application (they aren't really sure which or what the difference is) to track customer complaints. They know there are tools available on the market, but they want something home-grown that will be a web-base version of the manual tracking and reporting they currently do. Access would only be from the company's network - no access via the Internet. There will need to be a login for the various users (techs and admins basically). The techs will need to be able to add and update customer complaints and the admins will need to be able to view complaint data in various…arrow_forwardDetermine what documentation a developer should have at the conclusion of a project.arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
- Database System ConceptsComputer ScienceISBN:9780078022159Author:Abraham Silberschatz Professor, Henry F. Korth, S. SudarshanPublisher:McGraw-Hill EducationStarting Out with Python (4th Edition)Computer ScienceISBN:9780134444321Author:Tony GaddisPublisher:PEARSONDigital Fundamentals (11th Edition)Computer ScienceISBN:9780132737968Author:Thomas L. FloydPublisher:PEARSON
- C How to Program (8th Edition)Computer ScienceISBN:9780133976892Author:Paul J. Deitel, Harvey DeitelPublisher:PEARSONDatabase Systems: Design, Implementation, & Manag...Computer ScienceISBN:9781337627900Author:Carlos Coronel, Steven MorrisPublisher:Cengage LearningProgrammable Logic ControllersComputer ScienceISBN:9780073373843Author:Frank D. PetruzellaPublisher:McGraw-Hill Education
Database System Concepts
Computer Science
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:McGraw-Hill Education
Starting Out with Python (4th Edition)
Computer Science
ISBN:9780134444321
Author:Tony Gaddis
Publisher:PEARSON
Digital Fundamentals (11th Edition)
Computer Science
ISBN:9780132737968
Author:Thomas L. Floyd
Publisher:PEARSON
C How to Program (8th Edition)
Computer Science
ISBN:9780133976892
Author:Paul J. Deitel, Harvey Deitel
Publisher:PEARSON
Database Systems: Design, Implementation, & Manag...
Computer Science
ISBN:9781337627900
Author:Carlos Coronel, Steven Morris
Publisher:Cengage Learning
Programmable Logic Controllers
Computer Science
ISBN:9780073373843
Author:Frank D. Petruzella
Publisher:McGraw-Hill Education