├── .editorconfig ├── .gitignore ├── README.md ├── Syllabus.md ├── chapters ├── js01 │ ├── chapter │ │ ├── blanket.jpg │ │ ├── bluestem.jpg │ │ ├── flower.png │ │ ├── js01_txt.html │ │ ├── js01b.js │ │ ├── rugosa.jpg │ │ ├── tinley.css │ │ ├── tinleyhand.css │ │ ├── txlogo.png │ │ └── txlogosm.png │ └── project01-02 │ │ ├── project01-02_txt.html │ │ ├── project01-02_txt.js │ │ └── styles.css ├── js02 │ ├── chapter │ │ ├── fantrick.css │ │ ├── fthand.css │ │ ├── ftie.css │ │ ├── ftlogo.png │ │ ├── ftlogosm.png │ │ ├── js02_txt.html │ │ └── js02_txt.js │ ├── project02-02 │ │ ├── project02-02_txt.html │ │ ├── project02-02_txt.js │ │ └── styles.css │ └── project02-04 │ │ ├── project02-04_txt.html │ │ ├── project02-04_txt.js │ │ └── styles.css ├── js03 │ ├── chapter │ │ ├── js03_txt.html │ │ ├── js03_txt.js │ │ ├── schedule.js │ │ ├── tthand.css │ │ ├── ttlogo.png │ │ └── turbines.css │ ├── project03-01 │ │ ├── project03-01_txt.html │ │ ├── project03-01_txt.js │ │ └── styles.css │ └── project03-02 │ │ ├── project03-02_txt.html │ │ ├── project03-02_txt.js │ │ ├── slide0.jpg │ │ ├── slide1.jpg │ │ ├── slide10.jpg │ │ ├── slide11.jpg │ │ ├── slide12.jpg │ │ ├── slide13.jpg │ │ ├── slide2.jpg │ │ ├── slide3.jpg │ │ ├── slide4.jpg │ │ ├── slide5.jpg │ │ ├── slide6.jpg │ │ ├── slide7.jpg │ │ ├── slide8.jpg │ │ ├── slide9.jpg │ │ └── styles.css ├── js04 │ ├── chapter │ │ ├── js04_txt.html │ │ ├── js04_txt.js │ │ ├── tuba.css │ │ └── tuba2.png │ └── project04-04 │ │ ├── project04-04_txt.html │ │ ├── project04-04_txt.js │ │ └── styles.css ├── js05 │ ├── chapter │ │ ├── js05_txt.html │ │ ├── js05_txt.js │ │ ├── lightbox.css │ │ ├── lightbox_data.js │ │ ├── photo01.jpg │ │ ├── photo02.jpg │ │ ├── photo03.jpg │ │ ├── photo04.jpg │ │ ├── photo05.jpg │ │ ├── photo06.jpg │ │ ├── photo07.jpg │ │ ├── photo08.jpg │ │ ├── photo09.jpg │ │ ├── photo10.jpg │ │ ├── photo11.jpg │ │ ├── photo12.jpg │ │ └── styles.css │ └── project05-01 │ │ ├── project05-01_txt.html │ │ ├── project05-01_txt.js │ │ └── styles.css ├── js06 │ ├── chapter │ │ ├── js06a_txt.html │ │ ├── js06a_txt.js │ │ ├── js06b_txt.html │ │ ├── js06b_txt.js │ │ ├── logo.png │ │ ├── ordersubmit.html │ │ ├── paysubmit.html │ │ ├── stars.png │ │ ├── stylesa.css │ │ ├── stylesb.css │ │ └── stylessubmit.css │ └── project06-03 │ │ ├── formsubmit.html │ │ ├── project06-03_txt.html │ │ ├── project06-03_txt.js │ │ └── styles.css └── js07 │ ├── chapter │ ├── cengage.jpg │ ├── demo.gif │ ├── demo2.gif │ ├── demo_regcodes.html │ ├── demo_regexp.html │ ├── fdr3.html │ ├── jfk1.html │ ├── js07_txt.html │ ├── js07_txt.js │ ├── lincoln1.html │ ├── lincoln2.html │ ├── reagan1.html │ ├── styles.css │ └── wordcloud.png │ └── project07-01 │ ├── formsubmit.html │ ├── project07-01_txt.html │ ├── project07-01_txt.js │ └── styles.css ├── week-1 ├── chapter │ ├── blanket.jpg │ ├── bluestem.jpg │ ├── flower.png │ ├── js01_txt.html │ ├── js01b.js │ ├── rugosa.jpg │ ├── tinley.css │ ├── tinleyhand.css │ ├── txlogo.png │ └── txlogosm.png └── project01-02 │ ├── project01-02_txt.html │ ├── project01-02_txt.js │ └── styles.css ├── week-2 ├── chapter │ ├── fantrick.css │ ├── fthand.css │ ├── ftie.css │ ├── ftlogo.png │ ├── ftlogosm.png │ ├── js02_txt.html │ └── js02_txt.js └── project02-02 │ ├── project02-02_txt.html │ ├── project02-02_txt.js │ └── styles.css ├── week-3 ├── chapter │ ├── fantrick.css │ ├── fthand.css │ ├── ftie.css │ ├── ftlogo.png │ ├── ftlogosm.png │ ├── js02_txt.html │ └── js02_txt.js └── project02-04 │ ├── project02-04_txt.html │ ├── project02-04_txt.js │ └── styles.css ├── week-4 ├── chapter │ ├── js03_txt.html │ ├── js03_txt.js │ ├── schedule.js │ ├── tthand.css │ ├── ttlogo.png │ └── turbines.css └── project03-01 │ ├── project03-01_txt.html │ ├── project03-01_txt.js │ └── styles.css ├── week-5 ├── chapter │ ├── js03_txt.html │ ├── js03_txt.js │ ├── schedule.js │ ├── tthand.css │ ├── ttlogo.png │ └── turbines.css └── project03-02 │ ├── project03-02_txt.html │ ├── project03-02_txt.js │ ├── slide0.jpg │ ├── slide1.jpg │ ├── slide10.jpg │ ├── slide11.jpg │ ├── slide12.jpg │ ├── slide13.jpg │ ├── slide2.jpg │ ├── slide3.jpg │ ├── slide4.jpg │ ├── slide5.jpg │ ├── slide6.jpg │ ├── slide7.jpg │ ├── slide8.jpg │ ├── slide9.jpg │ └── styles.css ├── week-6 ├── chapter │ ├── js04_txt.html │ ├── js04_txt.js │ ├── tuba.css │ └── tuba2.png └── project04-04 │ ├── project04-04_txt.html │ ├── project04-04_txt.js │ └── styles.css ├── week-7 ├── chapter │ ├── js05_txt.html │ ├── js05_txt.js │ ├── lightbox.css │ ├── lightbox_data.js │ ├── photo01.jpg │ ├── photo02.jpg │ ├── photo03.jpg │ ├── photo04.jpg │ ├── photo05.jpg │ ├── photo06.jpg │ ├── photo07.jpg │ ├── photo08.jpg │ ├── photo09.jpg │ ├── photo10.jpg │ ├── photo11.jpg │ ├── photo12.jpg │ └── styles.css └── project05-01 │ ├── project05-01_txt.html │ ├── project05-01_txt.js │ └── styles.css ├── week-8 ├── chapter │ ├── js06a_txt.html │ ├── js06a_txt.js │ ├── js06b_txt.html │ ├── js06b_txt.js │ ├── logo.png │ ├── ordersubmit.html │ ├── paysubmit.html │ ├── stars.png │ ├── stylesa.css │ ├── stylesb.css │ └── stylessubmit.css └── project06-03 │ ├── formsubmit.html │ ├── project06-03_txt.html │ ├── project06-03_txt.js │ └── styles.css └── week-9 ├── chapter ├── cengage.jpg ├── demo.gif ├── demo2.gif ├── demo_regcodes.html ├── demo_regexp.html ├── fdr3.html ├── jfk1.html ├── js07_txt.html ├── js07_txt.js ├── lincoln1.html ├── lincoln2.html ├── reagan1.html ├── styles.css └── wordcloud.png └── project07-01 ├── formsubmit.html ├── project07-01_txt.html ├── project07-01_txt.js └── styles.css /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = false 9 | trim_trailing_whitespace = true 10 | 11 | [*.js] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # IDE 2 | .vscode 3 | .idea 4 | 5 | # Node ddependency directories 6 | node_modules/ 7 | */node_modules 8 | 9 | # Optional npm cache directory 10 | .npm 11 | 12 | # Optional eslint cache 13 | .eslintcache 14 | 15 | # macOS files 16 | .DS_Store 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WEB 231 Enterprise JavaScript I 2 | ## [Bellevue University](http://bellevue.edu "Bellevue University is a private, non-profit university located in Bellevue, Nebraska, United States.") 3 | 4 | Address: 1000 Galvin Rd S, Bellevue, Nebraska 68005 - [Directions](https://www.google.com/maps/dir/''/Bellevue+University/@41.1509562,-95.9896355,12z/data=!4m8!4m7!1m0!1m5!1m1!1s0x8793886a86ca807f:0x838e857240d175eb!2m2!1d-95.9195956!2d41.1509774 "Google maps") 5 | 6 | Web Development [Degree](http://www.bellevue.edu/degrees/bachelor/web-development-bs/ "Designed by developers for developers.") 7 | 8 | ## Repository Overview 9 | The starter files for weekly assignments and chapter exercises are located in the `data-files` folder. Each folder is named js{chapter}. Where {chapter} is the chapter number of the current week's assignments. For example, let's say I am working on week one's chapter exercise and programming assignment, I would look in the folder named js01. 10 | 11 | There are two ways to access the content in this repository: download the entire repository as a ZIP file or clone it. Below outlines each approach. 12 | 13 | ### ZIP File 14 | 1. Click on the "Green" code button in the middle of the screen. 15 | 2. Select "Download ZIP". 16 | 3. Extract the downloaded ZIP file and save it to a location on your computer that is easy to remember. 17 | 18 | ### Git Clone 19 | 1. Open a new terminal window. 20 | 2. Navigate to a location on your computer where you want to save the repository. 21 | 3. Click on the "Green" code button in the middle of the screen. 22 | 4. Select the HTTPS tab and copy the URL. 23 | 5. In your terminal window enter `git clone {URL}`; where URL is the URL you copied from step 4. Make sure you remove the curly braces (`{}`) before pasting the URL. 24 | 25 | Another options is to enter the clone command directly in a new terminal window: 26 | 27 | ```bash 28 | cd buwebdev 29 | git clone https://github.com/buwebdev/web-231.git 30 | ``` 31 | 32 | -------------------------------------------------------------------------------- /Syllabus.md: -------------------------------------------------------------------------------- 1 | **

WEB 231 Enterprise JavaScript I
3 Credit Hour

** 2 | 3 | --- 4 | **Course Description**
5 | Learn JavaScript by writing JavaScript. This course introduces the concepts of programming using JavaScript. It 6 | focuses on the JavaScript programming language syntax, coding standards, documentation, and how to debug programs. 7 | Topics include Functions, Data Types, Operators, Arrays, Controlling Flow, JavaScript Events, and Regular Expression. Projects 8 | will use HTML, CSS, and JavaScript to create dynamic web pages. GitHub is used to host coding projects. 9 |
10 | 11 | **Course Prerequisites**
12 | WEB 200 Fundamentals of Web Development 13 | 14 | --- 15 | **Course Objectives**
16 | Students who successfully complete this course should be able to: 17 | 1. Explain the fundamentals of the JavaScript programming language 18 | 2. Build JavaScript expressions 19 | 3. Identify at least four types of programming errors 20 | 4. Utilize web browser debugging tools to locate errors in a program 21 | 5. Experiment with regular expression 22 | 23 | --- 24 | **Topic Outline**
25 |
    26 |
  1. 27 | JavaScript Fundamentals 28 |
      29 |
    1. Functions
      2. 30 |
    2. Data Types and Operators
      3. 31 |
    3. Arrays
      4. 32 |
    4. Controlling Flow
      5. 33 |
    5. Template LIterals
      6. 34 |
    35 |
    2. 36 |
  2. 37 | Debugging and Error Handling 38 |
      39 |
    1. Debugger Console
      2. 40 |
    2. Breakpoints
      3. 41 |
    3. Strict Mode
      4. 42 |
    4. Try Catch Statements
      5. 43 |
    5. Error Tracing
      6. 44 |
    45 |
    3. 46 |
  3. 47 | Working with HTML and CSS 48 |
      49 |
    1. Document Object Model
      2. 50 |
    2. JavaScript Events
      3. 51 |
    3. HTML Form Validation
      4. 52 |
    4. Form Objects
      5. 53 |
    5. Regular Expression
      6. 54 |
    55 |
    4. 56 |
-------------------------------------------------------------------------------- /chapters/js01/chapter/blanket.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js01/chapter/blanket.jpg -------------------------------------------------------------------------------- /chapters/js01/chapter/bluestem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js01/chapter/bluestem.jpg -------------------------------------------------------------------------------- /chapters/js01/chapter/flower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js01/chapter/flower.png -------------------------------------------------------------------------------- /chapters/js01/chapter/js01_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | Tinley Xeriscapes 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |

28 | Tinley Xeriscapes 29 | Tinley Xeriscapes 30 | Tinley Xeriscapes 31 | tinley xeriscapes 32 |

33 |
34 | 35 | 43 | 44 | 51 | 52 |
53 |
54 | 55 |
56 |
57 |
58 |
59 | 60 | 63 |
64 | 65 | 66 | -------------------------------------------------------------------------------- /chapters/js01/chapter/js01b.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 1 3 | Chapter case 4 | 5 | Tinley Xeriscapes 6 | Author: 7 | Date: 8 | 9 | Filename: js01b.js 10 | */ 11 | 12 | //define variables containing plant filenames 13 | let blanket = "blanket.jpg"; 14 | let rugosa = "rugosa.jpg"; 15 | let bluestem = "bluestem.jpg"; 16 | 17 | //add event handlers to the list items 18 | document.getElementById("blanket").onclick = function() { 19 | document.getElementById("plantImg").src = blanket; 20 | } 21 | document.getElementById("rugosa").onclick = function() { 22 | document.getElementById("plantImg").src = rugosa; 23 | } 24 | document.getElementById("bluestem").onclick = function() { 25 | document.getElementById("plantImg").src = bluestem; 26 | } 27 | 28 | /* 29 | Information on available plants 30 | including link to USDA website 31 | */ 32 | 33 | let captionText = "

Plant choices for " + 34 | "" + 35 | "hardiness zones" + 36 | " 5a - 6b

"; 37 | 38 | document.getElementById("imgCaption").innerHTML = captionText; -------------------------------------------------------------------------------- /chapters/js01/chapter/rugosa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js01/chapter/rugosa.jpg -------------------------------------------------------------------------------- /chapters/js01/chapter/txlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js01/chapter/txlogo.png -------------------------------------------------------------------------------- /chapters/js01/chapter/txlogosm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js01/chapter/txlogosm.png -------------------------------------------------------------------------------- /chapters/js01/project01-02/project01-02_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 1-2 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 1-2 24 |

25 |
26 | 27 |
28 |

High-Speed Internet Plans

