HTML+CSS+JAVASCRIPT Small project-4

 Day Switch by Number:-

HTML CODE:-

<div class="Container">

  <div class="display">   

   <h1 id="display"></h1>

   </div>>

 <div id="btn_container">

    <button class="btn" onclick="clear()">C</button>

    <button class="btn" onclick="Default()">D</button>

    <button class="btn" onclick="saturday()">7</button><br>

    <button class="btn" onclick="friday()">6</button>

    <button class="btn" onclick="Thusday()">5</button>

    <button class="btn" onclick="wednesday()">4</button><br>

    <button class="btn" onclick="tuesday()">3</button>

    <button class="btn" onclick="monday()">2</button>

    <button class="btn" onclick="sunday()">1</button>

</div>

</div>

CSS CODE:-

<style>

        .Container{

            background-color:#292c2f ;    

            position: relative;

            top: 10%;

            left: 40%;

            text-align: center;

            width: 300px;

            height: 400px;

            border: 2px solid black;

           

        }

        .display{

            background-color:#44505c ;

            color: white;

            position: fixed;

            width: 24.5%;

            height: 20%;

            text-align: center;

            box-shadow: 0px 5px 5px black;

        }

        .btn{

            

            padding: 20px 25px;

            border-radius: 10px;

            font-size: 15px;

            font-weight: bolder;

            margin: 5px;

            border: 3px solid indigo;

            box-shadow: 0px 4px 5px black ;

        }

        #btn_container{

            margin-top: 130px;

            margin-left: 35px;

            position: fixed;

        }

        *:focus{

            outline: none;

        }

    </style>

JAVASCRIPT CODE:-

<script>

        function  sunday(){

             document.getElementById("display").innerHTML = "Today is sunday";

            }

        function monday(){

            document.getElementById("display").innerHTML = "Today is Monday";

        }   

        function tuesday(){

            document.getElementById("display").innerHTML = "Today is Thusday";

        }

        function wednesday(){

            document.getElementById("display").innerHTML = "Today is wednesday";

        }

        function Thusday(){

            document.getElementById("display").innerHTML = "Today is Thusday";

        }

        function friday(){

            document.getElementById("display").innerHTML = "Today is friday";

        }

        function saturday(){

            document.getElementById("display").innerHTML = "Today is saturday";

        }

        function Default(){

            document.getElementById("display").innerHTML = "One week have only 7 days";

        }

        function clear() {

            location.reload();

        }

</script>

OUTPUT:-