Skip to content

Commit dd52c94

Browse files
CodeMaverickVikashCodeMaverickVikash
committed
format
1 parent 2d5a4eb commit dd52c94

File tree

15 files changed

+678
-409
lines changed

15 files changed

+678
-409
lines changed

‎frontend/package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "inotebook",
2+
"name": "InstantNotes",
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {

‎frontend/src/App.css

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
1-
.para{
2-
display: inline-block;
3-
margin-right: 17px;
1+
.para {
2+
display: inline-block;
3+
margin-right: 17px;
44
}
55

6-
.img{
7-
width: 100%;
8-
}
6+
.img {
7+
width: 100%;
8+
}
9+
10+
.ellipsis-container {
11+
max-width: 950px;
12+
white-space: nowrap;
13+
overflow: hidden;
14+
text-overflow: ellipsis;
15+
}
16+
17+
.card-body span {
18+
font-weight: bold;
19+
}

‎frontend/src/App.js

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
// import logo from './logo.svg';
2-
import './App.css';
2+
import "./App.css";
33
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
4-
import Home from './components/Home';
5-
import Navbar from './components/Navbar';
6-
import About from './components/About';
7-
import Contact from './components/Contact';
8-
import Alert from './components/Alert';
9-
import Login from './components/Login';
10-
import Signup from './components/Signup';
11-
import NoteState from './context/notes/NoteState';
12-
import { useState } from 'react';
4+
import Home from "./components/Home";
5+
import Navbar from "./components/Navbar";
6+
import About from "./components/About";
7+
import Contact from "./components/Contact";
8+
import Alert from "./components/Alert";
9+
import Login from "./components/Login";
10+
import Signup from "./components/Signup";
11+
import NoteState from "./context/notes/NoteState";
12+
import { useState } from "react";
1313

1414
function App() {
1515
// useState hook
@@ -19,12 +19,12 @@ function App() {
1919
const showAlert = (message, type) => {
2020
setAlert({
2121
msg: message,
22-
type: type
23-
})
22+
type: type,
23+
});
2424
setTimeout(() => {
2525
setAlert(null);
2626
}, 1500);
27-
}
27+
};
2828

2929
return (
3030
<NoteState>
@@ -33,7 +33,6 @@ function App() {
3333
<Alert alert={alert} />
3434
<div className="container">
3535
<Switch>
36-
3736
<Route exact path="/">
3837
<Home showAlert={showAlert} />
3938
</Route>
@@ -53,7 +52,6 @@ function App() {
5352
<Route path="/signup">
5453
<Signup showAlert={showAlert} />
5554
</Route>
56-
5755
</Switch>
5856
</div>
5957
</Router>

‎frontend/src/components/About.js

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
11
import React from "react";
2-
import download from './download.jpg';
2+
import download from "./download.jpg";
33

44
export default function About() {
5-
// const pStyle = {width: '508px', display: 'inline-block', marginRight: '17px'}
6-
// const img = {width: '500px'};
7-
return (
8-
<div className="container">
9-
<h2>About Us</h2>
10-
<p className="para">Note-taking applications (also called note-taking apps) allow students to:
11-
12-
Store all notes and important information digitally, usually in a cloud-based storage system.
13-
Type, write, and draw notes on the device of choice just as one would using pen and paper.
14-
Add files, multimedia, and live recordings to their notes to enrich the meaning and context.
15-
Collaborate and share notes with others instantaneously and in real-time.</p>
16-
<img src={download} className="img"/>
17-
</div>
18-
)
19-
}
5+
// const pStyle = {width: '508px', display: 'inline-block', marginRight: '17px'}
6+
// const img = {width: '500px'};
7+
return (
8+
<div className="container">
9+
<h2>About page</h2>
10+
{/* <img src={download} className="img"/> */}
11+
</div>
12+
);
13+
}

‎frontend/src/components/AddNote.js

Lines changed: 134 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,137 @@
1-
import React, { useContext, useState } from 'react';
2-
import noteContext from '../context/notes/noteContext';
3-
4-
export default function AddNote() {
5-
// useContext hook
6-
const context = useContext(noteContext);
7-
const { addNote } = context;
8-
9-
// useState hook
10-
const [note, setNote] = useState({ title: "", description: "", tag: "" });
11-
12-
// Function
13-
const onchange = (e) => {
14-
setNote({ ...note, [e.target.name]: e.target.value });
15-
}
16-
17-
const submitNote = (e) => {
18-
e.preventDefault(); // it prevent to reload page
19-
addNote(note.title, note.description, note.tag);
20-
21-
setNote({ title: "", description: "", tag: "" });
22-
}
23-
24-
return (
25-
<div>
26-
<div className="container my-4">
27-
<h2>Add a Note</h2>
28-
<form>
29-
<div className="mb-3">
30-
<label htmlFor="title" className="form-label">Title</label>
31-
<input type="text" className="form-control" id="title" name="title" aria-describedby="emailHelp" value={note.title} onChange={onchange} />
32-
</div>
33-
<div className="mb-3">
34-
<label htmlFor="description" className="form-label">Description</label>
35-
<textarea type="textarea" className="form-control" id="description" name="description" value={note.description} onChange={onchange} />
36-
</div>
37-
<div className="mb-3">
38-
<label htmlFor="tag" className="form-label">Tag</label>
39-
<input type="text" className="form-control" id="tag" name="tag" value={note.tag} onChange={onchange} />
40-
</div>
41-
42-
<button disabled={note.title === "" || note.description === "" || note.tag === ""} type="submit" className="btn btn-primary" onClick={submitNote}>Add Note</button>
43-
</form>
1+
import React, { useContext, useState } from "react";
2+
import noteContext from "../context/notes/noteContext";
3+
4+
export default function AddNote(props) {
5+
const { openModal } = props;
6+
// useContext hook
7+
const context = useContext(noteContext);
8+
const { addNote } = context;
9+
10+
// useState hook
11+
const [note, setNote] = useState({ title: "", description: "", tag: "" });
12+
13+
// Function
14+
const onchange = (e) => {
15+
setNote({ ...note, [e.target.name]: e.target.value });
16+
};
17+
18+
const submitNote = (e) => {
19+
e.preventDefault(); // it prevent to reload page
20+
addNote(note.title, note.description, note.tag);
21+
22+
setNote({ title: "", description: "", tag: "" });
23+
};
24+
25+
return (
26+
<>
27+
{/* <!-- Button trigger modal --> */}
28+
<button
29+
type="button"
30+
className="btn btn-primary"
31+
data-toggle="modal"
32+
data-target="#exampleModal2"
33+
onClick={openModal}
34+
>
35+
Add note
36+
</button>
37+
38+
{/* <!-- Modal --> */}
39+
<div
40+
className="modal fade"
41+
id="exampleModal2"
42+
tabIndex="-1"
43+
role="dialog"
44+
aria-labelledby="exampleModalLabel"
45+
aria-hidden="true"
46+
>
47+
<div className="modal-dialog" role="document">
48+
<div className="modal-content">
49+
<div className="modal-header">
50+
<h5 className="modal-title" id="exampleModalLabel">
51+
Add a Note
52+
</h5>
53+
<button
54+
type="button"
55+
className="close"
56+
data-dismiss="modal"
57+
aria-label="Close"
58+
>
59+
<span aria-hidden="true">&times;</span>
60+
</button>
61+
</div>
62+
<div className="modal-body">
63+
<form>
64+
<div className="mb-3">
65+
<label htmlFor="title" className="form-label">
66+
Title
67+
</label>
68+
<input
69+
type="text"
70+
className="form-control"
71+
id="title"
72+
name="title"
73+
aria-describedby="emailHelp"
74+
value={note.title}
75+
onChange={onchange}
76+
/>
77+
</div>
78+
<div className="mb-3">
79+
<label htmlFor="description" className="form-label">
80+
Description
81+
</label>
82+
<textarea
83+
type="textarea"
84+
className="form-control"
85+
id="description"
86+
rows="7"
87+
name="description"
88+
value={note.description}
89+
onChange={onchange}
90+
/>
91+
</div>
92+
<div className="mb-3">
93+
<label htmlFor="tag" className="form-label">
94+
Tag
95+
</label>
96+
<input
97+
type="text"
98+
className="form-control"
99+
id="tag"
100+
name="tag"
101+
value={note.tag}
102+
onChange={onchange}
103+
/>
104+
</div>
105+
106+
<button
107+
disabled={
108+
note.title === "" ||
109+
note.description === "" ||
110+
note.tag === ""
111+
}
112+
type="submit"
113+
className="btn btn-primary"
114+
onClick={submitNote}
115+
>
116+
Add Note
117+
</button>
118+
</form>
119+
</div>
120+
<div className="modal-footer">
121+
<button
122+
type="button"
123+
className="btn btn-secondary"
124+
data-dismiss="modal"
125+
>
126+
Close
127+
</button>
128+
<button type="button" className="btn btn-primary">
129+
Save changes
130+
</button>
44131
</div>
132+
</div>
45133
</div>
46-
)
134+
</div>
135+
</>
136+
);
47137
}

‎frontend/src/components/Alert.js

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
1-
import React from 'react'
1+
import React from "react";
22

33
function Alert(props) {
4-
5-
const capitalize = (word)=>{
6-
if(word === "danger"){
7-
word = "error";
8-
}
9-
const lower = word.toLowerCase();
10-
return lower.charAt(0).toUpperCase() + lower.slice(1);
4+
const capitalize = (word) => {
5+
if (word === "danger") {
6+
word = "error";
117
}
12-
return (
13-
<div style={{height: '50px'}}>
14-
{props.alert && <div className={`alert alert-${props.alert.type} alert-dismissible fade show`} role="alert">
15-
<strong>{capitalize(props.alert.type)}</strong>: {props.alert.msg}
16-
</div>}
8+
const lower = word.toLowerCase();
9+
return lower.charAt(0).toUpperCase() + lower.slice(1);
10+
};
11+
return (
12+
<div style={{ height: "50px" }}>
13+
{props.alert && (
14+
<div
15+
className={`alert alert-${props.alert.type} alert-dismissible fade show`}
16+
role="alert"
17+
>
18+
<strong>{capitalize(props.alert.type)}</strong>: {props.alert.msg}
1719
</div>
18-
)
20+
)}
21+
</div>
22+
);
1923
}
2024

21-
export default Alert
25+
export default Alert;

‎frontend/src/components/Contact.js

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,9 @@
1-
import React from 'react'
1+
import React from "react";
22

33
export default function Contact() {
4-
return (
5-
<div className="container col-md-5">
6-
<h2>Contact Us</h2>
7-
<form>
8-
<div className="mb-3 mt-3">
9-
<label for="exampleInputEmail1" className="form-label">Email address</label>
10-
<input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"/>
11-
<div id="emailHelp" class ="form-text">We'll never share your email with anyone else.</div>
12-
</div>
13-
<div className="mb-3">
14-
<label for="exampleInputPassword1" className="form-label">Password</label>
15-
<input type="password" className="form-control" id="exampleInputPassword1"/>
16-
</div>
17-
18-
<button type="submit" className="btn btn-primary">Submit</button>
19-
</form>
20-
</div>
21-
)
4+
return (
5+
<div className="container col-md-5">
6+
<h2>Contact page</h2>
7+
</div>
8+
);
229
}

0 commit comments

Comments
 (0)