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

Lines changed: 8 additions & 20 deletions
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

Lines changed: 16 additions & 29 deletions
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

Lines changed: 33 additions & 32 deletions
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

Lines changed: 12 additions & 7 deletions
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

Lines changed: 67 additions & 0 deletions
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

Lines changed: 0 additions & 69 deletions
This file was deleted.

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy