Scribd
Upload
15 views9 pages

Examination For Engineer

The document describes requirements for a pizza ordering web page created with React. It must include: 1) Three pizza options selectable by radio buttons, displaying name and price. 2) Size options of Small, Medium, and Large selectable by radio buttons. Price should adjust up or down based on size. 3) Topping checkboxes where available toppings vary by pizza, according to a table. Price should update as toppings are checked or unchecked. 4) The selected pizza, size, toppings, and total price must update and display in real-time as options are changed. Material UI and React only should be used without other libraries.

Uploaded by

Ary Suarsyah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views9 pages

Examination For Engineer

The document describes requirements for a pizza ordering web page created with React. It must include: 1) Three pizza options selectable by radio buttons, displaying name and price. 2) Size options of Small, Medium, and Large selectable by radio buttons. Price should adjust up or down based on size. 3) Topping checkboxes where available toppings vary by pizza, according to a table. Price should update as toppings are checked or unchecked. 4) The selected pizza, size, toppings, and total price must update and display in real-time as options are changed. Material UI and React only should be used without other libraries.

Uploaded by

Ary Suarsyah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

employment examination

Please create a system that fulfil the features


are listed on the next page.
Pizza

IMAGE IMAGE IMAGE

Pizza1 Pizza2 Pizza3


$8 $10 $12

Size

Small Medium Large

Toppings
Avocado Lobster Bacon

Broccoli Oyster Duck

Onions Salmon Ham

Zucchini Tuna Sausage

Price
$0

Please make a web page like above by Reactjs. You must set three items ,
three size and toppings. Default size is medium. You must use “Radio
Buttons” for Pizza and Size. As toppings, you must use “Checkboxes”.
Pizza

IMAGE IMAGE IMAGE

PIZZA_NAME1 PIZZA_NAME2 PIZZA_NAME3


$8 $10 $12

Size

Small Medium Large

Toppings
Avocado Lobster Bacon

Broccoli Oyster Duck

Onions Salmon Ham

Zucchini Tuna Sausage

Price
$8

If the Pizza is chosen, you must show price in below space. As toppings,
selectable topping varies depending on the pizza. You must obey next
page’s list about selectable topping.
Toppings

Price Pizza1 Pizza2 Pizza3


Avocado $1 ○
Broccoli $1 ○ ○ ○
Onions $1 ○ ○ ○
Zucchini $1 ○ ○ ○
Lobster $2 ○
Oyster $2 ○
Salmon $2 ○
Tuna $2 ○ ○
Bacon $3 ○ ○
Duck $3 ○
Ham $3 ○ ○ ○
Sausage $3 ○
Pizza

IMAGE IMAGE IMAGE

PIZZA_NAME1 PIZZA_NAME2 PIZZA_NAME3


$8 $10 $12

Size

Small Medium Large

Toppings
Avocado Lobster Bacon

Broccoli Oyster Duck

Onions Salmon Ham

Zucchini Tuna Sausage

Price
$10

If you chose(or change) size, you must change the price in below space.
As “Size”, If chose “Large”, add $2 to the price. If chose “Small”, reduce $1
to price.
Pizza

IMAGE IMAGE IMAGE

PIZZA_NAME1 PIZZA_NAME2 PIZZA_NAME3


$8 $10 $12

Size

Small Medium Large

Toppings
Avocado Lobster Bacon

ㇾ Broccoli Oyster Duck

Onions Salmon ㇾ Ham

Zucchini ㇾ Tuna Sausage

Price
$16

If you chose some ”Toppings”, you must change the “Price” in below space.
About price, you must obey previous page. Please don't forget to update
the "Price", even when you deselect.
Pizza

IMAGE IMAGE IMAGE

PIZZA_NAME1 PIZZA_NAME2 PIZZA_NAME3


$8 $10 $12

Size

Small Medium Large

Toppings
Avocado Lobster Bacon

ㇾ Broccoli Oyster Duck

Onions Salmon ㇾ Ham

Zucchini Tuna Sausage

Price
$16

If you change the “Pizza”, you must change enable / disable about
“Topping”. And then you must obey previous page about selectable
“Topping”.
Sample Image
【Important Notes】

• You have to implement by using Material UI (https://mui.com/material-ui/) and


Reactjs only.
• You must not use any libraries.
• Don't ask about this examination to others and the Internet (e.g. Bulletin
board).
• Purpose of this examination is to check the programming skill. Even if your
page design is awful, it doesn't affect to the evaluation.

You might also like