Mini Front-end
Development
Projects.

HTML/CSS/JavaScript
Role
Front-end Developer
Duration
Nov 2018
Tools
HTML/CSS/JavaScript

The following projects are some front-end side projects I have done for practicing my front-end skills. The projects listed include a task list, a loan calculator, a number guesser, and a book list. These projects enabled me to practice my front-end programming skills and a bit object-oriented programming thinking, languages used are HTML, CSS, and JavaScript.
Some other mini front-end projects are still under development and will be posted once finished.
So, stay tuned!

Task List

User Stories
  • Users can add task by inputting task in the "new task" line and clicking the green "add task" button.
  • Users can filter the tasks they are looking for by inputting certain text in the "filter tasks" line.
  • Users can delete certain task by clicking the orange x on the right side of the task.
  • Users can delete all tasks together at the same time by clicking the black "clear tasks" button.
task list before
task list after
task list before
task list after

Loan Calculator

User Stories
  • Users can enter the loan amount they would like to loan in the "laon amount" line.
  • Users can enter the interest rate in the second line.
  • Users can enter the amount of years they're planning to repay in the third line.
  • Users can get the final results by hitting the black "calculate" button.

Number Guesser

User Stories
  • Users have 3 chances to guess a number between 1 and 10.
  • If the guess goes wrong, there will be red text showing the number of guesses is left.
  • If the user guesses the number correctly, there will be green text showing "you win".

Book List

User Stories
  • Users can add book by filling out the title, author, ISBN and hitting the "submit" button.
  • Users can also delete a book by clicking the green x on the right side of the already-added book.