website/webdevelopment/gsfullstack/project-Windows11.js

import { addBanner, addArticle, addHeader, addParagraph, addSubHeader } from '/scripts/article.js';
import { addInset, addInsetList, addInsetCodeListing, addInsetBulletList } from '/scripts/inset.js';
import { addImageWithCaption, addButtonGroup } from '/scripts/visuals.js';
import { menu } from '/scripts/web_dev_buttons.js';

const main = document.querySelector("main");
main.append(addBanner("<a href='https://www.linkedin.com/learning/getting-started-as-a-full-stack-web-developer?contextUrn=urn%3Ali%3AlyndaLearningPath%3A59370541498ec352a683231c'>Getting Started as a Full Stack Web Developer</a>", "Tom Geller", "Course Project: Hotel Reservations, Part 1"))
main.append(addArticle())
const article = document.querySelector("article")
article.append(addHeader("Create an HTML Reservations Form"))
article.append(addParagraph("Taking an existing website and enhancing it is a typical job for a web developer so we are going to look at how to do that by adding a reservation form to the website for the <a href='https://landonhotel.com/'>Landon Hotel</a>.  This link takes you to the live website but I also have two copies of the website saved in a folder called project within the course folder.  One is the website before we start to update it and you can see that <a href='./project/begin/index.html' target='_blank'>here</a>.  The other is the website at the end of the project - or it will be when all of the modifications have been completed.  For now, it is identical to the site at the start of the project.  These are the files I will be modifying - essentially, it is the working copy of the site."))
article.append(addParagraph("Modying the CSS is usually done incrementally so it can take a while to complete.  Usually, the process would be something like this"))
article.append(addInset("Decide how you wnat the page to look."))
article.append(addInset("Start by modifying the CSS in the browser until it looks the way you want it to."))
article.append(addInset("When you like the changes, write that CSS to the file - webdev_course.css."))
article.append(addInset("Repeat until you have the site looking the way you want it to!"))
article.append(addParagraph("Before we start to do that, it is worth noting that the div containing the code for the reservation form has an id of reservations and this is useful because it provides us with a way to target all of the code in that block.  For example, if we want a specific font just for the reservation form, we can use that id as our selector when adding our CSS rules."))
article.append(addParagraph("That said, lets now see a practical demonstration of this by amending the background colour for the reservation form.  The image in figure 9 shows our website with the reservation form added and the Developer tools are docket to the right.  Er "))
article.append(addImageWithCaption("./images/unstyled.png", "Figure 9 - the website before we start to style the reservation form."))
article.append(addParagraph("Notice that we can see the main site with the reservation form at the top and we can also see the HTML to the right and below that, our CSS rules.  The interesting thing for us, at the moment, is the element.style (or element).  In this context, element is the currently selected element and that might be because we have selected the element in the HTML, we have right clicked the element and selected inspect to open the Developer Tools or we have picked it using the Pick element tool."))
article.append(addParagraph("Notice that there is a target icon between the elements curly braces which we don't need here but it allows you to highlight all elements with a given selector although we don't need that here.  We want to change the background colour for our reservation form, so we want to make sure it is selected before we add the style."))
article.append(addParagraph("The first task is to decide where to put the registration form.  At this point, it is worth reminding ourselves that we can use the Developer Tools to modify the HTML (andd CSS) on a site to see what effect this has without actually changing the files on the web server so it's useful for experimentation."))
article.append(addParagraph("We want to put the form right at the top of the page so we will start by inserting a little bit of text.  The reason for doing that is that we can see where this appears in the browser and if it appears where we want it to, this tells us that if we insert the code in the same place in our files on the server, it will also be in the right place."))
article.append(addParagraph("To do this in Firefox, we can right click an element in the browser and selecy Inspect.  The HTML is under the Inspector tag.  Here, we can right click on the body tag and select Create New Node.  This will place a new div element at the end of the body and we can move it to where we want it to appear in HTML.  Figure 9 shows the Landon Hotel website with the Developer Tools open."))
article.append(addImageWithCaption("./images/developer_tools.png", "Figure 9 - the Landon Hotel website with Developer Tools."))
article.append(addParagraph("As you can see in the image above, in the right hand pane we have the Developer tools showing the div I inserted which displays the words, Reservation Form.  On the site itself, we can see the words Reservation Form right at the top, just where we want to put our form.  If we open up our working copy of index.html, we can insert the code for the reservation form.  If we save the file and then open it in a browser, we can see that the form is at the top of the page."))
article.append(addParagraph("The form is in the right place but it doesn't look great.  Next, we will look at making it look a bit better with CSS."))
article.append(addHeader("Style the Reservation Form with CSS"))
article.append(addParagraph("Working with CSS is a large part of what front-end developers do.  Note that the CSS stylesheet for this site is the original stylesheet created for the real Landon Hotel website.  We don't want to make any changes to that, so will create a new style sheet called webdev_course.css and we'll put any CSS we want to add to the site in that file"))
article.append(addParagraph("We will put this in the CSS folder which already contains the existing CSS for the site so we can copy the link to that stylesheet and just change the name to point it to our new stylesheet, like this."))
article.append(addParagraph("We want to change the background colour so in the element.style, we add the rule:"))
article.append(addInset("element {	background: darkgray; }"))
article.append(addParagraph("We see the change immediately in the browser and we might decide that dark gray isn't really dark enough so we might try adding the colour as #333"))
article.append(addParagraph("Remember that this course isn't teaching CSS, but rather is demonstrating processes that a web developer would follow, so don't be concerned about where this number comes from.  One of the nice things about doing this in the browser is that you can experiment and then add any changes that you think are worth keeping to a CSS file on the server to make that change permanent.  The image in figure 10 shows this change."))
article.append(addImageWithCaption("./images/darkgray.png", "Figure 10 - the reservation form now has a dark gray background."))
article.append(addParagraph("You might notice that the background colour makes some of the text difficult to read but that's fine, because we will fix that.  Before we do that, we want to make this change permanent and we want to keep our own styles separate from the styles that are already there so we will add a new stylesheet with the name webdev_course.css.  This goes into the css folder and we link this to our HTML file with"))
article.append(addInset('&lt;link rel="stylesheet" href="css/webdev_course.css"&gt;'))
article.append(addParagraph("We will put this in the header just below the link to style.css.  In this file, we will add a rule.  I mentioned earlier that the div that holds the reservation form has an id of reservations and you can see that in the image in figure 10.  Notice that at the top of the section with the CSS, we have a number of selectors and these are the HTML elements along with their ids that contain this style rule.  To make this clearer, the specific section is shown enlarged in figure 11."))
article.append(addImageWithCaption("./images/selectors.png", "Figure 11 - the selectors to which we could add our background colour."))
article.append(addParagraph("The selectors are shown as a natural progression from least to most specific starting with HTML, which contains all the HTML for the page, body, which contains all of the HTML displayed in the viewport, header#intro which contains the div with the reservation form and div#reservations which <strong>is</strong> the div with the reservation form.  In essence, if we add the rule to the last one, it will not affect any of the HTML aside from our reservation form.  If we use header#intro as our selector, it might affect the rest of the header section and if we add it to either body or HTML, it might affect the whole page.  The reason I say might rather than will is because it will only have a visible effect where the background is visible and you can check this by clicking on one of these selectors in the Dev tools - when you do, notice that the rule we applied to reservations is no longer visible - and we can then see what happens if we use one of these other selectors."))
article.append(addParagraph("As it happens, there is very little visible change and there are a couple of reasons why this might be the case.  The first, as I mentioned, is where the background is not visible.  The second is that other sections may already have CSS rules that override this."))
article.append(addParagraph("If you scroll down the page, there are a couple of sections with headings of Guest Rooms, Dining Area and the footer that have a dark gray background.  If we remove the rule from body/html, the first two revert to a background colour of white and the footer remains the same.  The footer actually has a rule making its background dark gray (actually, the colour there is specified as #333333)."))
article.append(addParagraph("That was just intended as an interesting aside, in reality, we only want to affect the reservation form so we will use its id selector which means our rule will look something like this."))
article.append(addInset("#reservations {"))
article.append(addInset("	background-color: #333;"))
article.append(addInset("}"))
article.append(addParagraph("So that's the process we follow in order to style our website and the rest of the rules can be seen in the completed <a href='./samples/webdev_course.css.html' target='_blank'>webdev_course.css</a> stylesheet.  As a result, the reservation form now looks much better as shown in figure 12."))
article.append(addImageWithCaption("./images/styled_form.png", "Figure 12 - the reservation form with all of the styles applied."))
article.append(addHeader("Improve the Reservation Form with JavaScript"))
article.append(addParagraph("Now that we have the reservation form looking the way that we want it to, we want to use some JavaScript to make a slight improvement to the form with JavaScript.  If you look at the page as shown in figure 12, it looks perfectly fine.  However, notice that the date inputs are showing the format in which it expects the user to input the date.  In practice, you will often see that forms like this set a default option as the date and this might be, for instance, today's date as the start date and tomorrow's date as the end date.  We can't set that with JavaScript, however."))
article.append(addParagraph("Before we get into that, let's just remond ourselves of the HTML which was used to set up the date inputs."))
article.append(addInset('&lt;input type="date" id="startres" name="startres"&gt;'))
article.append(addParagraph("We have three attributes.  The first, type, specifies the type of value that the user is expected to enter.  In this case, type has a value of 'date' and as was mentioned earlier, this is why we see the calendar widget when entering a date."))
article.append(addParagraph("The second atrribute is id which has a value of 'startres' and we use the id attribute for a couple of things and in this case, it is being used to allow us to target it with a CSS selector if we need to do that.  The other main reason for using an id is that it allows you to create a URL to jump to the HTML with that id rather than just jumping to the top of the page."))
article.append(addParagraph("The third attribute, name, is the one that we are most interested in here because this allows us to reference the element in JavaScript.  In this case, I will provide the JavaScript code used to set the dates as a complete file and then walk through exactly how it works.  The JavaScript can be seen <a href='./samples/today.js.html' target='_blank'>here</a>.  Bearing in mind the fact that this course doesn't cover JavaScript in any great detail, I will go through this a little at a time and this will hopefully give you some idea of how the process of developing JavaScript works."))
article.append(addParagraph("The JavaScript language provides mechanisms for working with objects and that is what we are doing here.  The value we want to use to populate our input box is a date, so we will work with the date object and we will also use the online documentation which in this case is in the <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date'>MDN Web Docs</a>.  Accessing the documentation is important in that it shows us the format of an instance of Date as well as the methods we can use with it and we will see some of those in a moment.  An important thing to be aware of is that the format does not match the format we want to display in the reservation form so we will need to use the Date methods to extract the parts of the date that we need and we will then assemble these in to the format we want before inserting it in to the HTML document."))
article.append(addParagraph("We start by creating an instance of Date and we will assign that to a varialbe called today like this."))
article.append(addInset("var today = new Date();"))
article.append(addParagraph("So, today now references the instance of Date and we want to extract the three bits of data we will need to create a date in our required format.  For example, we use the getDate method to get the date in the month.  As I write this, today's date is the 1st of August 2022, so the following line of code"))
article.append(addInset("var todayDate = today.getDate();"))
article.append(addParagraph("will return 1.  Similarly, we can use the getMonth() method to return the month and the getYear() method to return the year and these will return 8 and 2022 respectively."))
article.append(addParagraph("One of the interesting things about the Date class is that it will return today's date by default, but you can also have it return a specific date.  We need to get tomorrow's date which is not a specific date since its value will depend on the date on which the code is being run but we can use today's date as an argument in order to get the required date so the code looks like this."))
article.append(addInset("var tomorrow = new Date(+today +86400000);"))
article.append(addParagraph("The argument we are passing to Date is today's date (in other words, the date at the time the code is being run) plus the number of milliseconds in one day and so it returns, for any given date, tomorrow's date.  This time, we reference the date instance as tomorrow and we can similarly use the getDate(), getMonth() and getYear() methods on it and this will return, respectively, 2, 8 and 2022.  Now, this is not quite right for our requirements because we want our dates to have the format dd/mm/yyyy which means that we may need to add a leading zero to the date and month and we can do that with a simple conditional statement like this"))
article.append(addInset("if (todayDate &lt; 10) todayDate = '0' + todayDate;"))
article.append(addParagraph("This takes the 1 we got from applying the getDate() method to today and converts it to 01.  In more general terms, if the date is a single digit, we will convert it to a string with a leading 0.  We use a similar method to convert our month from 8 to 08 and then we do the same for date and month for tomorrow.  We now have three values for today, 01, 08 and 2022 and three for tomorrow, 02, 08 and 2022 so we can now assemble.  For today's date, we do that with"))
article.append(addInset('var htmlToday = todayYear + "-" + todayMonth + "-" + todayDate;'))
article.append(addParagraph("This return a string value, 01/08/2022 and we use a similar command to create a string variable called htmlTomorrow with a value of 02/08/2022."))
article.append(addParagraph("To add today's date to the appropriate input box in the reservation form, we use the command"))
article.append(addInset("document.getElementById('startres').value = htmlToday;"))
article.append(addParagraph("If you recall from the start of this section, I mentioned the fact that we use the name attribute of the HTML element in order to reference the element in JavaScript, but we can also use the id and that is what we are doing here.  The input box containing the 'from', which we want to apply today to has an id of 'startres'.  We are using the getElementById method to return the element with that id, in other words our input box and we are setting its value to the value of today (in this case, 01/08/2022).  We also use a similar method to set the value of the second date input box, which holds the end date for the reservation to set its value to the value we have for tomorrow."))
article.append(addParagraph("In order for this to work, our HTML document is going to have to be able to access this JavaScript which we have placed in a file called today.js so we need to add this line to the file, and we will add that to the end, just after the line that adds in the script.js file."))
article.append(addInset('&lt;script src="js/today.js"&gt;&lt;/script&gt;'))
article.append(addParagraph("If all goes well, we should see something like the image shown in figure 13."))
article.append(addImageWithCaption("./images/default_dates.png", "Figure 13 - the reservation form with our default dates."))
article.append(addParagraph("We will do some more work on the site in chapter 8, so I won't add a link to the finished site just yet, but just be aware that if you were to view the site, it would look similar to what we see in figure 13, but the start and end dates would be adjusted to show the date on which the page was being viewed as the start date and the following day's date as the end date."))
article.append(addParagraph("We went through this section quite quickly, so it is important to stress the fact that using the online documentation is an every day task for a web developer and that applies just as much to experienced developers as it does to beginners.  That doesn't mean that you should be accessing the MDN Web Docs on a regular basis or at all.  You may have a different site that you like to use as a reference site and that's fine.  In practice, you may use different sites at different times and you might also use offline sources such as a good book.  That's not really important, the important point is that you will be looking up JavaScript constructs all the time!"))
main.append(menu("fullstack"))