29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 42 | 45 | 46 | 47 | 50 | 53 | 54 | 55 | 58 | 61 | 62 | 63 | 66 | 69 | 70 | 71 |
ServiceDownload Speed (Mbps)
40 | 41 | 43 | 44 |
48 | 49 | 51 | 52 |
56 | 57 | 59 | 60 |
64 | 65 | 67 | 68 |
72 |
73 | 74 | 75 | -------------------------------------------------------------------------------- /chapters/js01/project01-02/project01-02_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 1 3 | Hands-On Project 1-2 4 | 5 | Author: 6 | Date: 7 | 8 | Filename: project01-02.js 9 | */ 10 | 11 | //define variables for service name and service speed 12 | -------------------------------------------------------------------------------- /chapters/js01/project01-02/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 1 3 | Hands-on Project 1-2 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | max-width: 960px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Arial, Helvetica, sans-serif; 49 | -webkit-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1), 50 | 0px 10px 10px rgba(50, 50, 50, 1), 51 | -10px 0px 10px rgba(50, 50, 50, 1); 52 | -moz-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1), 53 | 0px 10px 10px rgba(50, 50, 50, 1), 54 | -10px 0px 10px rgba(50, 50, 50, 1); 55 | box-shadow: 10px 0px 10px rgba(50, 50, 50, 1), 56 | 0px 10px 10px rgba(50, 50, 50, 1), 57 | -10px 0px 10px rgba(50, 50, 50, 1); 58 | } 59 | 60 | ol, ul { 61 | list-style: none; 62 | } 63 | 64 | /* page header */ 65 | header { 66 | background: #04819E; 67 | width: 100%; 68 | color: #FFFFFF; 69 | font-size: 48px; 70 | text-align: center; 71 | line-height: 1.5em; 72 | border-bottom: 1px solid black; 73 | } 74 | 75 | /* main content */ 76 | article { 77 | width: 960px; 78 | text-align: center; 79 | background: #BF7730; 80 | padding-bottom: 20px; 81 | } 82 | 83 | article h2 { 84 | font-weight: bold; 85 | font-size: 24px; 86 | padding: 10px; 87 | } 88 | 89 | article table { 90 | margin: 0 auto; 91 | border: 1px solid black; 92 | border-collapse: collapse; 93 | background: #FFB873; 94 | } 95 | 96 | article table th, article table td { 97 | padding: 5px 10px; 98 | border: 1px solid black; 99 | } 100 | 101 | article table th { 102 | font-weight: bold; 103 | text-align: center; 104 | border-bottom: 3px solid black; 105 | } 106 | -------------------------------------------------------------------------------- /chapters/js02/chapter/ftlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js02/chapter/ftlogo.png -------------------------------------------------------------------------------- /chapters/js02/chapter/ftlogosm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js02/chapter/ftlogosm.png -------------------------------------------------------------------------------- /chapters/js02/chapter/js02_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | Fan Trick Fine Art Photography - Estimate 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |

29 | Fan Trick Fine Art Photography 30 |

31 |
32 | 33 | 41 | 42 |
43 |

Estimate

44 |

Our experienced, professional photography team is available to capture memories of 45 | your wedding, celebration, or other special event.

46 |

Choose the custom options that fit your needs:

47 |
48 |
49 | Photography 50 | 51 | 55 | 56 | 57 | 60 | 61 | 62 | 66 | 67 | 68 | 72 |
73 |
74 | Travel 75 | 76 | 80 |
81 |
82 |
83 | 86 | 89 |
90 | 91 | 92 | -------------------------------------------------------------------------------- /chapters/js02/chapter/js02_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 2 3 | Chapter case 4 | 5 | Fan Trick Fine Art Photography 6 | Variables and functions 7 | Author: 8 | Date: 9 | 10 | Filename: js02.js 11 | */ 12 | 13 | -------------------------------------------------------------------------------- /chapters/js02/project02-02/project02-02_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 2-2 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 2-2 24 |

25 |
26 | 27 |
28 |

Contact Information

