559 WebProg Course Site

Exercises & Project for Web Programming

On-campus and Online

  • Quizzes: Due Week 2 | Week 4 | Week 6 | Week 8 => 9 | Week 11 | Week 14

Discussions (7.5% of Course Grade)

Discussions will be conducted online, either using Sakai, because the online format leads to everybody contributing and better comprehension of the content. There will be two graded discussions and detailed instructions will be provided in the discussion introduction.

  • Topic 1: Learning How to Interact with Other Developers, using Online Resources AND Meeting with Local Developers by joining a (Virtual) MeetUp or Webinar(5% of Course Grade) - Week 12
  • Topic 2: Reflections on Learning How to Create Web Applications (2.5% of Course Grade) – Week 14

Quizzes (7.5% of Course Grade)

There will be six quizzes that are related to content to be learned to create the exercises and project.

The quizzes will be "open book" and due on Sunday and one week before the due date of the related exercise or project.

The five quizzes with highest scores will contribute to the quiz grade and each quiz will have a bonus question.

Quizzes will be accessible via the Sakai course site.

  • Quiz 1: HTML and CSS - Week 2
  • Quiz 2: JavaScript Essentials - Week 4
  • Quiz 3: Responsive Design using JavaScript Front-End Framework - Week 6
  • Quiz 4: Modular, Reusable User Interface Components using JavaScript Front-End Framework - Week 8 => 9
  • Quiz 5: Single Page Application using Back-End Framework to Exchange Data - Week 11
  • Quiz 6: MEAN Stack Development - Week 14

Exercise 1: HTML, CSS and JavaScript Basics – Style Web Page using CSS and Add Interactivity using JavaScript (7.5% of Course Grade)

  • Create HTML5 Layout and Internal CSS
  • Header | navigation | content | sidebar | footer
  • Image and content flows around it and image has a rollover effect (images to use)
  • Sidebar right floated and other content flows around it
  • Constrain overall page width to 800px
  • Layout Sketch
  • Add Buttons
  • Linear | Left Sidebar | Center Sidebar | Right Sidebar (assign unique ids)
  • Layout Sketch
  • Add Interactivity to Buttons (onclick) using JavaScript
  • Create function “changeDisplay” and specify parameter = button name
  • Create Global Array and increment array when specific button is pressed
  • Button displays Counter by updating button text to show how many times it has been pressed
  • Only increment counter if different button has been pressed
  • Control Layout using JavaScript
  • Create “Linear Flow” Layout:
  • Click on “Linear” button will create “linear flow” layout by assigning CSS rules to specific elements so that the page elements are displayed in the order listed in the actual code.
  • Create “Right Sidebar” Layout:
  • Click on “Right Sidebar” button will create “right sidebar” next to 2nd content by assigning CSS rules to specific elements
  • Sidebar needs to be 25% of page width
  • Create “Center Sidebar” Layout:
  • Click on “Center Sidebar” button will create “center sidebar” that floats next to 1st content and 2nd content flows around sidebar by assigning CSS rules to specific elements
  • 1st content needs to be 30% of page width and needs an appropriate right margin
  • Sidebar needs to be 25% of page width
  • Create “Right Sidebar” Layout:
  • click on “Right Sidebar” button will create “right sidebar” next to 2nd content by assigning CSS rules to specific elements
  • Sidebar needs to be 25% of page width
  • Screencast of how page layout can be controlled and needs to appear
  • Extra credit: make sure that images in content areas do not "stick out" in "Center Sidebar" layout

Exercise 2: JavaScript Essentials – Control Appearance and Interactivity of Web Page using JavaScript (15% of Course Grade)

  • Google Maps API
  • Insert two map objects using the Google Maps API: a) Rutgers College Ave, b) Hometown or Favorite City.
  • Center map and set zoom level so that all the location markers are visible.
  • Make sure maps can not be dragged and zoomed (hint: set min and max zoom to zoom setting).
  • Create Data to map
  • Identify at least 8 locations to map for each map and at least 2 locations for each category and at least 4 location categories.
  • Specify location object that stores: location name, category, short info, address, lat, lng, map to use.
  • Create function that computes geocode (lat, lng) for an address using Google Maps Geocoder
    and call this function generate needed geocodes and then place markers.
  • Create array that contains location objects for each map.
  • Add Markers
  • Place locations on their respective maps and take into account settings of form controls.
  • Use different marker shapes or icons for different categories.
  • Create Info Windows
  • Format location info as follows: a) h2 element used for location name, b) p element for category and floated to left;
    c) p element for short info; d) 2px border surrounds info presented, with the left border 10px (hint: best to place h2 and p elements inside of div and apply border property to div).
  • Add Form to control map appearance
  • Radio buttons: control whether category info is shown in Info window.
  • Checkboxes: control which marker categories are shown in both maps.
  • Create JS function to check the status of the form elements and updates what is shown in the maps.
  • Screencast of how the maps can be controlled via the form elements
  • Code Walkthrough Screencast: examine working Ex2 code that uses a recursive function AND setTimeout to geocode locations and shows how radio and checkboxes can control which categorical markers are shown and what is shown in a marker's info window in the two maps.
  • setTimeout function: https://www.w3schools.com/jsref/met_win_settimeout.asp
  • Extra Credit: Add Map Feature of your choice
  • You decide what else to display or what kind of effects to add in the two maps.

