marklchaves/javascript-exercise-changing-html-on-the-fly.css

## javascript-exercise-changing-html-on-the-fly.css
/* || General Styling */

body {
  background-color: black;
  color: white;
  font-size: 18px;
  margin: 2% 0;
}

h1 {
  color: white;
  background-color: black;
  padding: 3%;
  border-radius: 15px;
}

p, h1 {
  font-family: Arial, Helvetica;
  font-weight: normal;
  text-align: center;
}

/* || Form Styling */

input {
  line-height: 2;
  padding: 0 1%;
  border-radius: 5px;
}

input:focus {
  outline: none;
  border: 2px solid orange;
}

button {
  border: 2px solid white;
  border-radius: 5px;
  padding: 1% 2%;
  font-size: .85rem;
  color: white;
  background-color: black;
  text-transform: uppercase;
  float: left;
}

button:hover {
  color: black;
  background-color: white;
}

label {
  font-size: 1.25rem;
  text-align: center;
  font-family: Helvetica, Arial;
  float: right;
}

/* || Grid Styling */

.grid-container {
  display: grid;
  /* Rows / Columns */
  grid-template: 1fr 1fr / 2fr 3fr; /* repeat(2, 1fr); */
  gap: 1.25rem;
}

## javascript-exercise-changing-html-on-the-fly.html
<!DOCTYPE html>
<html lang="en">

<head>
  <title>JavaScript and HTML</title>
  <meta charset="utf-8" />
  <script>
  </script>
</head>

<body>
  <header>
    <h1 id="mainTitle"></h1>
  </header>

  <section id="intro">
    <p>This is an example of interactivity between<br>JavaScript and the HTML content of a document.</p>
    <p>Please change the title of this page.</p>
  </section>
  <section id="change-title" class="grid-container">
    <div>
      <label for="newTitle">New Title</label>
    </div>
    <div>
      <input id="newTitle" type="text" size="36" onfocus="highlightTitle()" onblur="noHighlight()">
    </div>
    <div></div>
    <div>
      <button onclick="changeTitle();">Do it!</button>
    </div>
  </section>
</body>

</html>

## javascript-exercise-changing-html-on-the-fly.js
/**
 *
 * Change History
 *
 * NEXT: Sanitise input string.
 *
 * 1 Jan 2020
 * - Added grid layout to format form fields.
 * - Added highlighting to title on input focus.
 * - Fixed to clear out input field after update.
 *
 * 31 Dec 2019
 * - Added fancy colour & button hover styling.
 * - Fixed so if entered multiple new titles
 *   it doesn't keep appending to previous title.
 *
 */

const MAIN_TITLE = "My Home Page Title is<br>";

/**
 * Good practise to call an "init" function
 * on page or window load.
 */
window.onload = init;

var mainTitle = document.querySelector("#mainTitle");

function init() {
  mainTitle.innerHTML = MAIN_TITLE;
}

function highlightTitle() {
  mainTitle.style.border = '2px solid orange' ;
}

function noHighlight() {
  mainTitle.style.border = 'none';
}

function clearInputField() {
  console.log("Clearing input field.")
  document.querySelector("#newTitle").value = '';
}

function changeTitle() {
  mainTitle.innerHTML = MAIN_TITLE + document.querySelector("#newTitle").value;
  console.log("Title updated.")
  noHighlight();
  clearInputField();
}

## javascript-exercise-changing-html-on-the-fly.markdown

      
    Raw
  

              javascript-exercise-changing-html-on-the-fly.markdown
            
          
    JavaScript Exercise: Changing HTML on the Fly

A Pen by mark on CodePen.
License.
	/* \|\| General Styling */

	body {
	background-color: black;
	color: white;
	font-size: 18px;
	margin: 2% 0;
	}

	h1 {
	color: white;
	background-color: black;
	padding: 3%;
	border-radius: 15px;
	}

	p, h1 {
	font-family: Arial, Helvetica;
	font-weight: normal;
	text-align: center;
	}

	/* \|\| Form Styling */

	input {
	line-height: 2;
	padding: 0 1%;
	border-radius: 5px;
	}

	input:focus {
	outline: none;
	border: 2px solid orange;
	}

	button {
	border: 2px solid white;
	border-radius: 5px;
	padding: 1% 2%;
	font-size: .85rem;
	color: white;
	background-color: black;
	text-transform: uppercase;
	float: left;
	}

	button:hover {
	color: black;
	background-color: white;
	}

	label {
	font-size: 1.25rem;
	text-align: center;
	font-family: Helvetica, Arial;
	float: right;
	}

	/* \|\| Grid Styling */

	.grid-container {
	display: grid;
	/* Rows / Columns */
	grid-template: 1fr 1fr / 2fr 3fr; /* repeat(2, 1fr); */
	gap: 1.25rem;
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>JavaScript and HTML</title>
	<meta charset="utf-8" />
	<script>
	</script>
	</head>

	<body>
	<header>
	<h1 id="mainTitle"></h1>
	</header>

	<section id="intro">
	<p>This is an example of interactivity between<br>JavaScript and the HTML content of a document.</p>
	<p>Please change the title of this page.</p>
	</section>
	<section id="change-title" class="grid-container">
	<div>
	<label for="newTitle">New Title</label>
	</div>
	<div>
	<input id="newTitle" type="text" size="36" onfocus="highlightTitle()" onblur="noHighlight()">
	</div>
	<div></div>
	<div>
	<button onclick="changeTitle();">Do it!</button>
	</div>
	</section>
	</body>

	</html>
	/**
	*
	* Change History
	*
	* NEXT: Sanitise input string.
	*
	* 1 Jan 2020
	* - Added grid layout to format form fields.
	* - Added highlighting to title on input focus.
	* - Fixed to clear out input field after update.
	*
	* 31 Dec 2019
	* - Added fancy colour & button hover styling.
	* - Fixed so if entered multiple new titles
	* it doesn't keep appending to previous title.
	*
	*/

	const MAIN_TITLE = "My Home Page Title is<br>";

	/**
	* Good practise to call an "init" function
	* on page or window load.
	*/
	window.onload = init;

	var mainTitle = document.querySelector("#mainTitle");

	function init() {
	mainTitle.innerHTML = MAIN_TITLE;
	}

	function highlightTitle() {
	mainTitle.style.border = '2px solid orange' ;
	}

	function noHighlight() {
	mainTitle.style.border = 'none';
	}

	function clearInputField() {
	console.log("Clearing input field.")
	document.querySelector("#newTitle").value = '';
	}

	function changeTitle() {
	mainTitle.innerHTML = MAIN_TITLE + document.querySelector("#newTitle").value;
	console.log("Title updated.")
	noHighlight();
	clearInputField();
	}