A daily excercise to work on mini projects
Mini Projects
- [Word Scramble]
- [QR Code Reader]
- [QR Code Generator]
- [Currency Convertor]
- [User Location]
- [Weather App]
- [Internet Connection Status]
- [Adblocker]
- [Meal API]
- [MovieDB API]
- [GitHub API]
- [Random Quote Generator]
- [Password Show Hide]
- [Email Validation]
- [OTP Verification]
- [Timer Multiple Choice Quiz]
- [Language Translator]
- [Text To Speech]
- [Confirm Password and validate]
- [Send Email]
- [Login Page]
- [File Download]
- [File Upload]
- [Drag & Drop File upload]
- [ToDo App]
- [Dictionary App]
- [Palindrome Checker]
- []
is a game where the letters that can make a meaningful word are shuffled or scrambled randomly, and players have to find out the correct word using those random letters.
upload a QRCode image and use QRCODE API server to read and decryt the message
A user can enter a text or URL to generate a QR code. The QRCode it is saved as an image
A user can enter amount and convert your currency to a different country’s currency. Conversion is done using the following API https://v6.exchangerate-api.com/
Using the geolocation API to get current latitude and longitude coordinates of the user device. Then using fetch API, send a get request to the opencagedata server with passing those coordinates and got all the location details. API - https://api.opencagedata.com/
A user can get the weather details of a particular city by entering the city name or you can also get your current location weather details by clicking on the “Get Device Location” button. The weather API the is being Implemented is https://api.openweathermap.org
Using ajax will send a request to a url in the process will check if data is being send. If the passed URL is sending data as a response and the response status of that URL is also equal to 200 then the user is connected to the Internet
Adblocker block the flowing classes ad, ads, ad-banner, ad-box, ad-badge. I haveve created an element and added these classes in it and check what this element is returning. If AdBlocker is enabled then it willl return display: none;
Get a random meal. This application call a web API www.themealdb.com/api/json/v1/1/random.php. You click a button the it will bring up meal, place of origin , ingredients ansd how to prepare it. if the youtube video is readily available it will bring it up;
Making use of moviedb API to build a simple movie app that shows a list of movie titles and images. The Endpoints called are https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=API-KEY&page=1, https://api.themoviedb.org/3/search/movie?&api_key=API-KEY&query=;
Making use of GitHub API to build an app that displays the profile of a github user when you type their name or username;
To show random quotes, I used a free API named quotable https://quotable.io/random using the quotable API I fetched the random quotes and showed them on the Quote App. With speech functionality and twitter share button
Using show hide eye button you can see there is a password field with the password. When you entered some password in that field hey will be hidden by default, when you click on that eye icon the characters will be displayed in plain text format.
Validating the user-entered email address by using regex pattern for validation and match the user entered inputs with this pattern. If the user entered email address is matched with the given pattern that means the user has entered a valid email else entered email is not valid
A multiple choice quiz that has 15 secs per question when you select the wrong answer it will tell you and prompt you to go to the next question
Using an API to convert user-entered text into different languages. This API is used only to convert text into other languages. I have also included the text to voice function
Making text to speech app using vanilla Javascript using the speech synthesis property of the window object convert the entered text to speech. Speech Synthesis is a web speech API that controls the speech service.
If your password and confirm password matched with each other then there is displayed a success message but if you’re two passwords not matched with each other then there is displayed an error message.
Sending email using mailjet API .
A login for that gets username and password there is no backend intergration just playing around with design part
An app you can use to download any file like image, video, pdf, svg, etc. This happens when you paste a valid URL of the file and click the download button to download the file.
An implementation of file upload that will allow users to upload files to a folder on the system and show the progress until the file has been uploaded 100%.
An implementation of file upload that will allow users to upload files to a folder on the system. Using drag and drop functionality in javascript
Making changes to a website
Creating a todo list API
A to-do list is a list of tasks you need to do and in this design there is a content box that holds only the input field with some buttons and text. When you enter a task and click on the plus button, the list will be added to your tasks list and the number of the pending tasks also be updated to localstorage
If the searched word exists then API returns an object of the searched word which holds many details (definition, example, synonyms) of the word else it returns a message of “Can’t find the definitions”. The API called https://api.dictionaryapi.dev
I got this value, I removed the spaces, special characters from it and stored this filtered value in the filterInput variable. Then reversed the filtered value and stored this reversed value in the reversedInput variable. At last, I checked the filterInput and reversedInput.
When you type some text into the text box, select the file format, and hit the “save” button, a new file will be saved on your computer with the entered text in it.