DOM Cumulative I - JavaScript Programming

All these exercises are in continuation. Do each of them in progression after completion of the previous one.

The initial HTML & CSS code is already given below.
Create HTML & CSS files with code given below & link the CSS file in HTML.
Create a JavaScript file now & link this JavaScript file with your HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>DOM</title>
  </head>
  <body>
  </body>
</html>

.red {
  color: red;
}

.blue {
  color: blue;
}

.box {
  border: 1px solid black;
  background-color: pink;
}

Now add the following elements on the webpage using only JavaScript and DOM methods.

Q1.

A p with red text that says “Hey, I am a red paragraph!”

Q2.

A h3 with blue text that says “I am a blue h3!”

Q3.

A div with a black border and pink background color with the following element inside it:

An another h1 that says “I am h1 inside a div”
A p that says “I am p inside a div”

Expected Output:

Preview