This directory contains some JavaScript Projects that will help to clear the basics and foundations.
Task List Application has the features to add, delete and filter tasks from task list. The application enables the user to add a single or multiple tasks to the task list. The cross button ensures the task selected is deleted. It also has a clear all tasks button, that deletes all the tasks. An additional functionality of filtering through the tasks is also available. It is crucial to mention that addition and deletion of task is connection to the Local Storage of the Browser. That means once the task is added, it persists to the local storage and when deleted, gets deleted from the Local Storage as well.
Have a look at the complete application demo below:
Loan Calculator Application has the features to enter the principal amount, years of repayment and the interest rate. The application enables the user to calculate the monthly payment, interest the user has to pay for the loan and total interest to be paid. The application only calculates interest amount to be paid, when all the input values aree entered else an alert message is shown. An extra functionality of loader is added for the user to know that the application is functioning in the background to produce results and not wait indefinitely without the application not functioning.
Have a look at the complete application demo below:
Number Guesser Application enables the user to guess a number between a minimum and maximum value. It obeys the following rules:
-
Players must guess a number between a min and max
-
Player gets a certain amount of guesses
-
Notify the player of remaining number of guesses
-
Notify the player of the correct answer if looses
-
Let player choose to play again
In this application, the minimum is set to 1 and maximum to 20. The number of guesses(trials) available are 3. The player gets the chance to play again, if he won or he looses(after completion of 3 guesses).
Have a look at the complete application demo below:
Book List Application enables the user to a new book with the title, author name and ISBN(a unique number). The user can delete a book from the list, which also gets deleted from the Local Storage as the book list is also persisted to the local storage. So, upon refreshing only the books present in Local Storage will be visible in the table(list) in the application. This repository contains two app.js files: one(appes5.js) uses the ES5 JS classes and the second(appes6.js) uses the ES6 JS Classes. The objective of this application was to understand the concepts of Object-Oriented Programming in JavaScript.
Have a look at the complete application demo below:
Chuck Norris Joke Generator takes in a number from the user as an input and outputs that number of jokes randomly. This was a basic application created to understand the concept of API endpoints and calls in Javascript. The concept of creating an xmlhttp object, creating a connecting, sending/ receiving data is clearly understood by this project.
Have a look at the complete application demo below:
User Form Validation is a simple form page that inputs user details of Name, Email-id, Zipcode and PhoneNumber with each of the fields having some restrictions. The form validation was an implementation of regular expressions in JavaScript.
- Name can contain 2-10 alphabets.
- Zipcode contains 6 digits with a dash like xxx-xxx.
- Email id contains alphabets, digits or special symbols like underscore, period and dash, followed by @ and another set of alphabets, digits or special symbols, which is followed by a period and then again with 2-5 alphabets.
- Phone Number can be entered in a range of 10 digits in the format of xxx-xxx-xxxx with either spaces, dashes or periods in between the groups of digits.
Have a look at the complete application demo below:
Github Finder Application enables to reach out to the Github API and extract a user, with his github profile details like company, website, followers, following, repositories, etc. This project applies all the core fundamentals of Javascripts like ES6 Classes, Arrow Functions, async and await, API fetch - promises, events and many more. The user can search for a specific username in the search user bar of the application, if no such username exists an error message is shown in the UI, else the user profile is displayed.
Have a look at the complete application demo below:
Profile Scroller Application is a small one-paged application like dating websites Tinder and BumbleBee to implement the concept of Iterators in JavaScript. The profile objects have been hardcoded just to test the iterator now, but it can be fetched from APIs as well. On the User Interface, as soon as a user clicks Next, the next item of the iterator object is displayed.
Have a look at the complete application demo below:
