Skip to content

Commit 3a4a17e

Browse files
sahandghavidelsahandghavidel
committed
update 2 projects
1 parent 0ffab49 commit 3a4a17e

File tree

8 files changed

+169
-206
lines changed

8 files changed

+169
-206
lines changed

‎projects/english-dictionary/index.html

+8-20
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
5-
<title>Dictionary App</title>
6-
7-
<link rel="stylesheet" href="style.css" />
8-
<link
9-
href="https://fonts.googleapis.com/icon?family=Material+Icons"
10-
rel="stylesheet"
11-
/>
12-
<link
13-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
14-
rel="stylesheet"
15-
/>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>English Dictionary</title>
8+
<link rel="stylesheet" href="style.css">
169
</head>
1710
<body>
18-
<div class="container" id="container">
11+
<div class="container">
1912
<h1 class="heading">English Dictionary</h1>
20-
<input type="text" class="input" id="input" placeholder="Search a word" />
13+
<input placeholder="Search a word" type="text" class="input" id="input" />
2114
<p class="info-text" id="info-text">Type a word and press enter</p>
2215
<div class="meaning-container" id="meaning-container">
2316
<p>Word Title: <span class="title" id="title">___</span></p>
2417
<p>Meaning: <span class="meaning" id="meaning">___</span></p>
25-
26-
<audio
27-
id="audio"
28-
controls
29-
src="https://api.dictionaryapi.dev/media/pronunciations/en/hello-au.mp3"
30-
></audio>
18+
<audio src="" controls id="audio"></audio>
3119
</div>
3220
</div>
3321
<script src="index.js"></script>

‎projects/english-dictionary/index.js

+16-29
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,40 @@
1-
const containerEl = document.getElementById("container"),
2-
searchInput = document.getElementById("input");
3-
infoTextEl = document.getElementById("info-text");
4-
const audioEl = document.getElementById("audio");
5-
1+
const inputEl = document.getElementById("input");
2+
const infoTextEl = document.getElementById("info-text");
63
const meaningContainerEl = document.getElementById("meaning-container");
7-
84
const titleEl = document.getElementById("title");
95
const meaningEl = document.getElementById("meaning");
6+
const audioEl = document.getElementById("audio");
107

