Creating 5 projects using pure javascript and interactions with DOM.

Requirements:
– Knowledge of basic HTML, CSS.
– Knows the basics of JavaScript and want to master the subject more deeply

Source code: https://github.com/kumancev/js-dom-projects

Project 1 (Cards)

Create a very nice drop-down card plugin.
Optimal for offering various products
The cost of the service on the freelance from $10 to $70.

Project 2 (Drag & Drop)

We’ll learn how to do Drag & Drop by creating a mini Trello clone.
Suitable for dragging and dropping items to cart or task tracker
Freelance service cost from $30 to $150.

Project 3 (Slider)

Let’s write an impressive picture slider
Option of presenting services or photos
Freelance service cost from $50 to $220.

Project 4 (Hover Board)

Create a visual minigame with dynamic content generation
Mastering dynamic generation and optimizing work with JS
The cost of the service on a freelance basis from $60 to $300.

Project 5 (Aim game)

We’ll write a whole Aim Game with 3 screens!
Working with animation, timer and full-fledged game functionality
The cost of freelance services from $75 to $380.

Here is the implementation of the Cards project

1. First, let’s write the html code of our page:

We have a main div with a class “container” that contains our cards. When you click on a card, it opens.

2. Let’s write the CSS code for this:

3. To change the class of the card to open, let’s write a js script to our site:

Our app is done!😎

Source code: https://github.com/kumancev/js-dom-projects/tree/main/cards-sources

Moving on to the Drag & Drop project

1. First, let’s write the html code of our page:

Here is some simple html code. We create two rows with columns and add divs to be able to move the element.

2. Write our CSS code:

3. Write js script to be able to move tasks from one column to another:

I didn’t add comments to the code because I think the EventListeners describe quite clearly what’s going on.
In any case, you can ask a question or clarify something by writing a comment or contacting me in any other way.

Source code: https://github.com/kumancev/js-dom-projects/tree/main/drag-drop

Next in line is Slider project

1. Again, let’s write the html code of our page:

Mark up the page in the following way ->
We’ll have images on the right side and text content on the left, and we’ll add buttons to move.

2. Let’s write the CSS code for the logic and effects in our application:

Note that we set the position: relative property of our .container and the position: absolute property of our elements to be able to hide them behind the viewport.

3. Make it possible to switch slides:

Our App look’s like

Source code: https://github.com/kumancev/js-dom-projects/tree/main/slider

Moving on to the fun stuff. Hover Board

1. Writing the basis of our page:

2. Next, write our CSS code:

As you can see the HTML and CSS code of our project is simple. All because we will create a board in the js-script and there will automatically generate our styles.

3. Let’s not wait, let’s get busy:

App view

Source code: https://github.com/kumancev/js-dom-projects/tree/main/hover-board

Our last, but not least, application. Aim Game

Reaction test application, with the ability to choose the duration of the game.

1. Writing the basis of our application (html):

We will have three screens that we will switch using css and js.

2. Let’s add our CSS styles:

For better understanding I suggest splitting your screen into two parts (index.html and style.css) to understand which styles apply to what.

3. Well, let’s write the logic of our game:

I tried to describe the methods and names of the variables as clearly as possible, so that when you read the code it would be clear what it does.
In short, we hang the handler on 1st screen and then switch the screens depending on the user’s choice.
During the game we generate circles of different sizes and colors. When you click on a circle, we increase the counter, remove the circle and add a new one.

Source code: https://github.com/kumancev/js-dom-projects/tree/main/aim-game

By the way, this game can be easily hacked by writing a simple console script. If you can tell me in the comments😎

Whew, now you’ve created 5 great apps using pure javascript.

Be sure to play around with the code, add your own stuff, change styles, etc.
I say thank you and see you on the web!👋🏼

New to trading? Try crypto trading bots or copy trading