DEV Community: TD!

Managing Routes and Navigation for a React Subdomain

TD! — Sat, 08 Feb 2025 08:48:18 +0000

In the first part of this series, I discussed how I structured a modular React layout for a subdomain. Now, in this second part, I’ll dive into how I managed routing and navigation to ensure seamless transitions between different layouts using React Router.

Using React Router to Manage Layouts

Since React is a Single Page Application (SPA) framework, managing navigation effectively is crucial. React Router provides a powerful way to define different layouts for different routes, making it an excellent tool for handling multiple sections of an app with distinct designs.

Key Routing Considerations

Separate Layouts for Different Pages – The main homepage and services page must have their own headers and footers.
Dynamic Component Rendering – Depending on the route, we should render different navigation and layout components.
SEO Optimization – Ensuring correct metadata for each section.

Creating a Dedicated Route for the Services Page

To maintain modularity, I structured my routes in App.js like this:


import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { ServicesLayout } from './layouts/ServicesLayout';
import { HomePage } from './HomePage';
import { MainLayout } from './layouts/MainLayout';

function App() {
  return (
    <Router>
      <Routes>
        {/* Default homepage layout */}
        <Route path="/" element={<MainLayout />}>
          <Route index element={<HomePage />} />
        </Route>

        {/* Services page with a separate layout */}
        <Route path="/services" element={<ServicesLayout />} />
      </Routes>
    </Router>
  );
}

export default App;

Explanation

The MainLayout wraps the homepage and other standard pages.
The ServicesLayout is a standalone route that provides a unique look and feel for the /services page.
By structuring it this way, we ensure that users always get the correct layout depending on their route.

Dynamically Rendering Headers and Footers

Since we have two different layouts, we need a way to ensure that the correct navbar and footer are displayed on each page. Instead of repeating code, I used dynamic rendering to conditionally display components based on the active route.

Approach:

Check Route Location – Use the useLocation hook to determine which layout to render.
Conditional Rendering – Display ServicesHeader and ServicesFooter only when the user is on /services.

Example Implementation


import { useLocation } from 'react-router-dom';
import { ServicesHeader } from './ServicesHeader';
import { ServicesFooter } from './ServicesFooter';
import { MainHeader } from './MainHeader';
import { MainFooter } from './MainFooter';

function LayoutManager({ children }) {
  const location = useLocation();

  const isServicesPage = location.pathname.startsWith('/services');

  return (
    <div>
      {isServicesPage ? <ServicesHeader /> : <MainHeader />}
      <main>{children}</main>
      {isServicesPage ? <ServicesFooter /> : <MainFooter />}
    </div>
  );
}

