Question: Create a mobile web site (Create a new folder to hold all files/folders)) index.html css folder that includes a personal css file js folder that
Create a mobile web site (Create a new folder to hold all files/folders)) index.html css folder that includes a personal css file js folder that includes your personal .js script file images folder to hold any images needed for exercise Enter YOUR NAME in the
tags AND your name and student number in a comment at the top of the index.html Header area that includes Exercise #1 for SYST24444 Create a 1x3 grid (3 columns) using CSS Grids (40% 25% 35%) / Include appropriate padding and a separate background colour for each section. Column #1: Include input fields for the following... Text field (with labelling) to retrieve a student's FIRST name with the default set as your FIRST name Text field (with labelling) to retrieve a student's last name with the default set as your LAST name Text field (with labelling) to retrieve a student's id (number) with the default set as your id (number) A checkbox for country designation with no check designating a "Domestic" student and checked designating an "International" student. A text field should be placed beside or under the check box with the text field containing either "Domestic" or "International" depending on the state of the checkbox. Must be set on load and changed whenever the checkbox is selected. Column #2: Include buttons for the following... An image button to save data to local storage: First name storage (your username appended with key/ex. doejFirst) that includes the data entered in the first name input field Last name storage (your username appended with key/ex. doejLast) that includes the data entered in the last name input field ID storage (your username appended with key/ex. doejID) that includes the data entered in the ID input field Based on the checkbox state, save either "Domestic" or "International" into storage (your choice of key name) An image button to retrieve data from local storage and place data retrieved in Column #3 (see below for output formatting); Must include an alert box to inform the user the image button was selected. An image button to selectively clear the country designation key/value pair in local storage. Must include an alert box to inform the user the button was selected. Column #3: Include output areas for the following that are filled in when retrieve button is selected from Column #2... An output area for name; Must use ES6 to include: Student Name: last name, first name An output area for student id (number); Must use ES6 to include: Student Number: student id An output area for country designation; Must use ES6 to include: Domestic OR International (based on value from local storage) Student Footer line that includes YOUR name/YOUR Student number/YOUR campus
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
