Roaxnne's Assignment

Roaxanne you are responsible for the cascading style sheets files, which tell the web page how to look as to background color, mobile friendly code, fonts, headlines, table formatting , etc. If you are not familiar with cascading style sheets, click on the link below to study a lesson on our web site. To work with the style sheet files, you need an HTML document. Since the project HTML file is being worked on by Amber. You will use the FlexibleBoxModelTemplate.html file to make improvements to the style sheet files. Let's work with Style6.css First, since that is the one for laptop and desktop computers.

How to get your files

1. Go to your email account.
2. Find the shared email from the project manager referencing dropbox.
3. Click on the go to folder button.
4. You will see all files in the shared folder.
5. The files that you will work on are called Style1.css, Style2.css, Style34.css, Style5.css, Style6.css. and FlexibleBoxModelTemplate.html
6. Click on each to open
7. Show in File Explorer
8. Right-click the file
9. Edit in Notepad++.
10. Now you can add code to the file.
11. Click SAVE. It will go into the Dropbox folder.
12. If you have not made any changes, Notepad++ won't let you save it under the existing name.
13. To remedy this, just put in carriage return somewhere in the file. Then click Save.

To work with Dropbox files already on your computer.

When you make a Dropbox desktop application the files are in the shared folder. It is located at:

In Notepad++, go to File and browse until you see this folder and files.

Then load them into Notepad++

Now you should be able to work with them.

We are going to make some changes to each of the files.

Each Style file represents a screen size.

The files are loaded in the head section of the html document.

Today we will work on Style6.css (resoluton 1281 - 1800 pixels), and Style5.css (1025-1280 pixels).

Style6 is meant to deal with most laptop and desktop computers.

Style 5 is designed to handle a number of tablets like Nook and Kindle.

If you look at the first line of each of these css files, you will see the media screen code setting the minimum and maximum pixels.

To more easily see the differences between screen sizes, I changed the background color of the major elements, body, nav, article and aside, header and footer in the different style files.

To see the different screen sizes in Notepad, you simply drag the right edge of the screen to the left to make the screen smaller.

To see this in action, load and run the FlexibleBoxModelTemplate.html in Notepad++ using the Chrome browser.

Style6 calls for a peach yellow body, Nav section is ash grey. Article section is a light grey. The Aside section is silver.

Drag the right edge of the FlexibleBoxModelTemplate until the color changes in the three sections.

Style 6 instructs the HTML code to make each of the three elements 33% of the screen and to flex.

If you want to see the screen size numbers, as it changes and the pixels, press the F12 key. This key is the javascript debugger. After pressing F12, click the box in the upper right-hand corner to activate this feature.

When you hover over the box, it says: "Select an element in the page to inspect it." Drage the right edge. When the right edge gets to 1280 px the colors of the three main page elements will change to those set out in Style5.css

Nav is Peru, an orange color. The article section is antique white and aside section is a color called burlywood. Color can be set in css using both hexidecimal and RGB designations. Many color charts are available on line.

• Change the color of the Nav section to pearl aqua RGB(53% 85% 75%);
• Change body to periwinkle RGB(80%, 80%, 100%);

Suppose you wanted to put a button on your html page?

Open the FlexibleBoxModelTemplate in Notepad++, and key in this code in the Nav section.

Save it and run your FlexibleBoxModel.html file. You should see a yellow button that says Save File with red text. When you hover over it it should turn gray.

Change the color to midnight blue.

The line you want to change on Style6.css is 320

You can do special paragraph formatting too. You can put a paragraph class tag in front of the text you want to format. Our Style files, format special paragraphs when they see the <p class=" ">. You can change size and colors, large and small text. See If you can find these lines in the Style6 and Style5 files.

For example, suppose that you wanted to format text 8 points, bold Times New Roman font, American rose in color. Our pargraph class small, fits the bill. Let's try it. In your FlexibleBoxModelTemplate file, change line 23 to what you see below.
<article>
<p class="small">This information is in the article section of the web page</p>

Save your html file and run it to see if you changed works.

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif) might not work on smaller screens
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

Experiment with the fonts used in the FlexibleBoxModeTemplate.

In typography, a serif is a small line or stroke regularly attached to the end of a larger stroke in a letter or symbol within a particular font or family of fonts. A typeface or "font family" making use of serifs is called a serif typeface, and a typeface that does not include them is sans-serif. Some typography sources refer to sans-serif typefaces as "grotesque" or "Gothic", and serif typefaces as "roman". Sans-serif fonts resize better and would be good for applications that are mobile-friendly.

Headlines

Headlines are also easy changes. Remember the way the flexible box model works is that it starts out with three columns on a computer, gets smaller for tablets and cell phones. At one point, the three columns are changed into one column to accomodate the smaller screens of phones. You also need to remember that there are landscape and portrait views on tablets and phones.

Looking at your Style6.css file, you will see the <H1> is 60 px, bold, Times New Roman. <H2> is bold type, 30 px and the font is comic sans. Experiment with fonts and headline makup tags to get your desired result. Remember, what looks good on a computer, might not look as good on a tablet or phone. Drag the right edge of your screen to see what your work will look like. your screen

After working on Style6.css and Style5.css, work on the other style files and modify them anyway you want. Test out each change carefully. Remember to use F12 to see screen sizes information as you are dragging the right edge to the left to simulate smaller screen sizes. Even though you used another html file for testing, the teamdates.html uses the same files that you worked on.

Maria's Assignment