29 |
30 |
31 | 35 | 39 | 43 |
44 |
45 | 46 |
47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /chapters/js02/project02-02/project02-02_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 2 3 | Project 02-02 4 | 5 | Application to test for completed form 6 | Author: 7 | Date: 8 | 9 | Filename: project02-02.js 10 | */ 11 | 12 | -------------------------------------------------------------------------------- /chapters/js02/project02-02/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 2 3 | Hands-on Project 2-2 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | max-width: 960px; 46 | background: white; 47 | margin: 40px auto; 48 | font-family: Arial, Helvetica, sans-serif; 49 | border: 4px outset gray; 50 | } 51 | 52 | ol, ul { 53 | list-style: none; 54 | } 55 | 56 | /* page header */ 57 | header { 58 | background: #FFE373; 59 | width: 100%; 60 | color: black; 61 | font-size: 48px; 62 | text-align: center; 63 | line-height: 1.5em; 64 | } 65 | 66 | /* main content */ 67 | article { 68 | width: 100%; 69 | text-align: center; 70 | background: #BFA230; 71 | padding-bottom: 20px; 72 | } 73 | 74 | article h2 { 75 | font-weight: bold; 76 | font-size: 24px; 77 | padding: 10px; 78 | } 79 | 80 | /* form */ 81 | 82 | #submitbutton input { 83 | font-family: georgia, "times new roman", times, serif; 84 | } 85 | fieldset { 86 | position: relative; 87 | padding: 1em; 88 | background: white; 89 | text-align: left; 90 | } 91 | form { 92 | background: white; 93 | padding: 10px 5px 7px 5px; 94 | margin: 0 auto; 95 | width: 750px; 96 | border: 2px solid black; 97 | } 98 | input { 99 | font-size: 1em; 100 | } 101 | input:focus { 102 | background: #e3d5ba; 103 | } 104 | label { 105 | display: block; 106 | position: relative; 107 | margin: 12px 0; 108 | } 109 | #contactinfo input { 110 | position: absolute; 111 | left: 100px; 112 | } 113 | #nameinput, #emailinput { 114 | width: 30em; 115 | } 116 | #phoneinput { 117 | width: 12em; 118 | } 119 | #submit { 120 | background: #e3d5ba; 121 | font-size: 1.25em; 122 | -webkit-border-top-left-radius: 10px; 123 | -webkit-border-bottom-right-radius: 10px; 124 | -moz-border-radius-topleft: 10px; 125 | -moz-border-radius-bottomright: 10px; 126 | border-top-left-radius: 10px; 127 | border-bottom-right-radius: 10px; 128 | } 129 | #submitbutton { 130 | padding: 0.5em 0; 131 | margin-bottom: 0; 132 | text-align: center; 133 | } 134 | -------------------------------------------------------------------------------- /chapters/js02/project02-04/project02-04_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 2-4 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 2-4 24 |

25 |
26 | 27 |
28 |

Lunch selections

29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 |
42 | 43 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /chapters/js02/project02-04/project02-04_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 2 3 | Project 02-04 4 | 5 | Application to calculate the cost of a restaurant order plus tax 6 | Author: 7 | Date: 8 | 9 | Filename: project02-04.js 10 | */ 11 | 12 | 13 | 14 | 15 | 16 | // Function to display a numeric value as a text string in the format $##.## 17 | function formatCurrency(value) { 18 | return "$" + value.toFixed(2); 19 | } 20 | -------------------------------------------------------------------------------- /chapters/js02/project02-04/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 2 3 | Hands-on Project 2-4 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 960px; 46 | background: white; 47 | margin: 30px auto; 48 | font-family: Verdana, Geneva, sans-serif; 49 | position: relative; 50 | } 51 | 52 | ol, ul { 53 | list-style: none; 54 | } 55 | 56 | /* page header */ 57 | header { 58 | background: #330570; 59 | width: 100%; 60 | color: #FFFFFF; 61 | font-size: 48px; 62 | text-align: center; 63 | line-height: 1.5em; 64 | } 65 | 66 | /* main content */ 67 | article { 68 | width: 960px; 69 | height: 250px; 70 | text-align: left; 71 | background: #FFCF40; 72 | } 73 | 74 | article h2 { 75 | font-weight: bold; 76 | font-size: 24px; 77 | padding: 10px; 78 | } 79 | 80 | /* form */ 81 | form { 82 | margin: 0 auto; 83 | } 84 | 85 | input { 86 | float: left; 87 | clear: left; 88 | margin: 10px; 89 | } 90 | 91 | label { 92 | float: left; 93 | font-size: 1.4em; 94 | } 95 | 96 | aside { 97 | position: absolute; 98 | top: 120px; 99 | left: 400px; 100 | outline: 1px solid red; 101 | } 102 | 103 | aside span { 104 | position: absolute; 105 | font-size: 1.4em; 106 | } 107 | 108 | aside span#totalLab { 109 | top: 0px; 110 | left: 0px; 111 | width: 220px; 112 | } 113 | 114 | aside span#foodTotal { 115 | top: 0px; 116 | left: 280px; 117 | width: 100px; 118 | text-align: right; 119 | } 120 | 121 | aside span#taxLab { 122 | top: 40px; 123 | left: 0px; 124 | width: 220px; 125 | } 126 | 127 | aside span#foodTax { 128 | top: 40px; 129 | left: 280px; 130 | width: 100px; 131 | text-align: right; 132 | } 133 | 134 | aside span#billLab { 135 | top: 80px; 136 | left: 0px; 137 | width: 220px; 138 | } 139 | 140 | aside span#totalBill { 141 | top: 80px; 142 | left: 280px; 143 | width: 100px; 144 | text-align: right; 145 | } 146 | -------------------------------------------------------------------------------- /chapters/js03/chapter/js03_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | Tipton Turbines - Calendar 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |

28 | Tipton Turbines 29 |

30 |
31 | 40 |
41 |

Calendar

42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 |
August 2024

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

Win Loss Suspended Postponed
112 |
113 | 116 |
117 | 118 | 119 | -------------------------------------------------------------------------------- /chapters/js03/chapter/js03_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 3 3 | Chapter case 4 | 5 | Tipton Turbines 6 | Program to display games results in a web table 7 | Author: 8 | Date: 9 | 10 | Filename: js03.js 11 | */ 12 | 13 | -------------------------------------------------------------------------------- /chapters/js03/chapter/schedule.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 3 3 | Chapter case 4 | 5 | Tipton Turbines 6 | Baseball Schedule Data 7 | Author: 8 | Date: 9 | 10 | Filename: schedule.js 11 | */ 12 | 13 | // date of games played 14 | let gameDates = ["2024-7-28", "2024-8-1", "2024-8-2", "2024-8-3", 15 | "2024-8-4", "2024-8-6", "2024-8-8", "2024-8-9", "2024-8-10", 16 | "2024-8-11", "2024-8-12", "2024-8-14", "2024-8-16", "2024-8-17", 17 | "2024-8-18", "2024-8-20", "2024-8-22", "2024-8-23", "2024-8-24", 18 | "2024-8-25", "2024-8-28", "2024-8-30", "2024-8-31"]; 19 | 20 | // game opponents 21 | let gameOpponents = ["Bettendorf", "Marion", "Clinton", "Clinton", 22 | "Clinton", "Urbandale", "Cedar Falls", "Cedar Falls", "Cedar Falls", 23 | "Bettendorf", "Bettendorf", "Ames", "Ames", "Ames", 24 | "Waukee", "Waukee", "Mason City", "Mason City", "Mason City", 25 | "Clinton", "Marion", "Cedar Falls", "Cedar Falls"]; 26 | 27 | // game locations: h (home) or a (away) 28 | let gameLocations = ["h", "a", "h", "h", "h", "h", "a", "a", "a", "a", "a", "h", "h", "h", 29 | "a", "a", "a", "a", "a", "a", "h", "h", "h"]; 30 | 31 | // runs scored in each game 32 | let runsScored = [2, 4, 2, 1, 0, 2, 2, 1, 8, 3, 4, 7, 4, 1, 2, 0, 8, 6, 3, 0, 5, 7, 3]; 33 | 34 | // runs allowed in each game 35 | let runsAllowed = [1, 2, 0, 5, 3, 3, 1, 5, 3, 1, 3, 6, 7, 4, 6, 3, 2, 4, 1, 0, 3, 2, 4]; 36 | 37 | // innings played in each game 38 | let gameInnings = [9, 9, 9, 6, 9, 9, 12, 7, 9, 9, 9, 11, 9, 4.5, 9, 9, 9, 9, 9, 0, 2, 9, 10]; 39 | 40 | // game outcome: W (win), L (lose), S (suspended prior to completion), P (postponed to later date) 41 | let gameResults = ["W", "W", "W", "L", "L", "L", "W", "L", "W", "W", "W", "W", "L", "S", 42 | "L", "L", "W", "W", "W", "P", "S", "W", "L"]; 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /chapters/js03/chapter/ttlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/chapter/ttlogo.png -------------------------------------------------------------------------------- /chapters/js03/project03-01/project03-01_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 3-1 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 3-1 24 |

25 |
26 | 27 |
28 |

Lunch selections

29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /chapters/js03/project03-01/project03-01_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 3 3 | Project 03-01 4 | 5 | Application to calculate total order cost 6 | Author: 7 | Date: 8 | 9 | Filename: project03-01.js 10 | */ 11 | 12 | 13 | 14 | 15 | 16 | // Function to display a numeric value as a text string in the format $##.## 17 | function formatCurrency(value) { 18 | return "$" + value.toFixed(2); 19 | } -------------------------------------------------------------------------------- /chapters/js03/project03-01/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 3 3 | Hands-on Project 3-1 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 960px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Verdana, Geneva, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | /* page header */ 56 | header { 57 | background: #5472B2; 58 | width: 100%; 59 | color: #FFFFFF; 60 | font-size: 48px; 61 | text-align: center; 62 | line-height: 1.5em; 63 | } 64 | 65 | /* main content */ 66 | article { 67 | width: 960px; 68 | height: 250px; 69 | text-align: left; 70 | background: #FFDB70; 71 | position: relative; 72 | } 73 | 74 | article h2 { 75 | font-weight: bold; 76 | font-size: 24px; 77 | padding: 10px; 78 | } 79 | 80 | /* form */ 81 | form { 82 | float: left; 83 | } 84 | 85 | input { 86 | float: left; 87 | clear: left; 88 | margin: 10px; 89 | } 90 | 91 | label { 92 | float: left; 93 | font-size: 1.4em; 94 | } 95 | 96 | /* total div */ 97 | article div { 98 | width: 50%; 99 | float: right; 100 | font-size: 18px; 101 | font-weight: bold; 102 | } 103 | 104 | aside { 105 | font-size: 1.5em; 106 | position: absolute; 107 | left: 400px; 108 | top: 20px; 109 | } 110 | -------------------------------------------------------------------------------- /chapters/js03/project03-02/project03-02_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 3-2 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 3-2 24 |

25 |
26 | 27 |
28 |

International Space Station Images

29 | 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /chapters/js03/project03-02/project03-02_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 3 3 | Project 03-02 4 | 5 | Application to generate a slide gallery 6 | Author: 7 | Date: 8 | 9 | Filename: project03-02.js 10 | */ 11 | 12 | let captions = new Array(14); 13 | captions[0]="International Space Station fourth expansion [2009]"; 14 | captions[1]="Assembling the International Space Station [1998]"; 15 | captions[2]="The Atlantis docks with the ISS [2001]"; 16 | captions[3]="The Atlantis approaches the ISS [2000]"; 17 | captions[4]="The Atlantis approaches the ISS [2000]"; 18 | captions[5]="International Space Station over Earth [2002]"; 19 | captions[6]="The International Space Station first expansion [2002]"; 20 | captions[7]="Hurricane Ivan from the ISS [2008]"; 21 | captions[8]="The Soyuz spacecraft approaches the ISS [2005]"; 22 | captions[9]="The International Space Station from above [2006]"; 23 | captions[10]="Maneuvering in space with the Canadarm2 [2006]"; 24 | captions[11]="The International Space Station second expansion [2006]"; 25 | captions[12]="The International Space Station third expansion [2007]"; 26 | captions[13]="The ISS over the Ionian Sea [2007]"; 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapters/js03/project03-02/slide0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/project03-02/slide0.jpg -------------------------------------------------------------------------------- /chapters/js03/project03-02/slide1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/project03-02/slide1.jpg -------------------------------------------------------------------------------- /chapters/js03/project03-02/slide10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/project03-02/slide10.jpg -------------------------------------------------------------------------------- /chapters/js03/project03-02/slide11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/project03-02/slide11.jpg -------------------------------------------------------------------------------- /chapters/js03/project03-02/slide12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/project03-02/slide12.jpg -------------------------------------------------------------------------------- /chapters/js03/project03-02/slide13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/project03-02/slide13.jpg -------------------------------------------------------------------------------- /chapters/js03/project03-02/slide2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/project03-02/slide2.jpg -------------------------------------------------------------------------------- /chapters/js03/project03-02/slide3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/project03-02/slide3.jpg -------------------------------------------------------------------------------- /chapters/js03/project03-02/slide4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/project03-02/slide4.jpg -------------------------------------------------------------------------------- /chapters/js03/project03-02/slide5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/project03-02/slide5.jpg -------------------------------------------------------------------------------- /chapters/js03/project03-02/slide6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/project03-02/slide6.jpg -------------------------------------------------------------------------------- /chapters/js03/project03-02/slide7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/project03-02/slide7.jpg -------------------------------------------------------------------------------- /chapters/js03/project03-02/slide8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/project03-02/slide8.jpg -------------------------------------------------------------------------------- /chapters/js03/project03-02/slide9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js03/project03-02/slide9.jpg -------------------------------------------------------------------------------- /chapters/js03/project03-02/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 3 3 | Hands-on Project 3-2 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | max-width: 960px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Arial, Helvetica, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | /* page header */ 56 | header { 57 | background: #FFE373; 58 | width: 100%; 59 | color: black; 60 | font-size: 48px; 61 | text-align: center; 62 | line-height: 1.5em; 63 | border-bottom: 1px solid black; 64 | border-left: 1px solid black; 65 | border-right: 1px solid black; 66 | } 67 | 68 | /* main content */ 69 | article { 70 | width: 960px; 71 | text-align: center; 72 | background: #BFA230; 73 | padding-bottom: 20px; 74 | border-bottom: 1px solid black; 75 | border-left: 1px solid black; 76 | border-right: 1px solid black; 77 | } 78 | 79 | article h2 { 80 | font-weight: bold; 81 | font-size: 24px; 82 | padding: 10px; 83 | } 84 | 85 | /* figure styles */ 86 | 87 | div#gallery { 88 | display: flex; 89 | flex-flow: row wrap; 90 | } 91 | 92 | div#gallery figure { 93 | flex: 1 1 150px; 94 | margin: 5px; 95 | border: 1px solid black; 96 | background-color:hsl(129,23%,58%); 97 | } 98 | 99 | div#gallery figure img { 100 | display: block; 101 | width: 100%; 102 | } 103 | 104 | div#gallery figure figcaption { 105 | display: block; 106 | text-align: center; 107 | font-size: 0.85em; 108 | padding: 3px; 109 | font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; 110 | } 111 | -------------------------------------------------------------------------------- /chapters/js04/chapter/js04_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | 19 | Tuba Farm Equipment - Tractor Selector 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |

Tuba Farm Equipment

29 | 30 |
31 | 32 | 42 | 43 |
44 |

Tractor Selector

45 |
46 |
47 | How many acres do you cultivate? 48 | 49 | 50 |
51 |
52 | Which crops do you grow? 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
68 |
69 | How many months per year do you work your fields? 70 | 71 | 72 |
73 |
74 | Which is your preferred fuel source? 75 | 76 | 77 | 78 | 79 | 80 | 81 |
82 |
83 |
84 | 85 | 89 | 90 | 93 |
94 | 95 | 96 | -------------------------------------------------------------------------------- /chapters/js04/chapter/tuba2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js04/chapter/tuba2.png -------------------------------------------------------------------------------- /chapters/js04/project04-04/project04-04_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 4-4 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 4-4 24 |

25 |
26 | 27 |
28 |

Change Calculator

29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 | 41 | 48 | 55 |
56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /chapters/js04/project04-04/project04-04_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 4 3 | Project 04-04 4 | 5 | Application to determine change from a cash amount 6 | Author: 7 | Date: 8 | 9 | Filename: project04-04.js 10 | */ 11 | 12 | // Global variables 13 | let cashBox = document.getElementById(cash); 14 | let billBox = document.getElementById(bill); 15 | let changeBox = document.getElementById(change); 16 | 17 | // Event handlers to be run when the cash or bill value changes 18 | cashBox.addEventListener("change", runRegister); 19 | billBox.addEventListener("change", runRegister); 20 | 21 | // Function to reset the values in the web page 22 | function zeroTheRegister() { 23 | changeBox.value = 0; 24 | document.getElementById("bill20").innerHTML = 0; 25 | document.getElementById("bill10").innerHTML = 0; 26 | document.getElementById("bill5").innerHTML = 0; 27 | document.getElementById("bill1").innerHTML = 0; 28 | document.getElementById("coin25").innerHTML = 0; 29 | document.getElementById("coin10").innerHTML = 0; 30 | document.getElementById("coin5").innerHTML = 0; 31 | document.getElementById("coin1").innerHTML = 0; 32 | document.getElementById("warning").innerHTML = ""; 33 | } 34 | 35 | // Function to run the cash register 36 | function runTheRegister() { 37 | zeroTheRegister(); 38 | 39 | let changeValue = cashBox.value - billBox.value; // calculate the change 40 | 41 | changeBox.value = formatCurrency(changeValue); // format the change as currency 42 | 43 | calcChange(changeValue); // Determine the units of currency needed for the change 44 | } 45 | 46 | // Function to calculate the change by each unit of currency 47 | function calcChange(changeValue) { 48 | // Determine the number of $20 bills 49 | let bill20Amt = determineCoin(changeValue, 20); 50 | document.getElementById("bill20").innerHTML = bill20Amt; 51 | changeValue -= bill20Amt*20; 52 | 53 | // Determine the number of $10 bills 54 | let bill10Amt = determineCoin(changeValue, 10); 55 | document.getElementById("bill10").innerHTML = bill10Amt; 56 | changeValue -= bill10Amt*10; 57 | 58 | // Determine the number of $5 bills 59 | let bill5Amt = determineCoin(changeValue, 5); 60 | document.getElementById("bill5").innerHTML = bill5Amt; 61 | changeValue -= bill5Amt*3; 62 | 63 | // Determine the number of $1 bills 64 | let bill1Amt = determineCoin(changeValue, 1); 65 | document.getElementById("bill1").innerHTML = bill1Amt; 66 | changeValue -= bill1Amt*1; 67 | 68 | // Determine the number of quarters 69 | let coin25Amt = determineCoin(changeValue*100, 25); 70 | document.getElementById("coin25").innerHTML = coin25Amt; 71 | changeValue -= coin25Amt*0.25; 72 | 73 | // Determine the number of dimes 74 | let coin10Amt = determineCoin(changeValue*100, 10); 75 | document.getElementById("coin10").innerHTML = coin10Amt; 76 | changeValue -= coin10Amt*0.10; 77 | 78 | // Determine the number of nickels 79 | let coin5Amt = determineCoin(changeValue*100, 5); 80 | document.getElementById("coin5").innerHTML = coin5Amt; 81 | changeValue -= coin5Amt*0.05; 82 | 83 | // Determine the number of pennies 84 | // The Math.round() method rounds the value to the nearest integer 85 | let coin1Amt = Math.round(changeValue*100); 86 | document.getElementById("coin1").innerHTML = coin1Amt; 87 | } 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | /* ================================================================= */ 97 | 98 | // Function to determine the largest whole number of currency units that 99 | // can fit within the cash value 100 | function determineCoin(cashValue, currencyUnit) { 101 | // The parseInt() function returns the integer value of the ratio 102 | return parseInt(cashValue/currencyUnit); 103 | } 104 | 105 | // Function to display a numeric value as a text string in the format ##.## 106 | function formatCurrency(value) { 107 | return value.toFixed(2); 108 | } -------------------------------------------------------------------------------- /chapters/js04/project04-04/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 4 3 | Hands-on Project 4-4 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 960px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Verdana, Geneva, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | /* page header */ 56 | header { 57 | background: #5472B2; 58 | width: 100%; 59 | color: #FFFFFF; 60 | font-size: 48px; 61 | text-align: center; 62 | line-height: 1.5em; 63 | } 64 | 65 | /* main content */ 66 | article { 67 | position: relative; 68 | width: 960px; 69 | height: 300px; 70 | text-align: left; 71 | background: #FFDB70; 72 | position: relative; 73 | } 74 | 75 | article > h2 { 76 | font-weight: normal; 77 | font-size: 2em; 78 | padding: 20px 0 10px 0; 79 | text-align: center; 80 | margin: 0 0 20px 0; 81 | } 82 | 83 | div#warning { 84 | position: absolute; 85 | top: 180px; 86 | left: 70px; 87 | color: red; 88 | } 89 | 90 | label { 91 | float: left; 92 | display: block; 93 | clear: left; 94 | width: 110px; 95 | margin-bottom: 10px; 96 | margin-left: 70px; 97 | } 98 | 99 | input { 100 | display: block; 101 | float: left; 102 | margin-left: 20px; 103 | margin-bottom: 10px; 104 | text-align: right; 105 | width: 100px; 106 | } 107 | 108 | input#change { 109 | padding-right: 15px; 110 | } 111 | 112 | aside#bills { 113 | position: absolute; 114 | top: 50px; 115 | left: 480px; 116 | } 117 | 118 | aside#coins { 119 | position: absolute; 120 | top: 50px; 121 | left: 680px; 122 | } 123 | 124 | aside h2 { 125 | font-size: 1.2em; 126 | margin: 0; 127 | text-align: center; 128 | margin: 20px 0 10px; 129 | } 130 | 131 | aside div:nth-of-type(odd) { 132 | float: left; 133 | width: 100px; 134 | clear: left; 135 | } 136 | 137 | aside div:nth-of-type(even) { 138 | float: left; 139 | width: 30px; 140 | height: 30px; 141 | outline: 1px solid gray; 142 | text-align: center; 143 | line-height: 30px; 144 | background-color: ivory; 145 | } 146 | -------------------------------------------------------------------------------- /chapters/js05/chapter/js05_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Chapter 5 Case Problem 17 | 18 | 19 | 20 | 21 | 22 |
23 |

Interactive Slideshow

24 |

To view your slides:

25 | 30 | 31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /chapters/js05/chapter/lightbox_data.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* JavaScript 7th Edition 3 | Chapter 5 4 | Chapter Case 5 | 6 | Image List 7 | 8 | Filename:lightbox_data.js 9 | */ 10 | 11 | // Title of the slideshow 12 | let lightboxTitle = "My Western Vacation"; 13 | 14 | // Names of the image files shown in the slideshow 15 | let imgFiles = ["photo01.jpg", "photo02.jpg", "photo03.jpg", "photo04.jpg", 16 | "photo05.jpg", "photo06.jpg", "photo07.jpg", "photo08.jpg", 17 | "photo09.jpg", "photo10.jpg", "photo11.jpg", "photo12.jpg"] 18 | 19 | // Captions associated with each image 20 | let imgCaptions = new Array(12); 21 | imgCaptions[0]="Sky Pond (Rocky Mountain National Park)"; 22 | imgCaptions[1]="Buffalo on the Plains (South Dakota)"; 23 | imgCaptions[2]="Garden of the Gods (Colorado Springs)"; 24 | imgCaptions[3]="Elephant Head Wild Flower (Rocky Mountain National Park)"; 25 | imgCaptions[4]="Double Rainbow (Colorado National Monument)"; 26 | imgCaptions[5]="Moose in the Wild (Grand Lake, Colorado)"; 27 | imgCaptions[6]="Camas Wild Flower (Rocky Mountain National Park)"; 28 | imgCaptions[7]="Chasm Lake (Rocky Mountain National Park)"; 29 | imgCaptions[8]="Teton Crest Trail (Grand Teton National Park)"; 30 | imgCaptions[9]="The Notch Trail (Badlands National Park)"; 31 | imgCaptions[10]="Sprague Lake (Rocky Mountain National Park)"; 32 | imgCaptions[11]="Longs Peak Trail (Rocky Mountain National Park)"; 33 | 34 | // Count of images in the slideshow 35 | let imgCount = imgFiles.length; 36 | -------------------------------------------------------------------------------- /chapters/js05/chapter/photo01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js05/chapter/photo01.jpg -------------------------------------------------------------------------------- /chapters/js05/chapter/photo02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js05/chapter/photo02.jpg -------------------------------------------------------------------------------- /chapters/js05/chapter/photo03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js05/chapter/photo03.jpg -------------------------------------------------------------------------------- /chapters/js05/chapter/photo04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js05/chapter/photo04.jpg -------------------------------------------------------------------------------- /chapters/js05/chapter/photo05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js05/chapter/photo05.jpg -------------------------------------------------------------------------------- /chapters/js05/chapter/photo06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js05/chapter/photo06.jpg -------------------------------------------------------------------------------- /chapters/js05/chapter/photo07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js05/chapter/photo07.jpg -------------------------------------------------------------------------------- /chapters/js05/chapter/photo08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js05/chapter/photo08.jpg -------------------------------------------------------------------------------- /chapters/js05/chapter/photo09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js05/chapter/photo09.jpg -------------------------------------------------------------------------------- /chapters/js05/chapter/photo10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js05/chapter/photo10.jpg -------------------------------------------------------------------------------- /chapters/js05/chapter/photo11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js05/chapter/photo11.jpg -------------------------------------------------------------------------------- /chapters/js05/chapter/photo12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js05/chapter/photo12.jpg -------------------------------------------------------------------------------- /chapters/js05/chapter/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 5 3 | Chapter Case 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 1000px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Arial, Helvetica, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | /* article styles */ 56 | 57 | article { 58 | width: 100%; 59 | height: 800px; 60 | margin: 0 auto; 61 | } 62 | 63 | article > h1 { 64 | font-size: 3.8em; 65 | text-align: center; 66 | color: ivory; 67 | text-shadow: 2px 2px 10px black; 68 | font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; 69 | margin: 5px 0 20px 0; 70 | } 71 | 72 | article > p { 73 | font-size: 1.5em; 74 | line-height: 2; 75 | } 76 | 77 | article > ul { 78 | list-style-type: disc; 79 | font-size: 1.2em; 80 | line-height: 2; 81 | padding-left: 20px; 82 | padding-bottom: 40px; 83 | border-bottom: 3px solid gray; 84 | } -------------------------------------------------------------------------------- /chapters/js05/project05-01/project05-01_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 5-1 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 5-1 24 |

25 |
26 | 27 |
28 |

Algebra I Practice Quiz

29 | 30 |
31 |
32 |

Click the Start Quiz button below 33 | to start the quiz and begin the countdown. Upon completion, incorrect answers 34 | will be marked in red. Retake the quiz as many times as you wish. 35 |

36 | 37 | 38 |
39 | 40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 |
1)    5 + 2x = 25x =
2)    30 – 5x = 10x =
3)    6 + 3x = –12x =
4)    44 – 12x = –16x =
5)    48 + 6x = 6x =
63 |
64 | 65 |
66 |
67 |
68 | 69 | 70 | -------------------------------------------------------------------------------- /chapters/js05/project05-01/project05-01_txt.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* JavaScript 7th Edition 3 | Chapter 5 4 | Project 05-01 5 | 6 | Project to present an online quiz with a countdown clock 7 | Author: 8 | Date: 9 | 10 | Filename: project05-01.js 11 | */ 12 | 13 | // Constants to set the time given for the quiz in seconds 14 | // and the correct answers to each quiz question 15 | const quizTime = 20; 16 | const correctAnswers = ["10", "4", "-6", "5", "-7"]; 17 | 18 | // Elements in the quiz page 19 | let startQuiz = document.getElementById("startquiz"); 20 | let quizClock = document.getElementById("quizclock"); 21 | let overlay = document.getElementById("overlay"); 22 | 23 | // Initialize the quiz time 24 | quizClock.value = quizTime; 25 | let timeLeft = quizTime; 26 | 27 | // Declare the ID for timed commands 28 | // and the node list for questions 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | /*------------- Function to check the student answers ----------------*/ 51 | function checkAnswers() { 52 | let correctCount = 0; 53 | 54 | for (let i = 0; i < questionList.length; i++) { 55 | if (questionList[i].value === correctAnswers[i]) { 56 | correctCount++; 57 | questionList[i].className = ""; 58 | } else { 59 | questionList[i].className = "wronganswer"; 60 | } 61 | } 62 | return correctCount; 63 | } 64 | 65 | -------------------------------------------------------------------------------- /chapters/js05/project05-01/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 5 3 | Hands-on Project 5-1 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 960px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Verdana, Geneva, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | /* page header */ 56 | header { 57 | background: #5472B2; 58 | width: 100%; 59 | color: #FFFFFF; 60 | font-size: 48px; 61 | text-align: center; 62 | line-height: 1.5em; 63 | } 64 | 65 | /* main content */ 66 | article { 67 | width: 960px; 68 | height: 560px; 69 | text-align: left; 70 | background: #FFDB70; 71 | position: relative; 72 | } 73 | 74 | 75 | 76 | /*-------------------- Project Styles ------------------*/ 77 | 78 | article h2 { 79 | font-weight: bold; 80 | font-size: 24px; 81 | padding: 20px 0; 82 | text-align: center; 83 | } 84 | 85 | 86 | div#container { 87 | --main-height: 440px; 88 | height: var(--main-height); 89 | position: relative; 90 | } 91 | 92 | 93 | div#instructions { 94 | width: 300px; 95 | height: var(--main-height); 96 | position: absolute; 97 | top: 0; 98 | left: 0; 99 | } 100 | 101 | div#instructions p { 102 | line-height: 2; 103 | padding: 15px; 104 | font-size: 1.2em; 105 | } 106 | 107 | div#instructions input#startquiz { 108 | display: block; 109 | margin: 10px auto; 110 | font-size: 1.8em; 111 | width: 180px; 112 | text-align: center; 113 | border-radius: 20px; 114 | background-color: #1BA8BF; 115 | color: ivory; 116 | cursor: pointer; 117 | user-select: none; 118 | } 119 | 120 | div#instructions input#quizclock { 121 | display: block; 122 | margin: 30px auto; 123 | width: 100px; 124 | height: 100px; 125 | text-align: center; 126 | font-size: 60px; 127 | color: white; 128 | background-color: rgb(40, 40, 40); 129 | user-select: none; 130 | } 131 | 132 | div#quiz { 133 | width: 660px; 134 | height: var(--main-height); 135 | position: absolute; 136 | top: 0; 137 | left: 300px; 138 | } 139 | 140 | div#quiz table { 141 | width: 500px; 142 | margin: 0 auto; 143 | } 144 | 145 | div#quiz table td { 146 | line-height: 2.5; 147 | font-size: 1.2em; 148 | } 149 | 150 | div#quiz em { 151 | font-style: italic; 152 | font-family: "Times New Roman", serif; 153 | font-size: 1.4em; 154 | } 155 | 156 | div#quiz input { 157 | font-size: 1.2em; 158 | width: 90px; 159 | text-align: center; 160 | } 161 | 162 | div#quiz input.wronganswer { 163 | color: white; 164 | background-color: red; 165 | } 166 | 167 | div#overlay { 168 | width: 660px; 169 | height: var(--main-height); 170 | position: absolute; 171 | top: 0; 172 | left: 300px; 173 | z-index: 1 174 | } 175 | 176 | div#overlay.hidequiz { 177 | display: block; 178 | background-color: #FFDB70; 179 | } 180 | 181 | div#overlay.showquiz { 182 | display: none; 183 | background-color: transparent; 184 | } 185 | -------------------------------------------------------------------------------- /chapters/js06/chapter/js06a_txt.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* JavaScript 7th Edition 3 | Chapter 6 4 | Chapter case 5 | 6 | Order Form Code 7 | Author: 8 | Date: 9 | 10 | Filename: js06a.js 11 | */ 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /chapters/js06/chapter/js06b_txt.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* JavaScript 7th Edition 3 | Chapter 6 4 | Chapter case 5 | 6 | Order Form Code 7 | Author: 8 | Date: 9 | 10 | Filename: js06b.js 11 | */ 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | /* ------- Luhn Algorithm used for Validating Credit Card Numbers ----- */ 32 | 33 | function luhn(idNum) { 34 | let string1 = ""; 35 | let string2 = ""; 36 | 37 | // Retrieve the odd-numbered digits starting from the back 38 | for (let i = idNum.length - 1; i >= 0; i-= 2) { 39 | string1 += idNum.charAt(i); 40 | } 41 | // Retrieve the even-numbered digits starting from the back and double them 42 | for (let i = idNum.length - 2; i >= 0; i-= 2) { 43 | string2 += 2*idNum.charAt(i); 44 | } 45 | 46 | // Return whether the sum of the digits is divisible by 10 47 | return sumDigits(string1 + string2) % 10 === 0; 48 | 49 | function sumDigits(numStr) { 50 | let digitTotal = 0; 51 | for (let i = 0; i < numStr.length; i++) { 52 | digitTotal += parseInt(numStr.charAt(i)); 53 | } 54 | return digitTotal; 55 | } 56 | } 57 | 58 | 59 | -------------------------------------------------------------------------------- /chapters/js06/chapter/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js06/chapter/logo.png -------------------------------------------------------------------------------- /chapters/js06/chapter/ordersubmit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Chapter 6 Case Problem: Product Order 17 | 18 | 37 | 38 | 39 | 40 |
41 | Coctura 42 |
43 |
44 |
45 | 46 | 47 | 48 | 51 | 55 | 58 | 59 | 60 | 63 | 66 | 67 | 68 | 69 | 72 | 73 | 74 | 75 | 76 | 79 | 80 | 81 | 82 | 83 | 86 | 87 |
Your Order
49 | 50 | 52 | 53 | 54 | 56 | 57 |
61 | 62 | 64 | 65 |
Subtotal 70 | 71 |
Tax (5%) 77 | 78 |
TOTAL 84 | 85 |
88 |
89 |
90 | 91 | 92 | -------------------------------------------------------------------------------- /chapters/js06/chapter/paysubmit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Chapter 6 Case Problem: Product Payment 17 | 18 | 28 | 29 | 30 | 31 |
32 | Coctura 33 |
34 |
35 |

