#2 CRUDS Operations Pure JavaScript | تصميم واجهة مشروع ادارة المنتجات بال html و ال css فقط

Designing with HTML and CSS: Dark Mode vs. Light Mode

Introduction to Design Preferences

• The speaker introduces the design project, emphasizing that it reflects personal taste and can be adapted in various ways, including light mode or dark mode.

• The focus will be on creating a dark mode design, as the speaker prefers this aesthetic.

Project Structure Overview

• Importance of breaking down the design into a clear map for better understanding and organization.

• The project is divided into three main parts: header (head), inputs (input fields), and outputs (results).

Header Design Implementation

• The header will include a title and a paragraph beneath it; both elements are essential for clarity.

• The title will be formatted using an H2 tag, while the paragraph text will also be styled appropriately.

Resetting Default Styles

• To ensure consistency across browsers, all margins and paddings should be reset to zero before applying custom styles.

• A dark background color is suggested for the body to enhance visibility against white text.

Font Styling Choices

• A uniform font style is recommended throughout the project; system UI fonts are suggested for consistency.

Centering Elements in Design

Centering Techniques

• To center the main card element within its container, set its width to 80% and apply margin auto for horizontal centering.

Text Alignment Adjustments

• Text within the header should be centered using text-align: center, ensuring visual harmony in presentation.

Input Fields Creation

Structuring Input Fields

• Each input field must have an ID for JavaScript interaction; placeholders provide guidance on expected input types.

Grouping Related Inputs

• Multiple related inputs (like price, taxes, discount, etc.) should be grouped within a div for better organization.

Finalizing Input Field Designs

Additional Input Requirements

• Each input field requires specific attributes like type (text or number), IDs, and placeholders to guide user input effectively.

Button Creation

• A button labeled "Create" is added with an ID for functionality; buttons are crucial interactive elements in web forms.

Styling Inputs with CSS

Uniform Styling Across Inputs

• All input fields should have consistent styling such as width set to 100%, height adjustments, border removal, and padding settings.

Focus State Enhancements

• When focused on an input field, change its background color to improve visibility of user interactions.

Adjusting Input Sizes and Styles

Managing Input Growth

• The speaker discusses the importance of controlling the growth of input fields, suggesting a maximum increase of 1.1 to maintain a visually appealing design.

• Emphasizes the need to align price, taxes, discounts, and totals in close proximity for better user experience.

Styling Inputs

• Introduces a method to apply a 20% width adjustment to input fields for improved layout.

• Suggests using specific padding values (4px top/bottom, 2px left/right) and border-radius adjustments (4px) for aesthetic enhancement.

Adding Total Label and Button Styles

Implementing Total Label

• Demonstrates how to add a "total" label before the total value using CSS content property.

Button Design Specifications

• Discusses setting button width to 100% and height to 30px while removing borders for cleaner aesthetics.

• Recommends changing cursor style on hover to indicate interactivity by setting it as 'pointer'.

Enhancing Button Appearance

Color and Hover Effects

• Suggestion made for selecting an appropriate button color that is visually pleasing; emphasizes adjusting colors based on user feedback.

• Proposes adding white text color within buttons and applying border-radius of 20px for rounded edges.

Transition Effects

• Introduces hover effects that change background color upon mouseover, enhancing user interaction with visual feedback.

Creating Search Functionality

Structuring Search Elements

• Outlines the creation of search inputs within a dedicated div block labeled "search block".

Button Creation for Search Actions

• Details about creating two buttons: one for searching by title and another by category with respective IDs assigned.

Utilizing Flexbox Layout

Aligning Buttons Using Flexbox

• Explains how flexbox can be used effectively to position buttons side-by-side with space between them through 'space-between' property.

Table Structure Setup

• Mentions that delete functionality will be implemented via JavaScript since it only appears when there are products present in the table.

Building Table Headers

Defining Table Columns

• Describes creating table headers (TH elements), including ID, Title, Price, Taxes, Ads, Discounts which will later be styled with CSS.

Populating Table Body

• Indicates that sample data will be added temporarily into T-body sections for visualization purposes during development.

This structured approach provides clarity on each step discussed in the transcript while allowing easy navigation through timestamps linked directly to relevant parts of the video.