This method ensures that the correct UI components are displayed dynamically, keeping the code DRY (Don't Repeat Yourself) and maintainable.

Example: Implementing `react-router-dom`

To integrate React Router effectively, ensure you have installed react-router-dom:

npm install react-router-dom

Then, wrap the main app with Router and use Routes to define paths.


import { BrowserRouter as Router } from 'react-router-dom';
import LayoutManager from './LayoutManager';
import AppRoutes from './AppRoutes';

function App() {
  return (
    <Router>
      <LayoutManager>
        <AppRoutes />
      </LayoutManager>
    </Router>
  );
}

export default App;

SEO and Meta Tag Considerations

One challenge with SPAs is managing SEO since content is dynamically rendered. To ensure the /services page has its own metadata, I used react-helmet-async:

Installing `react-helmet-async`


npm install react-helmet-async

Adding Dynamic Meta Tags


import { Helmet } from 'react-helmet-async';

function ServicesLayout() {
  return (
    <div>
      <Helmet>
        <title>Our Services - Company Name</title>
        <meta name="description" content="Explore our top-notch services tailored for your business needs." />
      </Helmet>
      <ServicesHeader />
      <main>
        <ServicesHero />
        <MachinesList />
        <BuildingSection />
        <ProductionSection />
        <InvestmentSection />
        <CertificatesSection />
        <ServicesContact />
      </main>
      <ServicesFooter />
    </div>
  );
}

Benefits:

Ensures each page has unique meta tags for search engines.
Improves SEO ranking and visibility.

With React Router, I was able to efficiently manage multiple layouts and dynamically render components based on route location. This approach keeps the codebase modular and easy to maintain while ensuring the correct UI components load for each section.

Day 4 of #60daysofcode

Building a Modular React Layout for a Subdomain

TD! — Sat, 08 Feb 2025 08:04:11 +0000

In modern web development, it's common to have different sections of an application that require distinct layouts, navigation, and styling. In my case, I needed to create a dedicated services page that had a completely different navbar and footer from the homepage. This article is the first in a five-part series where I walk you through how I built a modular React layout for a subdomain, starting with the fundamental structure and component breakdown.

Understanding the Need for a Separate Layout

In many web applications, especially those structured as Single Page Applications (SPAs), different sections may serve different user needs. The homepage often has a global navigation bar and footer that apply site-wide. However, in cases where a subdomain or a specific section of the site needs a distinct identity, using a separate layout becomes necessary.

Key Reasons for a Separate Layout:

Branding & Design Consistency – A service page might require a professional or corporate feel, different from the main site.
Performance Optimization – Loading only necessary assets for the section improves efficiency.
Scoped Styles – Preventing CSS conflicts between the main site and the subdomain layout.
Better Component Reusability – Breaking down UI into modular components enhances maintainability.

Setting Up the Project Structure

To keep things modular and manageable, I structured my React project like this:

/src
 ├── components
 │   ├── ServicesHeader.js
 │   ├── ServicesHero.js
 │   ├── machines/
 │   │   └── MachinesList.js
 │   ├── building/
 │   │   └── BuildingSection.js
 │   ├── production/
 │   │   └── ProductionSection.js
 │   ├── investment/
 │   │   └── InvestmentSection.js
 │   ├── certificates/
 │   │   └── CertificatesSection.js
 │   ├── ServicesContact.js
 │   ├── ServicesFooter.js
 ├── layouts
 │   ├── ServicesLayout.js
 ├── App.js

This approach ensures that the services page has its own encapsulated components while still leveraging React’s modular architecture.

Breaking Down the Layout (`ServicesLayout` Component)

The ServicesLayout component serves as the primary layout for the services section. It contains a unique header and footer while encapsulating all the content sections within a <main> tag.

Implementing `ServicesLayout.js`

import React from 'react';
import { ServicesHeader } from './ServicesHeader';
import { ServicesHero } from './ServicesHero';
import { MachinesList } from './machines/MachinesList';
import { BuildingSection } from './building/BuildingSection';
import { ProductionSection } from './production/ProductionSection';
import { InvestmentSection } from './investment/InvestmentSection';
import { CertificatesSection } from './certificates/CertificatesSection';
import { ServicesContact } from './ServicesContact';
import { ServicesFooter } from './ServicesFooter';

export function ServicesLayout() {
  return (
    <div className="min-h-screen bg-gray-50">
      <ServicesHeader />
      <main>
        <ServicesHero />
        <MachinesList />
        <BuildingSection />
        <ProductionSection />
        <InvestmentSection />
        <CertificatesSection />
        <ServicesContact />
      </main>
      <ServicesFooter />
    </div>
  );
}

Key Features of this Layout:

Encapsulation – The layout is self-contained, allowing easy integration with routing.
Component-Based Architecture – Each section is modular, making updates simpler.
Separation of Concerns – The services page does not interfere with the main app’s layout.

Handling Global Styles vs. Scoped Styles

One challenge in having different layouts is ensuring that styles do not clash. Here’s how I managed styles effectively:

Using Tailwind CSS for Scoped Styles

Since I’m using Tailwind CSS, I applied scoped classes at the layout level.

/* Tailwind-based scoped styles */
.min-h-screen {
  min-height: 100vh;
}
.bg-gray-50 {
  background-color: #f9fafb;
}

This approach ensures that the services page maintains a distinct look without affecting global styles.

Alternative: Using CSS Modules

For more explicit styling, you could use CSS Modules:

/* ServicesLayout.module.css */
.layoutContainer {
  min-height: 100vh;
  background-color: #f9fafb;
}

Then, import it in ServicesLayout.js:

import styles from './ServicesLayout.module.css';

<div className={styles.layoutContainer}>

Integrating the Layout with React Router

To ensure that this layout is used only when navigating to the services page, I configured React Router like this:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { ServicesLayout } from './layouts/ServicesLayout';
import { HomePage } from './HomePage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/services" element={<ServicesLayout />} />
      </Routes>
    </Router>
  );
}

export default App;

What This Does:

Loads HomePage at /
Loads ServicesLayout at /services
Ensures a clean separation between different layouts

