Question
In: Computer Science
For this exercise, consider the situation of developing the “New Appointment” page for a calendar app....
For this exercise, consider the situation of developing the “New Appointment” page for a calendar app. In this scenario you are tasked with just the HTML — web designers will style the page with CSS, and the back-end developers will write the logic that connects it to the database. You will be graded on your ability to use HTML correctly, not on your artistic or creative ability. Feel free to make any creative modifications to the page, as long as each of the HTML elements is present and used correctly. When you submit your assignment, include the following: 1. A single HTML5 file called appointment.html 2. A screenshot of your page with all elements in place 3. A screenshot showing that your page has successfully validated The screenshots can be submitted as individual JPG/PNG/GIF files or pasted into a Word file. Design Specification The exercise consists of a single HTML file called appointment.html, containing the following: ❏ Aelement containing the following: ❏ Aelement, titling the page “New Appointment” ❏ At least two tags — one with your name, and one with your CWID. ❏ A pagecontaining the following elements. ❏ A page
. Theshould contain the following: ❏ The page’s title, “New Appointment”, within an appropriate heading tag (e.g.
). Page 1 of 4 ❏ A
element containing an unordered list (
- ) with list items (
- ) containing links to the following pages: ❏ My Account ❏ My
Calendar ❏ My TODO List ❏ Today’s Schedule Note that you will not
actually create these four pages. In the hyperlinks, set the href
attribute to point to “#”. (You may need to look back to chapter 2
to remember how to create unordered lists and hyperlinks.) ❏ Afor
entering appointment details using the POST method. Each input
should have an appropriate name and/or id attribute, and be wrapped
in a tag containing an appropriate label. Inputs that accept text
from the user should have appropriate placeholder attributes. The
form should include the following s: ❏ A text input for the
appointment title ❏ A text input for the appointment location. ❏
date and time inputs for the appointment’s start date, start time,
end date, and end time. ❏ A color input for color-coding the
appointment ❏ A for the appointment description. The should have a
width and height specified. ❏ Either radio button inputs or a
element for appointment privacy. The privacy options should be
“public”, “shared”, and “private”. The user should only be able to
select one privacy option at a time. ❏ Buttons to submit and reset
the input. ❏ A page
containing a copyright notice (using the © special character) and any other information you feel is appropriate. Be sure to use proper HTML5 form input types, as discussed in section 3.2 of your textbook. All inputs should be named and labeled appropriately. Be sure to validate your page using one of the HTML validators listed in chapter 1 of the textbook, such as https://validator.w3.org. (Note that you might see several warnings along the Page 2 of 4 lines of “the [such-and-such] input type is not supported by all browsers.” The assignment is about using HTML5 inputs, not cross-browser compatibility, so you can ignore these warnings, but all errors and all other warnings must be corrected.
Solutions
Expert Solution
Note: Please do not forget to update the HTML code with your name and CWID.
Please find all the required documents as below:
appointment.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>New Appointment</title>
<meta charset="UTF-8">
<meta name="author" content="Name">
<meta name="description" content="CWID">
</head>
<body>
<ul>
<li><a href="#">My Account</a></li>
<li><a href="#">My Calendar</a></li>
<li><a href="#">My TODO List</a></li>
<li><a href="#">Today’s
Schedule</a></li>
</ul>
<form action="/" method="post" target="_blank">
<label for="title">
Title:
<input placeholder="Appointment Title" id="title"
type="text" name="appointment-title">
</label><br/><br/>
<label for="location">
Location:
<input placeholder="Appointment Location"
id="location" type="text" name="appointment-location">
</label><br/><br/>
<label for="start-date-time">
Start Date and Time:
<input id="start-date-time" type="datetime-local"
name="appointment-start-date-time">
</label><br/><br/>
<label for="end-date-time">
End Date and Time:
<input id="end-date-time" type="datetime-local"
name="appointment-end-date-time">
</label><br/><br/>
<label for="color-coding">
Color Code:
<input id="color-coding" type="color"
name="appointment-color-code">
</label><br/><br/>
<label for="description">
Description:
<textarea placeholder="Appointment Description"
id="description" name="appointment-description" rows="10"
cols="30"></textarea>
</label><br/><br/>
Privacy:
<input type="radio" id="privacy-public"
name="appointment-privacy" value="public" checked> Public
<input type="radio" id="privacy-shared"
name="appointment-privacy" value="shared"> Shared
<input type="radio" id="privacy-private"
name="appointment-privacy" value="private"> Private
<br/><br/>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<footer>© Copyright 2019</footer>
</body>
</html>
HTML Page Output:
Screenshot of the code validation:
venereology answered 2 hours agoRelated Solutions
Simple Painting GUI Apps You are just developing the GUI app. Your mission in this exercise...
1) An App developing company recently developed a new game that can be played on the...
Assignment 4 - Writing Exercise - Developing a mobile phone app On-the-Go Software, a start-up company...
Take Five Systems, a new start-up, is developing a new iPhone application (“app”) and provides you...
1. Take Five Systems, a new start-up, is developing a new iPhone application (“app”) and provides...
In developing patient appointment schedules, a medical center wants to estimate the mean time that a...
In developing patient appointment schedules, a medical center wants to estimate the mean time that a...
In developing patient appointment schedules, a medical center wants to estimate the mean time that a...
a. The appointment of a New Chief Executive Officer in itself is an initiation of strategy....
Lisa and Page are equal partners in the Law Lady Partnership, and they are calendar year...
- Timmins Company of Emporia, Kansas, spreads herbicides and applies liquid fertilizer for local farmers. On May...
- Explain why selection sort can be viewed as a divide and conquer algorithm. Compare selection sort...
- Calculation of individual costs and WACC Dillon Labs has asked its financial manager to measure the...
- Research and explain the purpose of one law that governs computer access, intellectual property (IP), or...
- 2018 2017 2016 2015 2014 Average Sales A 4.22% 2.22% 2.40% 6.99% 3.96% B 6.53% 6.30%...
- The family of your patient does not want you to tell the truth to the patient...
- 1. Briefly discuss the sub-sectors within the government sector 2. What are the 8 divisions of...