updating datasharing.txt

Module Coding assignment solution-3. md

@@ -0,0 +1,113 @@
+# Module 3 Coding Assignment
+
+Coursera course: [HTML, CSS, and Javascript for Web Developers](https://www.coursera.org/learn/html-css-javascript-for-web-developers)
+
+Woo-hoo! MORE CODING!!! Exciting! :-)
+
+**Time to complete:** About 1 hour or less.
+
+**Ask questions in Discussions if you get stuck! We are all learning, and going through getting stuck and then unstuck (even with someone's help) can be a very valuable learning experience!**
+
+**Don't get scared by the number of points below.**  **Most of it is NOT graded and is optional for you to try on your own.**
+
+Here is what you will need to complete the assignment:
+
+1. (If you haven't already) Create a GitHub.com account and a repository that you will use for this class.
+
+2. (If you haven't already) Follow the Development Setup Video (beginning of Module 1) instructions on how to create a repository and set it up such that you can host and view your finished web pages on GitHub Pages, i.e., GitHub.io domain name. You will need to provide that URL for your peer review.
+
+3. Create a folder in your repository that will serve as a container folder for your solution to this assignment. You can call it whatever you want. For example, `module3-solution` or `mod3_solution`, etc. Create an `index.html` file inside the solution container folder, e.g., `module3-solution/index.html`.
+
+4. The implementation of the page you will be creating should follow the mockup illustrations shown below. You are provided 3 mockups: desktop and tablet (same), mobile, and mobile with mobile menu dropdown shown. Your implementation has to be JUST 1 page. In other words, you will be creating a single, responsive page.
+
+5. Your page must include a CSS file. No inline styles allowed. Your CSS file should be placed into a `css` folder under the solution container folder, e.g., `module3-solution/css`.
+
+6. For this assignment, you are to use Twitter Bootstrap CSS Framework as much as possible. I suggest you start with copying the starter bootstrap files and folders we discussed in Lecture 25 part 2. If you've cloned/downloaded the code example repository, it should be in the `examples/Lecture25` folder. Copy the contents of `examples/Lecture25` to your solution container folder (e.g., `module3-solution`) as a starting point..
+
+7. Since we are using Bootstrap for this assignment, instead of specifying pixel ranges, I will define our desktop, tablet, and mobile views in terms of Bootstrap CSS class prefixes, i.e., `md`, `sm`, and `xs`.
+  * Desktop mockup illustration should correspond to Bootstrap `md`-based classes
+  * Tablet mockup illustration should correspond to Bootstrap `sm`-based classes
+  * Mobile mockup illustration should correspond to Bootstrap `xs`-based classes
+
+8. Navbar: Create a navbar that scrolls away together with the page (the navbar should become invisible and is not fixed to the top when you scroll the page down). The navbar should have a company name (i.e., `navbar-brand` class) called "Food, LLC" that is aligned to the left side of the navbar. (*See* [https://getbootstrap.com/docs/3.3/components/#navbar](https://getbootstrap.com/docs/3.3/components/#navbar). *Make the browser window narrower to see the mobile menu button appear in the first example shown at the provided link.*)
+<br><br>
+For desktop and tablet view, the navbar should not contain anything else. No other buttons should be visible. (_Hint: use 'visible-xs' class._)
+
+9. Navbar - Mobile View: Create a simple menu button (3 horizontal bars). When the user clicks that button, a dropdown menu should appear (as illustrated in Mobile Open Menu illustration below.) The dropdown menu should contain 3 items: Chicken, Beef, and Sushi.
+<br><br>
+The dropdown menu should take up the entire width of the browser window. Make sure the dropdown menu has a background color set that distinguishes it from the rest of the content.
+<br><br>
+(_Hint: See_ [_https://getbootstrap.com/docs/3.3/components/#navbar_](https://getbootstrap.com/docs/3.3/components/#navbar) _and Lecture 31 for examples on how to accomplish this._)
+
+10.  Page Heading. The page heading that says Our Menu should be centered within the browser window. You must use a Bootstrap class to accomplish this.
+<br><br>
+(_Hint: look for a Bootstrap class that centers text, see_ [_https://getbootstrap.com/docs/3.3/css/#type-alignment_](https://getbootstrap.com/docs/3.3/css/#type-alignment)_._)
+
+11.  Create a single really tall section that will use the Bootstrap Grid and take up the entire width of the browser window (minus some margins, of course) for all views: desktop, tablet, and mobile. To make the section really tall, you can either fill it out with a LOT of text or simply set its height to something like 1000px. It needs to be tall enough to cause scrolling down to be required to view the bottom of the section. Make sure its background color is set to distinguish it from the rest of the content. (_Hint: don't forget to have an element with a class='container' or class='container-fluid' wrapping your grid. Remember that to have the grid do something "always", i.e., no matter what browser window size, use the `col-xs-`... classes. In this case, since we want the section to take up the entire row, use `col-xs-12`._)
+
+
+Both the tablet view and the desktop view of what's graded and required is the same. Here is the mockup illustration of the desktop & tablet version of the site (only required graded parts shown):
+
+ ![Desktop and Tablet](images/desktop.png)
+
+
+Here is the mockup illustration of the mobile view (only required graded parts are shown):
+
+ ![mobile collapsed](images/menu-collapsed.png)
+
+ ![mobile expanded](images/mobile-expanded.png)
+
+
+**&#42;&#42;&#42; REQUIRED GRADED ASSIGNMENT ENDS HERE &#42;&#42;&#42;**  
+<br>
+<br>
+<br>
+<br>
+**OPTIONAL, UNGRADED PORTION IS BELOW:**
+
+**The rest of this assignment is not graded and is optional, but it's good practice, so go for it if you have time. The solution to the optional ungraded portion of the assignment below does NOT have to be submitted.**
+
+1. (OPTIONAL, NOT GRADED) Since in this optional part you will be implementing something more complex than a single section in the Bootstrap grid, remove that section before continuing.
+
+2. (OPTIONAL, NOT GRADED) As in previous assignment, the rest of your site is very simple. It consists of a page heading and 3 sections (all in one row in the desktop view). Each section contains some text. You can make it dummy text/"lorem ipsum", it doesn't matter. How the sections are laid out on the screen depends on the width of the browser window. (_Hint: use the Bootstrap Grid we discussed in Lecture 26 of Module 2 as well as numerous lectures of Module 3, including Lecture 35._)
+
+3. (OPTIONAL, NOT GRADED) Each section should be fairly large in height. You can achieve this by either filling it up with a lot of content text or simply setting its height property to something large like 700px. At the end of each section, provide a link that says "Back to Top". This link should jump the page back to "Our Menu" heading. (_Hint: use a link that points to a section of the page discussed in Lecture 9 of Module 1._)
+
+4. (OPTIONAL, NOT GRADED) Each section should have an h3-based section heading which should be centered within the section. Use the same Bootstrap class you used for centering the page heading to center the section heading. Use the heading names shown in the mockup illustrations, i.e., "Chicken", "Beef", "Sushi".
+
+5. (OPTIONAL, NOT GRADED)Layout: In the desktop view, each of the 3 sections should take up equal amount of space on the screen. As you make the browser window wider or narrower, each section should become wider or narrower.
+<br><br>
+(_Hint: use `md`-based grid column classes as discussed in Lecture 26 and Lecture 35 among others. It's a 12 grid-based system, so 3 in a row means each grid will take up 4 grid cells, i.e., `col-md-4`._)
+For a visual reference of this view, see the desktop mockup illustration below.
+
+6.  (OPTIONAL, NOT GRADED)Layout: In the tablet view, the first 2 sections should be in the first row and be of equal size. The 3rd section should be in the second row and take up the entire row by itself.
+<br><br>
+(_Hint: use 'sm'-based grid column classes and remember that you don't really need to define a separate 'row' class as you can achieve this layout within a single Bootstrap 'row' as discussed in Lecture 26 and Lecture 35, among others. To have 2 sections take up an entire row, i.e., all 12 columns, each one should take up 6 columns. To make the 3rd section take up the entire width of the browser window, i.e., 12 columns, use `col-sm-12`._)
+<br><br>
+For a visual reference of this view, see the tablet mockup illustration below.
+
+7.  (OPTIONAL, NOT GRADED)Layout: In the mobile view, each section should take up the entire row.
+<br><br>
+(_Hint: use `xs`-based grid column class. Since you need to take up the entire row, use `col-xs-12`._)
+<br><br>
+For a visual reference of this view, see the mobile mockup illustration below.
+
+8.  (OPTIONAL, NOT GRADED) Link the menu items "Chicken", "Beef", "Sushi" from the mobile-only menu drop down to jump to the part of the page those sections correspond to.
+
+
+
+**MOCKUP ILLUSTRATIONS ARE BELOW:**
+
+**Please NOTE: these mockup illustrations show parts that are optional and not graded for this assignment. Please refer to the requirements above to confirm what parts of the mockup are required and graded and what parts are optional.**
+
+Here is the mockup illustration of the desktop version of the site: ![Desktop - optional](images/desktop-optional.png)
+
+Here is the mockup illustration of the tablet version of the site:   
+
+![Tablet - optional](images/tablet-optional.png)
+
+
+Here is the mockup illustration of the mobile version of the site with the menu dropdown NOT open (on the left) and menu drop down open (on the right):
+
+![Mobile - Optional (Closed)](images/mobile-optional-collapsed.png)
+![Mobile - Optional (Open)](images/mobile-optional-expanded.png)

Module Coding assignment solution-4. md

@@ -0,0 +1,18 @@
+YOU HAVE A CHOICE!
+
+If you want a slightly more challenging assignment, use the code in the “harder”
+folder as your starting point. If you want a slightly less challenging
+assignment, use the code in the “easier” folder as your starting point.
+
+The difference between the two starting points is that in the “easier”
+starting point, there are a few steps that are already completed for you.
+
+Harder:
+If you want a slightly more challenging assignment, copy all the contents of
+the ‘harder’ folder into your newly created solutions container folder for
+this assignment, e.g., ‘module4-solution’.
+
+Easier:
+If you want a slightly less challenging assignment, copy all the contents of
+the ‘easier’ folder into your newly created solutions container folder for
+this assignment, e.g., ‘module4-solution’.

Module Coding assignment solution-5.md

@@ -0,0 +1,63 @@
+# Module 5 Coding Assignment
+
+Coursera course: [HTML, CSS, and Javascript for Web Developers](https://www.coursera.org/learn/html-css-javascript-for-web-developers)
+
+Last assignment and you are DONE!
+
+**Time to complete:** About 30 minutes.
+
+**Ask questions in Discussions if you get stuck! We are all learning, and going through getting stuck and then unstuck (even with someone's help) can be a very valuable learning experience!**
+
+**Summary:** In this assignment, we are going to have a bit of fun with our built restaurant web application. The front page of our web app contains 3 clickable tiles: Menu, Specials, and Map. If you click on the Specials tile, you will be taken to a single category page where all the menu items that belong to the Specials menu category will be shown. Your task in this assignment is to alter this behavior such that when the user clicks on the Specials tile, the web app takes the user to a random single category menu page, listing menu items in the category, be it "Lunch", "Dinner", "Sushi", etc. That way, any random category can become the Specials! What fun! (not! :-) )
+
+In order to accomplish this, we need to change the home HTML snippet and, besides pulling it dynamically from the server, also insert a random category `short_name` into the function call of the following code. Previously, the code to send the user to the "Specials" category was this:
+
+```html
+<a href="#" onclick="$dc.loadMenuItems('SP');">
+```
+
+For this assignment, we changed this line to prepare it for a random category `short_name` to be this:
+
+```html
+<a href="#" onclick="$dc.loadMenuItems({{randomCategoryShortName}});">
+```
+
+Here is what you will need to complete the assignment:
+
+1. (If you haven't already) Create a GitHub.com account and a repository that you will use for this class.
+
+2. (If you haven't already) Follow the Development Setup Video (beginning of Module 1) instructions on how to create a repository and set it up such that you can host and view your finished web pages on GitHub Pages, i.e., GitHub.io domain name. You will need to provide that URL for your peer review.
+
+3. Create a folder in your repository that will serve as a container folder for your solution to this assignment. You can call it whatever you want. For example, `module5-solution` or `mod5_solution`, etc.
+
+4. You will need to download the starter files for this project and copy them into your solution container folder (e.g., into 'module5-solution'). Since assignments and starter code get updated from time to time, don't assume that you have the latest version already on your system. The best way to ensure that you are working with the very latest starter code is either 'git clone' the `fullstack-course4` repository into a new directory OR, if you've already done 'git clone' previously, you can simply open up your command prompt (cmd on Windows or Terminal on Mac), navigate to the folder where the `fullstack-course4` repository was previously cloned into and do: `git pull`
+<br><br>
+This will update your local repository with whatever changes have been made since the last update.
+<br><br>
+**As a reminder, the full repository URL is:
+https://github.com/jhu-ep-coursera/fullstack-course4**
+
+5. Once you update your repository, copy all the contents of the `fullstack-course4/assignments/assignment5/assignment5-solution-starter` folder into your newly created solutions container folder for this assignment, e.g., `module5-solution`.
+<br><br>
+Once that's done, you are ready to start coding the solution.
+<br><br>
+**NOTE: the provided code will not run. It is up to you to follow the instructions to get it to run.**
+
+6. You are NOT allowed to change the `home-snippet.html` file. Any adjustments to the value of `randomCategoryShortName` property needs to be done in Javascript code.
+
+7. There are 4-5 fairly simple steps to implement the required functionality.
+  * Open up `js/script.js` file.
+  * Find TODO: STEP 0, and follow the instructions until you are done with TODO: STEP 4.
+<br><br>
+If you've watched the lectures, the code should be very familiar to you.<br><br>
+
+8. Once you are done, verify that the desired functionality is working correctly. Use Browser Sync or deploy your solution to GitHub pages.
+  * Load the home page in the browser.
+  * Click on the Specials tile. A single page category with a list of menu items for **some** category should appear.
+  * Click on the restaurant logo to go back to the home page.
+  * Click on the Specials tile again. Most likely, a different single page category page will be shown.
+<br><br>
+Repeat this several times to make sure that most of the time you see a different single category page.
+<br><br>
+
+9. That's it!

datasharing.txt

@@ -0,0 +1,2 @@
+hello world
+hello coursera