Vanilla JavaScript Projects

JavaScript is a web language. It is better to learn it by making projects.

And it is important to make projects on Vanilla JS before moving on to any framework.

You must have listen this-

"Learn JavaScript before React."

So here are my projects.

Table of contents

• Overview
  • Snapshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

This repository contains projects of different concepts. Not only Vanilla JavaScript but also lots of Vanilla CSS, Tailwind CSS and HTML. Many APIs, many interesting concepts. You will see all.

Snapshots

Here are some of the screenshots of projects

A7. Login Form - Using SessionStorage, Validaion and Tailwind CSS

• Solution URL: Source Code

• Live Site URL: Live Link

---

A8. CRUD Form - Using LocalStorage

• Solution URL: Source Code

• Live Site URL: Live Link

---

B0. Countdown Timer

• Solution URL: Source Code

• Live Site URL: Live Link

---

B1. Tic-Tac-Toe Game

• Solution URL: Source Code

• Live Site URL: Live Link

Links

No.	Project Name	Source Code	Live Link
A0.	Quote Generator	Code	Live
A1.	Modal Box	Code	Live
A2.	Accordion FAQ	Code	Live
A3.	Stop Watch	Code	Live
A4.	To Do List	Code	Live
A5.	Basic Calculator	Code	Link
A6.	Login Form using LocalStorage and Tailwind CSS	Code	Link
A7.	Login Form using SessionStorage, Validation and Tailwind CSS	Code	Link
A8.	CRUD Form using LocalStorage	Code	Link
A9.	Digital Counter App	Code	Link
B0.	Countdown Timer	Code	Link
B1.	Tic-Tac-Toe Game	Code	Link
B2.	Guess A Number	Code	Link

My process

I make projects to learn new concepts. Sometimes I learn new concepts to make new projects. 👨‍💻

Also to brush up my learnings.

Built with

• Semantic HTML5 markup

• Tailwind CSS

• CSS custom properties

• Vanilla JavaScript

• Desktop-first workflow

• Responsive on Mobile Screen

What I learned

Many different concepts-

• Basics

• Ternary Operator

• Array Methods

• DOM manipulation

• Arrow Function

• Template Literals

• LocalStorage

• SessionStorage

• CRUD

Continued development

Projects based on these concepts-

• Asynce/Await,

• Higher order function,

• Error Handling,

• Map and filter

• destructuring

• spread and REST operator

• promise, fetch API

• ES-6 classes

• Import/Export

Need to work on UI/UX and background design.

Suggest any project you think I should make. Your suggestions are welcome. 🙌

Useful resources

• freecodecamp - All the problems I pracice. Helped me a lot. 🙌

• w3schools - This helped me throughout my journey. Still doing. 🙂

• Tailwind Docs - Tailwind CSS Docs for utility classes

Author

Basant Soni 👨‍💻

• GitHub - @SoniBasant

• Frontend Mentor - @SoniBasant

• CodePen - @SoniBasant

• Hashnode - @SoniBasant