Starter Skeleton
Here is a minimal, yet complete example of HTML, CSS and Javascript. Live demo of this on Glitch
Save the contents of each into a file (thus you should have three files: index.html, style.css and script.js) and then open index.html in your browser.
HTML (index.html):
<html>
<head>
<meta charset="utf-8" />
<title>My page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="toolbar">
<button value='coloured'>Colour</button>
<button value='enlarged'>Enlarge</button>
<button value='hidden'>Hide</button>
</div>
<div id="editor">
<form name="editorForm">
<label>Feelin': <input name="newText" placeholder="Hot"></label>
<button id="setTextButton">Set</button>
</form>
</div>
<div id="container">
<div id="test">
This is some text.
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (style.css):
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
#container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
#test {
width: 200px;
height: 100px;
border: 1px solid black;
padding: 1em;
}
.coloured {
color: white;
background: black;
}
.enlarged {
font-size: 200%;
}
.hidden {
display: none;
}
Javascript (script.js):
// Call 'onDocumentReady' when page is loaded
console.log('Script running');
if (document.readyState != 'loading'){
onDocumentReady();
} else {
document.addEventListener('DOMContentLoaded', onDocumentReady);
}
// Page is loaded! Now event can be wired-up
function onDocumentReady() {
console.log('Document ready.');
var el = document.getElementById('toolbar');
// Listen to any click that happens on the toolbar
// or its child elements (ie the BUTTONs)
el.addEventListener('click', onButtonClicked);
// Listen to 'click' on element with id 'setTextButton'
document.getElementById('setTextButton').addEventListener('click', onSetTextClicked);
}
// Called according to 'click' event
function onButtonClicked(e) {
console.log('onButtonClicked.');
// Ignore clicks on the toolbar
if (e.target.id == 'toolbar') return;
// Get a reference to the element we want to manipulate
// Here, we're using the id 'test'
var el = document.getElementById('test');
// Since each button has an assigned value, representing
// which class to toggle, it's pretty easy:
el.classList.toggle(e.target.value);
}
// 'Set' clicked
function onSetTextClicked(e) {
console.log('onSetTextClicked.');
e.preventDefault();
// Get reference to element to change by id
var el = document.getElementById('test');
// Get entered text from INPUT
var text = document.querySelector('input[name="newText"]').value;
// Set text
el.innerText = "Totally feelin' " + text;
}