https://github.com/alizayayesha/change-font-size-using-jquery

adjust the font size like u want to by the help of slider made this using jquery https://alizayayesha.github.io/Change-Font-Size-Using-JQuery/
https://github.com/alizayayesha/change-font-size-using-jquery

css3 html-css-javascript html5 javascript jquery jquery-ajax jquery-ui js

Last synced: 3 days ago
JSON representation

adjust the font size like u want to by the help of slider made this using jquery https://alizayayesha.github.io/Change-Font-Size-Using-JQuery/

• Host: GitHub
• URL: https://github.com/alizayayesha/change-font-size-using-jquery
• Owner: AlizayAyesha
• Created: 2024-07-09T07:56:18.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-09T08:01:53.000Z (7 months ago)
• Last Synced: 2024-11-24T07:09:57.998Z (2 months ago)
• Topics: css3, html-css-javascript, html5, javascript, jquery, jquery-ajax, jquery-ui, js
• Language: HTML
• Homepage: https://alizayayesha.github.io/Change-Font-Size-Using-JQuery/
• Size: 3.91 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://github.com/AlizayAyesha/Change-Font-Size-Using-JQuery/assets/68489612/7ab32a73-8f60-40fc-8a9a-e704c22c0e42)


# License:

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