Uncategorized

Colour Guessing Game (JS Mini Project) By Sanjana Gautam

index.html <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Color Guessing Game</title> <link rel=”stylesheet” href=”styles.css”> </head> <body> <h1>Color Guessing Game</h1> <div id=”colorDisplay”></div> <div id=”message”></div> <div id=”container”> <div class=”square”></div> <div class=”square”></div> <div class=”square”></div> <div class=”square”></div> <div class=”square”></div> <div class=”square”></div> </div> <script src=”script.js”></script> </body> </html> style.css body { text-align: center; font-family: Arial, sans-serif; } h1 { color: steelblue; … Read moreColour Guessing Game (JS Mini Project) By Sanjana Gautam

Image Slider (JS Mini Project) By Rupen Prasai

index.html <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link rel=”stylesheet” href=”styles.css”> <title>Image slider</title> </head> <body> <h1>Image Slider</h1> <div class=”slider”> <div class=”slides”> <img src=”image1.JPG” alt=”Image 1″> <img src=”image2.jpg” alt=”Image 2″> <img src=”image3.JPG” alt=”Image 3″> </div> <button class=”prev” onclick=”changeSlide(-1)”>Previous</button> <button class=”next” onclick=”changeSlide(1)”>Next</button> </div> <script src=”script.js”></script> </body> </html> style.css .slider { position: relative; max-width: … Read moreImage Slider (JS Mini Project) By Rupen Prasai

Breakout- JavaScript Mini Project | 726. Prabal Basnet | Breakout

  index.html <!DOCTYPE html> <html><head><title>BREAKOUT GAME</title> <style> canvas { border: 1px solid black; display: block; margin: auto; } </style> </head> <body> <canvas id=”mycanvas” width=”480″ height=”320″></canvas> <script> var canvas= document.getElementById(“mycanvas”); var ctx=canvas.getContext(“2d”); var ballRadius = 10; var x = canvas.width / 2; var y = canvas.height – 30; var dx = 2; var dy = -2; … Read moreBreakout- JavaScript Mini Project | 726. Prabal Basnet | Breakout

Memory Game, A JavaScript Mini Project : Bipin Khambu Shrestha

index.html <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Memory Game</title> <link rel=”stylesheet” href=”styles.css”> </head> <body> <div class=”memory-game” id=”memory-game”></div> <script src=”script.js”></script> </body> </html> styles.css .memory-game { display: flex; flex-wrap: wrap; width: 400px; height: 400px; margin: 20px auto; perspective: 1000px; } .card { width: calc(25% – 10px); height: calc(25% – 10px); margin: 5px; position: relative; transform-style: preserve-3d; … Read moreMemory Game, A JavaScript Mini Project : Bipin Khambu Shrestha

Tower Block | JavaScript Mini Project | By Krisha Konda

index.html <link rel=”stylesheet” href=”./style.css”> <div id=”container”> <div id=”game”></div> <div id=”score”>0</div> <div id=”instructions”>Click to place the block</div> <div class=”game-over”> <h2>Game Over</h2> <p>You did great, you’re the best.</p> <p>Click or spacebar to start again</p> </div> <div class=”game-ready”> <div id=”start-button”>Start</div> <div></div> </div> </div> <script src=’https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js’></script> <script src=’https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js’></script> <script src=”./main.js”></script> style.css html, body { margin: 0; overflow: hidden; height: … Read moreTower Block | JavaScript Mini Project | By Krisha Konda

Click Shape Game | JavaScript Mini Project | Kabir Shrestha

index.html <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Click Shape Game</title> <link rel=”stylesheet” href=”styles.css”> </head> <body> <div class=”game-container”> <p class=”score”>Score: <span id=”score”>0</span></p> <div class=”shape” id=”shape”></div> </div> <script src=”script.js”></script> </body> </html> styles.css body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .game-container { text-align: center; } .shape { width: … Read moreClick Shape Game | JavaScript Mini Project | Kabir Shrestha

Currency Converter – JavaScript Mini Project By Anup Tamang (Moktan)

index.html <!DOCTYPE html> <html> <head> <title>Currency Converter</title> <link rel=”stylesheet” type=”text/css” href=”anup.css”> </head> <body> <div class=”container”> <h1>Currency Converter</h1> <div class=”form”> <label for=”amount”>Amount:</label> <input type=”number” id=”amount” placeholder=”Enter amount”> <label for=”from”>From:</label> <select id=”from”> <option value=”NPR”>Nepalese Rupee (NPR)</option> <option value=”INR”>Indian Rupee (INR)</option> <option value=”CNY”>Chinese Yuan (CNY)</option> <option value=”PKR”>Pakistani Rupee (PKR)</option> <option value=”AFN”>Afghan Afghani (AFN)</option> <option value=”BTN”>Bhutanese Ngultrum (BTN)</option> <option … Read moreCurrency Converter – JavaScript Mini Project By Anup Tamang (Moktan)