By structuring the application this way, I successfully built a modular React layout that serves as a subdomain with a distinct look and feel. This approach allows for flexibility, performance optimizations, and better maintenance of the codebase.

See the homepage navbar below:

Day 3 of #60daysofcode

Improving React UI Components: Replacing Icons, Fixing Errors, and Handling Images Efficiently

TD! — Thu, 06 Feb 2025 10:30:13 +0000

Introduction

In modern React development, handling UI components effectively is crucial for delivering a seamless user experience. This article covers my
day 2 in the #60daysofcode journey, including replacing icons with logos, fixing import errors, ensuring full image visibility, and switching from remote URLs to local images.

The Work: Enhancing a Navigation and Footer Component

Our first task was replacing an existing BookOpen icon with a logo image in the navigation and footer components.

Replacing `BookOpen` with a Logo

We originally had this:


<Link to="/" className="flex items-center space-x-2">
  <BookOpen className="h-8 w-8 text-white" />
  <span className="text-white font-bold text-xl">Beamers International Schools</span>
</Link>

Updated Code with Logo:


<Link to="/" className="flex items-center space-x-2">
  <img src="/logo.png" alt="Logo" className="h-10 w-auto" />
</Link>

Ensuring Full Image Visibility

When replacing the logo in the About section, the issue was that the top of the image was getting cut off. Initially, it was implemented with object-cover, causing unwanted cropping:


<img
  src={logo}
  className="w-full h-full object-cover rounded-lg shadow-xl"
  alt="School building"
/>

Solution: Using object-contain ensures that the full image is visible without cropping:


<img
  src={logo}
  className="w-full h-full object-contain rounded-lg shadow-xl"
  alt="School building"
/>

The Process: Fixing Errors and Enhancing Navigation

Fixing the "Menu is Not Defined" Error

A common error encountered was:

Uncaught ReferenceError: Menu is not defined

This happened because the Menu and X icons were being used without importing them.

Fix: Ensure they are imported properly, depending on the library being used.


import { Menu, X } from "@heroicons/react/outline"; // For Heroicons


import { Menu, X } from "lucide-react"; // For Lucide React

Handling Local Images Instead of URLs

To use a local image file instead of a remote URL, we explored two approaches:

Using images from the public/ folder:


const galleryImages = [
  {
    url: "/images/classroom.jpg", // Public folder reference
    caption: "Students engaged in interactive learning"
  }
];

Using images inside src/assets/ with imports:


import classroomImage from "../assets/classroom.jpg";

const galleryImages = [
  {
    url: classroomImage,
    caption: "Students engaged in interactive learning"
  }
];

The Results: Improved UI and Stability

After implementing these updates:

The navigation and footer now display a logo instead of an icon.
Images retain their full visibility without being cropped.
Navigation errors (Menu is not defined) were resolved.
Gallery images can now use local files instead of external URLs.

By carefully managing icons, images, and imports in a React project, I improved maintainability and user experience. These enhancements ensure that:
✅ UI elements are well-structured and visually appealing.

✅ Common errors (e.g., missing imports) are prevented.

✅ Images are loaded properly without cropping.

Day 2 of #60daysofcode

Understanding React Component Exports and TypeScript Conversion: A Case Study with a WhatsApp Chat Button

TD! — Wed, 05 Feb 2025 09:07:25 +0000

Introduction

React developers often encounter the choice between named exports and default exports when organizing their components. Additionally, transitioning from JavaScript to TypeScript improves type safety and maintainability. In this blog, I'll explore these concepts using a practical example: a WhatsApp chat button that provides users with a direct link to WhatsApp support.

The Work: Building a WhatsApp Chat Component

I started with a JavaScript-based WhatsAppChat.jsx component and converted it to TypeScript (WhatsAppChat.tsx). The component displays a floating WhatsApp button with a tooltip that appears on hover. Clicking the button opens a WhatsApp chat with a predefined phone number.

Original JavaScript Implementation (`WhatsAppChat.jsx`)


import React, { useState } from 'react';

export default function WhatsAppChat() {
  const [showTooltip, setShowTooltip] = useState(false);
  const whatsappNumber = '1234567890'; // Replace with actual WhatsApp number
  const whatsappLink = `https://wa.me/${whatsappNumber}`;

  return (
    <div className="relative">
      <a
        href={whatsappLink}
        target="_blank"
        rel="noopener noreferrer"
        className="fixed bottom-8 right-8 bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition-colors duration-200 z-50"
        aria-label="Chat on WhatsApp"
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
      >
        <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967..."/>
        </svg>
      </a>
      {showTooltip && (
        <div className="fixed bottom-24 right-8 bg-white px-4 py-2 rounded-lg shadow-lg z-50 animate-fade-in">
          <p className="text-gray-800 whitespace-nowrap">Need help? Chat with us on WhatsApp</p>
        </div>
      )}
    </div>
  );
}

The Process: Converting to TypeScript

To enhance maintainability, we converted the JavaScript component to TypeScript by:

Adding explicit type annotations for state and variables.
Using React.FC to enforce component structure.
Choosing between named and default exports.

Final TypeScript Implementation (`WhatsAppChat.tsx`)


import React, { useState } from "react";

export const WhatsAppChat: React.FC = () => {
  const [showTooltip, setShowTooltip] = useState<boolean>(false);
  const whatsappNumber: string = "07031118649";
  const whatsappLink: string = `https://wa.me/${whatsappNumber}`;

  return (
    <div className="relative">
      <a
        href={whatsappLink}
        target="_blank"
        rel="noopener noreferrer"
        className="fixed bottom-8 right-8 bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition-colors duration-200 z-50"
        aria-label="Chat on WhatsApp"
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
      >
        <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967..."/>
        </svg>
      </a>
      {showTooltip && (
        <div className="fixed bottom-24 right-8 bg-white px-4 py-2 rounded-lg shadow-lg z-50 animate-fade-in">
          <p className="text-gray-800 whitespace-nowrap">Need help? Chat with us on WhatsApp</p>
        </div>
      )}
    </div>
  );
};

Concepts Explained

1️⃣ Named vs. Default Exports

Named Export (export const WhatsAppChat)
- Can export multiple functions/components from the same file.
- Must be imported using destructuring:
```
import { WhatsAppChat } from "./WhatsAppChat";
```
Default Export (export default WhatsAppChat)
- Allows exporting only one component per file.
- Can be imported without destructuring:
```
import WhatsAppChat from "./WhatsAppChat";
```
- Useful for modules that have a single primary export.

2️⃣ TypeScript Benefits in React

Type Safety: Prevents errors by enforcing data types.
Better Code Readability: Easier for teams to understand.
Enhanced IntelliSense & Autocomplete: Improves developer productivity.
Scalability: Ideal for large React projects.

3️⃣ Using `React.FC` in TypeScript

React.FC ensures the function follows React’s component structure.
It provides built-in support for children props.

4️⃣ Strongly Typed State with `useState`

Instead of useState(false), we explicitly declare the type:


const [showTooltip, setShowTooltip] = useState<boolean>(false);

This ensures showTooltip is always a boolean, preventing unintended data assignments.

The Results: Improved Code Maintainability & Type Safety

After converting to TypeScript, our component:

Became more reliable and self-documenting.
Allowed early error detection during development.
Enabled scalable component reuse in larger projects.

Conclusion

Converting a React component from JavaScript to TypeScript improves code quality, maintainability, and developer experience. Additionally, understanding named vs. default exports helps in structuring React applications effectively.

Day 1 of #60daysofcode

Optimizing Image Imports in JavaScript Projects: A Modular Approach

TD! — Tue, 04 Feb 2025 07:47:18 +0000

Introduction

Managing images efficiently in a JavaScript or React project can be a challenging task, especially when dealing with a large number of assets. A well-structured approach ensures maintainability, scalability, and performance optimization. In this blog, we'll explore a modular approach to importing and exporting images in a JavaScript project and why this method is superior to traditional practices.

The Traditional Approach: Direct Imports

Many developers initially import images directly within each component where they are needed. For example:


import logo from './logo.png';
import backend from './backend.png';

const Header = () => (
  <header>
    <img src={logo} alt="Logo" />
  </header>
);

Problems with Direct Imports

Redundant Imports: Each component requiring the same image must re-import it, leading to repetitive code.
Difficult to Manage: As the number of images grows, managing imports across multiple components becomes cumbersome.
Harder Maintenance: If an image file is moved or renamed, every reference across multiple files needs to be updated.

A Better Approach: Centralized Imports and Exports

To solve these problems, we can create a central assets.js file that acts as an index for all images. This allows us to import assets from a single location and access them throughout the project.

Step 1: Organize Image Files