Payment Successfully Submitted

36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /chapters/js06/chapter/stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js06/chapter/stars.png -------------------------------------------------------------------------------- /chapters/js06/chapter/stylessubmit.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 6 3 | Chapter Case 4 | 5 | Filename: stylesubmit.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 1000px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Arial, Helvetica, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | 56 | /* Styles for this Project */ 57 | 58 | html { 59 | font-family: Verdana, Geneva, sans-serif; 60 | font-size: 12px; 61 | color: rgb(101, 101, 101); 62 | } 63 | 64 | body { 65 | display: -webkit-flex; 66 | display: flex; 67 | -webkit-flex-flow: row wrap; 68 | flex-flow: row wrap; 69 | 70 | background: white; 71 | max-width: 1020px; 72 | min-width: 420px; 73 | margin: 0px auto; 74 | } 75 | 76 | p { 77 | font-size: 1.2em; 78 | line-height: 1.4em; 79 | margin: 15px; 80 | } 81 | 82 | 83 | /* Header Styles */ 84 | 85 | body > header { 86 | width: 100%; 87 | } 88 | 89 | body > header > img { 90 | display: block; 91 | width: 100%; 92 | } 93 | 94 | 95 | 96 | /* Order Table Styles */ 97 | 98 | table#orderTable { 99 | margin: 30px 0px 0px 45px; 100 | width: 65%; 101 | border-collapse: collapse; 102 | color: rgb(151, 151, 151); 103 | font-size: 16px; 104 | } 105 | 106 | table#orderTable input { 107 | font-size: 16px; 108 | } 109 | 110 | form#order input { 111 | background-color: transparent; 112 | border: none; 113 | color: rgb(151, 151, 151); 114 | } 115 | 116 | table#orderTable caption { 117 | font-size: 2em; 118 | text-align: left; 119 | color: rgb(151, 151, 151); 120 | font-weight: normal; 121 | margin-bottom: 20px; 122 | } 123 | 124 | 125 | table#orderTable td { 126 | height: 20px; 127 | vertical-align: top; 128 | min-width: 90px; 129 | } 130 | 131 | form#order input#qty { 132 | width: 3em; 133 | } 134 | 135 | form#order input#modelName, form#order input#planName { 136 | width: 25em; 137 | } 138 | 139 | form#order input { 140 | color: rgb(151, 151, 151); 141 | } 142 | 143 | 144 | table#orderTable tr td:last-of-type input { 145 | text-align: right; 146 | border: none; 147 | } 148 | 149 | table#orderTable tr:nth-of-type(1) { 150 | border-top: 1px solid rgb(151, 151, 151); 151 | padding-top: 15px; 152 | } 153 | 154 | table#orderTable tr:nth-of-type(1) td { 155 | padding-top: 15px; 156 | } 157 | 158 | table#orderTable tr:nth-of-type(2) td { 159 | padding-bottom: 15px; 160 | } 161 | 162 | table#orderTable tr:nth-of-type(2) { 163 | border-bottom: 1px solid rgb(151, 151, 151); 164 | } 165 | 166 | table#orderTable tr:nth-of-type(3) td { 167 | padding-top: 15px; 168 | } 169 | 170 | table#orderTable tr:nth-of-type(4) td { 171 | padding-top: 15px; 172 | } 173 | 174 | table#orderTable tr:nth-of-type(4) td { 175 | border-bottom: 4px double rgb(151, 151, 151); 176 | } 177 | 178 | table#orderTable tr:last-of-type td { 179 | padding-top: 15px; 180 | } 181 | 182 | table#orderTable td.rightA { 183 | text-align: right; 184 | padding-right: 10px; 185 | } 186 | 187 | -------------------------------------------------------------------------------- /chapters/js06/project06-03/project06-03_txt.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* JavaScript 7th Edition 3 | Chapter 6 4 | Project 06-03 5 | 6 | Script to complete a form containing billing and shipping address information 7 | Author: 8 | Date: 9 | 10 | Filename: project06-03.js 11 | */ 12 | -------------------------------------------------------------------------------- /chapters/js06/project06-03/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 6 3 | Hands-on Project 6-3 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 960px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Verdana, Geneva, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | /* page header */ 56 | header { 57 | background: #5472B2; 58 | width: 100%; 59 | color: #FFFFFF; 60 | font-size: 48px; 61 | text-align: center; 62 | line-height: 1.5em; 63 | } 64 | 65 | /* main content */ 66 | article { 67 | width: 960px; 68 | text-align: left; 69 | background: #FFDB70; 70 | position: relative; 71 | } 72 | 73 | 74 | 75 | /*-------------------- Project Styles ------------------*/ 76 | 77 | article { 78 | padding: 20px 50px 60px; 79 | } 80 | article h1 { 81 | font-size: 1.7em; 82 | margin-bottom: 20px; 83 | } 84 | 85 | form#billShip { 86 | display: flex; 87 | flex-flow: row wrap; 88 | } 89 | 90 | form#billShip section { 91 | flex: 1; 92 | margin: 10px; 93 | } 94 | 95 | input#useShip { 96 | position: absolute; 97 | top: 10px; 98 | left: 10px; 99 | } 100 | 101 | label#cbLabel { 102 | position: absolute; 103 | top: 10px; 104 | left: 35px; 105 | width: 250px; 106 | float: none; 107 | clear: none; 108 | display: block; 109 | text-align: left; 110 | } 111 | fieldset { 112 | border: 2px ridge rgb(128, 128, 128); 113 | padding: 50px 5px 0px; 114 | position: relative; 115 | margin-top: 5px; 116 | } 117 | 118 | fieldset span { 119 | color: red; 120 | font-weight: bold; 121 | } 122 | 123 | fieldset label { 124 | display: block; 125 | float: left; 126 | clear: left; 127 | width: 150px; 128 | text-align: right; 129 | margin: 0 15px 25px 0; 130 | } 131 | 132 | fieldset p { 133 | position: absolute; 134 | top: 10px; 135 | right: 10px; 136 | 137 | } 138 | 139 | fieldset input[type="text"] { 140 | float: left; 141 | width: 200px; 142 | margin: 0 0 25px 0; 143 | } 144 | 145 | input[type="submit"] { 146 | display: block; 147 | width: 120px; 148 | height: 30px; 149 | font-size: 1em; 150 | margin: 20px auto; 151 | float: none; 152 | clear: none; 153 | } 154 | 155 | p#errorBox { 156 | width: 100%; 157 | color: red; 158 | font-size: 1.1em; 159 | margin-left: 10px; 160 | margin-top: 10px; 161 | border: 1px solid red; 162 | background-color: white; 163 | padding: 15px; 164 | 165 | 166 | } 167 | input[type="text"]:invalid { 168 | background-color: rgba(255, 0, 0, 0.3); 169 | } 170 | 171 | section > h1 { 172 | font-size: 1.4em; 173 | margin: 20px 0 20px 30px; 174 | } 175 | 176 | table { 177 | margin-left: 30px; 178 | border-collapse: collapse; 179 | width 48%; 180 | float: left; 181 | margin-right: 1%; 182 | } 183 | 184 | table td { 185 | border: 1px solid rgb(150,150,150); 186 | padding: 5px; 187 | } 188 | 189 | table tr td:first-of-type { 190 | background-color: #E3E09B; 191 | } -------------------------------------------------------------------------------- /chapters/js07/chapter/cengage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js07/chapter/cengage.jpg -------------------------------------------------------------------------------- /chapters/js07/chapter/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js07/chapter/demo.gif -------------------------------------------------------------------------------- /chapters/js07/chapter/demo2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js07/chapter/demo2.gif -------------------------------------------------------------------------------- /chapters/js07/chapter/js07_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Chapter 7 Case Problem: Word Cloud 17 | 18 | 19 | 20 | 21 |
22 | wordcloud 23 |
24 | 25 |
26 |

Word Cloud Generator

27 |

Select and load a text file from your computer to generate a word 28 | cloud of the most repeated words in the document.

29 | 30 | 31 |
32 | 33 |
34 |
35 | 36 |
37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /chapters/js07/chapter/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 7 3 | Chapter Case 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 1000px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Arial, Helvetica, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | 56 | /* Styles for this Project */ 57 | 58 | html { 59 | font-family: Verdana, Geneva, sans-serif; 60 | font-size: 12px; 61 | color: rgb(101, 101, 101); 62 | } 63 | 64 | header img { 65 | display: block; 66 | width: 500px; 67 | margin: 0 auto; 68 | } 69 | 70 | article#wc_intro { 71 | margin-bottom: 25px; 72 | margin-top: -40px; 73 | } 74 | article#wc_intro h1 { 75 | font-size: 2.4em; 76 | text-align: left; 77 | margin-bottom: 10px; 78 | } 79 | 80 | article#wc_intro p { 81 | font-size: 1.5em; 82 | margin-bottom: 20px; 83 | } 84 | 85 | article#wc_intro label { 86 | font-size: 1.4em; 87 | display: inline-block; 88 | margin-right: 10px; 89 | } 90 | 91 | article#wc_intro input#getFile { 92 | display: inline-block; 93 | font-size: 1.4em; 94 | margin: 0 10px; 95 | } 96 | 97 | div#wc_output { 98 | display: flex; 99 | flex-flow: row nowrap; 100 | margin-bottom: 30px; 101 | align-items: center; 102 | } 103 | 104 | /* Source document Styles */ 105 | div#wc_output article#wc_document { 106 | flex: 1 1 500px; 107 | height: 540px; 108 | overflow: scroll; 109 | padding: 10px 20px; 110 | } 111 | 112 | div#wc_output article#wc_document { 113 | font-size: 1em; 114 | background-color:antiquewhite; 115 | font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; 116 | } 117 | 118 | div#wc_output article#wc_document h1 { 119 | font-size: 1.6em; 120 | margin-bottom: 15px; 121 | font-weight: bold; 122 | } 123 | 124 | div#wc_output article#wc_document p { 125 | font-size: 1.2em; 126 | margin-bottom: 15px; 127 | } 128 | 129 | 130 | 131 | /* Styles applied to the word cloud box */ 132 | div#wc_output aside#wc_cloud { 133 | display: flex; 134 | align-items: center; 135 | flex-flow: row wrap; 136 | flex: 1 1 350px; 137 | min-height: 540px; 138 | background: rgb(182,207,221) radial-gradient(circle closest-side, rgba(161, 101, 101, 0.6), rgba(101, 101, 101, 0)); 139 | padding: 10px; 140 | text-align: justify; 141 | } 142 | 143 | /* Default font size of the most-used word */ 144 | div#wc_output aside#wc_cloud { 145 | font-size: 64px; 146 | } 147 | 148 | /* Styles applied to the word cloud words */ 149 | div#wc_output aside#wc_cloud span { 150 | display: inline-block; 151 | margin: 0px 4px; 152 | } 153 | 154 | -------------------------------------------------------------------------------- /chapters/js07/chapter/wordcloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/chapters/js07/chapter/wordcloud.png -------------------------------------------------------------------------------- /chapters/js07/project07-01/formsubmit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 7-1 17 | 18 | 31 | 32 | 33 | 34 |
35 |

