$\backslash$head$>$

$-$

const COST$\_$PER$\_$LB $=50$;

const COST$\_$PER$\_$MILE $=75$;

const SETUP$\_$COST $=500$;

$//$ Global Variables

let wgtBox $=$ document.getElementById$("$wgtBox$")$;

let distBox $=$ document.getElementById$("$distBox$")$;

let msgBox $=$ document.getElementById$("$msgBox$")$;

$//$ Event Handlers

document.getElementById$("$wgtBox$").$onchange $=$ calcTotal;

document.getElementById$("$distBox$").$onchange $=$ calcTotal;

document.getElementById$("$setupBox$").$onclick $=$ calcTotal;

$//$ Function to calculate an estimate of the total moving cost

Gfunction calcTotal$()\{$

let totalCost $=0$; $//$ Set the initial estimate to $$0$

msgBox.innerHTML $=""$; $//$ Erase any warnings in the message box

totalCost $+=$ wgtBox.value $*$ COST$\_$PER$\_$LB;

totalCost $+=$ distBox.value $*$ COST$\_$PER$\_$MILE;

if $($document$.$getElementById$("$setupBox$").$checked$)\{$

totalCost $+=$ SETUP$\_$COST

$\}$

$//$ Display the moving cost estimate in the totalBox, formatted as currency

document.getElementById$("$totalBox$").$innerHTML $=$ formatCurrency$($totalCost$)$;

$//$ Function to display a numeric value as a text string in the format $##$.$##

function formatCurrency$($value$)\{$

return $""+$ value.toFixed $(2)$;

$\}$ Filename: styles.css

$-*/$

$/*$ apply a natural box layout model to all elements $*/$

Z$*\{$

$-$moz$-$box$-$sizing: border$-$box;

$-$webkit$-$box$-$sizing: border$-$box;

box$-$sizing: border$-$box;

$-\}$

$/*$ reset rules $*/$

html$,$ body, div, span, applet, object, iframe,

h$1,$ h$2,$ h$3,$ h$4,$ h$5,$ h$6,$ p$,$ blockquote, pre,

a$,$ abbr, acronym, address, big, cite, code,

del, dfn$,$ em$,$ img, ins, kbd$,$ q$,$ s$,$ samp,

small, strike, strong, sub, sup, tt$,$ var,

b$,$ u$,$ i$,$ center,

dl$,$ dt$,$ dd$,$ ol$,$ ul$,$ li$,$

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr$,$ th$,$ td$,$

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

$\backslash$time$,$ mark, audio, video $\{$

margin: $0$;

padding: $0$;

border: $0$;

font$-$size: $1008$;

font: inherit;

vertical$-$align: baseline;

$-\}$

$/*$ HTML$5$ display$-$role reset for older browsers $*/$

article, aside, details, figcaption, figure,

ffooter, header, hgroup, menu, nav, section $\{$

display: block;

$-\}$

Gbody $\{$

line$-$height: $1$;

width: $960$px;

background: white;

margin: $0$ auto;

font$-$family: Verdana, Geneva, sans$-$serif;

$-\}$

Gol, ul $\{$

list$-$style: none;

$-\}$

$/*$ page header $*/$

Jheader $\{$

background: #$5472$B$2$;

width: $1008$;

color: #FFFFFF;

font$-$size: $48$px;

text$-$align: center;

line$-$height: $1\mathrm{.}5$em;

$-\}$

$/*$ main content $*/$

Jarticle $\{$

width: $960$px;

height: $250$px;

text$-$align: left;

background: #FFDB$70$;

position: relative;

$-\}$

Garticle h$2\{$

font$-$weight: bold;

font$-$size: $24$px;

padding: $10$px;

$-\}$

$7$form $\{$

padding$-$left: $30$px;

$-\}$

Glabel $\{$

display: inline$-$block;

width: $400$px;

float: left;

clear: left;

margin$-$bottom: $20$px;

$-\}$

Ginput $\{$

float: left;

marain$-$bottom: $20$px:

Gdiv#totalBox $\{$

width: $175$px;

float: left;

outline: $1$px solid gray;

height: $20$px;

line$-$height: $20$px;

font$-$size: $15$px;

text$-$align: right;

background$-$color: white;

padding$-$right: $5$px;

$\}$

span $\{$

display: inline$-$block;

float: left;

margin$-$left: $8$px;

$-\}$

lspan#msgBox $\{$

color: red;

font$-$size: $1\mathrm{.}4$;

$-\}$