11-
async function fetchApi(word) {
8+
async function fetchAPI(word) {
129
try {
1310
infoTextEl.style.display = "block";
14-
infoTextEl.innerText = `Searching the meaning of "${word}"`;
1511
meaningContainerEl.style.display = "none";
12+
infoTextEl.innerText = `Searching the meaning of "${word}"`;
1613
const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
1714
const result = await fetch(url).then((res) => res.json());
1815

1916
if (result.title) {
17+
meaningContainerEl.style.display = "block";
18+
infoTextEl.style.display = "none";
2019
titleEl.innerText = word;
2120
meaningEl.innerText = "N/A";
2221
audioEl.style.display = "none";
23-
}
24-
25-
const definitions = result[0].meanings[0].definitions[0];
26-
27-
titleEl.innerText = result[0].word;
28-
29-
meaningEl.innerText = definitions.definition;
30-
31-
if (result[0].phonetics[0].audio) {
22+
} else {
23+
infoTextEl.style.display = "none";
24+
meaningContainerEl.style.display = "block";
3225
audioEl.style.display = "inline-flex";
33-
26+
titleEl.innerText = result[0].word;
27+
meaningEl.innerText = result[0].meanings[0].definitions[0].definition;
3428
audioEl.src = result[0].phonetics[0].audio;
35-
} else {
36-
audioEl.style.display = "none";
3729
}
38-
39-
infoTextEl.style.display = "none";
40-
meaningContainerEl.style.display = "block";
4130
} catch (error) {
4231
console.log(error);
43-
infoTextEl.style.display = "none";
44-
meaningContainerEl.style.display = "block";
45-
audioEl.style.display = "none";
32+
infoTextEl.innerText = `an error happened, try again later`;
4633
}
4734
}
4835

49-
searchInput.addEventListener("keyup", (e) => {
50-
if (e.key === "Enter" && e.target.value) {
51-
fetchApi(e.target.value);
36+
inputEl.addEventListener("keyup", (e) => {
37+
if (e.target.value && e.key === "Enter") {
38+
fetchAPI(e.target.value);
5239
}
5340
});

‎projects/english-dictionary/style.css

+33-32
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,40 @@
1-
body {
2-
margin: 0;
3-
display: flex;
4-
align-items: center;
5-
justify-content: center;
6-
background-color: salmon;
7-
min-height: 100vh;
8-
font-family: "Courier New", Courier, monospace;
1+
body{
2+
margin: 0;
3+
display: flex;
4+
min-height: 100vh;
5+
justify-content: center;
6+
align-items: center;
7+
background-color: salmon;
8+
font-family: 'Courier New', Courier, monospace;
99
}
1010

11-
.container {
12-
width: 90%;
13-
background-color: rgba(255, 255, 255, 0.3);
14-
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
15-
border-radius: 7px;
16-
padding: 28px;
17-
margin: 10px;
18-
text-align: center;
19-
max-width: 450px;
20-
font-weight: 500;
21-
font-size: 18px;
22-
}
23-
.heading {
24-
font-size: 28px;
11+
.container{
12+
background-color: rgba(255,255,255, .3);
13+
padding: 28px;
14+
border-radius: 7px;
15+
box-shadow: 0 10px 10px rgba(0,0,0,.3);
16+
width: 90%;
17+
margin: 10px;
18+
max-width: 450px;
19+
text-align: center;
20+
font-size: 18px;
21+
font-weight: 500;
2522
}
2623

27-
.input {
28-
height: 53px;
29-
width: 300px;
30-
border-color: rgba(255, 255, 255, 0.4);
31-
background-color: rgba(255, 255, 255, 0.6);
32-
border-radius: 5px;
33-
font-size: 16px;
34-
padding: 0 42px;
24+
.heading{
25+
font-size: 28px;
3526
}
3627

37-
.meaning-container {
38-
display: none;
28+
.input{
29+
height: 53px;
30+
width: 300px;
31+
background-color: rgba(255,255,255, .6);
32+
border-color: rgba(255,255,255, .4);
33+
font-size: 16px;
34+
padding: 0 42px;
35+
border-radius: 5px;
3936
}
37+
38+
.meaning-container{
39+
display: none;
40+
}

‎projects/notes-taking-app/icon.png

-7.05 KB
Binary file not shown.

‎projects/notes-taking-app/index.html

+12-7
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,21 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<link rel="shortcut icon" href="./icon.png" type="image/png" />
8-
<title>Notes Taking App</title>
7+
<title>Note App</title>
98
<link rel="stylesheet" href="style.css" />
109
</head>
1110
<body>
12-
<h1>Notes Taking App</h1>
13-
<div id="app">
14-
<button class="add-note" type="button">+</button>
11+
<h1 class="heading">Note App</h1>
12+
<p class="info-text">Double click on a note to remove it</p>
13+
<div id="app" class="app">
14+
<!-- <textarea
15+
class="note"
16+
cols="30"
17+
rows="10"
18+
placeholder="Empty Note"
19+
></textarea> -->
20+
<button class="btn" id="btn" type="button">+</button>
1521
</div>
16-
17-
<script src="script.js"></script>
22+
<script src="index.js"></script>
1823
</body>
1924
</html>

‎projects/notes-taking-app/index.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
const notesContainerEl = document.getElementById("app");
2+
const btnEl = document.getElementById("btn");
3+
4+
getNotes().forEach((note) => {
5+
const noteEl = createNoteEl(note.id, note.content);
6+
notesContainerEl.insertBefore(noteEl, btnEl);
7+
});
8+
9+
btnEl.addEventListener("click", () => addNote());
10+
11+
function getNotes() {
12+
return JSON.parse(localStorage.getItem("note-ap") || "[]");
13+
}
14+
15+
function saveNotes(notes) {
16+
localStorage.setItem("note-ap", JSON.stringify(notes));
17+
}
18+
19+
function createNoteEl(id, content) {
20+
const element = document.createElement("textarea");
21+
22+
element.classList.add("note");
23+
element.value = content;
24+
element.placeholder = "Empty Note";
25+
26+
element.addEventListener("input", () => {
27+
updateNote(id, element.value);
28+
});
29+
30+
element.addEventListener("dblclick", () => {
31+
const noteDelete = confirm("Want to Delete the note?");
32+
if (noteDelete) {
33+
deleteNote(id, element);
34+
}
35+
});
36+
37+
return element;
38+
}
39+
40+
function addNote() {
41+
const notes = getNotes();
42+
const noteObj = {
43+
id: Math.floor(Math.random() * 100000),
44+
content: "",
45+
};
46+
47+
const noteEl = createNoteEl(noteObj.id, noteObj.content);
48+
notesContainerEl.insertBefore(noteEl, btnEl);
49+
50+
notes.push(noteObj);
51+
saveNotes(notes);
52+
}
53+
54+
function updateNote(id, newContent) {
55+
const notes = getNotes();
56+
const target = notes.filter((note) => note.id == id)[0];
57+
58+
target.content = newContent;
59+
saveNotes(notes);
60+
}
61+
62+
function deleteNote(id, element) {
63+
const notes = getNotes().filter((note) => note.id != id);
64+
65+
saveNotes(notes);
66+
notesContainerEl.removeChild(element);
67+
}

‎projects/notes-taking-app/script.js

-69
This file was deleted.

0 commit comments

Comments
 (0)