CSS HOVER TO JS

Hover pseudo class

refers to a the state of a user interacting with an element using a pointing device (mouse)

Improved user experience

Hover effects provide visual cues to user, indicating interactive elements and making it clear what happenes

Enhanced visual effects

Hover effects can add touch of personality and visual interest to your webpages.

Accessibility

Hover effects can be used to provide additional information or context to users

<svg>

create a check symbol

<use>

reusable

stroke-dashoffset

animate the check symbol on state change

transform

create a zoom effect

:hover

adding the animations on border like changing color

:before

a pseudo element at the list item anchor to create a hover effect

transform: scale(0)

hiding the hover effect

these are pseudo selectors to transition the pseudo elements

:focus and :hover

transform:scale(1)

to shows its colored background

z-index

prevent the pseudo element from covering the anchor element

Dynamic HTML

makes possible a web page to react and change in response to the user’s action

HTML

defines web sites content through semantic tags

semantic tags

(headings,list,paragraphs)CS

CSS

defines 'rules’ or styles for presenting every aspect of an html

Javascript

defines dynamic behavior. Programming logic for interaction with the user to handle events

Javascript

front end scripting language developed by netscape for dyanamic content

Client-side technology

Embedded in your HTML page, interpreted by the Web Browsers

Powerful

to manipulate the DOM (document object model)

AJAX

Asynchronous JavaScript and XML

Ajax

new technique for creating better and faster and more interactive web applications with the help of XML, HTML, CSS and Java Script

XML

commonly sued as the format for receiving server data, although any format including plain text

<script>

javascript code can be placed tag it in the head not in body

page loading or when the browser fires an events

javascript code is executed during

event handlers

function calls or code can be attached as

new array()

declaring new array

var arr = [];

declaring array with elements

arr.push();

appending an eleement

arr.pop()

getting the last eleement

arr.indexOf();

finding element index in the array

alert()

alert box with text and ok button

confirm()

contains text ok buton and cancel button

prompt()

contain text input field with default value

switch

statements works like in c#

splitting code into parts

code structure of functions data comes in result returned

document object model

every HTML element is accessible via the javascript DOM, MOST DOM can be manipulated by the programmer. the event model lets a document to react when the user des something on the page

getElementById()

Access elements via their ID

getElementsbyName()

via name attribute

getElementByTagName()

via tagname

style properrty

allows modifying the CSS styles of the element

classname

class attribute of the tag

innerHTML

holds all the entire HTML code inside the elementread

read

only properties with information for the current element and its state

element.childNode(), element.parentNode()

acessing eleements through DOM tree structure