From 53fb428ef7ade2d51cc00025b9fe77805bb3e8ad Mon Sep 17 00:00:00 2001 From: Vishwas Moorjani Date: Thu, 5 Oct 2023 01:03:26 +0530 Subject: [PATCH 1/2] added jokes_app --- jokes_app/index.html | 31 +++++++++++++++++++ jokes_app/script.js | 45 +++++++++++++++++++++++++++ jokes_app/style.css | 72 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 148 insertions(+) create mode 100644 jokes_app/index.html create mode 100644 jokes_app/script.js create mode 100644 jokes_app/style.css diff --git a/jokes_app/index.html b/jokes_app/index.html new file mode 100644 index 00000000..9f4037ba --- /dev/null +++ b/jokes_app/index.html @@ -0,0 +1,31 @@ + + + + + + + Random Joke Generator + + + + +
+ +

Dad Jokes 😆

+ +

+ Joke Text Goes In Here... +

+ +
+ + + + Tweet!! +
+
+ + + + + \ No newline at end of file diff --git a/jokes_app/script.js b/jokes_app/script.js new file mode 100644 index 00000000..f3f48d2a --- /dev/null +++ b/jokes_app/script.js @@ -0,0 +1,45 @@ +// grab a reference for necessary HTML elements +// .joke-text +const jokeText = document.querySelector('.joke-text'); +// .new-joke-btn +const newJokeBtn = document.querySelector('.new-joke-btn'); +// .tweet-btn (link) +const tweetBtn = document.querySelector('.tweet-btn'); + +// add 'click' eventListener to .new-joke-btn +newJokeBtn.addEventListener('click', getJoke); + +// immediately call getJoke() +getJoke(); + +// getJoke() function definition +function getJoke() { + // make an API request to https://icanhazdadjoke.com/' + fetch('https://icanhazdadjoke.com/', { + headers: { + 'Accept': 'application/json' + } + }).then(function(response) { + /* convert Stringified JSON response to Javascript Object */ + return response.json(); + }).then(function(data) { + /* replace innerText of .joke-text with data.joke */ + // extract the joke text + const joke = data.joke; + // do the replacement + jokeText.innerText = joke; + + /* make the tweetBtn(.tweet-btn link) work by setting href */ + // create tweet link with joke + const tweetLink = `https://twitter.com/share?text=${joke}`; + // set the href + tweetBtn.setAttribute('href', tweetLink); + }).catch(function(error) { + // if some error occured + jokeText.innerText = 'Oops! Some error happened :('; + // removes the old href from .tweet-btn if found any + tweetBtn.removeAttribute('href'); + // console log the error + console.log(error); + }); +} \ No newline at end of file diff --git a/jokes_app/style.css b/jokes_app/style.css new file mode 100644 index 00000000..8dc5abf4 --- /dev/null +++ b/jokes_app/style.css @@ -0,0 +1,72 @@ +/* common styles */ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + } + + a { + color: #111; + text-decoration: none; + } + + .btn { + padding: 10px 20px; /* top-bottom left-right */ + margin: 0 5px; /* top-bottom left-right */ + font-size: 0.99rem; + border-radius: 3px; + outline: none; + border: none; + color: #fff; + background-color: blue; /* default color */ + } + + .btn:hover { + cursor: pointer; /* hand symbol */ + } + + /* body */ + body { + width: 100vw; + height: 100vh; + overflow: hidden; + background-color: #6B2A7E; + font-family: sans-serif; + display: flex; + justify-content: center; /* horizontally center */ + align-items: center; /* vertically center */ + text-align: center; + } + + /* container */ + .container { + width: 450px; + padding: 50px 20px; /* top-bottom left-right */ + background-color: #fff; + border-radius: 5px; + } + + /* h1 */ + h1 { + font-size: 1.1rem; + color: #888; + margin-bottom: 20px; + text-decoration: underline; + } + + /* .joke-text */ + .joke-text { + font-size: 1.8rem; + margin-bottom: 30px; + font-family: monospace; + } + + /* .new-joke-btn */ + .new-joke-btn { + background-color: #FF0000; + } + + /* .tweet-btn link */ + .tweet-btn { + background-color: #00ACEE; + } \ No newline at end of file From 8b5541314a7f39b2cdd49d10a2d8c162ef724ec9 Mon Sep 17 00:00:00 2001 From: Vishwas Moorjani Date: Thu, 5 Oct 2023 22:23:31 +0530 Subject: [PATCH 2/2] added bouncing balls --- bouncing-balls-vim-motions/README.md | 11 ++ bouncing-balls-vim-motions/index.html | 17 +++ bouncing-balls-vim-motions/main.js | 199 ++++++++++++++++++++++++++ bouncing-balls-vim-motions/style.css | 33 +++++ jokes_app/index.html | 31 ---- jokes_app/script.js | 45 ------ jokes_app/style.css | 72 ---------- 7 files changed, 260 insertions(+), 148 deletions(-) create mode 100644 bouncing-balls-vim-motions/README.md create mode 100644 bouncing-balls-vim-motions/index.html create mode 100644 bouncing-balls-vim-motions/main.js create mode 100644 bouncing-balls-vim-motions/style.css delete mode 100644 jokes_app/index.html delete mode 100644 jokes_app/script.js delete mode 100644 jokes_app/style.css diff --git a/bouncing-balls-vim-motions/README.md b/bouncing-balls-vim-motions/README.md new file mode 100644 index 00000000..09f103a7 --- /dev/null +++ b/bouncing-balls-vim-motions/README.md @@ -0,0 +1,11 @@ +This is a simple game that is intended to help a user +become accoustomed to using vim motions to control a pointer. + + +The game consists of several balls generated at random that bounce across the screen. +When the pointer is collides with a ball the ball is destroyed. + +H- moves LEFT +J- UP +K- DOWN +L- RIGHT diff --git a/bouncing-balls-vim-motions/index.html b/bouncing-balls-vim-motions/index.html new file mode 100644 index 00000000..4071373f --- /dev/null +++ b/bouncing-balls-vim-motions/index.html @@ -0,0 +1,17 @@ + + + + + + Bouncing balls + + + + +

