Frontend
Browser console
document.querySelector('img')
const ourImage = document.querySelector('img');
ourImage.setAttribute('src', 'link')
To clear the console
clear()
Change body color function
const bodyHTML = document.querySelector('body');
const randomClickFunction = function() {
const colors = ['#32a852', '#3d66ad', '#c41f54'];
const randomIndex = Math.floor(Math.random() * colors.length);
const randomColor = colors[randomIndex];
bodyHTML.style.backgroundColor = randomColor;
console.log('the user clicked');
}
randomClickFunction()
bodyHTML.onclick = randomClickFunction;
HTML CSS and Javascript
<html>
<head>
<title> Sample page </title>
<style>
button {
background-color: blue;
border: 1px solyd navy;
padding: 20px;
front-size: 1.4rem;
}
button:hover {
background-color: navy;
border: none;
color: white;
}
</style>
</head>
<body>
<button> Click me </button>
<div class="container"></div>
<script>
function onClickEvent() {
const el = document.createElement('p');
el.innerText = 'Clicked button'
document.querySelector('.container').appendChild(el);
}
document.querySelector('button').onclick = onClickEvent;
</script>
</body>
</html>
Node.js file
node sample.js
435
dariashantalova@Darias-MacBook-Air frontend % cat sample.js
function doMath(x, y) {
return x * y;
}
const result = doMath(5, 87);
console.log(result);
Javascript is imprementation of ECMA specification
https://ecma-international.org/publications-and-standards/standards/ecma-262/