36 | Hands-on Project 7-1 37 |

38 |
39 | 40 |
41 |

Account Information

42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
Username
Password
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /chapters/js07/project07-01/project07-01_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 7-1 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 7-1 24 |

25 |
26 | 27 |
28 |

Create your Account

29 |
30 |
31 | Enter your Account Information 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 | 41 |
42 |
43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /chapters/js07/project07-01/project07-01_txt.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* JavaScript 7th Edition 3 | Chapter 7 4 | Project 07-01 5 | 6 | Project to validate a form used for setting up a new account 7 | Author: 8 | Date: 9 | 10 | Filename: project07-01.js 11 | */ 12 | 13 | let signupForm = document.getElementById("signup"); 14 | 15 | signupForm.addEventListener("submit", function(e) { 16 | let pwd = document.getElementById("pwd").value; 17 | let feedback = document.getElementById("feedback"); 18 | 19 | } 20 | ); -------------------------------------------------------------------------------- /chapters/js07/project07-01/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 7 3 | Hands-on Project 7-1 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 960px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Verdana, Geneva, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | /* page header */ 56 | header { 57 | background: #5472B2; 58 | width: 100%; 59 | color: #FFFFFF; 60 | font-size: 48px; 61 | text-align: center; 62 | line-height: 1.5em; 63 | } 64 | 65 | /* main content */ 66 | article { 67 | width: 960px; 68 | height: 560px; 69 | text-align: left; 70 | background: #FFDB70; 71 | position: relative; 72 | } 73 | 74 | 75 | 76 | /*-------------------- Project Styles ------------------*/ 77 | 78 | div#feedback { 79 | clear: left; 80 | color: red; 81 | margin-left: 25px; 82 | margin-bottom: 20px; 83 | } 84 | 85 | section h1 { 86 | font-size: 1.4em; 87 | margin: 20px 0; 88 | } 89 | 90 | fieldset { 91 | border: 1px solid rgb(192,192,192); 92 | background-color: #EBE09C; 93 | box-shadow: 3px 3px 20px gray; 94 | padding: 30px; 95 | display: block; 96 | width: 600px; 97 | margin: 0 auto; 98 | } 99 | 100 | fieldset legend { 101 | color: rgb(80,80,80); 102 | width: 300px; 103 | text-align: left; 104 | background: rgba(255, 255, 255, 0.3); 105 | font-size: 1.05em; 106 | } 107 | 108 | label { 109 | display: block; 110 | width: 100px; 111 | float: left; 112 | clear: left; 113 | margin-bottom: 15px; 114 | text-align: right; 115 | margin-right: 20px; 116 | font-size: 1em; 117 | font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; 118 | color: rgb(80,80,80); 119 | 120 | } 121 | 122 | input { 123 | display: block; 124 | float: left; 125 | font-size: 1.05em; 126 | color: rgb(80, 80, 80); 127 | margin-bottom: 15px; 128 | } 129 | 130 | input:invalid { 131 | border-color: red; 132 | box-shadow: 2px 2px 5px red; 133 | } 134 | 135 | input[type='submit'] { 136 | clear: left; 137 | display: block; 138 | margin: 0 auto; 139 | float: none; 140 | font-size: 1.1em; 141 | background-color: #BF7E21; 142 | color: white; 143 | padding: 3px; 144 | width: 100px; 145 | } 146 | 147 | section > h1 { 148 | margin-left: 30px; 149 | } 150 | 151 | table { 152 | margin-left: 30px; 153 | border-collapse: collapse; 154 | } 155 | 156 | table td { 157 | border: 1px solid rgb(150,150,150); 158 | padding: 5px; 159 | } 160 | 161 | table tr td:first-of-type { 162 | background-color: #E3E09B; 163 | } -------------------------------------------------------------------------------- /week-1/chapter/blanket.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-1/chapter/blanket.jpg -------------------------------------------------------------------------------- /week-1/chapter/bluestem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-1/chapter/bluestem.jpg -------------------------------------------------------------------------------- /week-1/chapter/flower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-1/chapter/flower.png -------------------------------------------------------------------------------- /week-1/chapter/js01_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | Tinley Xeriscapes 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |

28 | Tinley Xeriscapes 29 | Tinley Xeriscapes 30 | Tinley Xeriscapes 31 | tinley xeriscapes 32 |

33 |
34 | 35 | 43 | 44 | 51 | 52 |
53 |
54 | 55 |
56 |
57 |
58 |
59 | 60 | 63 |
64 | 65 | 66 | -------------------------------------------------------------------------------- /week-1/chapter/js01b.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 1 3 | Chapter case 4 | 5 | Tinley Xeriscapes 6 | Author: 7 | Date: 8 | 9 | Filename: js01b.js 10 | */ 11 | 12 | //define variables containing plant filenames 13 | let blanket = "blanket.jpg"; 14 | let rugosa = "rugosa.jpg"; 15 | let bluestem = "bluestem.jpg"; 16 | 17 | //add event handlers to the list items 18 | document.getElementById("blanket").onclick = function() { 19 | document.getElementById("plantImg").src = blanket; 20 | } 21 | document.getElementById("rugosa").onclick = function() { 22 | document.getElementById("plantImg").src = rugosa; 23 | } 24 | document.getElementById("bluestem").onclick = function() { 25 | document.getElementById("plantImg").src = bluestem; 26 | } 27 | 28 | /* 29 | Information on available plants 30 | including link to USDA website 31 | */ 32 | 33 | let captionText = "

Plant choices for " + 34 | "" + 35 | "hardiness zones" + 36 | " 5a - 6b

"; 37 | 38 | document.getElementById("imgCaption").innerHTML = captionText; -------------------------------------------------------------------------------- /week-1/chapter/rugosa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-1/chapter/rugosa.jpg -------------------------------------------------------------------------------- /week-1/chapter/txlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-1/chapter/txlogo.png -------------------------------------------------------------------------------- /week-1/chapter/txlogosm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-1/chapter/txlogosm.png -------------------------------------------------------------------------------- /week-1/project01-02/project01-02_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 1-2 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 1-2 24 |

25 |
26 | 27 |
28 |

High-Speed Internet Plans

29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 42 | 45 | 46 | 47 | 50 | 53 | 54 | 55 | 58 | 61 | 62 | 63 | 66 | 69 | 70 | 71 |
ServiceDownload Speed (Mbps)
40 | 41 | 43 | 44 |
48 | 49 | 51 | 52 |
56 | 57 | 59 | 60 |
64 | 65 | 67 | 68 |
72 |
73 | 74 | 75 | -------------------------------------------------------------------------------- /week-1/project01-02/project01-02_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 1 3 | Hands-On Project 1-2 4 | 5 | Author: 6 | Date: 7 | 8 | Filename: project01-02.js 9 | */ 10 | 11 | //define variables for service name and service speed 12 | -------------------------------------------------------------------------------- /week-1/project01-02/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 1 3 | Hands-on Project 1-2 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | max-width: 960px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Arial, Helvetica, sans-serif; 49 | -webkit-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1), 50 | 0px 10px 10px rgba(50, 50, 50, 1), 51 | -10px 0px 10px rgba(50, 50, 50, 1); 52 | -moz-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1), 53 | 0px 10px 10px rgba(50, 50, 50, 1), 54 | -10px 0px 10px rgba(50, 50, 50, 1); 55 | box-shadow: 10px 0px 10px rgba(50, 50, 50, 1), 56 | 0px 10px 10px rgba(50, 50, 50, 1), 57 | -10px 0px 10px rgba(50, 50, 50, 1); 58 | } 59 | 60 | ol, ul { 61 | list-style: none; 62 | } 63 | 64 | /* page header */ 65 | header { 66 | background: #04819E; 67 | width: 100%; 68 | color: #FFFFFF; 69 | font-size: 48px; 70 | text-align: center; 71 | line-height: 1.5em; 72 | border-bottom: 1px solid black; 73 | } 74 | 75 | /* main content */ 76 | article { 77 | width: 960px; 78 | text-align: center; 79 | background: #BF7730; 80 | padding-bottom: 20px; 81 | } 82 | 83 | article h2 { 84 | font-weight: bold; 85 | font-size: 24px; 86 | padding: 10px; 87 | } 88 | 89 | article table { 90 | margin: 0 auto; 91 | border: 1px solid black; 92 | border-collapse: collapse; 93 | background: #FFB873; 94 | } 95 | 96 | article table th, article table td { 97 | padding: 5px 10px; 98 | border: 1px solid black; 99 | } 100 | 101 | article table th { 102 | font-weight: bold; 103 | text-align: center; 104 | border-bottom: 3px solid black; 105 | } 106 | -------------------------------------------------------------------------------- /week-2/chapter/ftlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-2/chapter/ftlogo.png -------------------------------------------------------------------------------- /week-2/chapter/ftlogosm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-2/chapter/ftlogosm.png -------------------------------------------------------------------------------- /week-2/chapter/js02_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | Fan Trick Fine Art Photography - Estimate 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |

29 | Fan Trick Fine Art Photography 30 |

31 |
32 | 33 | 41 | 42 |
43 |

Estimate

44 |

Our experienced, professional photography team is available to capture memories of 45 | your wedding, celebration, or other special event.

46 |

Choose the custom options that fit your needs:

47 |
48 |
49 | Photography 50 | 51 | 55 | 56 | 57 | 60 | 61 | 62 | 66 | 67 | 68 | 72 |
73 |
74 | Travel 75 | 76 | 80 |
81 |
82 |
83 | 86 | 89 |
90 | 91 | 92 | -------------------------------------------------------------------------------- /week-2/chapter/js02_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 2 3 | Chapter case 4 | 5 | Fan Trick Fine Art Photography 6 | Variables and functions 7 | Author: 8 | Date: 9 | 10 | Filename: js02.js 11 | */ 12 | 13 | -------------------------------------------------------------------------------- /week-2/project02-02/project02-02_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 2-2 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 2-2 24 |

25 |
26 | 27 |
28 |

Contact Information

29 |
30 |
31 | 35 | 39 | 43 |
44 |
45 | 46 |
47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /week-2/project02-02/project02-02_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 2 3 | Project 02-02 4 | 5 | Application to test for completed form 6 | Author: 7 | Date: 8 | 9 | Filename: project02-02.js 10 | */ 11 | 12 | -------------------------------------------------------------------------------- /week-2/project02-02/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 2 3 | Hands-on Project 2-2 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | max-width: 960px; 46 | background: white; 47 | margin: 40px auto; 48 | font-family: Arial, Helvetica, sans-serif; 49 | border: 4px outset gray; 50 | } 51 | 52 | ol, ul { 53 | list-style: none; 54 | } 55 | 56 | /* page header */ 57 | header { 58 | background: #FFE373; 59 | width: 100%; 60 | color: black; 61 | font-size: 48px; 62 | text-align: center; 63 | line-height: 1.5em; 64 | } 65 | 66 | /* main content */ 67 | article { 68 | width: 100%; 69 | text-align: center; 70 | background: #BFA230; 71 | padding-bottom: 20px; 72 | } 73 | 74 | article h2 { 75 | font-weight: bold; 76 | font-size: 24px; 77 | padding: 10px; 78 | } 79 | 80 | /* form */ 81 | 82 | #submitbutton input { 83 | font-family: georgia, "times new roman", times, serif; 84 | } 85 | fieldset { 86 | position: relative; 87 | padding: 1em; 88 | background: white; 89 | text-align: left; 90 | } 91 | form { 92 | background: white; 93 | padding: 10px 5px 7px 5px; 94 | margin: 0 auto; 95 | width: 750px; 96 | border: 2px solid black; 97 | } 98 | input { 99 | font-size: 1em; 100 | } 101 | input:focus { 102 | background: #e3d5ba; 103 | } 104 | label { 105 | display: block; 106 | position: relative; 107 | margin: 12px 0; 108 | } 109 | #contactinfo input { 110 | position: absolute; 111 | left: 100px; 112 | } 113 | #nameinput, #emailinput { 114 | width: 30em; 115 | } 116 | #phoneinput { 117 | width: 12em; 118 | } 119 | #submit { 120 | background: #e3d5ba; 121 | font-size: 1.25em; 122 | -webkit-border-top-left-radius: 10px; 123 | -webkit-border-bottom-right-radius: 10px; 124 | -moz-border-radius-topleft: 10px; 125 | -moz-border-radius-bottomright: 10px; 126 | border-top-left-radius: 10px; 127 | border-bottom-right-radius: 10px; 128 | } 129 | #submitbutton { 130 | padding: 0.5em 0; 131 | margin-bottom: 0; 132 | text-align: center; 133 | } 134 | -------------------------------------------------------------------------------- /week-3/chapter/ftlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-3/chapter/ftlogo.png -------------------------------------------------------------------------------- /week-3/chapter/ftlogosm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-3/chapter/ftlogosm.png -------------------------------------------------------------------------------- /week-3/chapter/js02_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | Fan Trick Fine Art Photography - Estimate 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |

29 | Fan Trick Fine Art Photography 30 |

31 |
32 | 33 | 41 | 42 |
43 |

Estimate

44 |

Our experienced, professional photography team is available to capture memories of 45 | your wedding, celebration, or other special event.

46 |

Choose the custom options that fit your needs:

47 |
48 |
49 | Photography 50 | 51 | 55 | 56 | 57 | 60 | 61 | 62 | 66 | 67 | 68 | 72 |
73 |
74 | Travel 75 | 76 | 80 |
81 |
82 |
83 | 86 | 89 |
90 | 91 | 92 | -------------------------------------------------------------------------------- /week-3/chapter/js02_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 2 3 | Chapter case 4 | 5 | Fan Trick Fine Art Photography 6 | Variables and functions 7 | Author: 8 | Date: 9 | 10 | Filename: js02.js 11 | */ 12 | 13 | -------------------------------------------------------------------------------- /week-3/project02-04/project02-04_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 2-4 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 2-4 24 |

25 |
26 | 27 |
28 |

Lunch selections

29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 |
42 | 43 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /week-3/project02-04/project02-04_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 2 3 | Project 02-04 4 | 5 | Application to calculate the cost of a restaurant order plus tax 6 | Author: 7 | Date: 8 | 9 | Filename: project02-04.js 10 | */ 11 | 12 | 13 | 14 | 15 | 16 | // Function to display a numeric value as a text string in the format $##.## 17 | function formatCurrency(value) { 18 | return "$" + value.toFixed(2); 19 | } 20 | -------------------------------------------------------------------------------- /week-3/project02-04/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 2 3 | Hands-on Project 2-4 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 960px; 46 | background: white; 47 | margin: 30px auto; 48 | font-family: Verdana, Geneva, sans-serif; 49 | position: relative; 50 | } 51 | 52 | ol, ul { 53 | list-style: none; 54 | } 55 | 56 | /* page header */ 57 | header { 58 | background: #330570; 59 | width: 100%; 60 | color: #FFFFFF; 61 | font-size: 48px; 62 | text-align: center; 63 | line-height: 1.5em; 64 | } 65 | 66 | /* main content */ 67 | article { 68 | width: 960px; 69 | height: 250px; 70 | text-align: left; 71 | background: #FFCF40; 72 | } 73 | 74 | article h2 { 75 | font-weight: bold; 76 | font-size: 24px; 77 | padding: 10px; 78 | } 79 | 80 | /* form */ 81 | form { 82 | margin: 0 auto; 83 | } 84 | 85 | input { 86 | float: left; 87 | clear: left; 88 | margin: 10px; 89 | } 90 | 91 | label { 92 | float: left; 93 | font-size: 1.4em; 94 | } 95 | 96 | aside { 97 | position: absolute; 98 | top: 120px; 99 | left: 400px; 100 | outline: 1px solid red; 101 | } 102 | 103 | aside span { 104 | position: absolute; 105 | font-size: 1.4em; 106 | } 107 | 108 | aside span#totalLab { 109 | top: 0px; 110 | left: 0px; 111 | width: 220px; 112 | } 113 | 114 | aside span#foodTotal { 115 | top: 0px; 116 | left: 280px; 117 | width: 100px; 118 | text-align: right; 119 | } 120 | 121 | aside span#taxLab { 122 | top: 40px; 123 | left: 0px; 124 | width: 220px; 125 | } 126 | 127 | aside span#foodTax { 128 | top: 40px; 129 | left: 280px; 130 | width: 100px; 131 | text-align: right; 132 | } 133 | 134 | aside span#billLab { 135 | top: 80px; 136 | left: 0px; 137 | width: 220px; 138 | } 139 | 140 | aside span#totalBill { 141 | top: 80px; 142 | left: 280px; 143 | width: 100px; 144 | text-align: right; 145 | } 146 | -------------------------------------------------------------------------------- /week-4/chapter/js03_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | Tipton Turbines - Calendar 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |

28 | Tipton Turbines 29 |

30 |
31 | 40 |
41 |

Calendar

42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 |
August 2024

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

Win Loss Suspended Postponed
112 |
113 | 116 |
117 | 118 | 119 | -------------------------------------------------------------------------------- /week-4/chapter/js03_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 3 3 | Chapter case 4 | 5 | Tipton Turbines 6 | Program to display games results in a web table 7 | Author: 8 | Date: 9 | 10 | Filename: js03.js 11 | */ 12 | 13 | -------------------------------------------------------------------------------- /week-4/chapter/schedule.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 3 3 | Chapter case 4 | 5 | Tipton Turbines 6 | Baseball Schedule Data 7 | Author: 8 | Date: 9 | 10 | Filename: schedule.js 11 | */ 12 | 13 | // date of games played 14 | let gameDates = ["2024-7-28", "2024-8-1", "2024-8-2", "2024-8-3", 15 | "2024-8-4", "2024-8-6", "2024-8-8", "2024-8-9", "2024-8-10", 16 | "2024-8-11", "2024-8-12", "2024-8-14", "2024-8-16", "2024-8-17", 17 | "2024-8-18", "2024-8-20", "2024-8-22", "2024-8-23", "2024-8-24", 18 | "2024-8-25", "2024-8-28", "2024-8-30", "2024-8-31"]; 19 | 20 | // game opponents 21 | let gameOpponents = ["Bettendorf", "Marion", "Clinton", "Clinton", 22 | "Clinton", "Urbandale", "Cedar Falls", "Cedar Falls", "Cedar Falls", 23 | "Bettendorf", "Bettendorf", "Ames", "Ames", "Ames", 24 | "Waukee", "Waukee", "Mason City", "Mason City", "Mason City", 25 | "Clinton", "Marion", "Cedar Falls", "Cedar Falls"]; 26 | 27 | // game locations: h (home) or a (away) 28 | let gameLocations = ["h", "a", "h", "h", "h", "h", "a", "a", "a", "a", "a", "h", "h", "h", 29 | "a", "a", "a", "a", "a", "a", "h", "h", "h"]; 30 | 31 | // runs scored in each game 32 | let runsScored = [2, 4, 2, 1, 0, 2, 2, 1, 8, 3, 4, 7, 4, 1, 2, 0, 8, 6, 3, 0, 5, 7, 3]; 33 | 34 | // runs allowed in each game 35 | let runsAllowed = [1, 2, 0, 5, 3, 3, 1, 5, 3, 1, 3, 6, 7, 4, 6, 3, 2, 4, 1, 0, 3, 2, 4]; 36 | 37 | // innings played in each game 38 | let gameInnings = [9, 9, 9, 6, 9, 9, 12, 7, 9, 9, 9, 11, 9, 4.5, 9, 9, 9, 9, 9, 0, 2, 9, 10]; 39 | 40 | // game outcome: W (win), L (lose), S (suspended prior to completion), P (postponed to later date) 41 | let gameResults = ["W", "W", "W", "L", "L", "L", "W", "L", "W", "W", "W", "W", "L", "S", 42 | "L", "L", "W", "W", "W", "P", "S", "W", "L"]; 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /week-4/chapter/ttlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-4/chapter/ttlogo.png -------------------------------------------------------------------------------- /week-4/project03-01/project03-01_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 3-1 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 3-1 24 |

25 |
26 | 27 |
28 |

Lunch selections

29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /week-4/project03-01/project03-01_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 3 3 | Project 03-01 4 | 5 | Application to calculate total order cost 6 | Author: 7 | Date: 8 | 9 | Filename: project03-01.js 10 | */ 11 | 12 | 13 | 14 | 15 | 16 | // Function to display a numeric value as a text string in the format $##.## 17 | function formatCurrency(value) { 18 | return "$" + value.toFixed(2); 19 | } -------------------------------------------------------------------------------- /week-4/project03-01/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 3 3 | Hands-on Project 3-1 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 960px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Verdana, Geneva, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | /* page header */ 56 | header { 57 | background: #5472B2; 58 | width: 100%; 59 | color: #FFFFFF; 60 | font-size: 48px; 61 | text-align: center; 62 | line-height: 1.5em; 63 | } 64 | 65 | /* main content */ 66 | article { 67 | width: 960px; 68 | height: 250px; 69 | text-align: left; 70 | background: #FFDB70; 71 | position: relative; 72 | } 73 | 74 | article h2 { 75 | font-weight: bold; 76 | font-size: 24px; 77 | padding: 10px; 78 | } 79 | 80 | /* form */ 81 | form { 82 | float: left; 83 | } 84 | 85 | input { 86 | float: left; 87 | clear: left; 88 | margin: 10px; 89 | } 90 | 91 | label { 92 | float: left; 93 | font-size: 1.4em; 94 | } 95 | 96 | /* total div */ 97 | article div { 98 | width: 50%; 99 | float: right; 100 | font-size: 18px; 101 | font-weight: bold; 102 | } 103 | 104 | aside { 105 | font-size: 1.5em; 106 | position: absolute; 107 | left: 400px; 108 | top: 20px; 109 | } 110 | -------------------------------------------------------------------------------- /week-5/chapter/js03_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | Tipton Turbines - Calendar 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |

28 | Tipton Turbines 29 |

30 |
31 | 40 |
41 |

Calendar

42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 |
August 2024

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

Win Loss Suspended Postponed
112 |
113 | 116 |
117 | 118 | 119 | -------------------------------------------------------------------------------- /week-5/chapter/js03_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 3 3 | Chapter case 4 | 5 | Tipton Turbines 6 | Program to display games results in a web table 7 | Author: 8 | Date: 9 | 10 | Filename: js03.js 11 | */ 12 | 13 | -------------------------------------------------------------------------------- /week-5/chapter/schedule.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 3 3 | Chapter case 4 | 5 | Tipton Turbines 6 | Baseball Schedule Data 7 | Author: 8 | Date: 9 | 10 | Filename: schedule.js 11 | */ 12 | 13 | // date of games played 14 | let gameDates = ["2024-7-28", "2024-8-1", "2024-8-2", "2024-8-3", 15 | "2024-8-4", "2024-8-6", "2024-8-8", "2024-8-9", "2024-8-10", 16 | "2024-8-11", "2024-8-12", "2024-8-14", "2024-8-16", "2024-8-17", 17 | "2024-8-18", "2024-8-20", "2024-8-22", "2024-8-23", "2024-8-24", 18 | "2024-8-25", "2024-8-28", "2024-8-30", "2024-8-31"]; 19 | 20 | // game opponents 21 | let gameOpponents = ["Bettendorf", "Marion", "Clinton", "Clinton", 22 | "Clinton", "Urbandale", "Cedar Falls", "Cedar Falls", "Cedar Falls", 23 | "Bettendorf", "Bettendorf", "Ames", "Ames", "Ames", 24 | "Waukee", "Waukee", "Mason City", "Mason City", "Mason City", 25 | "Clinton", "Marion", "Cedar Falls", "Cedar Falls"]; 26 | 27 | // game locations: h (home) or a (away) 28 | let gameLocations = ["h", "a", "h", "h", "h", "h", "a", "a", "a", "a", "a", "h", "h", "h", 29 | "a", "a", "a", "a", "a", "a", "h", "h", "h"]; 30 | 31 | // runs scored in each game 32 | let runsScored = [2, 4, 2, 1, 0, 2, 2, 1, 8, 3, 4, 7, 4, 1, 2, 0, 8, 6, 3, 0, 5, 7, 3]; 33 | 34 | // runs allowed in each game 35 | let runsAllowed = [1, 2, 0, 5, 3, 3, 1, 5, 3, 1, 3, 6, 7, 4, 6, 3, 2, 4, 1, 0, 3, 2, 4]; 36 | 37 | // innings played in each game 38 | let gameInnings = [9, 9, 9, 6, 9, 9, 12, 7, 9, 9, 9, 11, 9, 4.5, 9, 9, 9, 9, 9, 0, 2, 9, 10]; 39 | 40 | // game outcome: W (win), L (lose), S (suspended prior to completion), P (postponed to later date) 41 | let gameResults = ["W", "W", "W", "L", "L", "L", "W", "L", "W", "W", "W", "W", "L", "S", 42 | "L", "L", "W", "W", "W", "P", "S", "W", "L"]; 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /week-5/chapter/ttlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/chapter/ttlogo.png -------------------------------------------------------------------------------- /week-5/project03-02/project03-02_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 3-2 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 3-2 24 |

25 |
26 | 27 |
28 |

International Space Station Images

29 | 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /week-5/project03-02/project03-02_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 3 3 | Project 03-02 4 | 5 | Application to generate a slide gallery 6 | Author: 7 | Date: 8 | 9 | Filename: project03-02.js 10 | */ 11 | 12 | let captions = new Array(14); 13 | captions[0]="International Space Station fourth expansion [2009]"; 14 | captions[1]="Assembling the International Space Station [1998]"; 15 | captions[2]="The Atlantis docks with the ISS [2001]"; 16 | captions[3]="The Atlantis approaches the ISS [2000]"; 17 | captions[4]="The Atlantis approaches the ISS [2000]"; 18 | captions[5]="International Space Station over Earth [2002]"; 19 | captions[6]="The International Space Station first expansion [2002]"; 20 | captions[7]="Hurricane Ivan from the ISS [2008]"; 21 | captions[8]="The Soyuz spacecraft approaches the ISS [2005]"; 22 | captions[9]="The International Space Station from above [2006]"; 23 | captions[10]="Maneuvering in space with the Canadarm2 [2006]"; 24 | captions[11]="The International Space Station second expansion [2006]"; 25 | captions[12]="The International Space Station third expansion [2007]"; 26 | captions[13]="The ISS over the Ionian Sea [2007]"; 27 | 28 | 29 | -------------------------------------------------------------------------------- /week-5/project03-02/slide0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/project03-02/slide0.jpg -------------------------------------------------------------------------------- /week-5/project03-02/slide1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/project03-02/slide1.jpg -------------------------------------------------------------------------------- /week-5/project03-02/slide10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/project03-02/slide10.jpg -------------------------------------------------------------------------------- /week-5/project03-02/slide11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/project03-02/slide11.jpg -------------------------------------------------------------------------------- /week-5/project03-02/slide12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/project03-02/slide12.jpg -------------------------------------------------------------------------------- /week-5/project03-02/slide13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/project03-02/slide13.jpg -------------------------------------------------------------------------------- /week-5/project03-02/slide2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/project03-02/slide2.jpg -------------------------------------------------------------------------------- /week-5/project03-02/slide3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/project03-02/slide3.jpg -------------------------------------------------------------------------------- /week-5/project03-02/slide4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/project03-02/slide4.jpg -------------------------------------------------------------------------------- /week-5/project03-02/slide5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/project03-02/slide5.jpg -------------------------------------------------------------------------------- /week-5/project03-02/slide6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/project03-02/slide6.jpg -------------------------------------------------------------------------------- /week-5/project03-02/slide7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/project03-02/slide7.jpg -------------------------------------------------------------------------------- /week-5/project03-02/slide8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/project03-02/slide8.jpg -------------------------------------------------------------------------------- /week-5/project03-02/slide9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-5/project03-02/slide9.jpg -------------------------------------------------------------------------------- /week-5/project03-02/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 3 3 | Hands-on Project 3-2 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | max-width: 960px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Arial, Helvetica, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | /* page header */ 56 | header { 57 | background: #FFE373; 58 | width: 100%; 59 | color: black; 60 | font-size: 48px; 61 | text-align: center; 62 | line-height: 1.5em; 63 | border-bottom: 1px solid black; 64 | border-left: 1px solid black; 65 | border-right: 1px solid black; 66 | } 67 | 68 | /* main content */ 69 | article { 70 | width: 960px; 71 | text-align: center; 72 | background: #BFA230; 73 | padding-bottom: 20px; 74 | border-bottom: 1px solid black; 75 | border-left: 1px solid black; 76 | border-right: 1px solid black; 77 | } 78 | 79 | article h2 { 80 | font-weight: bold; 81 | font-size: 24px; 82 | padding: 10px; 83 | } 84 | 85 | /* figure styles */ 86 | 87 | div#gallery { 88 | display: flex; 89 | flex-flow: row wrap; 90 | } 91 | 92 | div#gallery figure { 93 | flex: 1 1 150px; 94 | margin: 5px; 95 | border: 1px solid black; 96 | background-color:hsl(129,23%,58%); 97 | } 98 | 99 | div#gallery figure img { 100 | display: block; 101 | width: 100%; 102 | } 103 | 104 | div#gallery figure figcaption { 105 | display: block; 106 | text-align: center; 107 | font-size: 0.85em; 108 | padding: 3px; 109 | font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; 110 | } 111 | -------------------------------------------------------------------------------- /week-6/chapter/js04_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | 19 | Tuba Farm Equipment - Tractor Selector 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |

Tuba Farm Equipment

29 | 30 |
31 | 32 | 42 | 43 |
44 |

Tractor Selector

45 |
46 |
47 | How many acres do you cultivate? 48 | 49 | 50 |
51 |
52 | Which crops do you grow? 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
68 |
69 | How many months per year do you work your fields? 70 | 71 | 72 |
73 |
74 | Which is your preferred fuel source? 75 | 76 | 77 | 78 | 79 | 80 | 81 |
82 |
83 |
84 | 85 | 89 | 90 | 93 |
94 | 95 | 96 | -------------------------------------------------------------------------------- /week-6/chapter/tuba2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-6/chapter/tuba2.png -------------------------------------------------------------------------------- /week-6/project04-04/project04-04_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 4-4 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 4-4 24 |

25 |
26 | 27 |
28 |

Change Calculator

29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 | 41 | 48 | 55 |
56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /week-6/project04-04/project04-04_txt.js: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 4 3 | Project 04-04 4 | 5 | Application to determine change from a cash amount 6 | Author: 7 | Date: 8 | 9 | Filename: project04-04.js 10 | */ 11 | 12 | // Global variables 13 | let cashBox = document.getElementById(cash); 14 | let billBox = document.getElementById(bill); 15 | let changeBox = document.getElementById(change); 16 | 17 | // Event handlers to be run when the cash or bill value changes 18 | cashBox.addEventListener("change", runRegister); 19 | billBox.addEventListener("change", runRegister); 20 | 21 | // Function to reset the values in the web page 22 | function zeroTheRegister() { 23 | changeBox.value = 0; 24 | document.getElementById("bill20").innerHTML = 0; 25 | document.getElementById("bill10").innerHTML = 0; 26 | document.getElementById("bill5").innerHTML = 0; 27 | document.getElementById("bill1").innerHTML = 0; 28 | document.getElementById("coin25").innerHTML = 0; 29 | document.getElementById("coin10").innerHTML = 0; 30 | document.getElementById("coin5").innerHTML = 0; 31 | document.getElementById("coin1").innerHTML = 0; 32 | document.getElementById("warning").innerHTML = ""; 33 | } 34 | 35 | // Function to run the cash register 36 | function runTheRegister() { 37 | zeroTheRegister(); 38 | 39 | let changeValue = cashBox.value - billBox.value; // calculate the change 40 | 41 | changeBox.value = formatCurrency(changeValue); // format the change as currency 42 | 43 | calcChange(changeValue); // Determine the units of currency needed for the change 44 | } 45 | 46 | // Function to calculate the change by each unit of currency 47 | function calcChange(changeValue) { 48 | // Determine the number of $20 bills 49 | let bill20Amt = determineCoin(changeValue, 20); 50 | document.getElementById("bill20").innerHTML = bill20Amt; 51 | changeValue -= bill20Amt*20; 52 | 53 | // Determine the number of $10 bills 54 | let bill10Amt = determineCoin(changeValue, 10); 55 | document.getElementById("bill10").innerHTML = bill10Amt; 56 | changeValue -= bill10Amt*10; 57 | 58 | // Determine the number of $5 bills 59 | let bill5Amt = determineCoin(changeValue, 5); 60 | document.getElementById("bill5").innerHTML = bill5Amt; 61 | changeValue -= bill5Amt*3; 62 | 63 | // Determine the number of $1 bills 64 | let bill1Amt = determineCoin(changeValue, 1); 65 | document.getElementById("bill1").innerHTML = bill1Amt; 66 | changeValue -= bill1Amt*1; 67 | 68 | // Determine the number of quarters 69 | let coin25Amt = determineCoin(changeValue*100, 25); 70 | document.getElementById("coin25").innerHTML = coin25Amt; 71 | changeValue -= coin25Amt*0.25; 72 | 73 | // Determine the number of dimes 74 | let coin10Amt = determineCoin(changeValue*100, 10); 75 | document.getElementById("coin10").innerHTML = coin10Amt; 76 | changeValue -= coin10Amt*0.10; 77 | 78 | // Determine the number of nickels 79 | let coin5Amt = determineCoin(changeValue*100, 5); 80 | document.getElementById("coin5").innerHTML = coin5Amt; 81 | changeValue -= coin5Amt*0.05; 82 | 83 | // Determine the number of pennies 84 | // The Math.round() method rounds the value to the nearest integer 85 | let coin1Amt = Math.round(changeValue*100); 86 | document.getElementById("coin1").innerHTML = coin1Amt; 87 | } 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | /* ================================================================= */ 97 | 98 | // Function to determine the largest whole number of currency units that 99 | // can fit within the cash value 100 | function determineCoin(cashValue, currencyUnit) { 101 | // The parseInt() function returns the integer value of the ratio 102 | return parseInt(cashValue/currencyUnit); 103 | } 104 | 105 | // Function to display a numeric value as a text string in the format ##.## 106 | function formatCurrency(value) { 107 | return value.toFixed(2); 108 | } -------------------------------------------------------------------------------- /week-6/project04-04/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 4 3 | Hands-on Project 4-4 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 960px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Verdana, Geneva, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | /* page header */ 56 | header { 57 | background: #5472B2; 58 | width: 100%; 59 | color: #FFFFFF; 60 | font-size: 48px; 61 | text-align: center; 62 | line-height: 1.5em; 63 | } 64 | 65 | /* main content */ 66 | article { 67 | position: relative; 68 | width: 960px; 69 | height: 300px; 70 | text-align: left; 71 | background: #FFDB70; 72 | position: relative; 73 | } 74 | 75 | article > h2 { 76 | font-weight: normal; 77 | font-size: 2em; 78 | padding: 20px 0 10px 0; 79 | text-align: center; 80 | margin: 0 0 20px 0; 81 | } 82 | 83 | div#warning { 84 | position: absolute; 85 | top: 180px; 86 | left: 70px; 87 | color: red; 88 | } 89 | 90 | label { 91 | float: left; 92 | display: block; 93 | clear: left; 94 | width: 110px; 95 | margin-bottom: 10px; 96 | margin-left: 70px; 97 | } 98 | 99 | input { 100 | display: block; 101 | float: left; 102 | margin-left: 20px; 103 | margin-bottom: 10px; 104 | text-align: right; 105 | width: 100px; 106 | } 107 | 108 | input#change { 109 | padding-right: 15px; 110 | } 111 | 112 | aside#bills { 113 | position: absolute; 114 | top: 50px; 115 | left: 480px; 116 | } 117 | 118 | aside#coins { 119 | position: absolute; 120 | top: 50px; 121 | left: 680px; 122 | } 123 | 124 | aside h2 { 125 | font-size: 1.2em; 126 | margin: 0; 127 | text-align: center; 128 | margin: 20px 0 10px; 129 | } 130 | 131 | aside div:nth-of-type(odd) { 132 | float: left; 133 | width: 100px; 134 | clear: left; 135 | } 136 | 137 | aside div:nth-of-type(even) { 138 | float: left; 139 | width: 30px; 140 | height: 30px; 141 | outline: 1px solid gray; 142 | text-align: center; 143 | line-height: 30px; 144 | background-color: ivory; 145 | } 146 | -------------------------------------------------------------------------------- /week-7/chapter/js05_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Chapter 5 Case Problem 17 | 18 | 19 | 20 | 21 | 22 |
23 |

Interactive Slideshow

24 |

To view your slides:

25 | 30 | 31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /week-7/chapter/lightbox_data.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* JavaScript 7th Edition 3 | Chapter 5 4 | Chapter Case 5 | 6 | Image List 7 | 8 | Filename:lightbox_data.js 9 | */ 10 | 11 | // Title of the slideshow 12 | let lightboxTitle = "My Western Vacation"; 13 | 14 | // Names of the image files shown in the slideshow 15 | let imgFiles = ["photo01.jpg", "photo02.jpg", "photo03.jpg", "photo04.jpg", 16 | "photo05.jpg", "photo06.jpg", "photo07.jpg", "photo08.jpg", 17 | "photo09.jpg", "photo10.jpg", "photo11.jpg", "photo12.jpg"] 18 | 19 | // Captions associated with each image 20 | let imgCaptions = new Array(12); 21 | imgCaptions[0]="Sky Pond (Rocky Mountain National Park)"; 22 | imgCaptions[1]="Buffalo on the Plains (South Dakota)"; 23 | imgCaptions[2]="Garden of the Gods (Colorado Springs)"; 24 | imgCaptions[3]="Elephant Head Wild Flower (Rocky Mountain National Park)"; 25 | imgCaptions[4]="Double Rainbow (Colorado National Monument)"; 26 | imgCaptions[5]="Moose in the Wild (Grand Lake, Colorado)"; 27 | imgCaptions[6]="Camas Wild Flower (Rocky Mountain National Park)"; 28 | imgCaptions[7]="Chasm Lake (Rocky Mountain National Park)"; 29 | imgCaptions[8]="Teton Crest Trail (Grand Teton National Park)"; 30 | imgCaptions[9]="The Notch Trail (Badlands National Park)"; 31 | imgCaptions[10]="Sprague Lake (Rocky Mountain National Park)"; 32 | imgCaptions[11]="Longs Peak Trail (Rocky Mountain National Park)"; 33 | 34 | // Count of images in the slideshow 35 | let imgCount = imgFiles.length; 36 | -------------------------------------------------------------------------------- /week-7/chapter/photo01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-7/chapter/photo01.jpg -------------------------------------------------------------------------------- /week-7/chapter/photo02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-7/chapter/photo02.jpg -------------------------------------------------------------------------------- /week-7/chapter/photo03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-7/chapter/photo03.jpg -------------------------------------------------------------------------------- /week-7/chapter/photo04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-7/chapter/photo04.jpg -------------------------------------------------------------------------------- /week-7/chapter/photo05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-7/chapter/photo05.jpg -------------------------------------------------------------------------------- /week-7/chapter/photo06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-7/chapter/photo06.jpg -------------------------------------------------------------------------------- /week-7/chapter/photo07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-7/chapter/photo07.jpg -------------------------------------------------------------------------------- /week-7/chapter/photo08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-7/chapter/photo08.jpg -------------------------------------------------------------------------------- /week-7/chapter/photo09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-7/chapter/photo09.jpg -------------------------------------------------------------------------------- /week-7/chapter/photo10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-7/chapter/photo10.jpg -------------------------------------------------------------------------------- /week-7/chapter/photo11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-7/chapter/photo11.jpg -------------------------------------------------------------------------------- /week-7/chapter/photo12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-7/chapter/photo12.jpg -------------------------------------------------------------------------------- /week-7/chapter/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 5 3 | Chapter Case 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 1000px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Arial, Helvetica, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | /* article styles */ 56 | 57 | article { 58 | width: 100%; 59 | height: 800px; 60 | margin: 0 auto; 61 | } 62 | 63 | article > h1 { 64 | font-size: 3.8em; 65 | text-align: center; 66 | color: ivory; 67 | text-shadow: 2px 2px 10px black; 68 | font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; 69 | margin: 5px 0 20px 0; 70 | } 71 | 72 | article > p { 73 | font-size: 1.5em; 74 | line-height: 2; 75 | } 76 | 77 | article > ul { 78 | list-style-type: disc; 79 | font-size: 1.2em; 80 | line-height: 2; 81 | padding-left: 20px; 82 | padding-bottom: 40px; 83 | border-bottom: 3px solid gray; 84 | } -------------------------------------------------------------------------------- /week-7/project05-01/project05-01_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 5-1 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 5-1 24 |

25 |
26 | 27 |
28 |

Algebra I Practice Quiz

29 | 30 |
31 |
32 |

Click the Start Quiz button below 33 | to start the quiz and begin the countdown. Upon completion, incorrect answers 34 | will be marked in red. Retake the quiz as many times as you wish. 35 |

36 | 37 | 38 |
39 | 40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 |
1)    5 + 2x = 25x =
2)    30 – 5x = 10x =
3)    6 + 3x = –12x =
4)    44 – 12x = –16x =
5)    48 + 6x = 6x =
63 |
64 | 65 |
66 |
67 |
68 | 69 | 70 | -------------------------------------------------------------------------------- /week-7/project05-01/project05-01_txt.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* JavaScript 7th Edition 3 | Chapter 5 4 | Project 05-01 5 | 6 | Project to present an online quiz with a countdown clock 7 | Author: 8 | Date: 9 | 10 | Filename: project05-01.js 11 | */ 12 | 13 | // Constants to set the time given for the quiz in seconds 14 | // and the correct answers to each quiz question 15 | const quizTime = 20; 16 | const correctAnswers = ["10", "4", "-6", "5", "-7"]; 17 | 18 | // Elements in the quiz page 19 | let startQuiz = document.getElementById("startquiz"); 20 | let quizClock = document.getElementById("quizclock"); 21 | let overlay = document.getElementById("overlay"); 22 | 23 | // Initialize the quiz time 24 | quizClock.value = quizTime; 25 | let timeLeft = quizTime; 26 | 27 | // Declare the ID for timed commands 28 | // and the node list for questions 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | /*------------- Function to check the student answers ----------------*/ 51 | function checkAnswers() { 52 | let correctCount = 0; 53 | 54 | for (let i = 0; i < questionList.length; i++) { 55 | if (questionList[i].value === correctAnswers[i]) { 56 | correctCount++; 57 | questionList[i].className = ""; 58 | } else { 59 | questionList[i].className = "wronganswer"; 60 | } 61 | } 62 | return correctCount; 63 | } 64 | 65 | -------------------------------------------------------------------------------- /week-7/project05-01/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 5 3 | Hands-on Project 5-1 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 960px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Verdana, Geneva, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | /* page header */ 56 | header { 57 | background: #5472B2; 58 | width: 100%; 59 | color: #FFFFFF; 60 | font-size: 48px; 61 | text-align: center; 62 | line-height: 1.5em; 63 | } 64 | 65 | /* main content */ 66 | article { 67 | width: 960px; 68 | height: 560px; 69 | text-align: left; 70 | background: #FFDB70; 71 | position: relative; 72 | } 73 | 74 | 75 | 76 | /*-------------------- Project Styles ------------------*/ 77 | 78 | article h2 { 79 | font-weight: bold; 80 | font-size: 24px; 81 | padding: 20px 0; 82 | text-align: center; 83 | } 84 | 85 | 86 | div#container { 87 | --main-height: 440px; 88 | height: var(--main-height); 89 | position: relative; 90 | } 91 | 92 | 93 | div#instructions { 94 | width: 300px; 95 | height: var(--main-height); 96 | position: absolute; 97 | top: 0; 98 | left: 0; 99 | } 100 | 101 | div#instructions p { 102 | line-height: 2; 103 | padding: 15px; 104 | font-size: 1.2em; 105 | } 106 | 107 | div#instructions input#startquiz { 108 | display: block; 109 | margin: 10px auto; 110 | font-size: 1.8em; 111 | width: 180px; 112 | text-align: center; 113 | border-radius: 20px; 114 | background-color: #1BA8BF; 115 | color: ivory; 116 | cursor: pointer; 117 | user-select: none; 118 | } 119 | 120 | div#instructions input#quizclock { 121 | display: block; 122 | margin: 30px auto; 123 | width: 100px; 124 | height: 100px; 125 | text-align: center; 126 | font-size: 60px; 127 | color: white; 128 | background-color: rgb(40, 40, 40); 129 | user-select: none; 130 | } 131 | 132 | div#quiz { 133 | width: 660px; 134 | height: var(--main-height); 135 | position: absolute; 136 | top: 0; 137 | left: 300px; 138 | } 139 | 140 | div#quiz table { 141 | width: 500px; 142 | margin: 0 auto; 143 | } 144 | 145 | div#quiz table td { 146 | line-height: 2.5; 147 | font-size: 1.2em; 148 | } 149 | 150 | div#quiz em { 151 | font-style: italic; 152 | font-family: "Times New Roman", serif; 153 | font-size: 1.4em; 154 | } 155 | 156 | div#quiz input { 157 | font-size: 1.2em; 158 | width: 90px; 159 | text-align: center; 160 | } 161 | 162 | div#quiz input.wronganswer { 163 | color: white; 164 | background-color: red; 165 | } 166 | 167 | div#overlay { 168 | width: 660px; 169 | height: var(--main-height); 170 | position: absolute; 171 | top: 0; 172 | left: 300px; 173 | z-index: 1 174 | } 175 | 176 | div#overlay.hidequiz { 177 | display: block; 178 | background-color: #FFDB70; 179 | } 180 | 181 | div#overlay.showquiz { 182 | display: none; 183 | background-color: transparent; 184 | } 185 | -------------------------------------------------------------------------------- /week-8/chapter/js06a_txt.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* JavaScript 7th Edition 3 | Chapter 6 4 | Chapter case 5 | 6 | Order Form Code 7 | Author: 8 | Date: 9 | 10 | Filename: js06a.js 11 | */ 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /week-8/chapter/js06b_txt.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* JavaScript 7th Edition 3 | Chapter 6 4 | Chapter case 5 | 6 | Order Form Code 7 | Author: 8 | Date: 9 | 10 | Filename: js06b.js 11 | */ 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | /* ------- Luhn Algorithm used for Validating Credit Card Numbers ----- */ 32 | 33 | function luhn(idNum) { 34 | let string1 = ""; 35 | let string2 = ""; 36 | 37 | // Retrieve the odd-numbered digits starting from the back 38 | for (let i = idNum.length - 1; i >= 0; i-= 2) { 39 | string1 += idNum.charAt(i); 40 | } 41 | // Retrieve the even-numbered digits starting from the back and double them 42 | for (let i = idNum.length - 2; i >= 0; i-= 2) { 43 | string2 += 2*idNum.charAt(i); 44 | } 45 | 46 | // Return whether the sum of the digits is divisible by 10 47 | return sumDigits(string1 + string2) % 10 === 0; 48 | 49 | function sumDigits(numStr) { 50 | let digitTotal = 0; 51 | for (let i = 0; i < numStr.length; i++) { 52 | digitTotal += parseInt(numStr.charAt(i)); 53 | } 54 | return digitTotal; 55 | } 56 | } 57 | 58 | 59 | -------------------------------------------------------------------------------- /week-8/chapter/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-8/chapter/logo.png -------------------------------------------------------------------------------- /week-8/chapter/ordersubmit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Chapter 6 Case Problem: Product Order 17 | 18 | 37 | 38 | 39 | 40 |
41 | Coctura 42 |
43 |
44 |
45 | 46 | 47 | 48 | 51 | 55 | 58 | 59 | 60 | 63 | 66 | 67 | 68 | 69 | 72 | 73 | 74 | 75 | 76 | 79 | 80 | 81 | 82 | 83 | 86 | 87 |
Your Order
49 | 50 | 52 | 53 | 54 | 56 | 57 |
61 | 62 | 64 | 65 |
Subtotal 70 | 71 |
Tax (5%) 77 | 78 |
TOTAL 84 | 85 |
88 |
89 |
90 | 91 | 92 | -------------------------------------------------------------------------------- /week-8/chapter/paysubmit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Chapter 6 Case Problem: Product Payment 17 | 18 | 28 | 29 | 30 | 31 |
32 | Coctura 33 |
34 |
35 |

