Merge branch 'master' into fix-folder-contribution-file

Digital Clock/css/style.css

@@ -15,7 +15,7 @@ body{
     font-family: "Outfit", sans-serif;
 }
 .clock{
-    background-color: rgb(255, 198, 9);
+    background:linear-gradient(135deg,#14ffe9,#ffeb3b,#ff00e0);
     height: 90px;
     width: 200px;
     border: 1px solid black;
@@ -34,8 +34,30 @@ body{
     align-items: center;
 }
 .text{
-    font-size: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+    height: 100px;
+    width: 400px;
+    border: 1px solid rgb(111, 111, 111);
+    box-shadow: 10px 10px 3px #273938;
+    transition: .4s all ease;
+
+}
+
+.text:hover{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+    height: 100px;
+    width: 400px;
+    border: 1px solid rgb(111, 111, 111);
+    box-shadow: 15px 15px 3px #273938 ;
 }
+
+
 .texts{
     display: flex ;
 
@@ -50,4 +72,22 @@ body{
     font-weight: 500;
     font-size:1.5rem;
     margin: 2px 15px;
+}
+
+.day{
+    background:linear-gradient(135deg,#14ffe9,#ffeb3b,#ff00e0);
+
+    padding: 10px;
+    border: 3px solid rgb(206, 200, 200);
+    border-radius: 10px;
+    color: rgb(59, 59, 59);
+
+    font-size: 1.5rem;
+    transition: .3s all ease-in;
+
+}
+
+.day:hover{
+    border-radius: 0;
+    font-size: 1.55rem;
 }

Digital Clock/digitalClock.html

@@ -17,6 +17,8 @@
         </div>
         <div class="clock"></div>
     </div>
+    <div class="day">
+    </div>
 
 </body>
 <script src="js/script.js"></script>

Digital Clock/js/script.js

@@ -6,6 +6,8 @@
 
 
 const clock = document.querySelector(".clock");
+const day = document.querySelector(".day");
+
 
 function updateClock() {
     let date = new Date();
@@ -18,6 +20,8 @@ function updateClock() {
     const time12Hour = date.toLocaleTimeString(undefined, options12Hour);
 
     clock.innerHTML = ` ${time24Hour}<br>${time12Hour}`;
+    day.innerHTML = ` ${date}`;
+
 }
 
 setInterval(updateClock, 1000);

Flappy_Bird/app.js

@@ -0,0 +1,178 @@
+//===============board===============
+
+let board;
+let boardWidth=360;
+let boardHeight=640;
+let context;
+
+//==================bird=======================
+let birdWidth=32;// width/height=60/45=4/3
+let birdHeight=24;
+let birdX=boardWidth/8;
+let birdY=boardHeight/2  ;
+let birdImg;
+
+let bird = {
+    x:birdX,
+    y:birdY,
+    width:birdWidth,
+    height:birdHeight
+
+}
+
+//==================pipes====================
+let pipeArray=[];
+let pipeWidth=80;
+let pipeHeight=500;
+let pipeX=boardWidth;
+let pipeY=0;
+
+let topPipeImg;
+let bottomPipeImg;
+
+//=========physics=========
+let velocityX= -2; //pipes moving left direction
+let velocityY = 0;
+let gravity = 0.4;
+
+let gameOver = false;
+let score=0;
+
+window.onload= function(){
+    board=document.getElementById("board");
+    board.height =boardHeight;
+    board.width  =boardWidth;
+    context= board.getContext("2d");
+
+    //=============draw flappy bird======================
+
+    // context.fillStyle="red";
+    // context.fillRect(bird.x,bird.y,bird.width,bird.height);
+
+    //loading image
+    birdImg = new Image();
+    birdImg.src="./images/flappy-bird.png";
+    birdImg.onload = function(){
+        context.drawImage(birdImg,bird.x,bird.y,bird.width,bird.height);
+    }
+    //=========for pipes==============
+
+    topPipeImg=new Image();
+    topPipeImg.src="./images/flappybird-pipe.png";
+
+    bottomPipeImg=new Image();
+    bottomPipeImg.src="./images/flappybird-pipe2.png";
+
+    requestAnimationFrame(update);
+    setInterval(placePipes,1500);// every 1.5s the pipe will be placed
+    document.addEventListener("keydown",moveBird);
+}
+
+function update(){
+    requestAnimationFrame(update);
+
+    if(gameOver){  
+        return;
+    }
+    context.clearRect(0,0,board.width,board.height);
+
+    //bird
+    velocityY+=gravity;
+    // bird.y+=velocityY;
+    bird.y=Math.max(bird.y+velocityY,0);
+    context.drawImage(birdImg,bird.x,bird.y,bird.width,bird.height);
+
+    if(bird.y > board.height){
+        gameOver=true;
+    }
+
+    //pipes
+    for(let i=0;i< pipeArray.length;i++){
+        let pipe=pipeArray[i];
+        pipe.x +=velocityX;
+        context.drawImage(pipe.img,pipe.x,pipe.y,pipe.width,pipe.height);
+
+
+        if(!pipe.passed && bird.x > pipe.x +pipe.width){
+            score+=.5;
+            pipe.passed=true;
+        }
+
+        if(detectCollision(bird,pipe)){
+            gameOver=true;
+        }
+    }
+
+    //clear pipes
+    while(pipeArray.length >0 && pipeArray[0].x<-pipeWidth){
+        pipeArray.shift();//remves the first element of the array
+    }
+
+    //score
+
+    context.fillStyle = "white";
+    context.font = "45px sans-serif";
+    context.fillText(score ,5,45);
+
+    if(gameOver){
+        context.fillText("GAME OVER",5,90);
+        // context.fillText("YOUR SCORE IS "+score,5,135  );
+    }
+
+}
+
+function placePipes(){
+
+    if(gameOver){
+        return;
+    }
+    let randomPipeY =pipeY - pipeHeight/4 - Math.random()*(pipeHeight/2);
+    let openingSpace=board.height/4;
+
+
+
+    let topPipe={ 
+        img :topPipeImg,
+        x: pipeX,
+        y:randomPipeY ,
+        width :pipeWidth,
+        height:pipeHeight,
+        passed :false
+    }
+
+    pipeArray.push(topPipe);
+
+    let bottomPipe={
+        img :bottomPipeImg,
+        x :pipeX,
+        y : randomPipeY +pipeHeight+openingSpace,
+        width:pipeWidth,
+        height:pipeHeight,
+        passed:false
+
+    }
+
+    pipeArray.push(bottomPipe);
+}
+
+function moveBird(e){
+    if(e.code=="Space" || e.code=="ArrowUp" || e.code=="KeyX"){
+        //jump
+        velocityY=-6;   
+
+        if(gameOver){
+            bird.y=birdY;
+            pipeArray=[];
+            score=0;
+            gameOver=false;
+        }
+
+    }
+}
+
+function detectCollision(a,b){
+    return a.x < b.x + b.width &&
+           a.x + a.width > b.x &&
+           a.y < b.y + b.height &&
+           a.y +a.height> b.y
+}

Flappy_Bird/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Flappy Bird Game</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="app.js"></script>
+</head>
+<body>
+  <!-- this is canvas -->
+  <canvas id="board"></canvas>
+  <div id="ground"></div>
+
+</body>
+</html>

Flappy_Bird/style.css

@@ -0,0 +1,16 @@
+body{
+    text-align: center;
+}
+
+#board{
+    position: absolute;
+    background-image: url("./images/fb-game-background.png");
+}
+#ground{
+    position: relative;
+    background-image: url("./images/bottom-background.png");
+    width: 360px;
+    height: 50px;
+    display: inline-block;
+    bottom: -635px;
+}