/JavaScript_Projects

I have started my development journey with JavaScript and Here all of my projects with JS will be stored.

Primary LanguageCSS

JavaScript_Projects_descriptions

I have started my development journey with JavaScript and Here all of my projects with JS will be stored. I have enrolled the following course to start my journey to be a full stack JS developer. https://www.msbacademy.com/course/javascript-bootcamp/ref/1327/ref/1327/?campaign=javascript

MonsterFinder(First project done in the above course.)

About the MonsterFinder project

There is a list of monsters and a search field. Every monsters has it's name and email. Monsters will be appeared based on the searched keyword. If the keyword is matched with the monster's name or email only those monsters will be displayed. If keyword is not matched with any monster's name or email, no monster found ( by default display is none) should be displayed.

Main task is done in MonsterFinder project

  • All monsters are displayed loading from another module named "monsters.js"
  • "keyup" eventListener has been created on the search form.
  • default no-monster-found is displayed if keyword is not matched with any monster's name or email.
  • the logo image is transformed as->rotateX(180 deg) is no-monster-found is appeared.

Learning from MonsterFinder project

  • work with querySelector
  • Add eventListener( specially 'keyup' eventListener that is being used here)
  • work with the target value of any search field.
  • update html element properties.
  • besides there is a lot of things those have been learnt automatically which is making me confident.

eWallet(Second project done in the above course.)

About the eWallet project

There is a form to add any income or expense information with proper description. Overall the project, two different color green and red are used for making sense of income and expense respectively. If total balance is negative then header color will be turned into red otherwise it will be green.

Main task is done in eWallet project

  • User can select input type( value of type is + or -).
    • '+' for income and '-' for expense.
  • User will add description. without any description no item will be added in the total item collection.
  • User will add the value(amount of the item). without any value no item will be added in the total item collection.
  • Expense and income items color will be always red and green respectively.
  • Every item will be added just afterbegin of the collection.

Learning from eWallet project

  • work with querySelector
  • read and write data from/to the LocalStorage
  • Add eventListener( specially 'submit' eventListener that is being used here)
  • work with the value of any input field.
  • update html element properties.
  • work with the current date, time properties.
  • insertAdjacentHTML activities.
  • besides there is a lot of things those have been learnt automatically which is making me more and more confident.

GitProFinder(Third project done in the above course.)

About the GitProFinder project

There is a search field where you can input any username of any github user. If the username is exist then his profile with all repositors will be appeared but if that user is not exist it will display "User Not Found".

Main task is done in GitProFinder project

  • I have used 'https://api.github.com/users/' gitUser api and fetch the user info using this api.
  • I have used 'https://api.github.com/users/' gitUser api and fetch the user info using this api.
  • "Submit" eventListener has been created on the search form.
  • Learn to use of async await.
  • If user is not found then display "User not found".

Learning from GitProFinder project

  • work with Fetch api
  • Add eventListener( specially 'submit' eventListener that is being used here)
  • work with the target value of any search field.
  • update html element properties.
  • work with async await
  • work with loader display
  • besides there is a lot of things those have been learnt automatically which is making me confident.