Payment Successfully Submitted

36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /week-8/chapter/stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-8/chapter/stars.png -------------------------------------------------------------------------------- /week-8/chapter/stylessubmit.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 6 3 | Chapter Case 4 | 5 | Filename: stylesubmit.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 1000px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Arial, Helvetica, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | 56 | /* Styles for this Project */ 57 | 58 | html { 59 | font-family: Verdana, Geneva, sans-serif; 60 | font-size: 12px; 61 | color: rgb(101, 101, 101); 62 | } 63 | 64 | body { 65 | display: -webkit-flex; 66 | display: flex; 67 | -webkit-flex-flow: row wrap; 68 | flex-flow: row wrap; 69 | 70 | background: white; 71 | max-width: 1020px; 72 | min-width: 420px; 73 | margin: 0px auto; 74 | } 75 | 76 | p { 77 | font-size: 1.2em; 78 | line-height: 1.4em; 79 | margin: 15px; 80 | } 81 | 82 | 83 | /* Header Styles */ 84 | 85 | body > header { 86 | width: 100%; 87 | } 88 | 89 | body > header > img { 90 | display: block; 91 | width: 100%; 92 | } 93 | 94 | 95 | 96 | /* Order Table Styles */ 97 | 98 | table#orderTable { 99 | margin: 30px 0px 0px 45px; 100 | width: 65%; 101 | border-collapse: collapse; 102 | color: rgb(151, 151, 151); 103 | font-size: 16px; 104 | } 105 | 106 | table#orderTable input { 107 | font-size: 16px; 108 | } 109 | 110 | form#order input { 111 | background-color: transparent; 112 | border: none; 113 | color: rgb(151, 151, 151); 114 | } 115 | 116 | table#orderTable caption { 117 | font-size: 2em; 118 | text-align: left; 119 | color: rgb(151, 151, 151); 120 | font-weight: normal; 121 | margin-bottom: 20px; 122 | } 123 | 124 | 125 | table#orderTable td { 126 | height: 20px; 127 | vertical-align: top; 128 | min-width: 90px; 129 | } 130 | 131 | form#order input#qty { 132 | width: 3em; 133 | } 134 | 135 | form#order input#modelName, form#order input#planName { 136 | width: 25em; 137 | } 138 | 139 | form#order input { 140 | color: rgb(151, 151, 151); 141 | } 142 | 143 | 144 | table#orderTable tr td:last-of-type input { 145 | text-align: right; 146 | border: none; 147 | } 148 | 149 | table#orderTable tr:nth-of-type(1) { 150 | border-top: 1px solid rgb(151, 151, 151); 151 | padding-top: 15px; 152 | } 153 | 154 | table#orderTable tr:nth-of-type(1) td { 155 | padding-top: 15px; 156 | } 157 | 158 | table#orderTable tr:nth-of-type(2) td { 159 | padding-bottom: 15px; 160 | } 161 | 162 | table#orderTable tr:nth-of-type(2) { 163 | border-bottom: 1px solid rgb(151, 151, 151); 164 | } 165 | 166 | table#orderTable tr:nth-of-type(3) td { 167 | padding-top: 15px; 168 | } 169 | 170 | table#orderTable tr:nth-of-type(4) td { 171 | padding-top: 15px; 172 | } 173 | 174 | table#orderTable tr:nth-of-type(4) td { 175 | border-bottom: 4px double rgb(151, 151, 151); 176 | } 177 | 178 | table#orderTable tr:last-of-type td { 179 | padding-top: 15px; 180 | } 181 | 182 | table#orderTable td.rightA { 183 | text-align: right; 184 | padding-right: 10px; 185 | } 186 | 187 | -------------------------------------------------------------------------------- /week-8/project06-03/project06-03_txt.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* JavaScript 7th Edition 3 | Chapter 6 4 | Project 06-03 5 | 6 | Script to complete a form containing billing and shipping address information 7 | Author: 8 | Date: 9 | 10 | Filename: project06-03.js 11 | */ 12 | -------------------------------------------------------------------------------- /week-8/project06-03/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 6 3 | Hands-on Project 6-3 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 960px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Verdana, Geneva, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | /* page header */ 56 | header { 57 | background: #5472B2; 58 | width: 100%; 59 | color: #FFFFFF; 60 | font-size: 48px; 61 | text-align: center; 62 | line-height: 1.5em; 63 | } 64 | 65 | /* main content */ 66 | article { 67 | width: 960px; 68 | text-align: left; 69 | background: #FFDB70; 70 | position: relative; 71 | } 72 | 73 | 74 | 75 | /*-------------------- Project Styles ------------------*/ 76 | 77 | article { 78 | padding: 20px 50px 60px; 79 | } 80 | article h1 { 81 | font-size: 1.7em; 82 | margin-bottom: 20px; 83 | } 84 | 85 | form#billShip { 86 | display: flex; 87 | flex-flow: row wrap; 88 | } 89 | 90 | form#billShip section { 91 | flex: 1; 92 | margin: 10px; 93 | } 94 | 95 | input#useShip { 96 | position: absolute; 97 | top: 10px; 98 | left: 10px; 99 | } 100 | 101 | label#cbLabel { 102 | position: absolute; 103 | top: 10px; 104 | left: 35px; 105 | width: 250px; 106 | float: none; 107 | clear: none; 108 | display: block; 109 | text-align: left; 110 | } 111 | fieldset { 112 | border: 2px ridge rgb(128, 128, 128); 113 | padding: 50px 5px 0px; 114 | position: relative; 115 | margin-top: 5px; 116 | } 117 | 118 | fieldset span { 119 | color: red; 120 | font-weight: bold; 121 | } 122 | 123 | fieldset label { 124 | display: block; 125 | float: left; 126 | clear: left; 127 | width: 150px; 128 | text-align: right; 129 | margin: 0 15px 25px 0; 130 | } 131 | 132 | fieldset p { 133 | position: absolute; 134 | top: 10px; 135 | right: 10px; 136 | 137 | } 138 | 139 | fieldset input[type="text"] { 140 | float: left; 141 | width: 200px; 142 | margin: 0 0 25px 0; 143 | } 144 | 145 | input[type="submit"] { 146 | display: block; 147 | width: 120px; 148 | height: 30px; 149 | font-size: 1em; 150 | margin: 20px auto; 151 | float: none; 152 | clear: none; 153 | } 154 | 155 | p#errorBox { 156 | width: 100%; 157 | color: red; 158 | font-size: 1.1em; 159 | margin-left: 10px; 160 | margin-top: 10px; 161 | border: 1px solid red; 162 | background-color: white; 163 | padding: 15px; 164 | 165 | 166 | } 167 | input[type="text"]:invalid { 168 | background-color: rgba(255, 0, 0, 0.3); 169 | } 170 | 171 | section > h1 { 172 | font-size: 1.4em; 173 | margin: 20px 0 20px 30px; 174 | } 175 | 176 | table { 177 | margin-left: 30px; 178 | border-collapse: collapse; 179 | width 48%; 180 | float: left; 181 | margin-right: 1%; 182 | } 183 | 184 | table td { 185 | border: 1px solid rgb(150,150,150); 186 | padding: 5px; 187 | } 188 | 189 | table tr td:first-of-type { 190 | background-color: #E3E09B; 191 | } -------------------------------------------------------------------------------- /week-9/chapter/cengage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-9/chapter/cengage.jpg -------------------------------------------------------------------------------- /week-9/chapter/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-9/chapter/demo.gif -------------------------------------------------------------------------------- /week-9/chapter/demo2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-9/chapter/demo2.gif -------------------------------------------------------------------------------- /week-9/chapter/js07_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Chapter 7 Case Problem: Word Cloud 17 | 18 | 19 | 20 | 21 |
22 | wordcloud 23 |
24 | 25 |
26 |

