Scribd Logo
Upload

Welcome to Scribd!

  • 3.used Bootstrap Flexbox - Arranges Things Into Little Grids

    Uploaded by

    Rohan Ashish
    8 views3 pages

    Original Title

    challange1

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    8 views3 pages

    3.used Bootstrap Flexbox - Arranges Things Into Little Grids

    Uploaded by

    Rohan Ashish

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 3

    3.

    Used Bootstrap

    Flexbox – arranges things into little grids

    //alert('hello');

    //console.log('hello');
     function ageinDays(){
         BirthYear = prompt('what year where you born in?');
     }

    Go to index.html

    <div><button class="btn-primary" onclick="ageinDays()">Click me</button></div>
     type this

    DOM – Document object model  create a new h2 and put in the DOM

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js on challange</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/di
    st/css/bootstrap.min.css" class="rel">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <h2>Challange 1 : your age in days</h2>
    <div class="container1"> 
    <div class="flex-box-container1">
    <div><button class="btn-primary" onclick="ageInDays()">Click me</button></div>
    <div><button class="btn-danger" onclick="reset()">reset</button></div>
    </div>
    </div>
    <div class="flex-box-container1">
        <div>
    <div class="flex-box-result"></div>
    </div>
    </div>
        <script src="js/home.js"></script>
    </body>
    </html>

    CSS
    .container1{
        border:10px black;
        width: 75%;
        margin: 0 auto;
    }

    .flex-box-container1{
        border: 1px solid blue;
        display: flex;
        padding:10px;
        flex-wrap:wrap ;
        flex-direction: row;
        justify-content: space-around;
    }
    .flex-box-container1 div{
        display:flex;
        padding: 10px;
        border:1px solid blanchedalmond;
    }

    Js

    //alert('hello');

    //console.log('hello');
     function ageInDays(){
        var birthYear = prompt('what year where you born in?');
    var ageInDayss = (2021-birthYear)*365; 
    var h1 = document.createElement('h1');
    var textAnswer = document.createTextNode('you are'+ ageInDayss + 'days old');
    h1.setAttribute('id','ageIndays');
    h1.appendChild(textAnswer);
    document.getElementById('flex-box-result').appendChild(h1);

    function reset(){
        document.getElementById('ageInDays').remove();
    }

    You might also like