Day 11- Drag and Drop

Any HTML element can be dragged and dropped irrespective of its native behavior.⁣
⁣It is done by using the global attribute draggable i.e setting its value to true.⁣
⁣
Events like ondragstart, ondragover, etc. are used to make elements more functional.⁣
⁣Images and links are by default draggable.

<p draggable="true">
  Drag and Drop me on the other side!
</p>

Day 12- Progress and Meter Elements

1. <progress> element:
   • Displays a progress bar showing the completion progress of a task.⁣⁣
   • It has two attributes max and value.⁣⁣
   • No min attribute, the minimum value is always 0.⁣⁣ ⁣⁣
2. <meter> element:
   • Displays either a fractional value or a value within a range.⁣⁣
   • It is not only to show the progress(high), it can also fluctuate(high or low).⁣⁣
   • Has the following attributes: max, min, high, low, optimum.

<label for="download">Download Progress</label>
<progress id="download" max="100" value="50">
</progress>
<br />
<label for="temp">Temperature Meter:</label>
<meter id="temp" min="0" max="100" low="30" high="60" optimum="80" value="10">
</meter>

Day 13- Play some Music

⁣<audio> element provides a way to add audio resources to a web page without the need to use any other plugin.⁣
Just include a path to the media inside the src attribute.⁣
⁣
A fallback text is enclosed within the tag to be shown to browsers that don't support the element.⁣
⁣
By default, the browser does not show any controls. ⁣
To add the ability for users to play, pause, adjust volume, etc. 'controls' attribute can be used.

<audio controls src="dope_music.mp3">
  Your browser does not support the audio element.
</audio>

Day 14- Show Insertion and Deletion

<ins> element indicates text that has been added to the document.⁣⁣
<del> is used for the text that has been deleted from the document.⁣⁣

So far, both of these have accessibility concerns which can be overcome by using, before and after pseudo-elements with the CSS content property.

<p>Go to a
  <del>movie</del>
  <ins>conference</ins>
  this weekend.
</p>

Day 15- Word Break Opportunity

⁣When a word is too long, and you don't want the browser to break it at the random place, <wbr> helps to break the word where you want.⁣
⁣
The <wbr> element specifies a position within text where it would be appropriate to add a line-break.

<p>This is a lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggg<wbr>word.</p>

Day 16- Best Practices

A great place to find the HTML best practices to write maintainable and scalable code.

HTML best practices

Day 17- Adding Color picker and Date picker into the forms

⁣<input> element with the attribute of type="color" provides an interface of color picker or the user can also enter the color in hexadecimal format.⁣
⁣
<input> element with the attribute of type="date" creates a date picker or lets the user enter a date.⁣

<label>Choose Color:
</label>
<input type="color" value="#ffffff" />

Day 18- Setting Shortcut Keys

⁣The accesskey is a global attribute that specifies a shortcut key to activate an element.⁣
⁣
Shortcut keys can be accessed in number of ways according to the browser such as:⁣
ctrl + alt + accesskey⁣
OR⁣
alt + accesskey
OR⁣
alt + shift + accesskey

Day 19- Make Input fields readonly

⁣The readonly attribute prevents the editing on an input field by the user i.e. it makes the elements immutable.⁣
⁣
These readonly elements can be styled by :read-only and :read-write pseudo classes.⁣
⁣
It is different from the disabled attribute as the elements with readonly attribute are focusable whereas this isn't the case with the disabled.

<label for="country">Country:
</label>
<input type="text" name="country" value="India" readonly>

Day 20- Ways to improve Accessibility

1. Use semantic elements.⁣ ⁣
2. A label should be associated with every form control.⁣ ⁣
3. Alternative text should be included for images.⁣ ⁣
4. Use tabindex="0" to add an element that does not normally receive focus, such as <div> or <span>.⁣ ⁣
5. Use ARIA roles and attributes to provide additional meaning.For example, role="search" for search functionality.

Thanks for reading ❤

Twitter
Instagram