Program 3

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;

        }
        .green{
            color: green;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <label>Input Day Number:</label>
    <input id="daynumber" placeholder="Please input day number">
    <button id="submit">Get Day Name</button>
    <br/>
    <h1 id="result" class="" ></h1>

    <button onclick="red();">red</button>
    <button onclick="green();">green</button>


    <script>
   
    function red(){
        let result=document.getElementById('result');
        result.classList.remove('green');
        result.classList.add("red");
    }

   
    function green(){
        let result=document.getElementById('result');
        result.classList.remove('red');
        result.classList.add("green");
    }

    $('#submit').on('click',function(){
        let daynumber=$('#daynumber').val();
        let result;
        switch(parseInt(daynumber)){

            case 1:
                result="Sunday";
                break;
            case 2:
    result="Monday";
    break;
case 3:
    result="Tuesday";
    break;
case 4:
    result="Wenesday";
    break;
case 5:
    result="Thursday";
    break;
case 6:
    result="Friday";
    break;
case 7:
    result="Saturday";
    break;
 default:
    result="Invalid day number";

}
$('#result').html(result);
    });

    // document.getElementById('submit').addEventListener('click',function(){

    //     let daynumber=document.getElementById('daynumber');
    //     let result=document.getElementById('result');

    //     switch(parseInt(daynumber.value)){

    //         case 1:
    //             document.getElementById('result').innerText="Sunday";
    //             break;
    //         case 2:
    //             result.innerText="Monday";
    //             break;
    //         case 3:
    //             result.innerText="Tuesday";
    //             break;
    //         case 4:
    //             result.innerText="Wenesday";
    //             break;
    //         case 5:
    //             result.innerText="Thursday";
    //             break;
    //         case 6:
    //             result.innerText="Friday";
    //             break;
    //         case 7:
    //             result.innerText="Saturday";
    //             break;
    //          default:
    //             result.innerText="Invalid day number";

    //     }

    // });
   
   
   </script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

App 1st User Define Component

  import logo from './logo.svg' ; import './App.css' ; import React from "react" ; function App () { let products=[ 1 , 2 , 3 , 4 , 5 , 6 ] ; return <> <h1> Sabirs </h1> { products. map ((item)=>( <ProdoctCard src = {item} /> )) } </> ; } export default App ; function ProdoctCard ({src}) { return <img src = { `./img/ ${src} .webp` } /> ; }
Read more

Example 1

 //====================Component A================== import React , { useState } from "react" ; import B from "./B" ; export default function () { const [name , setName]= useState ( null ) ; return ( <div> <h1> A component </h1> <input value = {name} onChange = {(event)=>setName(event. target . value )} placeholder = { 'Please input name' } /> <h1> {name} </h1> <hr/> <B a = {name} setA = {setName} /> </div> ) }  //====================Component B================== export default function (obj) { //{a,setA} return ( <div> <h1> B component </h1> <input value = {obj. a } onChange = {(event)=>obj. setA (event. target . value )} placeholder = { 'Please input name' } /> <h1> {obj. a } </h1> <hr/> </div> ) }
Read more

Rabiit

Image
   ///==========================Css============== . box-pos { position : relative ; height : 200 px ; backgroundColor : "#e9ecef" ; } . rabit { position : absolute ; bottom : 19 px ; } . start-game-panel { background : #000000bf ; position : absolute ; top : 0 px ; bottom : - 13 px ; right : 0 px ; left : 0 px ; display : flex ; justify-content : center ; align-items : center ; } . img-d { width : 400 px ; } ====================React JS Componant================= import React , { useState , useRef } from "react" ; import "bootstrap/dist/css/bootstrap.min.css" ; import "./rabit.css" ; import "./test.css" ; //============Main Componant export function TestGame () { const [isGameOver , setIsGameOver]= useState ( false ) ; const [isGameStart , setIsGameStart]= useState ( false ) ; const [rabitPos , setRabitPos]= useState ( 0 ) ; const [score , setScore]= useState (...
Read more