bouncing balls

+

+ + + + + \ No newline at end of file diff --git a/bouncing-balls-vim-motions/main.js b/bouncing-balls-vim-motions/main.js new file mode 100644 index 00000000..be363567 --- /dev/null +++ b/bouncing-balls-vim-motions/main.js @@ -0,0 +1,199 @@ +// setup canvas +const canvas = document.querySelector('canvas'); +const ctx = canvas.getContext('2d'); + +const width = canvas.width = window.innerWidth; +const height = canvas.height = window.innerHeight; + +const para = document.querySelector('p'); + +// function to generate random number +function random(min, max) { + const num = Math.floor(Math.random() * (max - min + 1)) + min; + return num; +} + +// function to generate random color +function randomRGB() { + return `rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})`; +} + +class Shape { + constructor(x, y, velX, velY, exists) { + this.x = x; + this.y = y; + this.exists = true; + this.velX = velX; + this.velY = velY; + } +} + +class EvilCircle extends Shape { + constructor(x, y) { + super(x, y, 20, 20); + this.color = "white"; + this.size = 30; + window.addEventListener("keydown", (e) => { + switch (e.key) { + case "h": + this.x -= this.velX; + break; + case "l": + this.x += this.velX; + break; + case "k": + this.y -= this.velY; + break; + case "j": + this.y += this.velY; + break; + } + }); + } + draw() { + ctx.beginPath(); + ctx.lineWidth = 3; + ctx.strokeStyle = this.color; + ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); + ctx.stroke(); + } + checkBounds() { + if ((this.x + this.size) >= width) { + this.x = width - this.size; + } + + if ((this.x - this.size) <= 0) { + this.x = this.size; + } + + if ((this.y + this.size) >= height) { + this.y = height - this.size; + } + + if ((this.y - this.size) <= 0) { + this.y = this.size; + } + } + + collisionDetect() { + for (const ball of balls) { + if (ball.exists) { + const dx = this.x - ball.x; + const dy = this.y - ball.y; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < this.size + ball.size) { + ball.exists = false; + } + } + } + } + + +} + +class Ball extends Shape { + constructor(x, y, velX, velY, color, size) { + super(x, y, velX, velY); + this.color = color; + this.size = size; + } + + + draw() { + ctx.beginPath(); + ctx.fillStyle = this.color; + ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); + ctx.fill(); + } + + update() { + if ((this.x + this.size) >= width) { + this.velX = -(this.velX); + } + + if ((this.x - this.size) <= 0) { + this.velX = -(this.velX); + } + + if ((this.y + this.size) >= height) { + this.velY = -(this.velY); + } + + if ((this.y - this.size) <= 0) { + this.velY = -(this.velY); + } + + this.x += this.velX; + this.y += this.velY; + } + + collisionDetect() { + for (const ball of balls) { + if (!(this === ball) && ball.exists) { + const dx = this.x - ball.x; + const dy = this.y - ball.y; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < this.size + ball.size) { + ball.color = this.color = randomRGB(); + this.velX = -(this.velX); + this.velY = -(this.velY); + } + } + } + } + +} + +const balls = []; + +while (balls.length < 25) { + const size = random(10, 20); + const ball = new Ball( + // ball position always drawn at least one ball width + // away from the edge of the canvas, to avoid drawing errors + random(0 + size, width - size), + random(0 + size, height - size), + random(-7, 7), + random(-7, 7), + randomRGB(), + size + ); + + balls.push(ball); +} + +const evilCircle = new EvilCircle(random(0, width), random(0, height)); + +let count = 0; + +function loop() { + ctx.fillStyle = "rgba(0, 0, 0, 0.25)"; + ctx.fillRect(0, 0, width, height); + + for (const ball of balls) { + if (ball.exists) { + ball.draw(); + ball.update(); + ball.collisionDetect(); + } + } + count = 0; + for (const ball of balls) { + if (ball.exists) { + count++; + } + } + para.textContent = `Ball count: ${count}`; + if (count > 0) { + evilCircle.draw(); + evilCircle.checkBounds(); + evilCircle.collisionDetect(); + } + + requestAnimationFrame(loop); + } + + +loop(); \ No newline at end of file diff --git a/bouncing-balls-vim-motions/style.css b/bouncing-balls-vim-motions/style.css new file mode 100644 index 00000000..130e9764 --- /dev/null +++ b/bouncing-balls-vim-motions/style.css @@ -0,0 +1,33 @@ +html, body { + margin: 0; +} + +html { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + height: 100%; +} + +body { + overflow: hidden; + height: inherit; +} + +h1 { + font-size: 2rem; + letter-spacing: -1px; + position: absolute; + margin: 0; + top: -4px; + right: 5px; + + color: transparent; + text-shadow: 0 0 4px white; +} + +p { + position: absolute; + margin: 0; + top: 35px; + right: 5px; + color: #aaa; +} diff --git a/jokes_app/index.html b/jokes_app/index.html deleted file mode 100644 index 9f4037ba..00000000 --- a/jokes_app/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - Random Joke Generator - - - - -
- -

