CONTENTS:

• Used Technology
• Used Colors
• Used Resources
• Extended Features
• My Learning
  • How to use multiple media queries?
  • How to access CSS variables using javascript?
  • How to change CSS variable value using javascript?
  • How to detect if the device is in portrait or landscape mode?
• Live Site Link
• Credit

PREVIEW

USED TECHNOLOGY

• HTML
• CSS
• JAVASCRIPT

USED COLORS

Color	Hex
White	#fff
Navy	#162938

USED RESOURCES

• WALLPAPER
• ICONS
  • CLOSE ICON <ion-icon name="close"></ion-icon>
  • USER ICON <ion-icon name="person"></ion-icon>
  • EMAIL ICON <ion-icon name="mail"></ion-icon>
  • PASSWORD ICON <ion-icon name="lock-closed"></ion-icon>

EXTENDED FEATURES

• Responsive design
• Custom CSS variables
• Manipulation of CSS variables using JavaScript
• Device orientation detection

MY LEARNING

How to use multiple media queries?

@media only screen and (max-width: 480px) {

}

@media screen and (min-width: 481px) and (max-width: 768px) and (orientation: portrait) {

}

@media screen and (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {

}

How to access CSS variables using javascript?

:root {
    --deviceWidth: 375px;
    --deviceHeight: 667px;
}

const root = document.querySelector(':root');
const defaultDeviceWidth = getComputedStyle(root).getPropertyValue('--deviceWidth');
const defaultDeviceHeight = getComputedStyle(root).getPropertyValue('--deviceHeight');

console.log({defaultDeviceWidth});
console.log({defaultDeviceHeight});

How to change CSS variable value using javascript?

:root {
    --deviceWidth: 375px;
    --deviceHeight: 667px;
}

const root = document.querySelector(':root');

root.style.setProperty('--deviceWidth', '480px');
root.style.setProperty('--deviceHeight', '768px');

console.log({deviceWidth});
console.log({deviceHeight});

How to detect if the device is in portrait or landscape mode?

screen.orientation.addEventListener("change", function() {
    if (screen.orientation.type.includes("portrait")) {
        // Portrait mode
        console.log('Portrait');
    } else {
        // Landscape mode
        console.log('Landscape');
    }
});

🔗 LIVE SITE LINK

CREDIT

• Codehal