Project1 - Mapty App
This application can be used to create a workout schedule by placing markers on the map and setting a description over it
Map functionality is implemented using Geo-location API
Project2 - Guess my number game
Here I have developed a web game where the user is required to guess a randomly generated number (hidden in ?) between 1 and 20 in 20 guesses
- User enters a number in the box
- Then clicks on the check button
- Score= 20 - no. of guesses
- Again button restarts the game from 0
Upon clicking the 'check' button an appropriate message is flashed based on how close the guess is to the number
Screenshot taken at different time. The highscore does not show a bug
Project3 - Modal window
Here I have implemented a modal window. Now what is a modal window?
The screenshot attached below can be considered a close real world example to my idea of a modal window:
The features implemented by such a window are:
- The window appears on click
- Closes on clicking the 'X', pressing the escape key or clicking anywhere in the overlay (area outside the window)
The code can be found here
Project4 - Dice Game
A very easy game of dice roll between two players taking chances at rolling the dice. A number is obtained on rolling the dice which gets added to the player's score. The first player to reach 100 is the winner
However the game is not so simple. Wondering why? A dice roll of 1 makes this game interesting-
- On a dice roll of 1, the other player gains control of the dice
- On a dice roll of 1, the player's instantaneous score gets lost
-
Roll dice- randomly generates a number between 1 and 6
-
Hold-
a. Adds the players score to current score
b. Sets score to 0
c. Transfers dice control to next player
-
New game- Resets the entire UI and sets score, current score to 0
Describing the gameplay is difficult. It is advisable to understand the game by playing it
Project5 - Bankist website
An implementation of advanced Document Object Model (DOM) features
- Smooth scrolling
- Menu fade
- Sticky navigation
- Lazy loading of images
- Slider
A modern application that renders Pizza receipes from APIs using Netlify. The application allows users to add receipes, bookmark receipes and search a receipe from a search menu.
- Receipes are rendered on the left showing the ingridients, their quantity and instructions to prepare the dish
- A scroll menu appears on the right where the user chooses a particular receipe by clicking on it
- Search for receipes to find new ideas for meals
- As a user update the number of servings, so that I can cook a meal for different number of people
- Bookmark receipes to review them later
- Create own receipes to have them all organized in the same app
- See bookmarks and own receipes when leaving the app and come back later to close the app safely after cooking
-
Search functionality
- An input field sends request to API with searched keywords
- Displays receipe with cooking time, servings and ingredients; results with indentation display
-
Change servings functionality
- Update ingredients according to number of servings
-
Bookmarking functionality
- Display list of all bookmarked recipes
- User receipes are automatically bookmarked
- Store bookmark data in the browser using local storage, on a page load read saved bookmarked data from local storage and display
-
User can upload own recipes and can see only his own recipes (not those from other users)
- Nodejs
- Parcel
- Babel
- Netlify
Note: The above mentioned projects were developed from scratch while learning JavaScript in the Udemy course by Jonas Schmedtmann, the orignal idea is retained I have added new functionalities and improved few existing functionalities