-
Notifications
You must be signed in to change notification settings - Fork 390
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/Monu2114/master-web-develop…
- Loading branch information
Showing
26 changed files
with
527 additions
and
25 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>MiniCalender</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
| <body> | ||
| <div class="hero"> | ||
| <div class="calender"> | ||
| <div class="left"> | ||
| <p id="date">01</p> | ||
| <p id="day">Sunday</p> | ||
| </div> | ||
| <div class="right"> | ||
| <p id="months">january</p> | ||
| <p id="year">2024</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| const date = document.getElementById("date"); | ||
| const day = document.getElementById("day"); | ||
| const months = document.getElementById("months"); | ||
| const year = document.getElementById("year"); | ||
|
|
||
| const today = new Date(); | ||
| // console.log(today); | ||
| const weekdays = [ | ||
| "Sunday", | ||
| "Monday", | ||
| "Tuesday", | ||
| "Wednesday", | ||
| "Thursday", | ||
| "Friday", | ||
| "Saturday", | ||
| ]; | ||
| const monthName = [ | ||
| "January", | ||
| "February", | ||
| "March", | ||
| "April", | ||
| "May", | ||
| "June", | ||
| "July", | ||
| "August", | ||
| "September", | ||
| "October", | ||
| "November", | ||
| "December", | ||
| ]; | ||
|
|
||
| date.innerHTML = (today.getDate()<10 ? "0" : "")+today.getDate(); | ||
| day.innerHTML = weekdays[today.getDay()]; | ||
| months.innerHTML = monthName[today.getMonth()]; | ||
| year.innerHTML = today.getFullYear(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
|
|
||
| *{ | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: 'Poppins', sans-serif; | ||
| box-sizing: border-box; | ||
| } | ||
| .hero{ | ||
| width: 100%; | ||
| min-height: 100vh; | ||
| background: linear-gradient(45deg, #1d0000, #20205b); | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| .calender{ | ||
| width: 300px; | ||
| height: 250px; | ||
| background: #fff; | ||
| display: flex; | ||
| align-items: center; | ||
| border-radius: 10px; | ||
| } | ||
| .left, .right{ | ||
|
|
||
| height: 100%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| font-size: 24px; | ||
| } | ||
| .right{ | ||
| width: 42%; | ||
| background: #f4341e; | ||
| color: #fff; | ||
| border-top-right-radius: 10px; | ||
| border-bottom-right-radius: 10px; | ||
| } | ||
| .left{ | ||
| width: 58%; | ||
| } | ||
| #date{ | ||
| font-size: 100px; | ||
| line-height: 90px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,13 @@ | ||
| <<<<<<< HEAD | ||
| # React + Vite | ||
| ## Memory Card (Pokemon) | ||
|
|
||
| This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
|  | ||
|
|
||
| Currently, two official plugins are available: | ||
| This game challenges your memory skills with Pokémon cards, where you must remember which cards you've clicked. | ||
|
|
||
| - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh | ||
| - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh | ||
| ======= | ||
| # Memory-Card | ||
| >>>>>>> fdb4d6f57ae25b3c163d604f6a83f70188f56737 | ||
| The game resets your score if you click the same card twice, and your best score is tracked! | ||
|
|
||
| How to Play: | ||
| The game displays a grid of Pokémon cards. | ||
| Click on a card that you haven't clicked before to score points. | ||
| But be careful! If you click the same card twice, your score resets to 0. | ||
| Try to score as high as possible before making a mistake. Your highest score will be tracked! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <!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="style.css" /> | ||
| <title>Random Image Feed</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1 class="title">Random Image Feed</h1> | ||
| <button class="toggle-button" onclick="toggleDarkMode()"> | ||
| <!-- Moon Icon (for Dark Mode) --> | ||
| <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" | ||
| stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | ||
| <path d="M21 12.79A9 9 0 0112.21 3a7.5 7.5 0 1010.59 10.59z"></path> | ||
| </svg> | ||
|
|
||
| <!-- Sun Icon (for Light Mode) --> | ||
| <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" | ||
| stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | ||
| <circle cx="12" cy="12" r="5"></circle> | ||
| <path | ||
| d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"> | ||
| </path> | ||
| </svg> | ||
| </button> | ||
| <div class="container"> | ||
| <img id="random-image" alt="Random Image" /> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| const imageUrl = 'https://picsum.photos/200/300'; | ||
|
|
||
| // Function to fetch and display the image | ||
| async function fetchImage() { | ||
| try { | ||
| const response = await fetch(imageUrl); | ||
| if (!response.ok) { | ||
| throw new Error('Network response was not ok'); | ||
| } | ||
| const imageElement = document.getElementById('random-image'); | ||
| imageElement.src = imageUrl; // Set the src attribute of the img element | ||
| } catch (error) { | ||
| console.error('There has been a problem with your fetch operation:', error); | ||
| } | ||
| } | ||
|
|
||
| // Function to toggle dark mode | ||
| function toggleDarkMode() { | ||
| document.body.classList.toggle('dark-mode'); | ||
| } | ||
|
|
||
| // Call the function to fetch and display the image | ||
| fetchImage(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| font-family: 'Roboto', sans-serif; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| min-height: 100vh; | ||
| margin: 0; | ||
| transition: background-color 0.3s, color 0.3s; | ||
| } | ||
|
|
||
| :root { | ||
| --background-color: #ffffff; | ||
| --text-color: #000000; | ||
| --title-color: #333333; | ||
| --button-background: #333333; | ||
| --button-color: #ffffff; | ||
| } | ||
|
|
||
| body.dark-mode { | ||
| --background-color: #121212; | ||
| --text-color: #e0e0e0; | ||
| --title-color: #ffffff; | ||
| --button-background: #ffffff; | ||
| --button-color: #121212; | ||
| } | ||
|
|
||
| body { | ||
| background-color: var(--background-color); | ||
| color: var(--text-color); | ||
| } | ||
|
|
||
| .title { | ||
| color: var(--title-color); | ||
| margin: 10px 0 0; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .toggle-button { | ||
| position: absolute; | ||
| top: 20px; | ||
| right: 20px; | ||
| background-color: var(--button-background); | ||
| color: var(--button-color); | ||
| border: none; | ||
| padding: 10px; | ||
| cursor: pointer; | ||
| border-radius: 5px; | ||
| font-size: 16px; | ||
| transition: background-color 0.3s, color 0.3s; | ||
| } | ||
|
|
||
| .toggle-button svg { | ||
| display: none; | ||
| width: 24px; | ||
| height: 24px; | ||
| } | ||
|
|
||
| body.dark-mode .toggle-button .sun-icon { | ||
| display: block; | ||
| } | ||
|
|
||
| body:not(.dark-mode) .toggle-button .moon-icon { | ||
| display: block; | ||
| } | ||
|
|
||
| .toggle-button:hover { | ||
| opacity: 0.8; | ||
| } | ||
|
|
||
| .container { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-wrap: wrap; | ||
| max-width: 1000px; | ||
| } | ||
|
|
||
| .container img { | ||
| object-fit: cover; | ||
| margin: 10px; | ||
| height: 300px; | ||
| width: 300px; | ||
| max-width: 100%; | ||
| border-radius: 10px; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| } |
Oops, something went wrong.