Collection of Simple Web Projects

A few months ago, I decided to work on a collection of simple and practical projects to educate in my courses, and share it publicly. Then I started and the result came up as a Github repo, named Simple Web Projects.

As the name implies, a collection of simple web projects developed for enthusiasts and beginners. The main purpose is education and all the codes are open for everyone that needs it.

You can read updated version on bhnmzm.com

Notes:

• Webpack, gulp or another bundler was not used.
• Third-party libraries were not used.
• Codes only supported by modern browsers.
• Projects just are for educational purposes.

Projects

There are 6 developed projects that you can review now.

• Web Chat App
• Custom Video Player
• Lovely Movies
• Note App
• Othello Board Game
• Quiz App
• Simple Range Slider

Web Chat App (View Online)

This project is a real messaging app that developed with pure javascript without third-party libs. We focused on the Web Components in this project and give it a real component structure. All chats, messages, data are fake and generated with a data-factory. I hope It would be useful.

Special topics covered:

• Web Components
• Object-Oriented Programming
• Event handling
• DOM controlling
• CSS flex

Custom Video Player (View Online)

In this project, I customized the video controls and designed them manually. Focus on handling the video node and how to implement custom behavior for it.

Special topics covered:

• Video node controls
• Fullscreen handling
• CSS variables

Lovely Movies (View Online)

A simple movie search website

Special topics covered:

• Promises and Fetch data with API
• Control DOM behaviors and events
• Usage of position: static; in CSS
• Using CSS variables

Note App (View Online)

A practical note web app to handle categorized notes. There are notes that can have a category for. you can search in notes and edit or remove those.

Special topics covered:

• Object-Oriented Programming (OOP)
• Creating DOM elements
• Layouting with CSS grid system
• localStorage usage

Othello Board Game (View Online)

Famous strategy game Othello, known as Reversi, implemented in pure Javascript.

Special topics covered:

• Object-Oriented Programming (OOP)
• Othello game strategy
• Creating DOM elements
• Event handling
• Error handling

Quiz App (View Online)

Simulating a quiz in a web app.

Special topics covered:

• Object-Oriented Programming (OOP)
• Creating and handling DOM elements
• CSS animation

Simple Range Slider (View Online)

A simple implementation of a small range slider with pure Javascript.

Special topics covered:

• Prototypal Object-Oriented Programming
• DOM events handling
• CSS variables

Running locally

It's so simple. Clone or download the repository, open project directory and click index.html. As I mentioned above, there is not any bundler and all scripts have been injected in the HTML.

New projects are being prepared

I try to make this repo very useful. So, I really looking forward to your help and your criticism.