Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 232 views

    Assignment-3: Program3.html

    Uploaded by

    Music
    The document describes a JavaScript code that displays text growing and shrinking in size. The text "TEXT GROWING" increases in font size from 5pt to 50pt over time in red color. When it reaches 50pt, the text changes to "TEXT SHRINKING" in blue color and decreases back down to 5pt font size.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Assignment-3: Program3.html

    Uploaded by

    Music
    232 views9 pages
    The document describes a JavaScript code that displays text growing and shrinking in size. The text "TEXT GROWING" increases in font size from 5pt to 50pt over time in red color. When it reaches 50pt, the text changes to "TEXT SHRINKING" in blue color and decreases back down to 5pt font size.

    Original Title

    2TG18CS024_Assignment3

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document describes a JavaScript code that displays text growing and shrinking in size. The text "TEXT GROWING" increases in font size from 5pt to 50pt over time in red color. When it reaches 50pt, the text changes to "TEXT SHRINKING" in blue color and decreases back down to 5pt font size.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    232 views9 pages

    Assignment-3: Program3.html

    Uploaded by

    Music
    The document describes a JavaScript code that displays text growing and shrinking in size. The text "TEXT GROWING" increases in font size from 5pt to 50pt over time in red color. When it reaches 50pt, the text changes to "TEXT SHRINKING" in blue color and decreases back down to 5pt font size.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 9

    Assignment-3

    Write a JavaScript code that displays text “TEXT- GROWING” with


    increasing font size in the interval of 100ms in RED COLOR, when the font
    size reaches 50pt it displays “TEXTSHRINKING” in BLUE color. Then the
    font size decreases to 5pt.
    Program3.html
    <!DOCTYPE HTML>
    <html>
    <head>
        <title>Text Shrink</title>
        <style>
            p {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <p id="demo"></p>
        <script>
            var var1 = setInterval(inTimer, 500);
            var fs = 5; //font size
            var ids = document.getElementById("demo");
            function inTimer() {
                ids.innerHTML = 'TEXT GROWING';
                ids.setAttribute('style', "font-size: " + fs + "px; color: red");
                fs += 5;
                if (fs >= 50) {
                    clearInterval(var1); //paused var2 = setInterval(deTimer, 500); 
                    var2 = setInterval(deTimer, 500);
                }
            }
            function deTimer() //fs = 50px
            {
                fs -= 5;
                ids.innerHTML = 'TEXT SHRINKING';
                ids.setAttribute('style', "font-size: " + fs + "px; color: blue");
                if (fs == 5) {
                    clearInterval(var2); //paused var1 = setInterval(inTimer, 500);
                }
            }
        </script>
    </body>
    </html>

    1
    Output:

    Text Growing

    Text Shrinking

    Challenge3.html

    2
    <!DOCTYPE HTML>
    <html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="challenge3.css">
        <title>Photo Rating</title>
    </head>

    <body style="background-color: rgb(233, 216, 123);">

        <header class="topnav">
            <a class="active" href="#home">Home</a>
            <a href="#Places">Places</a>
            <a href="#Galery">Gallery</a>
            <a href="#About Us">About Us</a>
            <a href="#Search">Search</a>
        </header>

        <div class ="page-container">
            <div class="container">
                <h1>Malpe Beach , Udupi</h1>
                <table style="width: 80%;"> 
                    <tr>
                        <td>
                            <figure>
                                <img src="pic1.jpg" alt="Malpe Beach" style="width:100%">
                                <figcaption>Malpe Beach</figcaption>
                            </figure>
                        </td>

                        <td>
                            <p id="demo"></p>
                            <script src="challenge3.js"></script>
                        </td>
                    </tr>
                </table>

                <h4>by <a href="#Naveen Dasapalli">Naveen Dasapalli</a></h4>
                <article class="article">
                    <p>Malpe is a natural port in the Udupi District in Karnataka, India. Loca
    ted at the mouth of the Malpe River about six kilometers to the west of Udupi, it is an im
    portant port and a major fishing harbor on the
                        Karnataka coast. The town of Malpe is associated largely with settleme
    nts of the Mogaveera fisherman community. Malpe is a hub of Mogaveera, Billava and Muslim 
    population.</p>
                </article>

                <section>
                    <p>Year: 2019

    3
                         <br />
                        Date: 6th October
                    </p>
                </section>

            </div>
            <div class="rating">
                <div>
                    <p><strong>Awwwweee!</strong><br>Fiona
                        <img src="Star-Orange.png">
                        <img src="Star-Orange.png">
                        <img src="Star-Orange.png">
                        <img src="Star-Orange.png">
                        <img src="Star-Orange.png">
                    </p>
                    <p><small>Good one hey! 👍</small></p>
                </div>
                <hr>
                <div>
                    <p><strong>Amazing</strong><br>Roy
                        <img src="Star-Orange.png">
                        <img src="Star-Orange.png">
                        <img src="Star-Orange.png">
                        <img src="Star-Orange.png">
                        <img src="Star-White.png">
                    </p>
                    <p><small>I love it ! ❤</small></p>
                </div>
                <hr>
                <div>
                    <p><strong>Fantastic</strong><br>Bob
                        <img src="Star-Orange.png">
                        <img src="Star-Orange.png">
                        <img src="Star-Orange.png">
                        <img src="Star-White.png">
                        <img src="Star-White.png">
                    </p>
                    <p><small>Very nice place in karnataka 😍</small></p>
                </div>
                <hr>
                <div>
                    <p><strong>WOW!</strong><br>Jony
                        <img src="Star-Orange.png">
                        <img src="Star-Orange.png">
                        <img src="Star-Orange.png">
                        <img src="Star-Orange.png">
                        <img src="Star-White.png">
                    </p>
                    <p><small>This was my dream place 🥰😘</small></p>
                </div>
                <hr>

    4
            </div>
        </div>

        <footer class="footer">
            <a class="active" href="#home">Home</a>
            <a href="#Places">Places</a>
            <a href="#Galery">Gallery</a>
            <a href="#About Us">About Us</a>
            <a href="#Search">Search</a>
            <br>
            <br>
            <p>Copyright &copy; 2020 My Costal stay</p>
        </footer>

    </body>

    </html>

    Challenge3.css
        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        .page-container{
            margin: 5px;
        }
        .demo{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .topnav {
            margin-left: 0pt;
            overflow: hidden;
            background-color: rgb(13, 156, 167);
        }

        .topnav a {
            float: left;
            color: #f2f2f2;
            text-align: center;
            padding: 16px 18px;
            text-decoration: none;
            font-size: 17px;
        }

    5
        .topnav a:hover {
            background-color: rgb(83, 209, 218);
            color: black;
        }

        .topnav a.active {
            background-color: #000000;
            color: white;
        }

        figure {
            border: thin #c0c0c0 solid;
            display: flex;
            flex-flow: column;
            padding: 5px;
            max-width: 440px;
            margin-left: 30pt;
        }

        img {
            max-width: 440px;
            max-height: 300px;
        }

        figcaption {
            background-color: #222;
            color: #fff;
            font: italic smaller sans-serif;
            padding: 3px;
            text-align: center;
        }

        .container p {
            position: relative;
        }

        .rating img {
            align-items: center;
            vertical-align: bottom;
            width: 30px;
            height: 30px;
        }
        footer{
            position: relative;
            background-color: black;
            bottom: 0;
            overflow: hidden;
        }
        .footer a{
            float: left;
            color: #f2f2f2;

    6
            text-align: center;
            padding: 16px 18px;
            text-decoration: none;
            font-size: 17px;
        }
        .footer a.active {
            background-color: rgb(184, 196, 197);
            color: black;
        }
        .footer a:hover{
            background-color: rgb(184, 196, 197);
            color: rgb(0, 0, 0);
        }
        .footer p{
            color: cornsilk;
            margin-left: 5px;
        }

    Challenge3.js
    var var1 = setInterval(inTimer, 500);
    var fs = 5; //font size
    var ids = document.getElementById("demo");
    function inTimer() {
        ids.innerHTML = 'Ocean Thearpy';
        ids.setAttribute('style', "font-size: " + fs + "px; color: red");
        fs += 5;
        if (fs >= 50) {
            clearInterval(var1); //paused var2 = setInterval(deTimer, 500);
            var2 = setInterval(deTimer, 500);
        }
    }
    function deTimer() //fs = 50px
    {
        fs -= 5;
        ids.innerHTML = 'Ocean Thearpy';
        ids.setAttribute('style', "font-size: " + fs + "px; color: blue");
        if (fs == 5) {
            clearInterval(var2); //paused var1 = setInterval(inTimer, 500);
        }
    }

    Output:

    7
    Growing
    Text

    Shrinkin
    g Text

    8
    9

    You might also like