If parent node contains 'logo' in className => class="logo":
If parent node contains <li></li> TAG:
https://www.section.io/engineering-education/keyboard-events-in-javascript/
https://stackoverflow.com/questions/7723188/what-properties-can-i-use-with-event-target
index.html
<div class="wrapper"> // content container
<header></header>
<main></main>
<footer></footer>
</div>
https://stackoverflow.com/questions/40515142/how-to-make-a-sticky-footer-in-react
https://stackoverflow.com/questions/71478639/footer-not-sticking-to-the-bottom-of-the-page-in-react
https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap
https://stackoverflow.com/questions/55541850/how-to-make-footer-stay-at-bottom-of-the-page-with-flex-box
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate2
https://freefrontend.com/css-button-click-effects/
https://www.w3schools.com/howto/howto_css_modals.asp
'use strict';
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnsOpenModal = document.querySelectorAll('.show-modal');
const openModal = function () {
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
};
const closeModal = function () {
modal.classList.add('hidden');
overlay.classList.add('hidden');
};
for (let i = 0; i < btnsOpenModal.length; i++)
btnsOpenModal[i].addEventListener('click', openModal);
btnCloseModal.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
closeModal();
}
});
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
WEB APIs unclude DOM methods and properties.
let let1, let2, let3, let4; // global variables without values
const func1 = function () { let1 = 0; let2 = 2; let3= [3, 3, 3], let4= true } // reassign values in =>
const displayMessage = function (message) { // assign parameter to code to be executed
document.querySelector('.message').textContent = message; // use parameter
};
displayMessage('My message'); // call function and pass arguments === parameter values
console.log(document.querySelector('.message').textContent);
console.log(document.querySelector('.message').textContent = 'Correct Number!');
document.querySelector('.guess').value = 23;
console.log(document.querySelector('.guess').value);
Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (108)
npm rebuild node-sass // in application folder
rebuilt dependencies successfully // Worked out on Kubuntu Linux.
justify-content: center // space-between // space-evenly // space-around
align-items: center //stretch // baseline
// individual item settings
align-self: stretch; // fill entire space
order: -1 // -2 etc // change order of items
flex-grow: 1 // 2 etc // increase size of item
flex-shrink: 0; // decrease size of item
flex-basis: 20% // width of individual item
.item {
flex: 0 1 30%; // flex: flex-grow, flex-shrink, flex-basis
}
https://dev.to/visuellverstehen/common-mistakes-when-writing-css-with-bem-4921
https://css-tricks.com/bem-101/
https://blog.logrocket.com/bem-vs-smacss-comparing-css-methodologies/
npm start // error in Visual Studio Code integrated bash - run separately
sudo apt install nodejs
sudo apt install npm
sudo npm install live-server -g
live-server // in project folder to see changes real-time
sudo npm install node-sass -g // install globally and add to dependencies
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
added 240 packages, and audited 241 packages in 25s
19 packages are looking for funding
run `npm fund` for detail
3 high severity vulnerabilities
To address all issues, run:
npm audit fix
Run `npm audit` for details.
sudo npm install autoprefixer --save-dev
sudo npm install concat --save-dev
sudo npm install postcss-cli --save-dev
sudo npm install npm-run-all -g
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;} // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</style>
</head>
<body>
<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>
Ctrl + Shift + I
Ctrl + Shift + M
https://www.w3schools.com/css/default.asp
https://css-tricks.com/snippets/
https://validator.w3.org/
https://type-scale.com/
Colour picker
Ctrl + Alt + T
cd /home/user/.goldendict/styles/
mkdir Dark
cd Dark
touch qt-style.css
pico qt-style.css
