Merge pull request SUGAM-ARORA#727 from saketh-05/fixes

Added DevNotes Project

src/Components/CardMain.js

@@ -1,5 +1,5 @@
 import Card1 from "../img/card1.jpg";
-import Card2 from "../img/card2.jpg";
+import Card2 from "../img/card2.png";
 import Card3 from "../img/card3.jpg";
 import Card4 from "../img/card4.png";
 import Card5 from "../img/card5.jpg";
@@ -34,8 +34,9 @@ const features = [
     pro: icon1,
     hearts: 65,
     title: "TakeNote",
-    dev: "JohnDoe",
+    dev: "Saketh D.Surya",
     type: "Productivity",
+    github: "https://github.com/saketh-05/Dev-Notes-App",
     role: "Full Stack Developer, Cloud Engineer",
     about:
       "I'm a versatile professional skilled in full stack development and cloud engineering, building robust applications and scalable cloud solutions.",

src/Components/Delicious/Delicious.js

@@ -2,7 +2,7 @@ import React, {useContext} from 'react';
 import { Link } from "react-router-dom";
 import homeIcon from '../../img/homeicon.png';
 import Card1 from "../../img/card1.jpg";
-import Card2 from "../../img/card2.jpg";
+import Card2 from "../../img/card2.png";
 import Card3 from "../../img/card3.jpg";
 import Card4 from "../../img/card4.png";
 import Card5 from "../../img/card5.jpg";

src/Components/TopContainer.js

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
 import { FaBell, FaChevronDown, FaMoon, FaSun } from "react-icons/fa";
 import women from "../img/women.jpg";
 import Card1 from "./projects/card1.jpg";
-import Card2 from "./projects/card2.jpg";
+import Card2 from "./projects/card2.png";
 import Card3 from "./projects/card3.jpg";
 import Card4 from "./projects/card4.png";
 import Card5 from "./projects/card5.jpg";

src/Components/Trending/Trending.js

@@ -2,7 +2,7 @@ import React, {useContext, useEffect} from 'react';
 import { Link } from "react-router-dom";
 import homeIcon from '../../img/homeicon.png';
 import Card1 from "../../img/card1.jpg";
-import Card2 from "../../img/card2.jpg";
+import Card2 from "../../img/card2.png";
 import Card3 from "../../img/card3.jpg";
 import Card4 from "../../img/card4.png";
 import Card5 from "../../img/card5.jpg";

src/Components/cart/cart.js

@@ -3,7 +3,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import homeIcon from '../../img/homeicon.png';
 import carticon from './12.png';
 import Card1 from "../../img/card1.jpg";
-import Card2 from "../../img/card2.jpg";
+import Card2 from "../../img/card2.png";
 import Card3 from "../../img/card3.jpg";
 import Card4 from "../../img/card4.png";
 import Card5 from "../../img/card5.jpg";

src/Components/projects/index.js

@@ -1,5 +1,5 @@
 import Card1 from "./card1.jpg";
-import Card2 from "./card2.jpg";
+import Card2 from "./card2.png";
 import Card3 from "./card3.jpg";
 import Card4 from "./card4.png";
 import Card5 from "./card5.jpg";
@@ -33,8 +33,9 @@ export const features = [
     pro: icon1,
     hearts: 65,
     title: "TakeNote",
-    dev: "JohnDoe",
+    dev: "Saketh D.Surya",
     type: "Productivity",
+    github: "https://github.com/saketh-05/Dev-Notes-App",
     role: "Full Stack Developer, Cloud Engineer",
     about: "I'm a versatile professional skilled in full stack development and cloud engineering, building robust applications and scalable cloud solutions.",
     text: "TakeNote is a powerful and intuitive note-taking app specifically designed for developers. It combines the simplicity of traditional note-taking with advanced features tailored to the unique needs of coding professionals. With TakeNote, developers can effortlessly organize their thoughts, code snippets, project documentation, and technical diagrams in one centralized location. The app supports syntax highlighting for multiple programming languages, making it easy to write and review code within notes. Markdown support allows for seamless formatting, while integrated version control ensures that all changes are tracked and recoverable. TakeNote also offers robust search functionality, enabling users to quickly find specific notes or code snippets. Collaboration features allow team members to share and edit notes in real-time, fostering better communication and project coordination. Whether used for brainstorming sessions, meeting notes, or personal code repositories, TakeNote is the ideal companion for developers seeking to enhance productivity and organization in their workflow."

src/Projects/DevNotes/App.css

@@ -0,0 +1,81 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: rgb(1, 70, 70);
+    margin: 0;
+    padding: 0;
+  }
+
+  .App {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #94c5c9;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  h1 {
+    text-align: center;
+    color: #333;
+  }
+
+  .note-input {
+    margin-bottom: 20px;
+  }
+
+  .note-input textarea {
+    width: 100%;
+    height: 100px;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+  }
+
+  .note-input button {
+    display: inline-block;
+    padding: 10px 20px;
+    font-size: 16px;
+    color: #fff;
+    background-color: #007bff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .note-input button:hover {
+    background-color: #0056b3;
+  }
+
+  .notes-list .note {
+    background-color: #f9f9f9;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    position: relative;
+  }
+
+  .notes-list .note-content {
+    white-space: pre-wrap;
+  }
+
+  .notes-list .delete-note-btn {
+    position: absolute;
+    top: 15px;
+    padding: 10px;
+    right: 10px;
+    background-color: #ff4d4d;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.8rem;
+  }
+
+  .notes-list .delete-note-btn:hover {
+    background-color: #cc0000;
+  }
+

src/Projects/DevNotes/App.js

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import './App.css';
+import Note from './Note';
+
+function App() {
+  const [notes, setNotes] = useState([]);
+  const [noteContent, setNoteContent] = useState('');
+
+  const addNote = () => {
+    if (noteContent.trim()) {
+      setNotes([...notes, noteContent]);
+      setNoteContent('');
+    }
+  };
+
+  const deleteNote = (index) => {
+    const newNotes = notes.filter((_, i) => i !== index);
+    setNotes(newNotes);
+  };
+
+  return (
+    <div className="App">
+      <h1>Developer Note-Taking App</h1>
+      <div className="note-input">
+        <textarea
+          value={noteContent}
+          onChange={(e) => setNoteContent(e.target.value)}
+          placeholder="Enter your note here..."
+        />
+        <button onClick={addNote}>Add Note</button>
+      </div>
+      <div className="notes-list">
+        {notes.map((note, index) => (
+          <Note key={index} content={note} onDelete={() => deleteNote(index)} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default App;

src/Projects/DevNotes/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/Projects/DevNotes/Note.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+function Note({ content, onDelete }) {
+  return (
+    <div className='note'>
+      <pre className='note-content'>{content}</pre>
+      <button onClick={onDelete} className='delete-note-btn'>
+        Delete
+      </button>
+    </div>
+  );
+}
+
+export default Note;

src/Projects/DevNotes/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/Projects/DevNotes/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/Projects/DevNotes/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/Projects/DevNotes/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';