Background
Break News
How to add local font to Tailwind Css and NextJS? - Tutorial Design Pattern? - Blockchain Technology, How to create own Bitcoin virtual currency - Zustand mordern management state - Design Pattern - Flyweight Pattern? - Docker Full training Topic

[Tips] How to Display numbers as Fraction (HTML Javascript Tips)

Sunday, 6 February 2022
|
Read: Completed in minutes

[Tips] How to Display numbers as Fraction (HTML Javascript Tips)

Hello everybody, Welcome back to Learn Tech Tips Blog, Thanks for Enjoy my blog

Many people asking me how to display numbers as Fraction. So This topic today I will share with you how to display a fraction number on HTML, (I am using CAKE PHP Framework). This no need CAKEPHP framework, This can work on any HTML file.

How to Display numbers as Fraction (HTML, Javascript Tips)

 



This below code will be helpful for you when you working with any digits need display numbers as fraction. Collect it carefully because I think you will use it on the future if you working as web developer. Believe me :D

On HTML, you just define type='text' and give it one name, I choose effective_rate because my project is using this name, you can change any name belong to you, but remember on the javascript you should set the same name with this HTML's input

<input type="text" class="form-control" style="margin-bottom:10px" name="effective_rate" id="effective_rate">

And the script will be

We have a formmatter with minimumFractionDigits, maximunFractionDigits define for the number display on the UI.

When you use it just use formatter.format(), That's all

    
<script>
    $(document).ready(function() {
   
        const formatter = new Intl.NumberFormat('en-US', {
           currency: 'USD',
           minimumFractionDigits: 2,  // if have this line, the number will be: 2.00, 2.01, 2.86 -> it mean show the minimum fraction digits
           maximumFractionDigits: 2,
        });
 
        // when id effective rate change event
        $('#effective_rate').on('change', function() {  
            $("#effective_rate").val(
                formatter.format( $("#effective_rate").val() )  // format the number
            );
        });
    }); 
</script> 

Here is the full source code, you can reference here.

<div class="row">
    <div class="col-xs-12">
        <div class="box box-primary">
            <div class="box-header">
                <h3 class="box-title"><?php echo __('Display Fraction Digits Number'); ?></h3>
            </div>

            <div class="box-body">
                <?php echo $this->Form->create('Demo', array('role' => 'form')); ?>
                <fieldset>
                      <input type="text" class="form-control number_rules" style="margin-bottom:10px" name="effective_rate" id="effective_rate">
       
                      <?php echo $this->Form->submit('Submit', array(
                             'class' => 'btn btn-large btn-primary')); ?>
                   
                </fieldset>
                <?php echo $this->Form->end(); ?>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
   
        const formatter = new Intl.NumberFormat('en-US', {
           currency: 'USD',
           minimumFractionDigits: 2,  // if have this line, the number will be: 2.00, 2.01, 2.86 -> it mean show the minimum fraction digits
           maximumFractionDigits: 2,
 
        });
   
        $('#effective_rate').on('change', function() {  
            // when id effective rate change event
            $("#effective_rate").val(
                formatter.format( $("#effective_rate").val() )  // format the number
            );
        });
    });

</script>

For the case you still don't know how to use it, you can check my guideline video

@learntechtips How to display numbers as fractions #learnontiktok #learnwithme #learntechtips #html #javascript ♬ WayBackHome - 苏七岁
Thank you for reading this post. I hope you found it helpful and easy to follow. If you have any feedback or questions about How to Display numbers as Fraction (HTML Javascript Tips) , please share them in the comments below. I would love to hear from you and discuss this topic further
✋✋✋✋  Webzone Tech Tips, all things Tech Tips for web development  - I am Zidane, See you next time soon ✋✋✋✋

πŸ™‡πŸΌπŸ™‡πŸΌ We Appreciate Your Comments and Suggestions - Webzone, all things Tech Tips web development
Popular Webzone Tech Tips topic maybe you will be like it - by Webzone Tech Tips - Zidane
As a student, I found Blogspot very useful when I joined in 2014. I have been a developer for years . To give back and share what I learned, I started Webzone, a blog with tech tips. You can also search for tech tips zidane on Google and find my helpful posts. Love you all,

I am glad you visited my blog. I hope you find it useful for learning tech tips and webzone tricks. If you have any technical issues, feel free to browse my posts and see if they can help you solve them. You can also leave a comment or contact me if you need more assistance. Here is my blog address: https://learn-tech-tips.blogspot.com.

My blog where I share my passion for web development, webzone design, and tech tips. You will find tutorials on how to build websites from scratch, using hot trends frameworks like nestjs, nextjs, cakephp, devops, docker, and more. You will also learn how to fix common bugs on development, like a mini stackoverflow. Plus, you will discover how to easily learn programming languages such as PHP (CAKEPHP, LARAVEL), C#, C++, Web(HTML, CSS, javascript), and other useful things like Office (Excel, Photoshop). I hope you enjoy my blog and find it helpful for your projects. :)

Thanks and Best Regards!
Follow me on Tiktok @learntechtips and send me a direct message. I will be happy to chat with you.
Webzone - Zidane (huuvi168@gmail.com)
I'm developer, I like code, I like to learn new technology and want to be friend with people for learn each other
I'm a developer who loves coding, learning new technologies, and making friends with people who share the same passion. I have been a full stack developer since 2015, with more than years of experience in web development.
Copyright @2022(November) Version 1.0.0 - By Webzone, all things Tech Tips for Web Development Zidane
https://learn-tech-tips.blogspot.com