Exercise 3: Responsive Design using JavaScript Front-End Framework – Create Responsive Web Page using Bootstrap.js (12.5% of Course Grade)

  • Create Responsive Grid Layout using Bootstrap 4
  • Create responsive column layout as outlined in these wireframes for large, medium, small displays.
  • Create first needed structure of fluid containers and rows that contains sufficient number of columns.
  • Next, apply need col-SIZE-SPAN to the columns.
  • Resources
  • bootstrap_grid_basic | grid_examples
  • Learn from: w3Schools Band Page v3 bootstrap_theme_band | bootstrap/tryit
  • Create Collapsible Navigation with Dropdown
  • Place navigation in 1st row inside of nav element
  • Home | Theme 1 |Theme 2 | Theme 3 | Theme 4 + Dropdown (Theme 4.1, Theme 4.2, Theme 4.3)
  • Resources
  • Navigation  navbar 
  • Dropdowns  dropdowns
  • Collapse  collapse
  • Add Slideshow - images to use
  • Place slideshow with at least four images and title & captions in 2nd row.
  • Resources
  • Carousel  carousel
  • Control image size: .carousel-inner img { width: 100%; height: 100%;}
  • Add Text Content
  • In 3rd row, add content for two nested column and sidebar (see wireframes)
  • Add Cards and Circle Images images to use
  • Place 6 Thumbnails in 4th row and 4 Circle Images in 5th row.
  • Resources
  • Cards  bootstrap_cards
  • Images  images | class="img-fluid"
  • Add Toggleable / Dynamic Tabs
  • In 1st nested column of 3rd row, place tabbed panels.
  • Resources
  • Tabs  nav_with_tabs
  • Add Table
  • In 1st nested column of 3rd row, place table inside 2nd tab of tabbed panel.
  • Resources
  • Table tables
  • Link Collapsible Content to Images
  • Resources
  • Collapse  collapse
  • Screencast of responsive grid layout and placement of slideshow, images, tabbed panel and table and collapsible content linked to images.
  • Extra Requirement for Students who took MI 550 InfoTech in Fall 2018 or After:
  • Create Second Responsive Page that has a (very) different responsive layout than the first page and describe in the opening paragraph the layout requirements.
  • Add Three Bootstrap Features of your choice that have not been required so far and list them in the second paragraph.
  • Extra Credit: Add Bootstrap Feature of your choice
  • You decide what other Bootstrap feature to incorporate (mention when submitting exercise which extra feature you added).

Exercise 4: Design of Modular, Reusable User Interface Components using JavaScript Front-End Framework – Create Web Page Components using React.js (15% of Course Grade)

  • We will build on the noteboard application created in the LinkedIn Learning course Learning React in Week 8 and you need to view the videos marked in green and study its code in detail to see how subcomponents are added and use these code patterns to extend the noteboard application so that comments can be added to a note.
  • If have not yet installed Node.js, you need to install npm from https://nodejs.org/en/.
  • We will use create react app to create react.js application: npm install -g create-react-ap
  • Make sure you are in ex4 folder inside of terminal: create-react-app bulletin-board
  • cd into the bulletin-board folder to launch application: npm start
  • Make sure to consult the Week 9 Handout which contains useful reminders and hints.
  • Building on the exercise files provided by the LinkedIn Learning course: make sure to use the Exercise Files > Ch05 > 05_03> completed> bulletin-board > src as your starting point.
  • There is a bug in the Board.js file where you need to use {note.id} instead of the current {i} to specify key and index when you create the Note component: <Note key={note.id} index={note.id} etc >
  • You will add the new functionality to the note application and using coding approaches and patterns already used in the note application and so it is worth reading through the code to make sure you understand what is being done where :)
  • Change note appearance when clicking on “Done” checkbox
  • Add checkbox in Note and onChange, default and state functionality
  • To change appearance of note, create function that returns style object with the needed CSS properties
    and then use styleToUse variable to specify style property in <div className="note" style={styleToUse}>.
  • Add comments to a note
  • Add “Add Comment” button in Note.
  • Specify onClick and addComment function:
  • Create object with id and comment properties
  • Create nextCommentId function
  • Add comment obj to comments array, which is state of Note
  • Create NoteComment component:
  • Need to specify render function
  • The text that appears based this.props.children needs to include id of comment, which is stored in comment object in comments array.
  • Add Comment component to Note:
  • eachComment function: create JSX for Comment component
  • Add current comments to note uisng {this.state.comments.map(this.eachComment)}
  • To be able to specify input to addComment(“Comment”),
    use onClick={() => this.addComment("Comment")}
  • Remove comments from a note
  • Add Delete button to Comment component: <button onClick={this.removeComment}>X</button>
  • Specify remove function: this.props.onRemoveComment(this.props.id)
  • Specify onRemoveComment(id)
  • this.state.comments.filter(comment => comment.id !== id)
  • Need to update state of comments array
  • Recap: Comment.remove calls
  • Note.props.onRemoveComment (id) and it calls
  • In Note component:
    <Comment onRemoveComment> calls
  • removeComment function
  • Hint: study and emulate the code that adds and removes a note component from the board component.
  • Submit
  • Board.js + Note.js + Comment.js + index.js + index.css
  • Extra Credit: Responsive layout of notes in columns
  • Add links to needed external bootstrap files and/or install bootstrap via node.js.
  • Notes Layout : 6 columns for xl | 4 columns for lg | 3 columns for md | 2 columns for sm.

