https://github.com/kaplanh/kredi-hesaplama-uygulamasi

https://github.com/kaplanh/kredi-hesaplama-uygulamasi

bootstrap5 html-css-javascript string-manipulation

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/kaplanh/kredi-hesaplama-uygulamasi
• Owner: kaplanh
• Created: 2024-01-28T17:52:31.000Z (10 months ago)
• Default Branch: master
• Last Pushed: 2024-01-29T03:21:52.000Z (10 months ago)
• Last Synced: 2024-01-29T20:28:37.602Z (10 months ago)
• Topics: bootstrap5, html-css-javascript, string-manipulation
• Language: HTML
• Homepage: https://kaplanh.github.io/Kredi-Hesaplama-Uygulamasi/
• Size: 15.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Kredi Hesaplama Araci

![kredi hesaplama araci](https://github.com/kaplanh/Kredi-Hesaplama-Uygulamasi/assets/101884444/a24bb7a7-d960-4615-994e-8926818d4dac)

[Click Me!](https://kaplanh.github.io/Kredi-Hesaplama-Uygulamasi/)

## Description

The project aims to create a Credit Calculator using JS and Bootstrap.

## Problem Statement

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

## Project Skeleton 

```

Monthly Expense Tracking Application (folder)

|

|----readme.md                        

|----index.html  

|----app.js

``` 

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

- HTML

  - select input 

   ```

    Kredi:

        

        

          Seciniz

          Konut Kredisi

          Ihtiyac Kredisi

          Arac Kredisi

        

   

   ```

 

-Bootstrap

 - Bootstrap form

 - Bootstrap table

 - Bootstrap flex

 - Bootstrap btn

 - Bootstrap text

  

  

- JS

  - DOM Manipulations

    - innerHTML

      ```

      sonuclar.innerHTML = `

        
Kredi Bilgileri

        

         

          

            Kredi Miktari

            ${tutar.value} ₺

            Kredi Tipi

            ${select.value}

          

          

            Vade

            ${vade.value}

            Faiz Orani

            ${oran}

          

          

            Toplam Tutar

            ${(taksit * vade.value).toFixed(2)} ₺

            Taksit Tutari

            ${taksit.toFixed(2)} ₺

          

        

      

       `;

      ```

     

  - DOM Selectors

    

  - Events

    - click

    ```

          hesaplaBtn.addEventListener('click', (e) => {

        //? preventDefault() event'ın default davranışı (submit etmek ve formu silmek) engeller

        e.preventDefault();

        if (select.value === 'Konut Kredisi') {

          oran = 1.29;

        } else if (select.value === 'Ihtiyac Kredisi') {

          oran = 1.99;

        } else if (select.value === 'Arac Kredisi') {

          oran = 1.79;

        }

        if (!select.value || !vade.value || !tutar.value) {

          alert('Lutfen Kredi turu, Vade ve tutari giriniz');

        }

      

        const faiz = oran / 100;

        taksit =

          (tutar.value * (faiz * (1 + faiz) ** vade.value)) /

          ((1 + faiz) ** vade.value - 1);

      

        // console.log(taksit);

        sonuclariGoster();

      });

    

    ```

  - Builtin functions

     - preventDefault()

  

  - if else - if - else conditions

 

     


  - String Methods( toFixed() )

   ```

   ${(taksit * vade.value).toFixed(2)} ₺

  ```

    

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

- improve coding skills within HTML, Bootstrap and JS 

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

## Notes

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

 ⌛ Happy Coding  ✍