-=EmpyreaL=-: HTML

Showing posts with label HTML. Show all posts

Sunday, October 23, 2022

Add and append HTML elements in React

Append arr2 elements to arr: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

(arr) => arr.concat(gerArr2())

Append arr2 array to arr: (4) [Array(4), Array(4), Array(4), Array(4)]

(arr) => [...arr, gerArr2()]

Save search term state to React Hooks with spread operator and wrapper function

// Using .concat(), no wrapper function (not recommended)
setSearches(searches.concat(query))

// Using .concat(), wrapper function (recommended)
setSearches(searches => searches.concat(query))

// Spread operator, no wrapper function (not recommended)
setSearches([...searches, query])

// Spread operator, wrapper function (recommended)
setSearches(searches => [...searches, query])

https://stackoverflow.com/questions/54676966/push-method-in-react-hooks-usestate

https://javascript.plainenglish.io/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc

https://www.skptricks.com/2018/06/append-or-prepend-html-using-reactjs.html

Monday, October 17, 2022

Events in JavaScript

If parent node contains 'logo' in className => class="logo":

if (e.target.parentNode.classList.contains('logo')) { }

If parent node contains <li></li> TAG:

if (e.target.parentNode.tagName === 'LI') { }

console.log(e.target); // show clicked target

console.log(e); // show event

https://www.section.io/engineering-education/keyboard-events-in-javascript/

https://stackoverflow.com/questions/7723188/what-properties-can-i-use-with-event-target

Saturday, September 3, 2022

JavaScript DOM manipulation

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);

Black contact form code for React

Links to local pages do not work in Chrome and Firefox

e.preventDefault() method stops the default action of a selected element from happening by a user. This method does not accept any parameter and works in two ways: It prevents a link from following the URL so that the browser can't go another page. It prevents a submit button from submitting a form.

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Thursday, August 25, 2022

Link SVG into web page not working

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<svg>

</svg>

</body>

</html>

Saturday, August 20, 2022

More button and cards with JavaScript

<!DOCTYPE html>

<html>

<head>

<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>

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>

Visual Studio Code HTML Emmet Abbreviations

! // HTML page template

ul#nav // ul id="nav"

(li>a)*4

.class*3 // 3 div with class="class"

h1{FlexBox}+(section#Id>h2{Properties of the .. flex Container}+.flexbox-container>(.flexbox-item)*6)*2

Ctrl+Alt+ ↑ / ↓, Esc

Ctrl + D, D, D, D...

Ctrl + Shift + E

Ctrl + P

Ctrl + ,

Tuesday, August 10, 2021

JavaScript React Developer Tools

React Developer Tools extension for Chrome Browser

https://reactjs.org/docs/create-a-new-react-app.html

Saturday, July 31, 2021

GoldenDict Dark theme creation with CSS styles

Ctrl + Alt + T

cd /home/user/.goldendict/styles/

mkdir Dark

cd Dark

touch qt-style.css

pico qt-style.css