Exercise 5: Design Single Page Application using Back-End Framework to Exchange Data – Create Single Page Application using JSON, Node.js and Express.js (15% of Course Grade)

  • We will build on the site using Node.js and Express.js that is created in Chapter 5 and Step 11 in the LinkedIn Learning course Building a Website with Node.js and Express.js in Week 11 and study its code in detail to see how it needs to be customized so that a JSON file with a different structure and properties can used to create the routes and templates.
  • Make sure to consult the Week 11 & 12 Handouts which contains useful reminders and hints.
  • Make sure to install the needed code plugins using Node Manager in the Terminal:
  • $ npm install --save express
  • Customize Files
  • Building on the LinkedIn Learning files, you will need to customize all the relevant files (.js and .pug files) so that a new JSON file can be used and also make it possible to incorporate video and map features on certain pages. Again we will build on the existing code and so it is worth reading through the code to make sure you understand what is being done where :)
  • Examine items.json structure and in general replace “speaker” with “item”, yet you need to understand the code before making the substitution, and update specified parameters.
  • Use id property in JSON file to specify which specific highlight to show on the individual Item page.
  • Responsive layout
  • Use Bootstrap 4: you need to convert the provided Bootstrap 3 code to Bootstrap 4.
  • On the index page, the portion of the page that displays the highlight images and their site text, needs to have the following layout: 4 columns for lg | 3 columns for md | 2 columns for sm.
  • On the items page that shows all items, the image and video are shown in two column layout for display sizes greater than sm. Further, title / location is shown above the image & video pair and the "category" of the item below image & video pair (as shown in the screencast mentioned below).
  • On the item page for a specific item, as specified by the id, the image needs to be at least 800px wide and the title / location above image and the text info needs to be below it.
  • Below the image and text, the video and map need to be in a two column layout for display sizes greater than sm.
  • Embed Video on All Items / Individual Item pages
  • Add property "videoEmbed" to data JSON file for each item and the value is based on the value for the "video" property by replacing "watch?v=" with "embed/".
  • Access YouTube embed info in data JSON file and use in <iframe width="TBS" height="TBS" src="TBS"></iframe>, which needs to specify in format used by Pug.
  • Embed Google Map with Marker and Specified Zoom level
  • In .pug file that controls individual item page, use YOUR Google Maps API Key and the Pug Google Map mixin to embed a map with a marker related to location of item and set a zoom level.
  • The lat and long / location info needs to be included in the data JSON file (and the Google Geocoder does not need to be used :) so that it can be incorporated in the Pug mixin that emdeds the Google Map.
  • The zoom level needs to be set so that the whole area covered by items is visible.
  • How to Submit
  • Create ZIP file that contains the "public" and "server" folders and their subfolders.
  • Submit ZIP file.
  • Screencast of the responsive layout of the site using Node.js and Express.js to display the contents of JSON data file ("highlight(s)" mentioned are equivalent to "item(s)" and you can ignore reference to GitHub :)
  • Extra Credit: Create functionality so that one can display highlights grouped by category and/or specific category.

    • Term Project

    Full Stack Development – Create Web Application using React.js, Node.js and Expess.js to Connect to MongoDB Database (20% of Course Grade)

    • We will create a web application that uses React.js, Node.js and Express.js to connect to a MongoBD Database, first on your computer and then by hosting the application online using GitHub and Amazon Web Services (AWS). We will use the LinkedIn Learning course React: Creating and Hosting a Full-Stack Site in Week 12 and study its code in detail so that we can host such an application on our own AWS online server.
    • Host on Your Local Computer:
    • Create React Front End.
    • createElement Node Back End.
    • Set Up MongoDB.
    • Connect Front and Back Ends.
    • Host on Your Remote AWS Server:
    • Prepare app for release.
    • Push code to Your GitHub account
    • Create Your AWS instance and and SSHing into it.
    • Set up Your AWS instance.
    • Run full-stack app on Your AWS instance.
    • Submit: URL of application on Your AWS instance.