Vanilla Javascript Projects

Projects developed in Vanilla Javascript. No frameworks or libraries. Only the fundamentals of pure Javascript.

1. Lorem Ipsum Generator - Vanilla JavaScript

Lorem Ipsum is dummy text which has no meaning however looks very similar to real text.

Preview:

Used:

• HTML5
• CSS3
• Select elements in the DOM with querySelector.

---

2. Temperature Convertor - Vanilla Javascript

There are three temperature scales in common use today: kelvin (K), centigrade or Celsius (C), and Fahrenheit (F). In this application, you can easily convert the temperature to any scales.

Preview:

Demo: Temperature Converter

---

3. Ludo Game - Vanilla Javascript

Ludo is very popular game invented in India.

Preview:

4. Weight Convertor - Vanilla JavaScript

Weight Convertor helps us to convert the weight into various units such us kilograms(kg), grams(gm), pounds(lb) etc.

Used:

• HTML5
• CSS3
• Selecting elements using querySelector

---

5. Full Image Slider - Vanilla JavaScript

Preview:

Used:

• HTML5
• CSS3 (Pseudo classes, Media queries, etc)
• Font Awesome
• Select elements in the DOM with querySelector.
• SetTimeout
• Setinterval

---

6. Drag and Drop - Vanilla JavaScript

Drag and drop is a pointing device gesture in which the user selects a virtual object by "grabbing" it and dragging it to a different location or onto another virtual object.

Preview:

7. Snow Effect - Vanilla JavaScript

Used:

• HTML5
• CSS3 (Animation)
• Font Awesome
• Select elements in the DOM with querySelector.
• SetTimeout
• Setinterval

---

8. Smooth Scrolling - Vanilla Javascript

Used:

• HTML5
• CSS3 (Flexbox, Variables etc)
• SCSS
• Font Awesome
• Select elements in the DOM with querySelector.
• getBoundingClientRect()
• Date()

---

9. BookMarker - Vanilla Javascript

Used:

• HTML5
• CSS3
• Bootstrap
• Local Storage
• Regular Expression

---

10. Todo List - Vanilla Javascript

At their most basic, to-dos contain all of the tasks that you need to complete on a given day. It's a great device for managing time that enables you to lay out everything that you need to accomplish and plan and prioritize your day from there.

Used:

• HTML5
• SCSS
• Font Awesome
• Local Storage
• Date() : For unique id

Demo: Todo List

---

11. Rock Paper Scissor - Vanilla Javascript

Rock paper scissors is a hand game usually played between two people, in which each player simultaneously forms one of three shapes with an outstretched hand. These shapes are "rock", "paper", and "scissors".

Demo: Rock Paper Scissor

---

12. Form Validation - Vanilla Javascript

Form validation normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. ... JavaScript provides a way to validate form's data on the client's computer before sending it to the web server.

Preview:

Used:

• HTML5
• CSS3
• Font Awesome
• Regular Expression

---

13. Password Generator - Vanilla Javascript

It is an application that takes input from a user and automatically generates a password. Random Generated password can have numbers, alphabets, symbols.

Preview:

14. Filterable Menu - Vanilla Javascript

Used:

• HTML5
• SCSS
• Module
• Higher Order Functions

---

15. Memory Game - Vanilla Javascript

The Match pairs game, is the classic cards game, which will help developing memory skills of children and adults.

Preview

Used:

• Select elements in the DOM with querySelector
• iterate through lists with forEach
• add/remove an element class
• add/remove event listeners
• Timeout
• HTML5: data-attribute
• CSS3: positioning, flexbox, perspective, backface-visibility, transitions

---

16. Calculator - Vanilla Javascript

Used:

• HTML5: data-attribute
• CSS3: grid
• OOP Pattern

Preview:

17. Quiz Game - Vanilla Javascript

Used:

• HTML5 ([data-attribute])
• CSS3
• Select elements in the DOM with querySelector
• Event Listeners

---

18. Drawing App - Vanilla Javascript

Demo: Drawing App

Preview:

Used:

• HTML5 Canvas
• CSS3
• window.navigator.msSaveBlob : for downloading image

---

19. CORONA Tracker - Vanilla Javascript

Coronavirus disease (COVID-19) is an infectious disease caused by a newly discovered coronavirus. This application wil provide information such as confirmed cases, recoverd, death rate etc of NEPAL.

Used:

• HTML5
• CSS3
• Promises
• API : https://api.covid19api.com/summary

Preview:

20. Weather App - Vanilla Javascript

Used:

• HTML5
• CSS3
• Font Awesome
• Async/Await
• API: https://api.openweathermap.org

Preview:

21. Movie App - Vanilla Javascript

Used:

• HTML5
• CSS3
• Bootstrap
• Axios
• Promises
• API: https://api.themoviedb.org

Preview:

---

22. Currency Convertor - Vanilla Javascript

Used:

• HTML5
• CSS3
• Font Awesome
• Promises
• API: https://api.exchangeratesapi.io/latest

Preview :

23. Tic Tac Toe - Vanilla Javascript

Tic-tac-toe (American English), noughts and crosses (British English), or Xs and Os is a paper-and-pencil game for two players, X and O, who take turns marking the spaces in a 3×3 grid. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row is the winner.

Used:

• HTML5 (table, ...)
• CSS3 (pseudo-class, ...)
• DOM Manipulation

Preview:

Demo: Tic Tac Toe

---

24. Snake Game - Vanilla Javascript

The first published by Nokia, for monochrome phones. It was programmed in 1997 by Taneli Armanto of Nokia and introduced on the Nokia 6110.

Used:

• HTML5
• CSS3 (Grid)
• requestAnimationFrame(main)
• Module

Preview:

Demo:Snake Game

---

25. Github Profile Finder - Vanilla Javascript

Used:

• HTML5
• CSS3
• Async/Await
• API: https://api.github.com/users/

---