Structure your assets in meaningful directories:

/assets
  ├── logo.png
  ├── backend.png
  ├── tech/
  │    ├── python.png
  │    ├── tensorflow.png
  ├── company/
  │    ├── microsoft.jpg
  │    ├── adani.png

Step 2: Create an `assets.js` File

In this file, import all images and export them in a single object:


// assets.js
import logo from './logo.png';
import backend from './backend.png';
import python from './tech/python.png';
import tensorflow from './tech/tensorflow.png';
import microsoft from './company/microsoft.jpg';
import adani from './company/adani.png';

export {
  logo,
  backend,
  python,
  tensorflow,
  microsoft,
  adani
};

Step 3: Importing Assets in Components

Now, instead of importing images individually in each component, we can import them from assets.js:


import { logo, backend, python } from './assets';

const Header = () => (
  <header>
    <img src={logo} alt="Logo" />
  </header>
);

const TechStack = () => (
  <section>
    <img src={python} alt="Python Logo" />
  </section>
);

Advantages of This Approach

1. Improved Code Maintainability

Images are managed from a single file, making updates easy.
If an image location or filename changes, updates need to be made only in assets.js instead of multiple components.

2. Better Readability and Organization

Assets are grouped logically in directories like /tech/ and /company/, making navigation easier.
A single import statement in components enhances readability.

3. Performance Optimization

Minimizes unnecessary imports: Components import only the images they need.
Lazy Loading Support: Images can be dynamically imported to optimize performance.

4. Scalability for Larger Projects

New images can be added easily without affecting existing imports.
Standardized asset management makes it easier for teams to collaborate.

Further Optimizations

1. Lazy Loading with React

For performance gains, images can be loaded dynamically:


const logo = React.lazy(() => import('./logo.png'));

2. Webpack Aliases

For better path management, you can define Webpack aliases to avoid ../../ in imports:


resolve: {
  alias: {
    '@assets': path.resolve(__dirname, 'src/assets/')
  }
}

Then, import images using:


import { logo } from '@assets/assets';

Day 0 of #60daysofcode

Multi-level Tic Tac Toe Game

TD! — Thu, 26 Dec 2024 20:36:58 +0000

Let's create a Single Player Tic Tac Toe Game with 10 Levels of Increasing Difficulty. The idea is to progressively make the AI opponent more challenging. At level 1, the computer makes random moves, and by level 10, the computer plays near-perfectly.

📂 Project Structure

multi_level_tic_tac_toe/
│-- index.html
│-- styles.css
└-- script.js

🚀 How the Game Works

Levels of Difficulty:
- Level 1: The AI makes completely random moves.
- Level 2-5: The AI tries to block or win if possible, otherwise makes random moves.
- Level 6-10: The AI always looks to win or block, making it progressively harder to beat.
Gameplay:
- Select a difficulty level using the number input (1 to 10).
- Click on an empty cell to make your move.
- The computer will respond based on the selected difficulty.
- The game ends when a player wins or it's a draw.
Reset Button:
- Resets the game board and allows you to select a new difficulty.

View on GitHub

Dice Race: Player vs Computer

TD! — Thu, 26 Dec 2024 20:32:36 +0000

🎲 Dice Race: Player vs Computer

Dice Race is a fun and simple game where you compete against the computer to see who can reach the finish line first. Roll the dice, move forward, and may the luckiest player win!

🚀 How to Play

Click the "Roll Dice" button to roll a six-sided die.
Your token moves forward based on the number rolled.
The computer takes its turn automatically.
The first to reach the final cell wins the game!

📂 Project Structure

dice_race/
│-- index.html
│-- styles.css
└-- script.js

🚀 How the Game Works

Game Setup:
- The game board consists of 25 cells, numbered 1 to 25.
- The player and computer each have a token starting at position 0.
Gameplay:
- Click "Roll Dice" to roll a 6-sided die.
- Your token moves forward based on the dice roll.
- After your turn, the computer rolls the dice and moves its token.
- The first to reach the 25th cell wins!
Winning Condition:
- If the player or computer reaches the last cell (cell 25), they win the game.
Reset:
- Click "Reset Game" to start a new game.

🧠 What You'll Learn

HTML/CSS: Creating a grid-based board layout.
JavaScript: Implementing game logic, handling user interactions, and updating the DOM dynamically.
Randomness: Using Math.random() to simulate dice rolls.
State Management: Keeping track of player and computer positions.

