How to create a rainbow background color with "radial-gradient" by JavaScript?

I am making a clock.

I wanted to make a background image of the clock  like rainbow color  by only JavaScript.

I used this JavaScript code:

Type    "radial - gradient".

 

-  control a direction with   "circle at 80 %  70 %".

-  choose color like   "green"   above.

-  size the color to be big or small  like   "green 5 %".

-  add   " transparent "   to make the color stronger or weaker  with   " % "   like   "transparent 100%".

The result will be like this :

 

Product Landing Page ( error - solved )

When I scroll down with a mouse, 

YouTube video covers the Header.

I found error on " position: relativee; ".

I changed to " position: relative; ", 

but it's still unresolved.

So, I deleted it.

I deleted "position: relative;".

Also, I changed "width" and 

"height".

Now, It works well with the changed codes.

YouTube video does not cover the Header when scrolling down with a mouse.

making a "Product Landing Page" by "GitHub Codespaces" was more comfortable.

I always used Visual Studio Code.

I am currently making a "Product Landing Page".

For few days, I have used GitHub Codespaces. 

GitHub Codespaces has same functions like Visual Studio Code.

As a picture below,  we can create files and folders, and can check a result through Live Server as same as Visual Studio Code :

 

The most comfortable part was I could coding, update, and check the result right away on a same website.

Learn more​ Here is a list of resources that may be helpful as you continue your learning journey.

React Official Website

https://reactjs.org/

Choosing between Traditional Web Apps and Single Page Apps (Microsoft)

https://docs.microsoft.com/en-us/dotnet/architecture/modern-web-apps-azure/choose-between-traditional-web-and-single-page-apps

React Source Code (Github)

https://github.com/facebook/react

Introduction to React.js

The original video recorded at Facebook in 2013.

https://youtu.be/XxVg_s8xAms

Virtual Photo Exhibition with Bootstrap ( error - solved )

Project:   Virtual Photo Exhibition

Programming language:     HTML,  CSS,   Javascript 

Front end framework:     Boostrap

.

I linked CSS-CDN and 

Javascript-CDN in index.html.  

I made another file for pictures

This img src didn't work in result.

It shows only word "falls" without picture.

After many attempts, it finally worked with these codes.

what is Alignment?

text-align : can align text in css.

css에서  {text-align: center;}

               {text-align: left;}

                 {text-align: right;}

                   {text-align: justify;}

* justify는 text가 same width가 되도록 퍼뜨린다.

*   when "justify" spreads the text out, text will be on the line with same width.

ex of HTML center alignment:

<div class="parent">  

<div class="child">

  </div>

</div>

.parent { border: 4px solid

                  blue;}

.child { width: 50%;

        padding:20px;

       border: 4px solid red;

       margin: auto;}

What is DOM?

 

DOM is document object model.

I could find more information from https://www.w3.org/TR/WD-DOM/introduction.html 

DOM (document object model)  looks like this: