AbudiMutamba/DOM

## DOM
/**
 * DOM: short Document Object Model
 * DOM is a W3C (World Wide Web) Consortium standard.
 * It is broken into 3 catogeries. i.e: Core DOM, XML DOM and HTML DOM
 * HTML DOM enables JavaScript to get, add, change/modify, remove element in HTML.
 */
// console.log(document.documentURI);
// console.log(document);

//DOM changes happen dynamically or on the fly and they're not persisted.

// console.log(document.title);

// document.title = "DOM session";

// console.log(document.title);

//DOM methods: Are used to create/access/retrieve/get HTML elements
// const APP = document.getElementById("app");

// console.log(APP);
//DOM properties: Are used to modify content of HTML elements
// if (APP != null) {
//   APP.innerText = "Test text";
//   APP.innerHTML = APP.innerText + "<h1>Heading</h1>";
//   // console.log(APP);

//   //input fields
//   const FIRST_NAME_ELEMENTS = document.getElementsByName("fname");
//   FIRST_NAME_ELEMENTS.forEach((element) => console.log(element.value));
//   // console.log(typeof FIRST_NAME);

//   const FIRST_NAME = document.getElementById("fname");

//   setTimeout(() => {
//     //Delay the execution of the code below by 2seconds. To help see the value in the First name field.
//     console.log(FIRST_NAME.value);
//   }, 2000);

//   // console.log(FIRST_NAME.style);
//   FIRST_NAME.style.border = "1px solid #000";
//   FIRST_NAME.style.borderRadius = "4px";
//   FIRST_NAME.style.padding = "10px";
// }


/**
 * Use JavaScript to change the background color
 * 1. Select the circle uing JavaScript
 * 2. Use the style property to change the background
 * 3. Make sure there is a delay before the channel
 */

const COLOR_CIRCLE = document.getElementById("color-circle")

//console.log(COLOR_CIRCLE);

let colors = ["#f00", "#0f0", "#00f"];
let colorPosition = 0;

setInterval(() => {
COLOR_CIRCLE.style.backgroundColor = colors[colorPosition]
colorPosition++;
if (colorPosition >= colors.length) colorPosition = 0;
}, 2000)

## index.html
<!DOCTYPE html>
<html>

<head>
	<title>Parcel Sandbox</title>
<!--let's try to access the title-->
	<meta charset="UTF-8" />
<style type ="test/css" rel= "stylesheet">
 #color-circle{
width: 150px;
height: 150px;
background-color: #000;
border-radius:50%;
 }
</style>
</head>

<body>
<div id="color-circle"></div>
	<!-- <div id="app">
   kyendiKyendi
	</div>
  <form method="post" action="#">
<div>
<label>First name</label>
<input type= "text" name = "fname" id="fname" placeholder="first name"/>
</div>
<label>Last name</label>
<input type= "text" name = "lname" id="lname" placeholder="last name"/>
<label>Middle name</label>
<input type= "text" name = "mname" id="mname" placeholder="Middle name"/>
  </form> -->

	<script src="src/index.js">
	</script>
</body>

</html>
	/**
	* DOM: short Document Object Model
	* DOM is a W3C (World Wide Web) Consortium standard.
	* It is broken into 3 catogeries. i.e: Core DOM, XML DOM and HTML DOM
	* HTML DOM enables JavaScript to get, add, change/modify, remove element in HTML.
	*/
	// console.log(document.documentURI);
	// console.log(document);

	//DOM changes happen dynamically or on the fly and they're not persisted.

	// console.log(document.title);

	// document.title = "DOM session";

	// console.log(document.title);

	//DOM methods: Are used to create/access/retrieve/get HTML elements
	// const APP = document.getElementById("app");

	// console.log(APP);
	//DOM properties: Are used to modify content of HTML elements
	// if (APP != null) {
	// APP.innerText = "Test text";
	// APP.innerHTML = APP.innerText + "<h1>Heading</h1>";
	// // console.log(APP);

	// //input fields
	// const FIRST_NAME_ELEMENTS = document.getElementsByName("fname");
	// FIRST_NAME_ELEMENTS.forEach((element) => console.log(element.value));
	// // console.log(typeof FIRST_NAME);

	// const FIRST_NAME = document.getElementById("fname");

	// setTimeout(() => {
	// //Delay the execution of the code below by 2seconds. To help see the value in the First name field.
	// console.log(FIRST_NAME.value);
	// }, 2000);

	// // console.log(FIRST_NAME.style);
	// FIRST_NAME.style.border = "1px solid #000";
	// FIRST_NAME.style.borderRadius = "4px";
	// FIRST_NAME.style.padding = "10px";
	// }


	/**
	* Use JavaScript to change the background color
	* 1. Select the circle uing JavaScript
	* 2. Use the style property to change the background
	* 3. Make sure there is a delay before the channel
	*/

	const COLOR_CIRCLE = document.getElementById("color-circle")

	//console.log(COLOR_CIRCLE);

	let colors = ["#f00", "#0f0", "#00f"];
	let colorPosition = 0;

	setInterval(() => {
	COLOR_CIRCLE.style.backgroundColor = colors[colorPosition]
	colorPosition++;
	if (colorPosition >= colors.length) colorPosition = 0;
	}, 2000)
	<!DOCTYPE html>
	<html>

	<head>
	<title>Parcel Sandbox</title>
	<!--let's try to access the title-->
	<meta charset="UTF-8" />
	<style type ="test/css" rel= "stylesheet">
	#color-circle{
	width: 150px;
	height: 150px;
	background-color: #000;
	border-radius:50%;
	}
	</style>
	</head>

	<body>
	<div id="color-circle"></div>
	<!-- <div id="app">
	kyendiKyendi
	</div>
	<form method="post" action="#">
	<div>
	<label>First name</label>
	<input type= "text" name = "fname" id="fname" placeholder="first name"/>
	</div>
	<label>Last name</label>
	<input type= "text" name = "lname" id="lname" placeholder="last name"/>
	<label>Middle name</label>
	<input type= "text" name = "mname" id="mname" placeholder="Middle name"/>
	</form> -->

	<script src="src/index.js">
	</script>
	</body>

	</html>