BlockManipulation

DOM Manipulation Showcase

This project demonstrates various DOM manipulations using JavaScript. It allows users to interact with a block element on a web page and modify its position, size, shape, color, and opacity. The project provides a user-friendly interface with intuitive controls for manipulating the block.

Features

• Position Manipulation:

  Vertical Position (Y-axis): Users can change the vertical position of the block by adjusting a range slider. Horizontal Position (X-axis): Users can change the horizontal position of the block by adjusting a range slider.

• Size Manipulation:

  Scaling: Users can resize the block by adjusting a range slider. The block's size is transformed using a scale factor.

• Opacity Manipulation:

  Opacity: Users can adjust the opacity of the block by using a range slider. The opacity value ranges from 0 (completely transparent) to 1 (fully opaque).

• Shape Manipulation:

  Shape Selection: Users can choose from three different shapes: square, circle, and rhombus. The selected shape is applied to the block upon clicking the "OK" button.

• Color Manipulation:

  HEX Color: Users can enter a hexadecimal color code to change the background color of the block. Pressing the Enter key applies the color. RGBA Color: Users can adjust the red (R), green (G), blue (B), and alpha (A) values using range sliders. The resulting RGBA color is applied to the block in real-time.

  How to Use

• Clone the repository: git clone https://github.com/DanishKhan25/BlockManipulation.git

• Open the project's index.html file in a web browser.

• Use the provided controls to manipulate the block according to your desired position, size, shape, and color.

• Observe the block's visual changes in real-time as you interact with the controls.

Technologies Used

• HTML
• CSS
• JavaScript

Screenshots:

Block Manipulation.webm