├── README.md
└── assets
├── alert-error.png
├── fa-arrow-right-from-bracket.png
├── fa-book-open.png
├── fa-circle-question.png
├── fb-thumb.png
├── github-thumb.png
├── hero-student.png
├── instagram-thumb.png
├── logo.png
└── youtube-thumb.png
/README.md:
--------------------------------------------------------------------------------
1 | ### WELCOME TO ASSIGNMENT-006
2 | # ENGLISH
JANALA
3 |
4 | ## Private Repo Link : https://classroom.github.com/a/JPUEMrmw
5 |
6 | **📅 Deadline For 60 marks**: 17th March , 2025 ( 11:59 pm ⏱️)
7 |
8 | **📅 Deadline For 50 marks**: 19th March , 2025 ( 11:59 pm ⏱️)
9 |
10 | **📅 Deadline For 30 marks**: Any time after 19th March , 2025
11 |
12 | ---
13 | ⚡ API Endpoints
14 | ---
15 | 1. Get ⚡ All Levels
16 | ```bash
17 | https://openapi.programming-hero.com/api/levels/all
18 | ```
19 | 2. Get ⚡ Words by Levels
20 | https:// openapi.programming-hero.com/api/level/{id}
21 | ```bash
22 | https://openapi.programming-hero.com/api/level/5
23 | ```
24 | 3. Get ⚡ Words Detail
25 | https:// openapi.programming-hero.com/api/word/{id}
26 | ```bash
27 | https://openapi.programming-hero.com/api/word/5
28 | ```
29 | 4. Get ⚡ All Words
30 |
31 | ```bash
32 | https://openapi.programming-hero.com/api/words/all
33 | ```
34 |
35 | # Requirements
36 |
37 | ### Navbar
38 | - [ ] Create a navbar with a logo and brand name on the left
39 | - [ ] Create three buttons with icons: FAQ, Learn, and Logout
40 | - [ ] when clicking the FAQ button user will jump to the FAQ section
41 | - [ ] when clicking the Learn button user will jump to the Vocabulary section
42 | - [ ] Navbar will be fixed at the top with a bottom border
43 |
44 | ### Banner
45 | - [ ] Create a banner with a title and paragraph along with a login form on the left as Figma
46 | - [ ] image on the right as Figma
47 | - [ ] Align elements as per the Figma design
48 |
49 | ### FAQ Section
50 | - [ ] Create an FAQ section containing Following questions and answers as Figma
51 | - [ ] the difference between `var`, `let`, and `const`
52 | - [ ] the difference between `map()`, `forEach()`, and `filter()`
53 | - [ ] explain arrow functions and how they are different from regular functions
54 | - [ ] how JavaScript Promises work
55 | - [ ] how closures work in JavaScript
56 |
57 | ### Footer
58 | - [ ] Create a footer that includes the logo and social icons as per Figma
59 | - [ ] redirect users to his social profiles in a new Tab when clicking on social icons
60 |
61 | ### Vocabulary Section
62 | - [ ] Show a center-aligned heading as Figma
63 | ---
64 | - [ ] Create dynamically generated buttons from **API-01** for each lesson
65 | - [ ] Lesson Buttons will be displayed on page load
66 | ---
67 | - [ ] Show a default text that will be displayed in the Vocabulary section initially
68 | - [ ] on Clicking a Specific Lesson Button Load All the words from **API-02**
69 | - [ ] Display all words for a selected lesson in a card format, showing:
70 | - [ ] Word
71 | - [ ] Word meaning & pronunciation
72 | - [ ] Two buttons with relevant icons as per Figma
73 | ---
74 | - [ ] Show ***No Word Found** message if no words exist for a lesson
75 | ---
76 | - [ ] Create functionality to highlight the active lesson button
77 | ---
78 |
79 |
80 | ### Vocabulary Details
81 | - [ ] Create functionality to open a modal when clicking the details icon
82 | - [ ] Data will be load from **API-03**
83 | - [ ] modal will displays:
84 | - [ ] Word with pronunciation
85 | - [ ] Example sentence
86 | - [ ] Synonyms
87 | - [ ] A "Complete Learning" button to close the modal
88 |
89 |
90 | ## Challenge Requirements
91 |
92 | ### Custom Navigation & Smooth scrolling
93 | - [ ] hide everything on landing except the Banner and Footer
94 | - [ ] Create a functional login form:
95 | - [ ] Show an alert if the user does not enter a name
96 | - [ ] Show an alert if the password is not "123456"
97 | - [ ] when the user enters a valid name and password
98 | - [ ] Show a alert with a success message,
99 | - [ ] hide the Banner
100 | - [ ] display the Navbar, Vocabulary Section, and FAQ Section
101 | ---
102 | - [ ] when clicking "Logout"
103 | - [ ] hide the Navbar, Vocabulary Section, and FAQ Section
104 | - [ ] show only the Banner and Footer
105 | - [ ] Apply smooth scrolling for FAQ & Learn buttons
106 |
107 | ### Handling Invalid Data
108 | - [ ] avoid displaying falsy values like `undefined` or `null`
109 | - [ ] display relevant words if no data is found
110 |
111 | ### Loading Spinner
112 | - [ ] Create a loading spinner that will be display when vocabulary is loading from API
113 |
114 | ## Optional: Be a Perfectionist
115 |
116 | ⚠️ Their is No Mark for Optional Requirement. You won't get any support for any of the optional Part. But we strongly recommend you to give a try after completing all the requirement.
117 |
118 | ---
119 | ### Sweet Alert - https://sweetalert2.github.io/#download
120 | - [ ] Explore Sweet ALert Documentation
121 | integrate it with your app. replace all the basic alert with a normal alert
122 | Follow this [Documentation](https://sweetalert2.github.io/)
123 | ---
124 | ### Speak your Vocabularies
125 | - [ ] Create functionality for voice pronunciation of vocabulary words
126 | - [ ] Use below function and implement on clicking sound icon
127 | ```js
128 | function pronounceWord(word) {
129 | const utterance = new SpeechSynthesisUtterance(word);
130 | utterance.lang = 'en-EN'; // English
131 | window.speechSynthesis.speak(utterance);
132 | }
133 | ```
134 | For More >> you can explore this implementation 👉 [https://codepen.io/Ferdous-Zihad/pen/PwoJMmJ](https://codepen.io/Ferdous-Zihad/pen/PwoJMmJ)
135 |
136 | ---
137 | ### Custom Font integration
138 | - [ ] integrate a local Bengali font for Bangla words given in assets
139 | - [ ] use this font on every Bengali words
140 | - [ ] Search , Research , Explore If you dont know how to do it.
141 |
--------------------------------------------------------------------------------
/assets/alert-error.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B11-A6-English-Janala/b41d7e5c8e4ad09c0b7286c0f5afb2b0a5172bc0/assets/alert-error.png
--------------------------------------------------------------------------------
/assets/fa-arrow-right-from-bracket.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B11-A6-English-Janala/b41d7e5c8e4ad09c0b7286c0f5afb2b0a5172bc0/assets/fa-arrow-right-from-bracket.png
--------------------------------------------------------------------------------
/assets/fa-book-open.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B11-A6-English-Janala/b41d7e5c8e4ad09c0b7286c0f5afb2b0a5172bc0/assets/fa-book-open.png
--------------------------------------------------------------------------------
/assets/fa-circle-question.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B11-A6-English-Janala/b41d7e5c8e4ad09c0b7286c0f5afb2b0a5172bc0/assets/fa-circle-question.png
--------------------------------------------------------------------------------
/assets/fb-thumb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B11-A6-English-Janala/b41d7e5c8e4ad09c0b7286c0f5afb2b0a5172bc0/assets/fb-thumb.png
--------------------------------------------------------------------------------
/assets/github-thumb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B11-A6-English-Janala/b41d7e5c8e4ad09c0b7286c0f5afb2b0a5172bc0/assets/github-thumb.png
--------------------------------------------------------------------------------
/assets/hero-student.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B11-A6-English-Janala/b41d7e5c8e4ad09c0b7286c0f5afb2b0a5172bc0/assets/hero-student.png
--------------------------------------------------------------------------------
/assets/instagram-thumb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B11-A6-English-Janala/b41d7e5c8e4ad09c0b7286c0f5afb2b0a5172bc0/assets/instagram-thumb.png
--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B11-A6-English-Janala/b41d7e5c8e4ad09c0b7286c0f5afb2b0a5172bc0/assets/logo.png
--------------------------------------------------------------------------------
/assets/youtube-thumb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/B11-A6-English-Janala/b41d7e5c8e4ad09c0b7286c0f5afb2b0a5172bc0/assets/youtube-thumb.png
--------------------------------------------------------------------------------