├── 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 --------------------------------------------------------------------------------