mihir_dml/Assignment6
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'Initial Commit' (#1) from dev into main

Browse source 
Reviewed-on: #1
This commit is contained in:
Sumit Kumar 2025-01-16 06:42:01 +00:00
parent 3cdae496e8 7ca432ec8d
commit 6d729d3c42
18 changed files with 4563 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -1,2 +1,8 @@
# Assignment6 # React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@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

38
eslint.config.js Normal file
View file

@ -0,0 +1,38 @@
import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
export default [
{ ignores: ['dist'] },
{
files: ['**/*.{js,jsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
settings: { react: { version: '18.3' } },
plugins: {
react,
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...js.configs.recommended.rules,
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
...reactHooks.configs.recommended.rules,
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
]

13
index.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

4288
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

28
package.json Normal file
View file

@ -0,0 +1,28 @@
{
"name": "assignment6",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@eslint/js": "^9.17.0",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.17.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0",
"vite": "^6.0.5"
}
}

BIN
public/images/angular.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
public/images/css.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
public/images/html.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/images/js.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
public/images/nodejs.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
public/images/react.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
public/images/scss.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
public/images/vue.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

12
src/App.jsx Normal file
View file

@ -0,0 +1,12 @@
import MemoryCardGame from './MemoryCardGame'
function App() {
return (
<>
<MemoryCardGame/>
</>
)
}
export default App

85
src/MemoryCardGame.jsx Normal file
View file

@ -0,0 +1,85 @@
import React, { useState, useEffect } from 'react';
import './index.css';
const cardImages = [
{ id: 1, img: './images/angular.png' },
{ id: 2, img: './images/css.png' },
{ id: 3, img: './images/html.png' },
{ id: 4, img: './images/js.png' },
{ id: 5, img: './images/nodejs.png' },
{ id: 6, img: './images/react.png' },
{ id: 7, img: './images/scss.png' },
{ id: 8, img: './images/vue.png' },
];
// instead of doing previous method we can also do this
const shuffledCards = [...cardImages, ...cardImages].sort(() => Math.random() - 0.5);
const MemoryCardGame = () => {
const [cards, setCards] = useState(shuffledCards.map((card, index) => ({ ...card, flipped: false, id: index })));
const [flippedCards, setFlippedCards] = useState([]);
const [score, setScore] = useState(0);
const [attempts, setAttempts] = useState(0);
const [showingImages, setShowingImages] = useState(true);
useEffect(() => {
// Sirf 2 sec tk images show karega
const timer = setTimeout(() => {
setShowingImages(false);
setCards(prevCards => prevCards.map(card => ({ ...card, flipped: false })));
}, 2000);
return () => clearTimeout(timer);
}, []);
useEffect(() => {
if (flippedCards.length === 2) {
// Increment attempts when two cards are flipped
setAttempts(prevAttempts => prevAttempts + 1);
const [firstCard, secondCard] = flippedCards;
if (firstCard.img === secondCard.img) {
// Cards matching logic
setScore(prevScore => prevScore + 1);
setCards(prevCards => prevCards.map(card =>
card.img === firstCard.img ? { ...card, flipped: true } : card
));
} else {
// Cards do not match, flip them back after a short delay
setTimeout(() => {
setCards(prevCards => prevCards.map(card =>
card.id === firstCard.id || card.id === secondCard.id ? { ...card, flipped: false } : card
));
}, 1000);
}
// Clear flipped cards after processing
setFlippedCards([]);
}
}, [flippedCards]);
const handleCardClick = (card) => {
if (!card.flipped && flippedCards.length < 2 && !showingImages) {
setCards(prevCards => prevCards.map(c => (c.id === card.id ? { ...c, flipped: true } : c)));
setFlippedCards(prev => [...prev, card]);
}
};
return (
<div className="memory-card-game">
<h1>Memory Card Game</h1>
<p>Score: {score}</p>
<p>Attempts: {attempts}</p>
<div className="card-grid">
{cards.map(card => (
<div key={card.id} className={`card ${card.flipped ? 'flipped' : ''}`} onClick={() => handleCardClick(card)}>
{card.flipped || showingImages ? <img src={card.img} alt="Card" /> : <div className="card-back">?</div>}
</div>
))}
</div>
</div>
);
};
export default MemoryCardGame;

75
src/index.css Normal file
View file

@ -0,0 +1,75 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
justify-content: center;
align-items: center;
}
.memory-card-game {
text-align: center;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
color: white;
}
.card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 20px;
}
.card {
width: 100px;
height: 100px;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 10px;
transition: transform 0.3s;
position: relative;
overflow: hidden;
}
.card img {
width: 80%;
height: 80%;
}
.card-back {
font-size: 24px;
line-height: 100px;
color: black;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.3s;
}

10
src/main.jsx Normal file
View file

@ -0,0 +1,10 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)

7
vite.config.js Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})