Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit b543bf2

Browse files
pramit-maratthapramit-marattha
authored
bookmark-manager #4 
1 parent af90b1d commit b543bf2

File tree

14 files changed

+11224
-1
lines changed

14 files changed

+11224
-1
lines changed

‎bookmark-manager-react-web-app-project/README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
![under_construction](https://user-images.githubusercontent.com/37651620/93677983-a7942e00-facc-11ea-8b6d-b57e73dc73bf.png)
1+
![image](https://user-images.githubusercontent.com/37651620/94985851-ab6a8a80-0579-11eb-8f51-fa35d314c588.png)
2+
3+
## It's Live 🎉 Visit here ==>https://book-mark-react.netlify.app/
4+
5+
---
26

37
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
48

‎bookmark-manager-react-web-app-project/package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "bookmark-manager-react-web-app-project",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@testing-library/jest-dom": "^4.2.4",
7+
"@testing-library/react": "^9.3.2",
8+
"@testing-library/user-event": "^7.1.2",
9+
"react": "^16.13.1",
10+
"react-dom": "^16.13.1",
11+
"react-scripts": "3.4.3"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test",
17+
"eject": "react-scripts eject"
18+
},
19+
"eslintConfig": {
20+
"extends": "react-app"
21+
},
22+
"browserslist": {
23+
"production": [
24+
">0.2%",
25+
"not dead",
26+
"not op_mini all"
27+
],
28+
"development": [
29+
"last 1 chrome version",
30+
"last 1 firefox version",
31+
"last 1 safari version"
32+
]
33+
}
34+
}

‎bookmark-manager-react-web-app-project/public/favicon.ico

15 KB
Binary file not shown.

‎bookmark-manager-react-web-app-project/public/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
14+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
16+
<title>Bookmark</title>
17+
</head>
18+
<body>
19+
<noscript>You need to enable JavaScript to run this app.</noscript>
20+
<div id="root"></div>
21+
</body>
22+
</html>

‎bookmark-manager-react-web-app-project/public/logo192.png

5.22 KB
Loading

‎bookmark-manager-react-web-app-project/public/logo512.png

9.44 KB
Loading

‎bookmark-manager-react-web-app-project/public/manifest.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}

‎bookmark-manager-react-web-app-project/public/robots.txt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎bookmark-manager-react-web-app-project/src/components/App.js

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React, { useState } from "react";
2+
import "../styles/App.css";
3+
import CardComp from "./CardComp";
4+
5+
function App() {
6+
const [cardData, setCardData] = useState([
7+
{
8+
linkName: "Bookmark (Link) Name",
9+
linkHref: "https://github.com/pramit-marattha",
10+
},
11+
]);
12+
13+
const [newCard, setNewCard] = useState({ linkName: "", linkHref: "" });
14+
15+
const dispatchCardSet = (payload) => {
16+
let oldArray = cardData;
17+
let newArray = [...oldArray, payload];
18+
setCardData(newArray);
19+
setNewCard({ linkHref: "", linkName: "" });
20+
};
21+
22+
return (
23+
<>
24+
<nav className="navigationPannel">
25+
<img
26+
height="80px"
27+
src="https://www.pngmart.com/files/8/Bookmark-PNG-Background-Image.png"
28+
alt="Bookmark"
29+
/>
30+
<div className="paintFontBookmark">.बुकमार्क ~</div>
31+
</nav>
32+
<main>
33+
<div className="rightContainer">
34+
<h1 className="paintFontBookmark">Bookmarks</h1>
35+
<CardComp cards={cardData}></CardComp>
36+
</div>
37+
38+
<div className="leftContainer">
39+
<h1 className="paintFont">Add Bookmark </h1>
40+
<img
41+
src="https://www.pikpng.com/pngl/b/411-4118917_logo-emblem-symbol-bookmark-sign-png.png"
42+
alt="Bookmark"
43+
/>
44+
45+
<form onSubmit={(e) => e.preventDefault()}>
46+
<h3 className="formTitle">Add Bookmark</h3>
47+
<div>
48+
<label htmlFor="linkTitle" className="formLabel">
49+
Enter your Bookmark name :
50+
</label>
51+
<input
52+
value={newCard.linkName}
53+
onChange={(e) =>
54+
setNewCard({ ...newCard, linkName: e.currentTarget.value })
55+
}
56+
type="text"
57+
name="linkTitle"
58+
minLength="1"
59+
maxLength="55"
60+
placeholder="Something..."
61+
/>
62+
</div>
63+
64+
<div>
65+
<label htmlFor="linkHref" className="formLabel">
66+
Enter your Url Link :
67+
</label>
68+
<input
69+
value={newCard.linkHref}
70+
onChange={(e) =>
71+
setNewCard({ ...newCard, linkHref: e.currentTarget.value })
72+
}
73+
type="text"
74+
name="linkHref"
75+
minLength="7"
76+
placeholder="https://example.com.np"
77+
/>
78+
</div>
79+
<button
80+
className="bookmarkBtn"
81+
onClick={() => dispatchCardSet(newCard)}
82+
>
83+
Create bookmark
84+
</button>
85+
</form>
86+
</div>
87+
</main>
88+
</>
89+
);
90+
}
91+
92+
export default App;

‎bookmark-manager-react-web-app-project/src/components/CardComp.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from "react";
2+
3+
const CardComp = (props) => {
4+
const backImageStyle = {
5+
backgroundImage:
6+
"url('https://www.pngmart.com/files/8/Bookmark-Background-PNG.png')",
7+
// "url('https://freepikpsd.com/wp-content/uploads/2019/10/bookmark-icon-png-8-Transparent-Images-Free-300x300.png')",
8+
// "url('https://freepikpsd.com/wp-content/uploads/2019/10/bookmark-icon-png-8-Transparent-Images-Free-300x300.png')",
9+
};
10+
11+
const mappedCardData = props.cards.map((card, i) => {
12+
return (
13+
<div key={i} className="bookmarkCard">
14+
<div className="bookmarkCardImage" style={backImageStyle} />
15+
<div className="bookmarkCardLink">
16+
<a target="_blank" rel="noopener noreferrer" href={card.linkHref}>
17+
{card.linkName}
18+
</a>
19+
</div>
20+
</div>
21+
);
22+
});
23+
return <>{mappedCardData}</>;
24+
};
25+
26+
export default CardComp;

0 commit comments

Comments
 (0)