FitText.js | A jQuery plugin for inflating web type | Frontend Framework library

I am new in wordpress technology i apologies if i ask basic question here.

actually i am trying to remove contact form 7 style and js file from all other pages except contact us, so what i did in function.php

I use a value binding () to generate some of my page content based on a number of variables.

I also need to run some javascript on the generated HTML to fix a few minor niggles, like matching font size for unusual scaling scenarios and the like. As standard, I place executable javascript at the end of an HTML document.

Generated HTML in one of these scenarios:

I'm looking for a solution to span the text to the edge of the div. I don't want to have any white-space in the div.

Here is my div

I've did something till now and it works on block-b as you can see in my example below.

I want to make this elegant but I don't know how.

So my question is: how can I make my both blocks (a and b) work separately but to do the same thing based on my div width and height, to reduce font size.

Also I use a span to fit a paragraph in one line (like in my example)

The font must have the same size in both spans based on reduction on one of it.

I am trying to build a basic user interface using flexbox, I have this so far..

I'd like to do an animation for my paragraph which's content is being replaced after clicking on a button. So button #start_animation should start the textillate in animation and button #out_animation should cause out animation. And then I click on the third button #replaced_word which replaces the content of my paragraph.

Important: I always click in the same row:

1. #start_animation

2. #out_animation

3. #replaced_word

So the word should come in by an animation (fadeIn) then go out by another animation (fadeOut) then be replaced and then I click again on the first button #start_animation and it goes over and over again. The problem is that it works only for the first time. I mean till I click #start_animation for the second time. I wrote this question before with code but it was way too long so I did it in form of snippet. Any ideas?

I have an issue. I have a carousel with many images and text on it. To make the text responsive I am using a script called FlowText. It works perfectly on the first carousel image(the active one) but as soon as it moves, it doesn't. I am suspecting its because ... it runs only once, and when you move the carousel it doesn't anymore. How would you actually do that so that it works everytime you move the carousel.

I have a div to which random words are distributed by lot. To display these words I use this script:

I have a project which is pulling content from contentful and displays news stories in a grid.

I'm trying to write a script to decrease the font size on the header tag until the text fits its parent.

I'm using a while loop in the snippet below but it only seems to decrease the size of the element once as it loops over.

How can i continue to decrease this value for every iteration ? or does anyone know a better way to achieve this result ?

I previously tried to use FitText.js only it seemed to change all the elements to the same font size.