SP FED CA2 Bootstrap and JavaScript for 2023-2024

To Do for Pre-Submission 5% Marks

  • Nav bar
  • Page header
  • Use of columns
  • Responsive to 3 breakpoints

Suggestions for the 4th page

Either:

  • Create a user registration form for a Save the Earth newsletter.
  • Create a feedback form about your page.

Suggestions for using JavaScript in your website

Either (or try doing all of these):

  • Have a clock that shows the current time (Cengage Lesson 9 Coding Challenge 1).
  • Have a countdown timer where you can set the start time (make use of a Boostrap form input control and a submit button, and see the code in Cengage Lesson 9 Coding Challenge 2).
  • Your Bootstrap form on the 4th page has a submit button. When this button is clicked, all the information that was filled out in the form is shown in an alert window.

Notes

  • To create a submit button, you can use the onclick event handler, so that clicking the button will run some JavaScript code. See https://www.w3schools.com/JSREF/event_onclick.asp for sample code.
  • Once you create a submit button, you can omit the action= attribute in the form tag, because the button handles the form processeing, instead of sending the form data to the URL given by the action attribute.

Using JavaScript properties to amend HTML (this is for the "JavaScript properties" in the CA2 rubrik)

  • These are properties such as .value '.innerHTML', etc.
  • To acess/amend these properties, we often use document.getElementById("someId").value and document.getElementById("someId").innerHTML (see Cengage Chapter 9.8).

Reminders

  • Fill out and sign the Academic Integrity form and submit it together with your assignnent.

Some useful resources

Containers

Grid

Columns

Nav bar

Margins and padding

Images

Alerts

Cards

Buttons

Forms

Scrollspy

Hiding elements