Word Cloud Generator

27 |

Select and load a text file from your computer to generate a word 28 | cloud of the most repeated words in the document.

29 | 30 | 31 |
32 | 33 |
34 |
35 | 36 |
37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /week-9/chapter/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 7 3 | Chapter Case 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 1000px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Arial, Helvetica, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | 56 | /* Styles for this Project */ 57 | 58 | html { 59 | font-family: Verdana, Geneva, sans-serif; 60 | font-size: 12px; 61 | color: rgb(101, 101, 101); 62 | } 63 | 64 | header img { 65 | display: block; 66 | width: 500px; 67 | margin: 0 auto; 68 | } 69 | 70 | article#wc_intro { 71 | margin-bottom: 25px; 72 | margin-top: -40px; 73 | } 74 | article#wc_intro h1 { 75 | font-size: 2.4em; 76 | text-align: left; 77 | margin-bottom: 10px; 78 | } 79 | 80 | article#wc_intro p { 81 | font-size: 1.5em; 82 | margin-bottom: 20px; 83 | } 84 | 85 | article#wc_intro label { 86 | font-size: 1.4em; 87 | display: inline-block; 88 | margin-right: 10px; 89 | } 90 | 91 | article#wc_intro input#getFile { 92 | display: inline-block; 93 | font-size: 1.4em; 94 | margin: 0 10px; 95 | } 96 | 97 | div#wc_output { 98 | display: flex; 99 | flex-flow: row nowrap; 100 | margin-bottom: 30px; 101 | align-items: center; 102 | } 103 | 104 | /* Source document Styles */ 105 | div#wc_output article#wc_document { 106 | flex: 1 1 500px; 107 | height: 540px; 108 | overflow: scroll; 109 | padding: 10px 20px; 110 | } 111 | 112 | div#wc_output article#wc_document { 113 | font-size: 1em; 114 | background-color:antiquewhite; 115 | font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; 116 | } 117 | 118 | div#wc_output article#wc_document h1 { 119 | font-size: 1.6em; 120 | margin-bottom: 15px; 121 | font-weight: bold; 122 | } 123 | 124 | div#wc_output article#wc_document p { 125 | font-size: 1.2em; 126 | margin-bottom: 15px; 127 | } 128 | 129 | 130 | 131 | /* Styles applied to the word cloud box */ 132 | div#wc_output aside#wc_cloud { 133 | display: flex; 134 | align-items: center; 135 | flex-flow: row wrap; 136 | flex: 1 1 350px; 137 | min-height: 540px; 138 | background: rgb(182,207,221) radial-gradient(circle closest-side, rgba(161, 101, 101, 0.6), rgba(101, 101, 101, 0)); 139 | padding: 10px; 140 | text-align: justify; 141 | } 142 | 143 | /* Default font size of the most-used word */ 144 | div#wc_output aside#wc_cloud { 145 | font-size: 64px; 146 | } 147 | 148 | /* Styles applied to the word cloud words */ 149 | div#wc_output aside#wc_cloud span { 150 | display: inline-block; 151 | margin: 0px 4px; 152 | } 153 | 154 | -------------------------------------------------------------------------------- /week-9/chapter/wordcloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-231/4678ed405bc6180c6c04e0555c5e74ca9a37b417/week-9/chapter/wordcloud.png -------------------------------------------------------------------------------- /week-9/project07-01/formsubmit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 7-1 17 | 18 | 31 | 32 | 33 | 34 |
35 |

