For this assignment, you will add Google Maps to the functionality you have developed on your Schedule and Form Web pages through homework 2. You will add a 3rd page to your website named: stockQuotes.html. The page will use a free stock market Application Programmer Interface (API) for JavaScript to obtain quotes on stock prices (see: the README file found at https://github.com/wagenaartje/stocks.js/ for instructions on how to set up and use the API to obtain stock quotes. ) There are 11 pages in this write-up/requirements specification. The objective of this assignment is to continue to develop your JavaScript skills and introduce you to different Application Programmer Interfaces: The free stocks API, and the Google Maps JavaScript API along with the Google Places JavaScript library, the Google Maps Directions Service, and geolocation. While the Google Maps API will be introduced in subsequent lectures, developing and/or bolstering the ability to read API and library documentation and then use it to develop functionality is an essential skill for today’s web developer (or any software developer). New libraries with new APIs are introduced, and existing libraries and their APIs are updated regularly. Teaching a specific API is counterproductive in today’s rapidly changing environment. Instead, one of the objectives of this assignment is to require you to develop and/or bolster your skills to learn and use new libraries and APIs. You will update your Schedule page as follows: 1. You will write code to dynamically mark the addresses of the places specified in your schedule web page on an embedded Google map. 2. You will develop additional functionality to search for specific places near your current location and display them on the map (Optional, Bonus) 3. You will also add functionality to calculate directions and display a route between your current location and destination on your Google map via various modes of transportation. 4. Add a Google map to your form page. Then, use the click on a point of interest (POI) capability to fill in the address field on your form. 5. You will add a new page named: stockQuotes.html to your website – and use the stocks.js API found at: https://github.com/wagenaartje/stocks.js/ to obtain stock quotes and display the results in a Textarea element on your stockQuotes.html page. You will also update your server from homework 2 to return the stockQuotes.html page when your browser requests it, and update your Navigation bar on all the web pages on your website to enable navigation to the stockQuotes.html page. 2 2 Preparation/Reference Conditions on using your google maps API key: READ CAREFULLY. We will provide you with a Google Maps API key via email (an announcement). Do not share the key with anyone – ever. Each student is expected to limit their use of the API key to, at most, 75 queries per day (on average over 3 weeks – so a total of approximately 1500 queries per person – maximum ). Should the key be over-utilized, we will turn it off, and the entire class will have to wait for a new key. You are free to use your own key, and can obtain one as specified in the directions given at the link:https://developers.google.com/maps/documentation/javascript/get-apikey#:~:text=Go%20to%20the%20Google%20Maps%20Platform%20%3E%20Credentials%20page.&tex t=On%20the%20Credentials%20page%2C%20click,Click%20Close. The advantage of getting your own key is that you will be able to use it for your own web applications and it will be active after we turn the key for the assignment off. Google gives you a 200 dollar allowance – and for this assignment, even if you go WAY over 1500 total queries, you will use only a few dollars. We will disable the key after the late due date for the assignment until the grades are released, and then enable it for 3 days so you can evaluate your submission. ALSO NOTE: The late submission period has been extended for this assignment However, it occurs over spring break – so there will be no Instructional staff available to answer questions on issues during that time. For this assignment only: 1 day late 5% deduction; 2 days late 10% deduction, and, after 2 days late 15% deduction through the late submission date. 2.1 Google API Setup Some setup is required to use the Maps API – you need to get your API key (see above). Google provides an excellent tutorial for setting up your map using the key, and you should complete the tutorial on how to do so. The tutorial can be found at the following link: https://developers.google.com/maps/documentation/javascript/tutorial 2.2 Google Places JavaScript Library Reference You can refer to the following link to obtain more information about the places library: https://developers.google.com/maps/documentation/javascript/places 2.3 Google Maps Directions Service Reference You can refer the following link to obtain more information about the direction service: https://developers.google.com/maps/documentation/javascript/directions 2.4 Geolocation Reference You can refer the following link to obtain more information about geolocation: https://developers.google.com/maps/documentation/javascript/geolocation 2.6 Google Click on Points of Interest (POI) – used to fill address field on Form when points of interest are selected/clicked on the map next to it: https://developers.google.com/maps/documentation/javascript/examples/event-poi 2.7 Documentation on how to get a key for and use the stock API can be found in the README file at the following link: https://github.com/wagenaartje/stocks.js/ 3 3 Functionality Update functionality on your Schedule page 1. Start by modifying the address column of the table from homework 2: include the complete address information in table entries for those events, e.g., 100 Union St. SE, Minneapolis. MN 55455. Add some physical events to the table if you have less than 5 physical events (with an actual address). 2. Embed a Google map under the table. (see figure 4.1) 3. The map should be centered on University coordinates (44.9727, -93.23540000000003) with a zoom level of 14 (or any zoom level that you find appropriate). University coordinates can also be obtained using the following link: https://www.gps-coordinates.net/ 4. You should write JavaScript code to dynamically extract the names, times, and locations of your physical events from the DOM objects in your Schedule table. Your code should then place a custom marker on the map for each location extracted. The markers should display the name and time of the event and also display the complete address of this event (e.g. Room number 2-209 in Keller or Shepherd 383) upon being clicked. Note, your JavaScript should not contain hard-coded latitude and longitude positions to do this (this is a requirement of this assignment). Specifically, create JavaScript to obtain a list of addresses from your physical events and use the geocoding or places library to obtain a latitude and longitude for each. Then, create a marker for each unique latitude and longitude. This can be achieved using an information window (see figures 4.2 and 4.3 below) – this is a requirement. 5. The next step is to insert an input area on the right of the map. The elements in this input area will require you to use ‘Google Places JavaScript library’ and ‘Google Maps Directions Service’. See figure 4.4 below. 6. (NOTE, the first row of the input area, and the rest of the functionality specified in this item is OPTIONAL and can be completed for a BONUS). The first row of input area (created as per step 5 above) should enable a user to search for places, e.g., restaurants near the user’s current geolocation. It consists of: ● A drop-down field that lists the category of places to search for. The default categories are restaurants, hospitals, parking, and supermarkets. You can replace the default categories with additional categories present at https://developers.google.com/places/supported_types. You should ensure that at least a few places exist in the search results for each category you include ● A input element that accepts the numeric radius around your current location in which the search results will be shown. ● An input element- that allows users to enter the keywords of other places that they may search for. This textbox should be disabled by default. The drop down field specified in the first bullet in item 6 above should include an extra option named: “Other”. When “Other” is selected, the textbox is enabled. Try one of the following keywords when you are testing this – burger, bus, library, laundromat, etc. 4 ● A button labelled ‘Search: Upon clicking this button, your code finds all the nearby places within the specified radius using ‘Google Places JavaScript library’ and displays the results by placing a marker on the map for each of the found places. The old markers (e.g. the markers for your events location, and markers for any other category) should be cleared before placing new markers on the map. When clicking on a marker, the name and address of the location should be displayed. ● Refer to figures 4.4 and 4.5 for an illustration of this functionality. 7. The second search component that should be added is the functionality to get directions from a user’s current location (as determined by HTML Geolocation – see https://www.w3schools.com/html/html5_geolocation.asp) to the destination they provide. The group of elements you should use to implement this functionality are as follows: ● A input element that allows the user to input the location of the destination. The source location will be the current location of the user’s computing device ● and it can be obtained using geolocation. ● A radio button group: Three modes of travel should be specified: DRIVING, WALKING, and TRANSIT. One of these must be selected at all times. ● A button labelled ‘Go: Upon clicking this button, the route between the current location and the destination should be displayed on the map. The displayed route will be based on the mode of travel selected by the user. The directions associated with this route should be displayed on a scrollable side panel floating to the left of the map. Directions involving higher number of instructions should be wrapped into this fixed dimension panel with the scrollable feature. The source for the directions is the user’s current location extracted using Google geolocation services. The source coordinates should not be hard-coded; they should be extracted dynamically using code (JavaScript). Make use of ‘Google Maps Directions Service’ for this functionality. ● Refer to figures 4.6 and 4.7 below for an illustration of this functionality Update Functionality on your Forms page a.) Add a Google Map to the right of your form b.) Use Google Map’s autocomplete functionality to fill in the address field on the form from locations selected from the Google map to the right of your form AND/ OR autofill the address field with a click on a point of interest on the map. See Figures 4.8 and 4.9 below for an example of click-on POI functionality. See the code snippet on Page 8 to help you incorporate autofill functionality Add a new page to your website which you can use to obtain stock quotes Stocks.js is an easy-to-use stock market API for JavaScript. For this part of the assignment, you will learn how to use – and then use, the stocks.js API to create a web page that utilizes the stocks.js API to fetch stock data based on user input. After the user input is obtained, the stock quote (that is, the price of the stock) will be displayed in a Textarea element 1. Please read the directions in the README file in the github directory: https://github.com/wagenaartje/stocks.js/ carefully!!!! 2. Create an HTML file named: stockQuotes.html containing an input element to get a stock’s “ticker symbol” from the user and a textarea element to display the data received in response to the request for 5 data on the stocks current price. 3. Get an API key from: https://www.alphavantage.co/support/#api-key 4. Write the JavaScript necessary to obtain a stock ticker symbol from the user, use the API in the file stocks.js to retrieve the stock price data, and then display the result in the textarea element. 5. Make sure the stocks.js file is referenced properly via a link in your stockQuotes.html page, your new html file and stock.js are in the proper directories, and that you add the code necessary to return them in your Python web server 4 Screenshots 4.1 Table with a list of events, google map, and input area floating to the right of the map 4.2 Markers of the physical events in the schedule on the Google map. 6 4.3 Marker shows the name, time, and address of a physical event on click (you should use JavaScript to extract that information from your schedule table; in the screenshot, two markers have been clicked) 4.4 Map showing the result of nearby restaurants in a radius of 1500 meters (Note, this is optional, bonus functionality) 7 4.5 When “Other” is selected in the dropdown list, user can enter the keyword to search for items related to places they are looking for, e.g., “burger”. The nearby places with the keyword in their names will show up when “search” button is clicked (See the results for “burger” below). NOTE – this is optional, bonus functionality. 4.6 Map showing the DRIVING route between the current location and Terminal 1–Lindbergh 4.7 Map showing the TRANSIT route between the current location and Terminal 1–Lindbergh Note: you can use HTML5 Geolocation to set your current location – see the information at the following link: https://www.w3schools.com/html/html5_geolocation.asp 8 4.8 Add a Google Map to your Form Page 4.9 When a place is selected (“clicked”) on the Map, the “Location” field on your form should be populated automatically with the address of the place you selected for click on Places of Interest (POI) functionality. (For Example, 300 Washington Ave SE Minneapolis, MN, 55455, as shown in the screenshot below) The “snippet” of HTML and JavaScript below can be used to help incorporate Google Maps Autocomplete functionality into the address text field on your form (Note: this is not required) function init() { var input = I document.getElementById('addressTextField'); var autocomplete = new google.maps.places.Autocomplete(input); } 9 For “click on POI functionality”, you will need to add the JavaScript API (with your key) to your forms page to include another Google map on the page. See the example at the link specified in section 2.6 on page two of this document: 4.10 Create a stockQuotes.html page that includes a user input text object and a textarea object. 4.11 Example of response when stock ticker symbol for Apple Computer is entered in the Input Text Object, the Get Stock Quote Button is clicked, and the response is displayed in the TextArea Object 10 5 Submission Instructions 1. For this assignment, you are expected to store the HTML, CSS, JavaScript, image files, and server.py file in their respective directory / folder as specified in Homework 2 (each of which are subdirectories to the static folder). 2. Your submission should include a minimum of 7 HTML, CSS, JavaScript files (5 HTML, and 1 each for JavaScript and CSS), plus one server.py file, and all the images used by your web pages. You can include more than one JavaScript and/or CSS file. However, it is required that your CSS is separated from HTML (that is, in an external file) - and you should include the majority (not necessarily all) of your JavaScript in an external file or files as well. 3. These files should all reside in the directory yourx500id_hw3 4. Submit a zip file of all your files - and submit the zip file. The name of your zip file should be: yourx500id_hw3.zip PLEASE ENSURE TO TEST YOUR CODE Using Google Chrome and Firefox. NOTE: As of Chrome 50, the Geolocation API will only work on secure contexts such as HTTPS. If your site is hosted on an non-secure origin (such as HTTP) the requests to get the users location will no longer function. Use Firefox and Safari to check your directions functionality in case your computer is running Chrome 50 or later version 6 Evaluation Your submission will be graded out of 115 points (100 points and 15 bonus points) on the following items: 1. Google Map is placed on webpage below the Schedule table with proper alignment as shown in pictures (10 points). 2. Custom markers are dynamically placed on the physical locations specified in your Schedule table. You must use JavaScript to dynamically obtain the event names, addresses, and time information from your Schedule table and use the Google Maps Geocoding or Places functionality to create markers and place them on the map. (15 points). 3. When the markers created in step 5 above a selected (via a click), the markers display the event name, address, and time information of the event. (10 points). 4. (BONUS) Nearby places can be searched within a specific radius and corresponding markers are created on map (5 BONUS points). 5. (BONUS) When clicking your mouse on each of the markers placed on map in response to a place search (done in step 4 above), each marker displays the name of the nearby place (5 BONUS points). 6. (BONUS) All previously displayed markers are removed before the results of a new search are displayed (5 BONUS points). 7. Functionality for finding directions to a custom destination from the user’s current location functions as specified in this write-up. i. Accept destination through input text box and correctly display directions on side panel (10 points). ii. Functioning capability to switch between multiple travel modes (5 points). iii. Style and alignment of the side panel with scroll feature as shown in picture (5 points). 11 8. The form page is modified to include a Google Map. (10 points) 9. On the forms page, when a location on the Google Map is selected, it will automatically populate the address field of the form (POI functionality). (10 points) 10. stockQuotes.html page is added to your website and can be successfully displayed by your server when the Get request: http://localhost:4131/stockQuotes.html is entered in your browsers address bar (when your updated Python server is running) (10 points) 11. When the stockQuotes.html page is displayed in your browser, it functions correctly (when a stock ticker symbol is entered in the input text object, and the Get Stock Data button is clicked with your mouse, current stock data (e.g, the stock price) is returned and displayed in the textarea object as pictured in the Screen shots 4.10 and 4.11 above. (10 points) 12. All your webpages should be responsive. (5 points) 13. All the files required for your solution should be packaged in a tar or zip file, and submitted via the link on the Canvas class site. The name of the zipped file should be yourx500id_hw3.zip. Failure to do this correctly may result in a deduction ranging from 10 points up to full credit for the assignment.
This assignment aims to expose you to client-side JavaScript, Cascading Style Sheets (CSS), the Document Object Model (DOM), and dynamic server-side synthesis of HTML. You will refactor and build upon your first homework assignment to accomplish this. Specifically, when you complete this your website will consist of the following 4 pages: 1. A Schedule Page (You should add your own events(s), and their info/picture) 2. A Form Input Page 3. An About Me Page 4. A Form Submission Page named MyForm(which is dynamically constructed by your server), and 5. an updated version of the server (provided with the assignment, and found in the file server.py) This assignment description is 11 pages long, and you should complete it on your own. This assignment requires the following tasks i.) The navigation bar should be styled and updated to enable navigation between all three pages of your updated website. ii.) Update your Schedule page (MySchedule.html) as follows: a. Each event should contain a thumbnail image related to the event in some way. When the mouse hovers over the event’s row, the thumbnail should appear, and this image is shown enlarged next to the table. Use your best judgment in selecting the pictures and do not use copyrighted material. Note: you can use pictures you create or take. iii.) Create a new page named MyForm.html consisting of an event input form that will be used to add events to your table in later assignments. a. The form should use HTML5 input elements and/or JavaScript to perform basic validation on the form’s input fields for an entry in the table. b. Upon successfully filling out the form, submitted (i.e., submitted without displaying an error) to the server. You will add the functionality to the server to create and return a new HTML page named EventLog.html to the client (e.g. a Browser). The browser will then display the page EventLog.html in a table with the data entered in the form. iv.) Update your About Me page (AboutMe.html) as follows a. Add an Instagram post. b. Add a clock widget written solely in JavaScript. c. Organize the widgets with a table.v.) Style all your web pages with CSS. Specifically, create and use external style file(s) to style the pages on your Website. Your web pages should not contain any inline or embedded styling (except for those styles that come with the embedded widgets). Your styling should be accomplished using CSS commands (i.e., CSS code) that are specified in your css file(s). vi.) Update the server we provide (in the file: server.py) to use the directory structure specified in the grading criteria at the end of this write-up; change the server to return the locally stored images, external JavaScript file(s); and external css files specific to your solution, and create the HTML table used by the HTML page dynamically constructed by the server in response to a post request by the form page you are creating for this assignment. 2. Required Functionality Updates to the Schedule Page Once the Schedule page is loaded into the browser, it should display the event information and the image of the event as shown in the screenshots below. Figure 1. Event information displayed when the page is initially displayed i) The rows of your Schedule table should be displayed in alternating colors like those displayed in Figure 1. Note, you can choose the colors, they don’t have to be the same as in Figure 1, but they should enhance the readability of your events. ii) The placeholder image shown (provided with the assignment) should be displayed as pictured next to your Schedule table. The table and picture should be able to fit on a reasonably sized screen.iii) When you hover over a row in the Schedule table with a pointing device (e.g., a mouse or your finger on a touch screen), a small (thumbnail) image of the location of the corresponding event should be displayed and the larger version of the image should be displayed next to the table. The larger image should persist even on mouse-out. Specifically, as depicted in Figure 2, a small thumbnail image is displayed in each event’s Name cell, and a larger version of the image is displayed next to the table If the pointing device is moved to another row on the Schedule table, a thumbnail and large image of that event should be displayed. If the mouse moves off the table, the last large image displayed should remain, but the thumbnail image should disappear. When hovering from one row to another, the large image should maintain the same size. Figure 2. Events page as displayed when pointing device hovers over a row of event information on the event table Add a Form Page: Using HTML, CSS and JavaScript as necessary, create and add a Web page with a form for adding new events to your Schedule table (we will not implement its functionality in this assignment). The form should use HTML5 input elements wherever possible to obtain the following mandatory input: Event Name; Day of Week; Start Time; Stop Time; Phone Number; Location; Extra Info; a uniform resource locator (URL) specifying information about the event, and the Submit button (Note, the form should be submitted using “POST” method). Optionally, you can also add a Clear button (not shown).Figure 4．An example of what your form might look like (the final styling is up to you). On the form page, you must ensure all data entered on the form is syntactically legal input (using HTML-5 elements and/or JavaScript and Regular Expressions). Specifically, i) All the fields are required to be filled. Upon submission, an error message should be displayed if any field is left blank. Figure 5: Example error message displayed if there is an unfilled field. ii) The Event Name should accept only alphanumeric characters. Acceptable Alphanumeric characters are specified in the following ranges: number: 0-9, lower case characters: a-z, upper-case characters: A-Z and spaces. Upon (or before) submitting the form, an error message should be displayed if nonalphanumeric characters are included in the event name fields.Figure 6: Example error message displayed if there is an error in the event name input to the form. iii) “Day of Week” input is the HTML dropdown list as shown in Figure 7. Figure 7: “Day of Week” Dropdown List iv) Finally, the URL should be syntactically validated to ensure it is formed as a syntactically legal URL (it may not really exist, but the form should be correct). An error should be displayed if a syntactically incorrect URL is entered. Once the form is filled out with legal input (as pictured in Figure 8 below) and submitted (by leftclicking when your mouse is on the submit button), an HTML page with a table of your input data should be displayed, indicating that the form was successfully submitted (as pictured in Figure 9 on the next page).Figure 8: A form that has been successfully filled out by the user – there are no errors. When an error-free form is submitted, the action specified by the form’s action attribute is executed. Specifically, the form should be submitted to the /EventLog.html endpoint in your server. To achieve this, the action attribute on your form should specify the URL of the server script (above) – see https://www.w3schools.com/tags/att_form_action.asp for a discussion on how to accomplish this. When the form is submitted, the server should construct an HTML page with a 1 row table and return it to the Client (for example, the browser you used to submit the form). Figure 9 shows how an HTML page that has been successfully submitted using the form is successfully be displayed by the browser that submitted the form. A scaffold for server-side code you must write to create the HTML page with the table is provided to you in the updated server (see the file server.py provided in the HW2 assignment on Canvas. You must modify the submission_to_table function to return a table that is embedded HTML containing the submitted data.Figure 9: Example of an HTML (Web) page that is displayed upon successful submission of the form. Updates to the About Me Page 1. Embed an Instagram widget as pictured in Figure 11 on the next page onto the About Me page using the following link as a reference. https://www.instagram.com/developer/embedding/ Note – If only the Instagram icon is showing, you should add https to the source link you obtain from Instagram (see: https://stackoverflow.com/questions/37322148/why-is-instagram-embed-code-onlyshowing-an-instagram-icon-not-the-image for an explanation). Figure 10: An Instagram widget should be added to your About Me page (yours might be a little bit different from the screenshot due to styling and system language)2. Implement a clock widget on the About Me page. This will update every second to show the current time in a 12-hour format. Hours can be 1 or 2 digits, while minutes and seconds should always appear as two digits, with a leading 0 if needed. Each part of the clock should be its own cell in a table as shown in Figure 11. Hints: a. You can access the current time by creating a new Date object every time the clock is updated (i.e., call new Date();) b. When getting the hour from the date object, it will be on a 0-23 hour (i.e., military time) scale. i. How do you determine if an hour is AM or PM? ii. How do you show midnight and noon correctly? Figure 11: Example of the date calculator, with a future date as the target, the widget shall print the calculated result (this example is made on 01/27/2023). 3. You should style your About Me page, so the widgets are aligned and organized like the alignment and organization shown in Figure 12 on the next page. Note, that alignment and organization do not have to be exactly the same as in Figure 12, but they should be similar (styling and spacing can be different)Figure 12: An example of the About Me page. Grading Criteria a. The navigation bar should be styled and updated to enable navigation between all three pages of your updated website. Note, the navigation bar styling can differ from the styling illustrated in this write-up (5 points) b. Update your Schedule page as follows: ○ A thumbnail image relating to the event should be displayed when your mouse hovers over the corresponding row in the table. (5 points) ○ A larger pop-up image of the thumbnail image should be displayed to the center right of the events table; image should be displayed at a reasonable size. (10 points) ○ When the mouse moves off the table, the last large image displayed should remain, but the thumbnail image should disappear. When images change, the size of the large image stays consistent. (5 points) c. Create a new page named MyForm.html consisting of an event input form that will be used to add events in later assignments. (5 points) ○ The form should use HTML5 input elements and/or JavaScript to perform basic validation on the form’s input files from the events as specified in the required functionality discussion above (10 points) ○ Upon successfully entering data into the form, it can be submitted without displaying an error to the URL provided. (5 points) ○ The page returned by the server (should be an HTML page with an HTML table (you are required to write the code to create the HTML for the table in the pg.function: submission_to_table) that displays the information entered into the form as shown in Figure 9. (10 points) ○ BONUS – Update the server to return an HTML page that lists all submissions made since it was last started. Each successful form submission should be included in its own row in a Table – and all entries the table returned by the server should be successfully displayed by the client (e.g., A browser). You can include a menu item in the navigation bar to ask the sever to return the HTML page with the history of form submissions. (10 points BONUS) d. Update your About Me page according to the requirements discussed previously as follows: ○ Add an Instagram widget. (5 points) ○ Add the clock widget to the About Me page (5 points) ○ The widgets are well organized by using a table as shown in Figure 15. (5 points) e. Style all your web pages with CSS. Specifically, create and use external style file(s) to style the pages on your Website. Your web pages should not contain any inline or embedded styling (except for those styles that come with the embedded widgets). Your styling should be accomplished using CSS commands (i.e., CSS code) that are specified in your css file(s). (10 points) f. Your assignment is amended to use the following directory/folder structure (folder/directory) server.py (an updated version of the file we gave you with the assignment) static (folder/directory) html (folder / directory) All your html files should be stored here – MySchedule.html, AboutMe.html, and MyForm.html img (folder / directory) The img folder should contain all the local images you use in your HTML Pages (that is, in your MySchedule.html, AboutMe, and HTML Form Submission Page) js The js folder/directory should contain all the external javascript you use in your HTML Pages css The css folder/directory should contain all the external css files you use in your HTML Pages (5 points) g. Server is updated to return local image files, external javascript files, and external css files for your solution (we have given you a file with Dr. C’s references, you need to change those references to refer to the files you use!!!) (10 points) h. With the exception of the embedded widgets on the updated About Me page, your HTML and CSS should files pass the w3 organizations validators (http://validator.w3.org and https://jigsaw.w3.org/css-validator ) without errors. Warnings are accepted. (5 points)SUBMISSION INSTRUCTIONS: Your submission should be packaged in a tar file or zip file. When opened, it must create a directory named: ‘’ containing all of your files ( in the HTML, CSS, Pictures, and any additional external JavaScript files (If used). You will be penalized 10 points if you do not do this correctly. Submit your homework via the class Canvas item named Homework 2 Submission Link in the week 3 module on the class Canvas site. Additional: We have provided some images you can use with the assignment in the images folder with the assignment on Canvas. You are responsible for legally obtaining any other images you use.
The objective of this assignment is to introduce you to the Hypertext Markup Language (HTML – specifically, HTML-5) document structure and a very limited amount of web page styling using Cascading Style Sheets (CSS). Specifically, inthisassignment,youwillcreatethe first two HTMLpages that will eventually be part of the Website you will build for this course (You will be given assignments to update and add functionality to the pages as we progress through the semester). You will also use a simple Web server that responds to requests via a URL in a browser for the HTML pages that you create (We will give you the server, and you will have to modify it just a bit) The first two pages of your website will be your weekly schedule of key events and an About Me page. Your weekly schedule page should contain a table with information about key events that you attend during the week – though content is not the primary focus here – we’re mostly interested in you getting your web development environment up and running. After you are done with that, you will create a second page that contains a picture of yourself, information about yourself that you feel comfortable sharing, and an embedded widget (specifically, a YouTube Playlist) of your choice. Next, you will link the two pages together to create a two-page “Website”. You should use HTML-5 to develop your Website and avoid the use of deprecated elements. This assignment specification has 6 pages. 2 Requirements Your weekly schedule should be displayed on the first Web (that is., HTML-5) page you create. Your schedule page should consist of an HTML table containing with information about your class schedule this semester and regularly scheduled events you participate in each week during the semester. Your weekly schedule table should contain at least seven (7) rows – at least one for each day of the week. You can include events that recur on different days, but your schedule table should contain unique events as well. Each row in your schedule table should contain: The day of the week the event occurs. The name of the event. The time start and anticipated end time for the event. The location of the event (address or link to a meeting). A phone number associated with the event location (if available). A URL with information about the event Use embedded CSS to display borders around the navigation links and HTML table containing your events. The second Web page you should create is the “About me” page, on which you should embed 2 Picture of yourself accompanied by information about yourself you feel comfortable sharing, and a YouTube Playlist in an ordered list. The two pages should be linked via a links embedded in a table or paragraph elements which are contained in an HTML div or nav element at the top of the page. Below are examples of what we are looking for on your Schedule of events and About me pages (at a minimum – you are free to add additional information and more palatable styling). The following pages contain detailed examples and instructions on the required functionality for this assignment Figure 1: An example My Weekly Schedule page (You are free to add more styling). Note: When the About Me link is selected, the browser should display a page similar to the About Me page pictured in Figure 3 below. Figure 2: Web Page displayed when the hyperlink to the Breakfast Spot is selected (that is, clicked on) from the Saturday event in the My Weekly Schedule table pictured in Figure 1 above. 3 Figure 3: An example About Me page containing an img element with a src reference to a picture somewhere on the web that says something about you. You should use a full URL for the src (source) in your image element – for example: “https://cse.umn.edu/sites/cse.umn.edu/files/styles/folwell_full/public/Ch allou_Dan_1.jpg?itok=6tBEqjiB” The second item on the page is a YouTube Playlist. (You should find and embed playlist of your own choosing). Note, when the My Schedule link is selected, the browser should display to the My Schedule page pictured in Figure 1 above. To incorporate your YouTube Playlist, first find a YouTube playlist you would like to embed. Then follow the instructions at the following link on how to obtain the HTML necessary to embed the playlist: https://support.google.com/youtube/answer/171780?hl=en Next, copy the html provided and paste it into your About Me page. 4 You should embed the HTML code for your Picture and YouTube playlist within their own appropriate HTML block element such as a table row, div, section, or. At least 3 of the events must have Physical Locations. 5 points • At least two events in the table should have links to a URL that displays information about the event when selected. 5 points • Navigation links are present at the top of each page, function correctly, and are contained in aor
Design your own linked list class named IntList to hold a series of integers.Include the following public member functions, named as shown:
Assignment 6 introduced you to using a relational database with Node.js. The Project will extend your work in Homework 6 to include delete and edit functionality. This new functionality will enable you to create new events for your schedule, edit them to fix typos and other errors, view them on an HTML page, and finally delete them. With CRUD completed, you’ll walk away with a fully functional full-stack application at the end of the semester. – A note on extra credit: While there are extra credit opportunities in this assignment, you won’t be able to score above 100 on this project, as extra credit does not impact your other grade categories. The extra credit here is mostly provided as a way to guide you toward other topics and tools that you may find interesting if you have the time and desire to look into them. We will not be assisting with extra credit during office hours. The following are some of the resources you should use to familiarize yourself with Express: ● Essential ○ Installing Express ○ Hello world example of Express ○ Basic routing in Express ○ Serving static files in Express ● Additional References ○ Express website ○ FAQ ○ Routing in Express ○ API Reference The following are resources you should review to get familiar with SQL, MYSQL and MYSQL/Node.js ➢ Your zyBook!!! Chapters 11 and 14 ➢ https://www.w3schools.com/sql/ ➢ https://www.w3schools.com/sql/sql_ref_mysql.asp ➢ https://www.w3schools.com/nodejs/nodejs_mysql.asp ➢ Optional SQL/MYSQL: Chapter 13 Sebesta ➢ Using MySQL With Node.js 2 Preparation and Provided Files 1 Setup There are no additional files provided. You will work with your Homework 6 submission and extend it. If you didn’t complete Homework 6 or didn’t properly complete the core components of Homework 6, you should do that first. If you’ve got a grade back for Homework 6, make sure to fix any major errors that you may have lost points for. A significant portion of the final grade for this project is based on functionality that should have been completed in Homework 6. If you didn’t get a good grade back for Homework 6 and chose not to fix any errors, you’ll lose those points again on the project. Make sure you can set up and run your server on VOLE or the CSE lab machines. Look into port forwarding if you want to make development much easier for yourself. 2 Functionality Overview Your website will have 5 pages : 1. A Welcome Page 2. A Login page 3. A Schedule Page 4. An Add Event page 5. An Edit Event page (this is new!) All html pages will need to use Pug templates either by being converted using a converter or written that way. A logout button is required to end the current session once a user has logged in and should be present and functional on: ● The Schedule page ● The Add Event page ● The Edit Event page NOTE: For this assignment you will need to develop the entire website including frontend (HTML pages, CSS, Javascript) and backend (Express server) + MySQL database. The pages below specify the functionality we have provided, and the functionality you must develop 3 3 Schedule Page Delete Button You’ll want to make some small changes to both the schedule page itself, and to the server. 3.1 Schedule Page client changes The schedule page should now have buttons added to each row. By default, these buttons should not be visible. When a user hovers over a row with an event on it, the button should be shown inside the row. The button should meaningfully convey that it will delete the associated event the user is currently hovering over. When the user clicks the delete button, the user should be asked if they’re sure they want to 4 delete the event (preferably via a window.confirm event) and if they state they are sure, a DELETE request with the event’s ID should be sent to the server. The browser should then handle the server’s response, removing the row from the displayed page. It is up to you how you wish to handle displaying the button, but you should have some clientside JavaScript that handles the DELETE request and DOM manipulation on a successful response back. 3.2 Server-side deletion You’ll also need to update the server to accommodate a DELETE request. Namely, when a DELETE request is made, the server should first check if an event exists with the ID passed to it, if it does, the server should delete that row in the database, and on a successful row deletion, return a 200 OK response to the server. What if there isn’t an event with the requested ID? In that case, the server should return a 404 response, and not delete anything in the database. For the delete request, make sure that the ID of an event is being passed in as a path parameter, and not in the body of the request. 5 4 Editing an event A client should also be able to update any of the events that they’ve created. Maybe their schedule changed and they need to update it, or there was a typo for a location and they don’t want to see Heller Kall on the page. Regardless, you need to create an edit page. You need to do two main things for this portion of the project. Create an edit page, and hook it up to the server. 4.1 Edit page client changes For the edit page, you’ll want to add another button that only shows on hovering a row on the schedule page. You can place it right next to the delete button if you want. This button should trigger a GET request to edit the event. An example of the request (that you don’t need to follow) is: “GET /schedule/edit/123” where 123 is the ID of the event being edited. When that request is made, the user should be routed to the edit page, which is rendered server side. This edit page will make a POST request to the server with a body filled with fields that need to be updated. Additionally, the form should be prepopulated with the current values of the schedule, so that the user can make changes to the event and see what the original values were before changing them. This prepopulation of values should NOT use JavaScript, rather the pug template for the edit form should 6 accept the row values for an event, and then render the form dynamically to include those row values as current values. (Hint: you could reuse the addEvent form you have from HW6) An example request the client could make (again, that you don’t need to follow) is “POST /schedule/edit/123” with the changes in the request body (and form encoded). After a POST request is made, if it’s successful, the user should be redirected back to the main schedule page. If it fails, there should be some notification to the user that something went wrong. 4.2 Edit page server changes The server should now handle edit requests by first handling a GET request for the edit page with event ID. In this case, the Pug template for the edit page should be filled out, with the event information for the event matching the request’s event ID. If the event does not exist, respond with a 404 response. The server should also handle POST requests and, in doing so, update the existing row (if it exists) with the new values. After a successful POST, the user should be redirected to the main schedule page. If any errors exist, the user should be notified that the POST request failed with a 422 status and information on why the request failed. You can use the information provided in the error message in your notification to the user on the client side. For now, return a 422 response in case the database query also fails. 5 Extra Credit Remember, that extra credit for this project won’t spill over into other categories where you may have lost points. However, you can use this as an opportunity to play with some new packages and tools that are used widely in industry, and which may be interesting to you. There are three options, one that exists primarily on the server side, one that involves cloud deployments, and one that works on the styling. Each extra credit opportunity is worth 10 points for this project grade only. Remember, the TAs and Dr. Dan will NOT be helping you on any of the extra credit opportunities. This is for you to look into online and troubleshoot on your own. 5.1 Login Create an Account So far there’s a set of predefined accounts that can log in and create scheduled events. What if we wanted users to be able to create their own accounts? 7 To play around with this concept, we’ll do a very rudimentary “create an account” feature. Here’s what you should do: 1. Create a new template for creating an account, name it something like new_account.pug (this is a suggestion, name it whatever you want). Make sure it has the following fields: email, password, and confirm_password. Set up client side JS to validate that the password and password confirmation fields are identical before allowing submission to the server. This form should then make a POST request to create a new account. 2. Set up a route on your server to do a GET request which returns the rendered account creation template. If the user is already signed in and attempts to access the account creation page, redirect them to the main schedule page. 3. Set up an additional route that handles the POST request from the form. This route takes in the user’s email and password, and then attempts to insert a new row into the accounts table in the database. If it is successful, log the user in and redirect them to the main schedule page. If there’s an error, return them back to the form with an error message. a. Make sure that the same email can’t be used for multiple accounts b. You do NOT need to validate that the email exists (in that you can send email to the email address sent) c. A lot of your database logic can be borrowed from other code available to you, but you may want to make some changes to your database table, it is up to you how you approach this challenge. 5.2 Sass integration Bootstrap is fine, but honestly it looks really generic. One way to improve the look of your full stack app is to add some small customizations using Sass (Syntactically Awesome Style Sheets). For this feature, you’ll need to serve bootstrap through your server. Make updates to your Pug templates to get a static stylesheet for bootstrap from your server. This will probably involve you serving assets using the static files feature for Express: https://expressjs.com/en/starter/static-files.html To install Sass use >npm i -g sass Also install bootstrap > npm i [email protected] From there create a file `yourx500id.scss` make sure you submit this file with your project! Check out the tutorial for using Sass with Bootstrap here and follow along: https://getbootstrap.com/docs/5.0/customize/sass/ For now, just try to play around with colors (https://getbootstrap.com/docs/5.3/customize/color/) 8 and generate a new bootstrap css file which has a custom color palette. From there make sure that your newly generated bootstrap CSS is being used by the front end pug templates, and validate this by visiting your webpages, and validate that you can see the new colors you have set. Feel free to make modifications to the Pug templates, adding class names and colors to further customize your project! You’ll realistically need to make additional changes to your PUG templates. The scaffolding you have now uses Bootstrap 3.3.7, but that’s 7 years old now! Try modernizing the application to use Bootstrap 5.3.0 which is the latest version of Bootstrap (and it also supports Sass better!). >npm i [email protected] The command above installs the latest version of Bootstrap. If you swap it in for Bootstrap 3.3.7 without making any other changes, you’ll most likely have additional issues with your styling that you’ll need to fix. Keep that in mind as you try to play with Sass and Bootstrap. Bonus challenge for no additional extra points: Try playing around with CSS animations, and add some animations to your login form! https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations This is purely to give you the opportunity to try JavaScript-free animations on your application. Consider it an opportunity to be more creative with your final project if you have time. 5.3 Cloud Deployment As a student you have access to a lot of cloud computing resources for free. The Github student pack gives you free computing resources on Heroku and Microsoft’s Azure, as well as a free domain for a year from NameCheap and Tech Domains. Amazon Web Services also has free computing resources for students! Your mission, if you choose to accept it, is to take your full stack application that runs on localhost, and instead have it run in the cloud. This involves setting up your own MySQL database on the cloud (or port forwarding to your database running on the CSE machines), deploying your server to AWS/ Azure / Heroku / Linode / DigitalOcean / Google Cloud / Some other provider of your choice, and then being able to test that server by accessing it from your browser. You can furthermore use a free domain for your application to make it easier for anyone to access it! Make sure to take down your deployment after grading has been completed, cloud costs can quickly surprise you, and we don’t want you to get a bill from your cloud provider next summer when the year’s worth of student credits potentially expire. 9 If you successfully get your server deployed, submit an additional file named myCloudDeployment.txt which lists where your server is located, how to access it, and any other information we may need in order to properly grade your extra credit. Make sure to test your deployment to make sure we can access it, if we can’t test your website on the cloud, you won’t get extra credit for this assignment. You have the choice of which cloud provider you want to use. You can use a variety of tools (like Docker containers, Terraform / Cloudformation templates, etc) to accomplish this task, but for any tools that you use, make sure you document their usage in your myCloudDeployment.txt file. Submission Instructions PLEASE ENSURE TO TEST YOUR CODE ON CSE LAB MACHINES. You will need to submit all the files used to develop the website. This includes all the HTML, CSS, JavaScript, package.json, index.js and any other files. Towards this end, make a copy of your working directory: yourx500id_hw06. Rename the copied folder as yourx500id_express. Create a README file inside yourx500id_express directory. This README file should include: Your x500id, acc_login, and acc_password values from insert_into_accounts_table.js file. Finally, compress (e.g., tar or zip) the yourx500id_express directory and submit it via Canvas. We will use the acc_login and acc_password values to login to your website. Ensure that these values are correct and can be used to access your website. Please remove the node_modules folder from your submission! Do not leave it in your submission! Also make sure that naming conventions are followed as outlined in previous sections! AND, submit something no later than the late submission deadline to ensure you get credit for any functionality you have working. Submissions after the late submission deadline will not be accepted, and will be assigned a grade of ZERO. 10 Evaluation Your submission will be graded out of 100 points on the following items: 1. Submission instructions are met. SPECIFICALLY – remember to remove the node_modules folder (5 points, really 5 points!) 2. Homework 6 functionality works as intended (creation and viewing events). (40 points) 3. The Delete button is visible to the user on row hover on an event on the schedule and sends a DELETE request using the Fetch API (10 points) 4. DELETE request works as described on the server side, and properly deletes the row if it exists (15 points) 5. The Edit page is successfully populated with the selected row’s attributes (including row id). The edit page is also accessible via a button on the schedule page. (10 points) 6. POST requests properly update the row in the database, and successfully redirect the user back to the schedule page (15 points) 7. All HTML code is written in a pug template and properly rendered by the server for each request. You will lose all points for this item if any portion of your server just returns an html file that isn’t rendered by Pug. (5 points) 8. The BONUS Create Account Functionality (10 point BONUS) 9. The BONUS Sass Integration (10 points BONUS) 10. The BONUS Cloud Deployment (10 point BONUS)
Write a Scooter class that has the following private member variables: In addition, the class should have the following constructors and member functions: Demonstrate the class in a program (main) that creates a scooter object, uses a loop to increase the speed in increments of 2 mph until reaching the max speed, printing the current speed after each increment. Then use a second loop to decrease the speed by decrements of 3 mph down to 0, printing speed after each increment. Design your class and program by completing the CS 250 OOP Design Document. Give the class declaration, including member variables and function prototypes. Also include a brief description of what is to be stored in each member variable and the purpose of each member function. Then give a description of what the main program will do. You’ll need to include time estimates for design, coding each function, program testing, and total time. Save the design in a file named ScooterDesign_xxx.doc where xxx are your initials. Submit your program design in the Program 7 Design drop box by the due date shown in the calendar and drop box tools. Write your class and program. Save your class declaration in a file named Scooter.h. Save your non-in-line member functions in a file named Scooter.cpp. Save your main program in a file named program7_xxx.cpp where xxx are your initials. Compile, run and test your program and class using the directions in the Ch 13 notes. Update your Program Design Document. Update the class and program descriptions to fit your working program. Update the time estimates based on actual time spent. Submit your updated design document and working .h and .cpp files in the Program 7 drop box. You should submit 4 files in the program drop box.
Feed Store Inventory Write a program that stores the following information about products at a feed store in a structure: This program will NOT use an array of structures. Instead, your program will store the data in a file named “feed.dat” and use a single structure variable to read/write a record as needed. Your program must include an operations menu with the operations shown below:1. Add an item.2. Print the information for all items, in table form.3. Purchase an item (read a full or partial name and quantity from the user, find the record, read it, update the quantity, write the updated record back over the original record)4. Calculate and display the total value of the items on hand. (sum of qty * price for items) Your program should allow the user to make selections until they choose a 5th option “Exit” which will end the program. Use an enumerated type for the operations. Use the enumerators in a switch/case statement that calls a function to process each choice. Your program should be modular. Use a separate function for each option stated above. Your output should be well-organized, neat, and easy to read. Design your program by completing the CS 250 Program Design Document. Save the design in a file named IceCreamDesign_xxx.doc where xxx are your initials. Submit your program design in the Program 6 Design drop box by the beginning of the class preceding the program due date, as shown in the calendar and drop box tools. Write your program. Save your program in a file named feed_store_xxx.cpp where xxx are your initials. Compile, run and test your program. Update your Program Design Document. Update the structure chart & function descriptions to fit your working program. Update the time estimates based on actual time spent. Save the updated document. Submit your final Program Design document and working .cpp file in the Program 6 drop box, by the date shown in the calendar and drop box tools.
Shirt SalesWrite a program that can be used to order a shirt from a SDSU T-shirt vendor. Your program should store the following data about the vendor’s menu in a structure: Use an enumerated type for the size that contains the following enumerators: S, M, L, XL, XXL The program should create an array of 5 structures and initialize the cost and name fields with the data from the shirts.txt file posted in the Program 5 drop box in D2L. Set the qty fields to 0 when you read the file. Then enter a loop, which Use separate functions to read the file, print the menu and print the bill. Your output should be well-organized, neat, and easy to read. Design your program by completing the CS 250 Program Design Document. Be sure to include a structure chart for the program, the prototype for each function, a brief description of what each function does and time estimates for program design, coding each function, program testing, and total time. Save the design in a file named ShirtsDesign_xxx.doc where xxx are your initials. Submit your program design in the Program 5 Design drop box by the due date shown in the D2L calendar. Write your program and save it in a file named shirts_xxx.cpp where xxx are your initials. Compile, run and test your program. Update your Program Design Document, adding the final time spent on each part of the program. Submit your final Program Design document and working .cpp file in the Program 5 drop box by the date shown in the calendar and drop box tools.
Date ProgramWrite a program that reads a date from the user in the form: MM/DD/YYYY and prints the date in words. For example, 11/24/2022 would be display as: November twenty-fourth, two thousand twenty-two. You will write 2 programs for this assignment. The first must use c-style strings (character arrays), as discussed in our book to implement your solution. The second will solve the same problem using the string class instead of c-style strings. I recommend writing the c-string implementation first, then making a copy of it and updating the copy to use the string class. Both programs must be modular. Use separate functions for input, each part of the processing and output. Your output should be well-organized, neat, and easy to read. Design each of your programs by completing the CSC 250 Program Design Document. You may use a separate document for each program or put both designs into the same document. Include a structure chart, prototype and brief description for each function and time estimates for program design, coding each function, program testing, and total time. If you put both designs in the same file, you may use one structure chart, if you like. Save the designs in files named DateDesignCstring_xxx.doc and DateDesignString_xxx.doc or just ValentineDesign_xxx.doc if using one file, where xxx are your initials. Submit your design file(s) in the Program #4 Design drop box by the due date shown in the calendar. Write both programs. As stated above, I recommend writing the c-string version first as it generally takes more time. Save it, make a copy and update the copy to be the string version. Save your c-string program in a file named date_cstring_xxx.cpp where xxx are your initials.Save your string program in a file named date_string_class_xxx.cpp where xxx are your initials. Compile, run, test, and debug both programs. Update your Program Design Documents. Update the structure chart & function descriptions to fit your working program. Record the actual time spent. Submit your updated design documents and working .cpp files in the Program #4 drop box by the due date shown in the calendar. You should submit a total of 2 .cpp files in this drop box and 1 or 2 .doc files.
Update your first program to dynamically allocate the id, hits, and times hit arrays. The number of items will be the first number in the updated “snowball_2.txt” data file. A sample file is shown below, but the file I test your program with will be larger. 3182 37 12837 14 25374 29 28 Your program should read the first number in the file, then dynamically allocate the arrays, then read the data from the file and process it as before. The Unit 3 Video Notes include an example of a readFile function that does this. It is in the Program 3 section. Define the array pointers in main and pass them into your “read data” function by reference so that the addresses stored into them go back to main and can be used by the rest of the program. Demonstrate your pointer prowess by converting your array notation to pointer notation in the “read data” function for this revised program. Design your program by updating the design that you made for Program 1. Update the necessary structure chart, function prototypes, and time estimates. Save the design in a file named SnowFight2_xxx.doc where xxx are your initials. Submit your program design in the Program 3 Design drop box by the due date shown in the calendar and drop box tools. Write your program. Save your program in a file named snowFight2_xxx.cpp where xxx are your initials. Compile, run and test your program. Update the structure chart & function descriptions in your Program Design Document to fit your working program. Add the final times with the time that you actually spent on your program. Submit your final Program Design document and working .cpp file in the Program 3 drop box by the due date shown in the calendar and drop box tools.
Schedule Program for Winter at the State ParkA local state park is having a “Winter Fun” event. Interested people can sign up to compete in the following activities: skiing, curling, ice skating, and sledding, on 5 consecutive Saturdays. Write a program that the park can use to record enrollment in the event. Use a 2D array to hold the number of people participating in each activity, on each Saturday, where the activities are columns and the days are rows. Provide a menu with the following options: Your program must be modular, with separate functions for options 1 and 2 and also separate functions to find the row totals, column totals, and overall total. Design your program by completing the CS 250 Program Design Document. Be sure to include a structure chart for the program, a prototype for each function and time estimates for program design, coding each function, program testing, and total time. Save the design in a file named WinterFunDesign_xxx.doc where xxx are your initials. Submit your program design in the Program 2 Design drop box in D2L by the beginning of the class preceding the program due date. Write your program and save it in a file named winter_xxx.cpp where xxx are your initials. Compile, run and test your program. Update your Program Design Document by updating the structure chart, function descriptions, and function prototypes to fit your working program. Add the final times based on the time you actually spent on your program. Save the updated document. Submit your final Program Design document and working .cpp file in the Program 2 drop box by the due date shown in the D2L calendar and drop box tools.
Snowball FightA text file named snowball.txt contains a 3-digit Team ID, number of times the team hit a member of another time (hits), and the number of times a member of this team was hit (times hit) for each team participating in a campus-wide snowball fight. The data is organized on up to 50 lines in the data file, as shown below. 182 37 12837 14 25374 29 28… Write a program that allows the user to enter a team’s ID and displays the number of hits for that team. You must use the binary search algorithm studied in Unit 1 in this program. Your program should do the following: Your program must be modular, with separate functions to: read the data file, sort the arrays in parallel, input a number from the user, search, and print the results. Your output should be well-organized, neat, and easy to read. Design your program by completing the CSC 250 Program Design Document. Be sure to include a structure chart for the program, a prototype for each function, and time estimates for program design, coding each function, program testing, and total time. Save the design in a file named SnowballDesign_xxx.doc where xxx are your initials. Submit your program design in the Program 1 Design drop box by the due date shown in the calendar and drop box tools. (This is before the Program due date). Write your program. Save your program in a file named snowball_xxx.cpp where xxx are your initials. Compile, run and test your program. Update the structure chart & function descriptions in your Program Design Document to fit your working program. Update the time estimates based on actual time spent. Submit your updated Program Design document and working .cpp file in the Program 1 drop box by the due date shown in the calendar and drop box tools.
Snowblower SalesA gaming store records the sales of snowblower (snowthrowers) during the colder months (October – March). The number of throwers sold is stored in a file named throwers.txt which contains 6 integer values, one per line. The first number is for October, the second for November, etc. Write a program to calculate the total number of systems sold during the year, the average number sold per month, the month with the most sales, the month with the least sales, and the median number of sales. For extra credit, create a frequency array, use it to find the mode and print a histogram of the data for the season. Your program should have separate functions to: Design your program by completing the CSC 150 Program Design Document. Be sure to include a structure chart for the program, the prototype for each function, and a brief description of each function’s purpose. Save the design in a file named ThrowerDesign_xxx.doc where xxx are your initials and submit it in the Program 7 Design drop box by the date shown in the calendar – this is before the program due date. Code your program. Save it in a file named thrower_xxx.c where xxx are your initials. Compile, run and test your program. Submit your working .c file in the Program 7 drop box by the date shown in the calendar and drop box tools.
Tornado data for Oklahoma, 2022, is stored in a file named tornado.txt. A copy of the data file is posted in D2L under the Course Materials for Unit 6. The data is stored with no column headings, a space between each data item and a return after the path width data for each tornado. Ref: https://www.weather.gov/oun/tornadodata-ok-2022 *** A similar example program, labelled “Student Grades” is posted under Content for Unit 6. Design your program by completing the CS 150 Program Design Document. Be sure to include a structure chart for the program, the prototype for each function, and a brief description of each function’s purpose. Save the design in a file named Tornado_xxx.doc where xxx are your initials and submit it in the Program 6 Design drop box by the date shown in the calendar – this is before the program due date. Code your program. Save it in a file named tornado_xxx.cpp where xxx are your initials. Compile, run and test your program. Submit your working .c file in the Program 6 drop box by the due date shown in the calendar.
PatternsWrite a program that can create 4 different patterns of varying sizes. The size of each pattern is determined by the number of columns or rows. For example, a pattern of size 5 has 5 columns and 5 rows. Each pattern is made of the character * and a digit, which shows the size. The size must be between 5 and 10. Here are the four patterns in size 7: Your program must display a menu and ask the user to choose a pattern and size. Please note that your program must be robust; it must prompt the user to choose an option only between 1 and 5 and a pattern size only between 5 and 10. Use data validation loops to make sure that a number in the appropriate range is entered for both the option and the pattern size. A sample menu, with sample user input is shown below: M E N U Enter Option (1 to 5): 11Option incorrect. Try again.Enter option (1 to 5): 3Enter pattern size (5 to 10): 12Pattern size incorrect. Try again.Enter Pattern Size (5 to 10): 4 Use separate functions to get the option, get the size, and to print each pattern. Be sure to pass the size into the pattern functions. Your program must use a single set of nested loops to print each pattern shown above. When your program has processed the first user option, it should loop back around to re-print the menu, read another option from the user, process it, and so on.Please review Notes Example 18 and the “Menu Driven Program” section of the notes. Your program should follow a similar format. The functions to print the patterns must use some sort of method to recognize when to print the number that is the size and when to print the *. The following function prints Pattern 1 for any size. Note that as we study the pattern, by making a table and putting the row and column numbers on the table, we see that when the row and column are equal, the * is printed but for all other locations in the pattern, size is printed. void pattern1(int size){int row, col; // loop through the rowsfor (row=0; row < size; row++){// print one rowfor (col=0; col < size; col++){if (row == col) printf(“ *”);elseprintf(“%2d”, size); }printf(“ ”);}} Design your program by completing the CSC 150 Program Design Document. Be sure to include a structure chart for the program, the prototype for each function, and a brief description of each function’s purpose. Save the design in a file named PatternsDesign_xxx.doc where xxx are your initials and submit it in the Program 5 Design drop box by the date shown in the calendar – this is before the program due date. Code your program. Save it in a file named patterns_xxx.cpp where xxx are your initials. Compile, run and test your program. Submit your working .c file in the Program 5 drop box by the date shown in the calendar and drop box tools.
Hobo DayA “Special Reserve” Hobo Day mug holds your favorite beverage in the shape of a hemi-sphere. Write a program to read the diameter of the hemisphere from the user and calculate the mug’s volume. Use separate functions to: 1 in3 = 0.554113 ounces Complete the CSC 150 Design Document for your program. Draw a Structure Chart in the space at the top of the document. Below, give the prototype and a brief description for each function. The space in between is for the variables that you’re defining in ‘main’. It’s helpful to list these before you write your function prototypes. A blank design document is available in the Content and Drop box tools. Submit your completed Design Document in the Program 3 Design drop box by the due date. This is before the Program due date. Compile, run and test your program. Submit the working .c file in the Program 3 drop box by the due date.
For this assignment, you’ll need to write a C program. You must: A flowchart shows the steps that your program will perform to solve the problem and the order they will be in. This link gives the basic symbols for program flowcharting as well as some examples: http://www.programiz.com/article/flowchart-programming. The first example shown is similar to what you need, except that your flowchart should have 2-4 ‘processing’ boxes that show the steps in the calculation. You can use the ‘draw’ tools in Word to draw your flowchart, save it into a .doc or .docx file and submit it with your program file as stated above. Problem – Fill TimeWith the dry weather we’ve had this year, many livestock producers have needed to supplement their normal water supplies with extra water tanks. Write a program to calculate the time needed to fill a circular water tank. Read the tank’s diameter and height from the user in feet. Read the flow rate for the hose that’s used to fill the tank from the user in gallons per minute. (For testing purposes, most hoses have a fill rate of 7 to 15 gallons per minute). 1 cubic foot of water equals 7.48 gallons. The volume of a cylinder is the area of the base times the height. Print the tank’s radius in feet, the tank’s volume in both cubic feet and gallons and the time needed to fill the tank in minutes. Use constants and variables as appropriate. Be sure to document your program by including a comment block at the top of the file with your name, the date, the course, the assignment, and a brief description of the program. Also put a line comment before each group of statements saying what they do.
Dice Roll Game Write a program to implement a dice game. The game is played as follows: You can get the computer and user’s dice rolls in main, but you must use separate functions to: Use the random number generator to get the dice rolls. Seed the generator once in main, use successive calls to rand to get random numbers, then mod by 6 and add 1 to scale them to be in the range 1 through 6.Use constants for User, Computer, or Tie, storing the correct one into a winner variable that is returned from your determine winner function and passed into your print results function. Design your program by completing the CSC 150 Program Design Document. Be sure to include a structure chart for the program, the prototype for each function, and a brief description of each function’s purpose. Save the design in a file named GameDesign_xxx.doc where xxx are your initials and submit it in the Program 4 Design drop box by the date shown in the calendar and drop box tools – this is before the program due date. Code your program. Save it in a file named game_xxx.cpp where xxx are your initials. Compile, run and test your program. Submit your working .c file in the Program 4 drop box by the due date shown in the calendar and drop box tools. In the final program, we will seed the rand function with a random number srand(Time (NULL)) Include time.h, stdlib.h and stdio.h For the number answers, you can mod by 12 to give a number between 0 – 11You can shift it up by adding 1 to it which gives 1-12 Use separate function — printf (“%d ”, ((rand()% 6) + 1));rand () % range + LOW & and is higher than or || Add data flows to your structure chart to get extra points
