How to delay a page rendering: setTimeout
It's possible to hold a component from displaying in a regular workflow using setTimeout.
console.log('What is the capital of Peru?')
setTimeout(function(){
console.log('Lima!') //displays after the 2 statements
}, 3000)
console.log('Ready for next question?')
/** setTimeout(function, delay) */
Forms: Getting input from Users
Clicking on the label brings the corresponding input into focus. More input types can be found at the W3 website- https://www.w3schools.com/html/html_form_input_types.asp
<form>
<label for="astronautName">Astronaut Name</label>
<input
type="text"
id="astronautName"
name="astronautName"
placeholder="Neil Armstrong"
required
>
<!-- Both work the same way, (button inside form behaves like submit)
but button offers more functionality like adding images-->
<input type="submit">
<button>submit</button>
</form>
Adding required to a field will not allow the field to be sent empty. If its an email, it also verifies if '@' is added or not.
Forms: preventDefault
The default behavior of a form clears the form and adds input data to the URL after the submit is clicked. This behavior can be prevented by following code in JS:
loginForm.addEventListener('submit', function(event) {
event.preventDefault();
})
Forms: Multiple Buttons Behaviour
When a form has more than one button, then both of them behave as submit buttons. There are 2 other different types that can be added to prevent submit-like behavior. reset clears the form and button just works as a regular button inside the form.
<button type="submit">Accept</button>
<button type="reset" or type="button">Decline</button>
Form Data - Storing data in an object
FormData is a special function to which users can pass data from the form. It stores the data as objects and is retrieved using special methods.
const formData = document.getElementById('form-id')
const data = new FormData(formData)
console.log(data)
const name = data.get('input-element-name')
console.log(name)
Disabling Elements
Buttons can be disabled and enabled dynamically in JavaScript by setting the boolean value.
buttonId.disabled = true
CSS: row-reverse
Flexbox display can be reversed using flex-direction property. It's applied to the flex container and components will display in reverse (by column or row)
.reverse {
flex-direction:row-reverse
}
Toggling Classes
If the use-case involves that classes be toggled on and off, then toggle method can be used on classList.
container.classList.toggle('className')
Accessibility
People using screen-readers, need labels to be applied on elements so thats accessible to them. For input elements, it can be achieved by:
<input
type="text"
name="userName"
placeholder="Enter your full name"
aria-label="Full Name"
required
>
All the concepts applied to the Cookie Consent project =D