🎮 Play the Game

Simply open index.html in your browser to play Dice Race!

View on GitHub

Single Player Tic Tac Toe

TD! — Thu, 26 Dec 2024 20:24:37 +0000

Here's a complete Single Player Tic Tac Toe Game using HTML, CSS, and JavaScript. The game allows a player to compete against a simple AI (computer opponent) with basic logic.

📂 Project Structure

single_player_tic_tac_toe/
│-- index.html
│-- styles.css
└-- script.js

🚀 How to Use This Project

Download or Clone the Repository:

   git clone https://github.com/yourusername/simple_interface.git

Navigate to the Project Directory:

   cd single_player_tic_tac_toe

Open the index.html File in Your Browser to Play the Game.

🌟 How the Game Works

Player's Turn:
- You play as X.
- Click on an empty cell to make your move.
Computer's Turn:
- The computer plays as O.
- The computer selects a random empty cell after your turn.
Game Rules:
- The game follows standard Tic Tac Toe rules.
- First to align three symbols (horizontally, vertically, or diagonally) wins.
- If the board is full without a winner, it's a draw.
Reset Button:
- Click the Reset Game button to restart the game.

🧠 Key Concepts Learned

HTML:
- Structure for the game board, status messages, and buttons.
CSS:
- Grid layout for the board.
- Styling for interactivity and responsiveness.
JavaScript:
- Handling player and computer moves.
- Simple AI logic.
- Detecting win/draw conditions.
- Resetting the game.

This project is great for intermediate learners who want to explore DOM manipulation, basic AI logic, and event handling.

View on GitHub

Rock, Paper, Scissors (with JavaScript)

TD! — Thu, 26 Dec 2024 20:20:09 +0000

This project is perfect for intermediate learners because it blends HTML, CSS, and JavaScript to create a complete, functional game.

📂 File Structure

rock-paper-scissors/
│-- index.html    ← HTML structure
│-- styles.css    ← CSS styling
└-- script.js     ← JavaScript functionality

🛠️ How to Run the Project

Create the Files:
- Create a folder called rock-paper-scissors.
- Inside this folder, create three files: index.html, styles.css, and script.js.
Copy the Code:
- Paste the HTML, CSS, and JavaScript code into the respective files.
Open the HTML File:
- Open index.html in your browser to play the game.

🌟 How the Game Works

Select a Choice:
- Click on one of the buttons: Rock 🪨, Paper 📄, or Scissors ✂️.
Computer's Choice:
- The computer randomly selects Rock, Paper, or Scissors.
Display the Results:
- The game shows your choice, the computer's choice, and who wins.
Play Again:
- Click the "Play Again" button to reset the game.

🧠 Key Concepts for Learning

JavaScript Concepts

Event Listeners:
- Use of addEventListener to handle button clicks.
Random Number Generation:
- Math.random() to generate a random choice for the computer.
Conditionals:
- if-else statements to determine the winner.
DOM Manipulation:
- Dynamically updating the HTML content using textContent.

View on GitHub

Recipe Book Web Interface

TD! — Thu, 26 Dec 2024 20:15:02 +0000

In this project, you'll build a Recipe Book Web Interface using HTML and CSS. This project introduces learners to advanced layout concepts like CSS Grid, Flexbox, and hover effects, while also covering the use of images and responsive design.

🔍 Project Overview

Purpose:

Create a visually appealing web interface that displays recipes with images, descriptions, and a detailed recipe view. This interface can be expanded with JavaScript later for dynamic features.

Main Features:

Recipe Cards Grid for displaying multiple recipes.
Hover Effects to highlight recipes.
Responsive Design to ensure the layout works on different screen sizes.

🗂️ File Structure

recipe-book/
│-- index.html
│-- styles.css
└-- images/
    │-- recipe1.jpg
    │-- recipe2.jpg
    │-- recipe3.jpg

Key Techniques:
- Border Radius: Rounded corners for a modern look.
- Box Shadow: Adds depth to cards.
- Transition Effects: Smooth hover effects on transform and box-shadow.
- Object Fit: Ensures images cover the area without distortion.

📌 5. Hover Effects

.recipe-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
}

Explanation:
- Transform: Slightly lifts the card on hover.
- Box Shadow: Increases the shadow for a "pop-out" effect.

📌 6. Footer Styling

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
  position: relative;
  bottom: 0;
  width: 100%;
}