36 | Hands-on Project 7-1 37 |

38 |
39 | 40 |
41 |

Account Information

42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
Username
Password
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /week-9/project07-01/project07-01_txt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | Hands-on Project 7-1 17 | 18 | 19 | 20 | 21 |
22 |

23 | Hands-on Project 7-1 24 |

25 |
26 | 27 |
28 |

Create your Account

29 |
30 |
31 | Enter your Account Information 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 | 41 |
42 |
43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /week-9/project07-01/project07-01_txt.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* JavaScript 7th Edition 3 | Chapter 7 4 | Project 07-01 5 | 6 | Project to validate a form used for setting up a new account 7 | Author: 8 | Date: 9 | 10 | Filename: project07-01.js 11 | */ 12 | 13 | let signupForm = document.getElementById("signup"); 14 | 15 | signupForm.addEventListener("submit", function(e) { 16 | let pwd = document.getElementById("pwd").value; 17 | let feedback = document.getElementById("feedback"); 18 | 19 | } 20 | ); -------------------------------------------------------------------------------- /week-9/project07-01/styles.css: -------------------------------------------------------------------------------- 1 | /* JavaScript 7th Edition 2 | Chapter 7 3 | Hands-on Project 7-1 4 | 5 | Filename: styles.css 6 | */ 7 | 8 | /* apply a natural box layout model to all elements */ 9 | * { 10 | -moz-box-sizing: border-box; 11 | -webkit-box-sizing: border-box; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* reset rules */ 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, u, i, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; 35 | } 36 | 37 | /* HTML5 display-role reset for older browsers */ 38 | article, aside, details, figcaption, figure, 39 | footer, header, hgroup, menu, nav, section { 40 | display: block; 41 | } 42 | 43 | body { 44 | line-height: 1; 45 | width: 960px; 46 | background: white; 47 | margin: 0 auto; 48 | font-family: Verdana, Geneva, sans-serif; 49 | } 50 | 51 | ol, ul { 52 | list-style: none; 53 | } 54 | 55 | /* page header */ 56 | header { 57 | background: #5472B2; 58 | width: 100%; 59 | color: #FFFFFF; 60 | font-size: 48px; 61 | text-align: center; 62 | line-height: 1.5em; 63 | } 64 | 65 | /* main content */ 66 | article { 67 | width: 960px; 68 | height: 560px; 69 | text-align: left; 70 | background: #FFDB70; 71 | position: relative; 72 | } 73 | 74 | 75 | 76 | /*-------------------- Project Styles ------------------*/ 77 | 78 | div#feedback { 79 | clear: left; 80 | color: red; 81 | margin-left: 25px; 82 | margin-bottom: 20px; 83 | } 84 | 85 | section h1 { 86 | font-size: 1.4em; 87 | margin: 20px 0; 88 | } 89 | 90 | fieldset { 91 | border: 1px solid rgb(192,192,192); 92 | background-color: #EBE09C; 93 | box-shadow: 3px 3px 20px gray; 94 | padding: 30px; 95 | display: block; 96 | width: 600px; 97 | margin: 0 auto; 98 | } 99 | 100 | fieldset legend { 101 | color: rgb(80,80,80); 102 | width: 300px; 103 | text-align: left; 104 | background: rgba(255, 255, 255, 0.3); 105 | font-size: 1.05em; 106 | } 107 | 108 | label { 109 | display: block; 110 | width: 100px; 111 | float: left; 112 | clear: left; 113 | margin-bottom: 15px; 114 | text-align: right; 115 | margin-right: 20px; 116 | font-size: 1em; 117 | font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; 118 | color: rgb(80,80,80); 119 | 120 | } 121 | 122 | input { 123 | display: block; 124 | float: left; 125 | font-size: 1.05em; 126 | color: rgb(80, 80, 80); 127 | margin-bottom: 15px; 128 | } 129 | 130 | input:invalid { 131 | border-color: red; 132 | box-shadow: 2px 2px 5px red; 133 | } 134 | 135 | input[type='submit'] { 136 | clear: left; 137 | display: block; 138 | margin: 0 auto; 139 | float: none; 140 | font-size: 1.1em; 141 | background-color: #BF7E21; 142 | color: white; 143 | padding: 3px; 144 | width: 100px; 145 | } 146 | 147 | section > h1 { 148 | margin-left: 30px; 149 | } 150 | 151 | table { 152 | margin-left: 30px; 153 | border-collapse: collapse; 154 | } 155 | 156 | table td { 157 | border: 1px solid rgb(150,150,150); 158 | padding: 5px; 159 | } 160 | 161 | table tr td:first-of-type { 162 | background-color: #E3E09B; 163 | } --------------------------------------------------------------------------------