I need help using JavaScript to complete the project.

CMPS $162$: Module $6$ Programming Project

$*\{$ font$-$family: monospace; $\}$

$.$degreeBox $\{$display: inline$-$block;$\}$

#fahrenheit,#celsius,#boomText $\{$line$-$height: $2\mathrm{.}5$em;font$-$size: $1\mathrm{.}5$em;padding: $0\mathrm{.}5$em;$\}$

section$\{$width:$50\%$;margin: $1$em auto;padding:$1$em;text$-$align: center;border$-$bottom: $1$px dotted green;$\}$

#boomText$\{$width:$124$px;$\}$

$//1.$ Complete the Fahrenheit to Celsius converter below. The following tasks

$//$ remain: $(1)$ on the blur event in the Fahrenheit input field call the

$//$ fahrenheitToCelsius function, $(2)$ on the blur event in the Celsius input

$//$ field call the celsiusToFahrenheit function, $(3)$ implement the

$//$ fahrenheitToCelsius function that reads from the Fahrenheit input field,

$//$ performs the conversion, and writes to the Celsius field, and

$//(4)$ implement the celsiusToFahrenheit function that reads from the Celsius

$//$ input field, performs the conversion, and writes to the Fahrenheit field.

$//$ The conversion formulas can be found on the web

$//$ The results should rounded to the nearest degree.

$//$ An example is that $80$ degrees Fahrenheit should be $27$ degrees Celsius

$//($and vice versa$).$

function fahrenheitToCelsius$()\{$

$//$ implement your program here

$//...$

$\}$

function celsiusToFahrenheit$()\{$

$//$ implement your program here

$//...$

$\}$

$//2.$ Write a function that replaces the button with the id "boomText" in the DOM with an image. The

$//$ function should:

$//$ a$.$ Remove the boomText button node from the DOM.

$//$ b$.$ Create a new image $($img$)$ node in the same place in the DOM where the button once was. The

$//$ attributes are:

$//+$ src

$//+$ height $=49$

$//+$ alt $=$ "This is an image that says boom!"

$//+$ id$=$"boom"

$//$ c$.$ Call the function when the "boomText" button is clicked.

$//3.$ Write a function that appends a new paragraph $($p$)$ node with the id "childNode" inside the div tag

$//$ that is inside the section with the "section$-3"$ id$.$ NOTE: Do not change the existing HTML$.$ The

$//$ function should:

$//$ a$.$ put your name in the innerText or innerHTML property,

$//$ b$.$ change the style of the new node in at least three ways... font size, text position, colors, for

$//$ example. Be creative. But, I need to be able to read your name and your code should not interfer

$//$ with the rest of the page.

$//$ c$.$ call the function when the page loads.

$//$ HINT: use the firstChild or childNodes properties described on page $173$ of the book.