Skip to content

AlizayAyesha/Change-Font-Size-Using-JQuery

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Change-Font-Size-Using-JQuery

This project showcases how to dynamically adjust the font size of text using jQuery and an slider.

Features:

Interactive Font Size Control: Users can slide the range input to increase or decrease the font size of text dynamically.

Real-Time Updates:

The text font size updates instantly as the slider is moved.

Simple jQuery Implementation:

jQuery is used to handle slider events and apply CSS styles for seamless font size adjustments.

How It Works:

The slider triggers an input and change event whenever its value changes.
jQuery listens for these events and updates the font size of specified text elements (,

, etc.) based on the current slider value.

Usage:

Clone or download the repository.
Open index.html in a web browser.
Use the range slider to adjust the font size of the displayed text.
Observe the text dynamically change its font size as the slider is moved.

Technologies Used:

  • HTML5
  • CSS3
  • jQuery

Code Structure:

index.html: Contains the HTML structure and the range slider for font size adjustment. style.css: Defines the basic styles for the HTML elements. script.js: Implements the jQuery logic to handle slider events and update font sizes.

Results:

image

License:

This project is licensed under the MIT License - see the LICENSE file for details.