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

User Interface

Architecture

Flowchart

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 Interface

Working

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

Making guesses

Upon clicking the 'check' button an appropriate message is flashed based on how close the guess is to the number

Guess> Number

Guess < Number

Correct guess

Again button

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

User Interface

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

Algorithm

Declaring 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

Individual components

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

Features

Smooth scrolling
Menu fade
Sticky navigation
Lazy loading of images
Slider

Project6 - My first web application

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.

User Interface

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

User stories

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

Features

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)

Architecture

Flowchart

Pre requisites

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

singhdivyank/JavaScript-projects

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages