https://github.com/kaplanh/dom-example

https://github.com/kaplanh/dom-example

bootstrap5 dom-manipulation events html-css-javascript

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/kaplanh/dom-example
• Owner: kaplanh
• Created: 2024-01-28T15:36:36.000Z (10 months ago)
• Default Branch: master
• Last Pushed: 2024-01-28T16:20:02.000Z (10 months ago)
• Last Synced: 2024-01-29T18:02:49.170Z (10 months ago)
• Topics: bootstrap5, dom-manipulation, events, html-css-javascript
• Language: JavaScript
• Homepage: https://kaplanh.github.io/Dom-Example/
• Size: 10.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# DOM Example

![DOM example](https://github.com/kaplanh/Dom-Example/assets/101884444/6daeae24-55bd-47e2-adb3-85c89d9af223)

[Click Me!](https://kaplanh.github.io/Dom-Example/)

## Description

The project aims to create a DOM Example using JS and Bootstrap.

## Problem Statement

- Your company has recently started on a project that aims to create a Languages Application. So you and your colleagues have started to work on the project.

## Project Skeleton 

```

Monthly Expense Tracking Application (folder)

|

|----readme.md                        

|----index.html  

|----style.css

|----app.js

``` 

### At the end of the project, following topics are to be covered;

- HTML

   ```

   - for Bootstrap cdnjs link & script

    

   

   

   ```

 

- CSS

  

-Bootstrap

 - Bootstrap flex

 - Bootstrap btn

 - Bootstrap text

  

  

- JS

  - DOM Manipulations

    - createElement()

      ```

      const ul = document.createElement("ul")

      ```

    - appendChild()

      ```

      dilSection.appendChild(ul);

      ```

    - closest()

      ```

      const h1 = ul.closest(".container").firstElementChild

      const buttons = ul.closest(".container").querySelectorAll(".btn")

      ```

      

      ```

      ```

     

  - DOM Selectors

    

    ```

     const dilInput = document.querySelector(".diller");

     const silBtn = document.getElementById("sil");

     const buttons = document.querySelectorAll(".btn");

    

    ```

  - Events

    - click

    - keydown

    - load 

    ```

    silBtn.onclick = function () {

    ul.childElementCount > 0

        ? ul.removeChild(ul.lastElementChild)

        : alert("Silinecek dil kalmadi");

    };

    

    dilInput.addEventListener("keydown", (e) => {

    // console.log(e);

    if (e.keyCode === 13) {

        ekleBtn.onclick();

    }

    // if (e.code === 'Enter') {

    //   ekleBtn.onclick();

    // }

    if (e.code === "Delete") {

        silBtn.onclick();

    }

    });

    window.onload = () => {

    javascriptKontrol();

    dilInput.focus();

    };

    

    ```

  - Builtin functions

     - preventDefault()

     - reset()

     - remove()  

  - if else - if - else conditions

  - Ternary & removeChild()

      ```

      silBtn.onclick = function () {

    ul.childElementCount > 0

        ? ul.removeChild(ul.lastElementChild)

        : alert("Silinecek dil kalmadi");

                                 };

      ```

  - Array Methods( forEach() ) & setAtribute()

   ```

    const javascriptKontrol = () => {

    document.querySelectorAll("ul li").forEach((dil) => {

        const kucukHarf = dil.textContent.toLowerCase();

        if (kucukHarf === "javascript") {

            // dil.className = 'red';

            //?Alternatif yöntem

            dil.setAttribute("class", "red");

        }

    });

                                 };

 ```

    

### At the end of the project, developers will be able to;

- improve coding skills within HTML, CSS and JS 

- use git commands (push, pull, commit, add etc.) and Github as a Version Control System.

## Notes

- You can use HTML, CSS, Bootstrap and JS to complete this project.

 ⌛ Happy Coding  ✍