Dad Jokes 😆

- -

- Joke Text Goes In Here... -

- -
- - - - Tweet!! -
-
- - - - - \ No newline at end of file diff --git a/jokes_app/script.js b/jokes_app/script.js deleted file mode 100644 index f3f48d2a..00000000 --- a/jokes_app/script.js +++ /dev/null @@ -1,45 +0,0 @@ -// grab a reference for necessary HTML elements -// .joke-text -const jokeText = document.querySelector('.joke-text'); -// .new-joke-btn -const newJokeBtn = document.querySelector('.new-joke-btn'); -// .tweet-btn (link) -const tweetBtn = document.querySelector('.tweet-btn'); - -// add 'click' eventListener to .new-joke-btn -newJokeBtn.addEventListener('click', getJoke); - -// immediately call getJoke() -getJoke(); - -// getJoke() function definition -function getJoke() { - // make an API request to https://icanhazdadjoke.com/' - fetch('https://icanhazdadjoke.com/', { - headers: { - 'Accept': 'application/json' - } - }).then(function(response) { - /* convert Stringified JSON response to Javascript Object */ - return response.json(); - }).then(function(data) { - /* replace innerText of .joke-text with data.joke */ - // extract the joke text - const joke = data.joke; - // do the replacement - jokeText.innerText = joke; - - /* make the tweetBtn(.tweet-btn link) work by setting href */ - // create tweet link with joke - const tweetLink = `https://twitter.com/share?text=${joke}`; - // set the href - tweetBtn.setAttribute('href', tweetLink); - }).catch(function(error) { - // if some error occured - jokeText.innerText = 'Oops! Some error happened :('; - // removes the old href from .tweet-btn if found any - tweetBtn.removeAttribute('href'); - // console log the error - console.log(error); - }); -} \ No newline at end of file diff --git a/jokes_app/style.css b/jokes_app/style.css deleted file mode 100644 index 8dc5abf4..00000000 --- a/jokes_app/style.css +++ /dev/null @@ -1,72 +0,0 @@ -/* common styles */ -* { - padding: 0; - margin: 0; - box-sizing: border-box; - } - - a { - color: #111; - text-decoration: none; - } - - .btn { - padding: 10px 20px; /* top-bottom left-right */ - margin: 0 5px; /* top-bottom left-right */ - font-size: 0.99rem; - border-radius: 3px; - outline: none; - border: none; - color: #fff; - background-color: blue; /* default color */ - } - - .btn:hover { - cursor: pointer; /* hand symbol */ - } - - /* body */ - body { - width: 100vw; - height: 100vh; - overflow: hidden; - background-color: #6B2A7E; - font-family: sans-serif; - display: flex; - justify-content: center; /* horizontally center */ - align-items: center; /* vertically center */ - text-align: center; - } - - /* container */ - .container { - width: 450px; - padding: 50px 20px; /* top-bottom left-right */ - background-color: #fff; - border-radius: 5px; - } - - /* h1 */ - h1 { - font-size: 1.1rem; - color: #888; - margin-bottom: 20px; - text-decoration: underline; - } - - /* .joke-text */ - .joke-text { - font-size: 1.8rem; - margin-bottom: 30px; - font-family: monospace; - } - - /* .new-joke-btn */ - .new-joke-btn { - background-color: #FF0000; - } - - /* .tweet-btn link */ - .tweet-btn { - background-color: #00ACEE; - } \ No newline at end of file