🌐 Concepts Taught

CSS Grid:
- Dynamic grid layouts with responsive behavior.
Flexibility and Responsiveness:
- grid-template-columns with auto-fit allows the design to adjust to different screen widths.
Card Design:
- Creating reusable, aesthetically pleasing cards with images and text.
Hover Effects:
- Adding subtle animations to improve user experience.
Box Shadows and Borders:
- Enhancing depth and visual hierarchy.
Semantic HTML:
- Using meaningful tags like header, section, and footer.

🛠️ Enhancements and Next Steps

Add JavaScript:
- Implement a search bar to filter recipes by name.
- Add a modal to display detailed recipes.
Responsive Design:
- Use media queries to fine-tune the layout for smaller devices.
Animations:
- Add subtle animations when loading the page or interacting with the cards.

View Project on GitHub

Multi-page Website

TD! — Thu, 26 Dec 2024 20:04:07 +0000

Here's an intermediate-level project that creates a multi-page website with HTML and CSS. The website includes 5 interconnected pages with a consistent header (navigation), main content section, and footer.

📂 Project Structure

multi-page-website/
│-- index.html
│-- about.html
│-- services.html
│-- portfolio.html
│-- contact.html
│-- styles.css
└-- images/
    └-- logo.png (optional)

🚀 How to Use the Project

Create the file structure as outlined above.
Add the HTML and CSS code to the respective files.
Open any of the .html files in your browser to view the pages.
Use the navigation links to switch between pages.

This project helps you understand multi-page linking, consistent layouts, and basic CSS styling.

See on GitHub

Interactive Quiz App

TD! — Mon, 16 Dec 2024 07:57:05 +0000

This project is a simple interactive quiz application built with HTML, CSS, and JavaScript. It allows users to answer multiple-choice questions, submit their answers, and receive an instant score. The app demonstrates basic form handling, dynamic content updates, and DOM manipulation in JavaScript.

🚀 Project Overview

Features

Multiple Choice Questions: Three questions with multiple answer options.
Submit Button: Allows users to submit their answers.
Instant Scoring: Displays the user's score immediately after submission.
Interactive Design: Simple styling and hover effects for better user experience.

Technologies Used

HTML: For structuring the content.
CSS: For styling the quiz interface.
JavaScript: For adding interactivity and processing the answers.

📂 File Structure

quiz-app/
│-- index.html      ← The HTML structure
│-- styles.css      ← The CSS styling
└-- script.js       ← The JavaScript logic

📝 Code Breakdown

📄 HTML (`index.html`)

The HTML file creates the structure of the quiz, including questions, answer choices, and a submit button.

Key Elements:

Form (<form>) to group quiz questions.
Radio Buttons (<input type="radio">) for selecting answers.
Submit Button to check the answers.
Result Div to display the score.

<form id="quiz-form">
  <div class="question">
    <p>1. What is the capital of France?</p>
    <label><input type="radio" name="q1" value="Paris"> Paris</label>
    <label><input type="radio" name="q1" value="Rome"> Rome</label>
    <label><input type="radio" name="q1" value="London"> London</label>
  </div>

  <button type="button" id="submit-btn">Submit Answers</button>
</form>

<div id="result"></div>

🎨 CSS (`styles.css`)

The CSS file styles the quiz interface, making it visually appealing and responsive.

Key Styling Concepts:

Layout: Flexbox for alignment and spacing.
Hover Effects: Button changes color when hovered.
Box Shadow: For a modern card-like appearance.

