Web Dev Everyday - 5th September 2024 🖥️

Welcome to Web Dev Everyday – your daily dose of 3 minute web development emails.

Let's dive in!

🎯 Tip of the day - 5 short Javascript tips!

1. Detect User’s Operating System

   Get details about the user's OS platform using navigator.platform.

const OS = navigator.platform;
console.log(OS);

2. Prevent Page Refresh

   Stop a link from refreshing the page with javascript:void(0).

<a href="javascript:void(0);">Click me</a>

3. Validate Emails

   Use a regular expression to verify email addresses.

const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(emailPattern.test("[email protected]"));

4. Redirect Pages

   Navigate to another page by changing window.location.href.

window.location.href = 'https://example.com';

5. Detect Mobile Browsers

   Check if the user is on a mobile device with navigator.userAgent.

const isMobile = /Mobi|Android/i.test(navigator.userAgent);

console.log(isMobile);

Note: Those tips show some cool, native Javascript one-liners. It does not mean they are the best way to do stuff. For example for validations you might prefer using libraries such as zod or yup.

📰 Challenge - Pricing card

Brief: Build pricing card given the UI file.

Ideas to push it further:

1. Dynamic Pricing Animation: Animate the price on hover or when a discount is applied.

2. Interactive Hover Effects: Highlight the deliverables on hover with icons or subtle color changes.

3. Subscription Simulation: Add a toggle to compare monthly vs. yearly pricing.

4. Tooltips: Display additional information on features with tooltips.

5. Call to Action (CTA) Enhancement: Animate the "Get started" button on hover to increase engagement (example: border animation)