Part 1
Requirements
Create a ReactJS application for rolling dice.
Your application should present the user with a label "number of dice" next to a "number of dice" number that is initially set to 1. The number itself should not be displayed in an input textbox. Initially there should be a single "dice" on the page, and the number on the dice should be "1". How exactly you represent each dice is up to you, but use some CSS styling to give the dice a background color (e.g. like a square box on the page with a number inside of it). When the "number of dice" number is clicked on, the number of dice should be incremented by 1, i.e. the number itself should be incremented by 1, and a new dice should appear on the page with its number set to 1. Beside the "number of dice" number there should be a "reset" button. When the reset button is clicked, the number of dice should be set back to "1" and only a single dice showing the number "1" should appear on the page again.
There should also be a label on the page for "number of sides" next to a "number of sides" number that is initially set to 6. The number itself should not be displayed in an input textbox. Beside the number of sides number there should be up and down buttons. When the up button is clicked the number of sides should be incremented by 1, and when the down button is clicked the number should be decremented by 1. The minimum value for number of sides is 1 and the maximum value is 20. If the number of sides is already 1 when the down button is clicked the number should not change in this case, and if the number of sides is already 20 when the up button is clicked the number should also not change in this case.
When a specific dice in the list of displayed dice is clicked on, the number on that dice should be incremented by 1. If incrementing the number on that dice will cause it to exceed the current number of sides, then the number on the dice should reset to 1.
The application should also provide a "roll" button. When the roll button is clicked, a dice roll should occur, and each dice should have its number set to a random value between 1 and the current number of sides.
Your solution must be built using ReactJS in the expected ways using components, state, props and other concepts. Your solution can use either class or function components with hooks if you prefer. Using jQuery, or using JavaScript in ways not expected when using ReactJS (e.g. DOM manipulation), will not be awarded marks.
Your solution must incorporate a dice component that is given its number to display via a prop. This component should not have any state. You should have at least one other component in your solution as well.
Use CSS to make the numbers, labels, buttons and dice appear attractive and professional.
Part 2
Learning Objectives
Integrate a web mapping service into an application
Use the Geolocation API to integrate user location into a web application
Use a Geocoding API to determine GPS co-ordinates from address information
Use Bootstrap to style an application and implement responsive design features
Requirements
Create an application that is focused on a Google Map and meets the following minimum requirements.
Your application should be designed for some type of user... e.g. someone who wants to know the locations of parks in Hamilton, someone who wants to donate clothes in Hamilton, a tourist to Hamilton looking to see interesting things, someone who wants to know what wineries are available in Niagara-On-The-Lake, etc. Exactly who you design your application for is up to you, but you should have some user in-mind that you are making the application for. This assignment is a chance to build something that you can
show off during a job interview or as part of your portfolio, so pick something you're passionate about!
When your application loads in the browser it should feature a Google Map prominently, the map should be the focus of the application. Incorporate the following features into your application:
At least 10 markers should be displayed on the map when the page first loads.
When any of the markers on the map is clicked, it should have an infowindow that appears which displays some information about that location (perhaps the address, the name of the location, etc.). At least some of the information displayed for each location should be unique to that location (e.g. the name of the business, etc.).
At least two buttons on the website that allow you to filter which markers display on the map. When one of these buttons is clicked, only locations of a certain "type" should be featured on the map.
o e.g. three buttons for displaying only indoor skating rinks, only outdoor
skating rinks, or all skating rinks
o e.g. a button to display only museums and a button to display only waterfalls
Allow the user to put a marker for their location on the map via clicking a geolocation button.
o Display this map marker using a different icon than the standard marker.
Allow the user to put a marker for their location on the map via entering an address into an input textbox.
o Display this map marker using a different icon than the standard marker, the
same icon as if they used geolocation.
Allow the user to obtain directions from their current location marker to another location marker on the map.
o How you implement this is up to you, it could be a directions link in the info
window of each marker for example.
o But it should be something easy to use, for example you could have drop-
down menus that allow you to select from lists of origin and destination
locations.
o But whatever you choose, do not have two input textboxes and ask the user
to manually type in both origin and destination addresses, this will not
any receive marks.
Style your application using Bootstrap. Buttons, form inputs and any other interface feature should be styled using Bootstrap.
The website should be responsive and display nicely on a mobile device. At least 3 notable responsive changes should occur when comparing the desktop version of the website to the mobile version of the website. For example, the map could re-size, images could re-size, buttons or form inputs or menus could re-arrange themselves. Wherever possible these responsive changes should be implemented using Bootstrap. As mobile devices have different screen widths, for testing purposes the responsive changes should be noticeable if the website is viewed using Google Chrome and the iPhone SE device is selected under Chrome Dev Tools.
If you are unsure what to focus your application on, I suggest looking at the data sets provided by Open Hamilton: https://open.hamilton.ca Links to an external site.. Open Hamilton provides data sets for everything from park locations to restaurants and hotels. You could use one data set or several data sets from this website to help you make your application.
Do not use the education data set in the example code we have provided as part of your application, you must use different locations.
Your application should work in a web browser when a file named index.html is opened in the web browser.
To get any help in React Js Assignment Help, React Js Project Help and React Js Homework Help you can contact us at:
realcode4you@gmail.com