1. Go to your email account.
2. Find the shared email from your project manager referencing dropbox.
3. Click on the go to folder button.
4. You will see all files in the shared folder.
5. The file that you will work on is called match.js. Select this file.
6. Click Open Button.
7. Select, Show in File Explorer
8. Right-click the file while in File Explorer
9. Select Edit in Notepad++
10. The file should appear in Notepad++
11. If you look up on the very top line in Notepad, the file location will show C:\Users\TEMP\Dropbox\computerDating\match.js
12. You can also select the file location from Notepad++. when continuing to work on the project file.

The Algorithum for finding matches.

1. Get the selected index from the html list.
2. Assign it to a variable. I used a.
3. I added an alert to see if I picked up the selected index number in the list - variable a
4. I commented out the alert after testing.
5. Declare a variable name for number of matches for each respondent.
6. For example, respondent [0] is Janet Nashville.
7. The variable to keep track of her matches is questionMatch0
8. Check saveData.js to see all respondents.
9. We want to start making matches on the first question which is "My idea of a romantic evening would be a walk on the beach."
10. Response for Janet for the first question would be object[0][4]. Remember arrays start with zero as the first one, The number 1 is the second, etc.
11. {"Janet","Nashville","female","16-17","as","drama","am","as","afternoon","an afternoon apart", "pretty exhausting","am","dm","am","as","as","Hawaii","for certain","as","as","American","as", "basketball","as","ds","as","as","as","as","am","dm","ds","am","dm","am","as","as", "as","as","as","one person","none","as","as","am","as","as","as","as"}
12. Janet's answer to the first question is obj[0][4] = "as"
13. Response for person selected from the list would be obj[a][4]
14. Now we need to compare Janet's answer with the answer of the person selected.
15. If they are the same, then increment questionMatch0 by 1.

If you examine the rest of the code, you will see that comparisons are made for each question and each respondent. There 44 questions. Remenber we started with array element 4 so our last one will be 48.

Now comparisons need to be made for respondents 1,2 3,4,5,6,7,8.

I used copy and paste and then all I had to do was to change the index numbers.

We made comparisons on the questions for the user selected one with all repondents.

What we need to do is to display matches with opposite sex members.

The array variable for the sex of the individual male or female. is myObj[a][2]

Next we need to get the index number of the person selected by the user from from the drop-down list.

Answers will vary from 0 - 8 since that is the number of respondents we have in our drop-down list and file.

That variable is myObj[a][2]. In the variable, a is incremented by one.

The array variable starts out with 0. and then continues with 1,2,3,4,5,6,7,8.

Next we want to see if is the sex is equal to or not equal to the first person in the list.

For example. Janet is the first person in our list. Suppose our user selected Jerry as the one to match up.

Since Jerry is Male and Janet is Female they are not equal.

We would calculate percentage of matches var mp and display the results.

We already have the number of matches for Janet and Jerry: variable questionMatch0

There are 44 questions, so dividing questionMatch0 will give us the percentage matches number.

Next we round the number off to two decimals.

The next line, we display Janet's and Jerry's matches at <P id="totalMatches0>.

Lastly, we display the percentage matches at <p id="percent0">.

<hr> prints a horizontal line before displaying the next result.

Maria's survey

1. Look at the survey and answer the questions for yourself.
2. Open the saveData.js file
3. Add a comma to the end of line 15 - respondent 8
4. Add your information after the last respondent. on line 16
5. Save the saveData.js file.
6. Open up the match.js file in Notepad++
7. Add needed lines for matches
8. Put lines 1609 to 1790 on the clipboard
9. Paste these lines starting on line 1791
10. Change the index number from 8 to 9 on all lines.
11. Save file using same name.
12. Adding lines to separate sexes
13. In the match.js file, put lines 1856 to 1862 on the clipboard.
14. Paste these lines into file starting with 1863
15. Save the file using the same name.
16. Open teamDates.html and add lines to display the results of the matches.
17. Make a line for each respondent.
18. Start keying in information just after the line <h3>Matches</h3>
19. <p id="totalMatches0"></p><p id="percent0"></p>
20. <p id="totalMatches1"></p><p id="percent1"></p>
21. <p id="totalMatches2"></p><p id="percent2"></p>
22. <p id="totalMatches3"></p><p id="percent3"></p>
23. <p id="totalMatches4"></p><p id="percent4"></p>
24. <p id="totalMatches5"></p><p id="percent5"></p>
25. <p id="totalMatches6"></p><p id="percent6"></p>
26. <p id="totalMatches7"></p><p id="percent7"></p>
27. <p id="totalMatches8"></p><p id="percent8"></p>
28. <p id="totalMatches9"></p><p id="percent9"></p>
29. Save the teamDates.html file.

Modifying Matches

Suppose you want to modify the results. For example, let's look at question 15 which is myObj[a][18].

It states, "Making a lot of money is a very important goal in my life."

Maria believes that if a guy disagrees strongly with this that he won't amount to much.

She would like to come up with an algorithm that warns prospective female respondents to avoid any guy that believes this.

Copy the code in the textarea box above.

Paste this code into end of your matches file.

Save your file as match.js.

1. First we need to determine if the person looking for a date is a female.
2. Remember that the variable "a" is assigned to the selected index number of our selection list.
3. We have already separated out the sexes of the repondents in the code above.
4. Next we have to determine how each person answered the question about making a lot of money.
5. We are looking for those males that disagree strongly.
6. Those that meet that criteria, male and answering "ds" to the question about making a lot of money.will be singled out.
7. Next we want to send a message to the one looking for a date, not to go out with any guy who meets the criteria.

Maria, add a block of code for yourself. You are index number 9.