button {
  background-color: #28a745;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

⚙️ JavaScript (`script.js`)

The JavaScript file handles the quiz logic, processes user answers, and displays the score.

Key Concepts:

Event Listeners: To detect when the user clicks the submit button.
Form Handling: Accessing user-selected answers.
DOM Manipulation: Updating the result section with the user's score.

document.getElementById('submit-btn').addEventListener('click', function() {
  const answers = {
    q1: 'Paris',
    q2: '4',
    q3: 'Blue'
  };

  let score = 0;
  const form = document.getElementById('quiz-form');

  if (form.q1.value === answers.q1) score++;
  if (form.q2.value === answers.q2) score++;
  if (form.q3.value === answers.q3) score++;

  document.getElementById('result').textContent = `You scored ${score} out of 3!`;
});

🧠 Key Concepts for Learning

HTML Forms and Inputs:
- How to structure forms and use radio buttons for multiple-choice questions.
- Understanding the name attribute for grouping radio inputs.
CSS Styling:
- Using Flexbox for layout and alignment.
- Adding visual appeal with hover effects and shadows.
JavaScript Interactivity:
- Adding event listeners with addEventListener().
- Reading form data and comparing user input to correct answers.
- Updating the DOM dynamically using textContent.

🛠️ How to Run the Project

Clone or Download the Project:

   git clone https://github.com/yourusername/simple_interface.git

Open index.html in your browser:

   open index.html

Try the Quiz:
- Answer the questions.
- Click "Submit Answers" to see your score.

🌟 Enhancements to Try

Add More Questions: Increase the number of questions to challenge users.
Custom Feedback: Show detailed feedback for each question.
Timer: Add a countdown timer for each question.
Styling Improvements: Enhance the design with animations or themes.

DEV Community: TD!

Managing Routes and Navigation for a React Subdomain

Using React Router to Manage Layouts

Key Routing Considerations

Creating a Dedicated Route for the Services Page

Explanation

Dynamically Rendering Headers and Footers

Approach:

Example Implementation

Example: Implementing react-router-dom

SEO and Meta Tag Considerations

Installing react-helmet-async

Adding Dynamic Meta Tags

Benefits:

Day 4 of #60daysofcode

Building a Modular React Layout for a Subdomain

Understanding the Need for a Separate Layout

Key Reasons for a Separate Layout:

Setting Up the Project Structure

Breaking Down the Layout (ServicesLayout Component)

Implementing ServicesLayout.js

Key Features of this Layout:

Handling Global Styles vs. Scoped Styles

Using Tailwind CSS for Scoped Styles

Alternative: Using CSS Modules

Integrating the Layout with React Router

What This Does:

Day 3 of #60daysofcode

Improving React UI Components: Replacing Icons, Fixing Errors, and Handling Images Efficiently

Introduction

The Work: Enhancing a Navigation and Footer Component

Replacing BookOpen with a Logo

Ensuring Full Image Visibility

The Process: Fixing Errors and Enhancing Navigation

Fixing the "Menu is Not Defined" Error

Handling Local Images Instead of URLs

The Results: Improved UI and Stability

Day 2 of #60daysofcode

Understanding React Component Exports and TypeScript Conversion: A Case Study with a WhatsApp Chat Button

Introduction

The Work: Building a WhatsApp Chat Component

Original JavaScript Implementation (WhatsAppChat.jsx)

The Process: Converting to TypeScript

Final TypeScript Implementation (WhatsAppChat.tsx)

Concepts Explained

1️⃣ Named vs. Default Exports

2️⃣ TypeScript Benefits in React

3️⃣ Using React.FC in TypeScript

4️⃣ Strongly Typed State with useState

The Results: Improved Code Maintainability & Type Safety

Conclusion

Day 1 of #60daysofcode

Optimizing Image Imports in JavaScript Projects: A Modular Approach

Introduction

The Traditional Approach: Direct Imports

Problems with Direct Imports

A Better Approach: Centralized Imports and Exports

Step 1: Organize Image Files

Step 2: Create an assets.js File

Step 3: Importing Assets in Components

Advantages of This Approach

1. Improved Code Maintainability

2. Better Readability and Organization

3. Performance Optimization

4. Scalability for Larger Projects

Further Optimizations

1. Lazy Loading with React

2. Webpack Aliases

Day 0 of #60daysofcode

Multi-level Tic Tac Toe Game

📂 Project Structure

🚀 How the Game Works

View on GitHub

Dice Race: Player vs Computer

🎲 Dice Race: Player vs Computer

🚀 How to Play

📂 Project Structure

🚀 How the Game Works

🧠 What You'll Learn

🎮 Play the Game

Example: Implementing `react-router-dom`

Installing `react-helmet-async`

Breaking Down the Layout (`ServicesLayout` Component)

Implementing `ServicesLayout.js`

Replacing `BookOpen` with a Logo

Original JavaScript Implementation (`WhatsAppChat.jsx`)

Final TypeScript Implementation (`WhatsAppChat.tsx`)

3️⃣ Using `React.FC` in TypeScript

4️⃣ Strongly Typed State with `useState`

Step 2: Create an `assets.js` File

📄 HTML (`index.html`)

🎨 CSS (`styles.css`)

⚙️ JavaScript (`script.js`)