Crypto Coin App

How does my project look

What's used in this app ?	How to run ?	Author
Api-Server	Once you clone the project	Take a look at my portfolio
axios	open index.html with Go Live in vs cod	Visit me on Linkedin
postman
Html
Css
Javascript

What is this project about ?

Project Skeleton

Crypto Coin App (folder)
|
|----img (folder)
|----index.html
|----css (folder)
       |----style.css
|----crypto.js
|----js (folder)
       |----aes.css
       |----Extentions-custom-main.css
|----readme.md

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

API's
- Coinranking API

HTML

semantic-elements

   <center>
       <h1 class="heading">Crypto Coin App</h1>
   </center>

  <small>Coded by <span>❤</span>FullStack Team</a></small>

  <figure>
    <img class="coin-icon" src=${iconUrl}>                
    <figcaption style='color:${change < 0 ? "red" : "green"}'>
      <span><i class="fa-solid fa-chart-line"></i></span>
      <span>${change}%</span>
   </figcaption>
 </figure>

CSS -grid

z-index
position ¹

     .top-banner form {
     position: relative;
     display: flex;
     align-items: center;
   }
 
    .remove-icon {
     position: absolute;
     top: 10px;
     right: 10px;
     font-size: 20px;
     cursor: pointer;
   }

js

EncryptStringAES

DecryptStringAES

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Crypto Coin App</title>         
   <script src="js/aes.js"></script>
   <script src="js/Extentions-custom-main.js"></script>
   
 </head>

//js/Extentions-custom-main.js
function EncryptStringAES(text) {
     if (text != null) {
         var key = CryptoJS.enc.Utf8.parse("8080808080808080");
         var iv = CryptoJS.enc.Utf8.parse("8080808080808080");

       var encryptedstr = CryptoJS.AES.encrypt(
           CryptoJS.enc.Utf8.parse(text),
           key,
           {
         keySize: 128,
         iv: iv,
         mode: CryptoJS.mode.CBC,
         padding: CryptoJS.pad.Pkcs7,
     }
 );
 return encryptedstr;
   } else {
       return "";
   }
 }

 function DecryptStringAES(text) {
     if (text != null) {
         var key = CryptoJS.enc.Utf8.parse("8080808080808080");
         var iv = CryptoJS.enc.Utf8.parse("8080808080808080");

 const crypted = CryptoJS.enc.Base64.parse(text);

 var decryptedstr = CryptoJS.AES.decrypt({ ciphertext: crypted }, key, {
     iv: iv,
     mode: CryptoJS.mode.CBC,
     padding: CryptoJS.pad.Pkcs7,
 });
 return decryptedstr.toString(CryptoJS.enc.Utf8);
     } else {
     }
 }

Axios

       //index.html
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Crypto Coin App</title>
        
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>

     //crypto.js
     const response = await axios(url, options);

template literal(2015 ES-6 ile gelmistir ${...}

      const url = `https://api.coinranking.com/v2/coins?search=${input.value}&limit=1`;

style class ekleme

<figcaption style='color:${change < 0 ? "red" : "green"}'>

prepend() :son ekleneni basa yazdirir
```
coinList.prepend(createdLi);
```
async-await
DOM Manipulations
- innerHTML
DOM Selectors
Events
- submit
- click
- load

Array Methods

forEach() & filter()

       if (coinNameSpans.length > 0) {//kart yoksa bosuna filter islemi yapmasin diye
       const filteredArray = [...coinNameSpans].filter(
           (span) => span.innerText == name
       );

Feedback and Collaboration

I value your feedback and suggestions. If you have any comments, questions, or ideas for improvement regarding this project or any of my other projects, please don't hesitate to reach out. I'm always open to collaboration and welcome the opportunity to work on exciting projects together. Thank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!

⌛ Happy Coding ✍

Rest-Countries App

What's used in this app ?	How to run ?	Author
Javascript Css Bootstrap Html Api-Server	Once you clone the project open index.html with Go Live in vs code	Take a look at my other projects Visit me on Linkedin
What is this project about ? In this project user can get any current country detail from certain api-server and can find a link which takes the user google map.

How does my project look

Live Link

Feedback and Collaboration

I value your feedback and suggestions. If you have any comments, questions, or ideas for improvement regarding this project or any of my other projects, please don't hesitate to reach out.
I'm always open to collaboration and welcome the opportunity to work on exciting projects together.
Thank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!

⌛ Happy Coding ✍

Checkout_Page

Click Me!

Description

The project aims to create a Checkout App using JS and Bootstrap.

Problem Statement

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

Project Skeleton

Checkout Page (folder)
|
|----readme.md                        
|----index.html
|----checkout.js
|----img (folder)
|----css (folder)
     |----index.css
     |----checkout.css
     |----universal.css

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

HTML
- select
- strong
- del
CSS
Nested CSS
text-decoration: line-through

   .nav__list--btn {
   color: orangered;
   font-size: 14px;
   cursor: pointer;

   & i:hover {
       color: white;
       border-radius: 50%;
       background-color: #ff7623;
   }
   }

.line-through {
   text-decoration: line-through;
}

JS

DOM Manipulations
- innerHTML
- innerText
- textContent
DOM Selectors
querySelector
querySelectorAll
const productList = document.querySelector("div.main__product-painel"); //?basina div yazarak belirtirsek performans acisindan daha hizli olur
Events
- click
- load

-e.target & e.currentTarget

     e.currentTarget.firstElementChild.innerText = "My Cart";
    //? NOT:e.target tiklanan elementi verirken e.currentTarget sabittir ve addEventListener in tanimlandigi elemandir burda navbarList  ve daha hizlidir

Capturing & Bubbling
DOM Traversing
- nextElementSibling
- e.target.closest(".main__product-info"
- if (e.target.classList.contains("fa-plus"))
- e.target.previousElementSibling.innerText++;
- firstElementChild
- children
localStorage & sessionStorage
Array Methods

forEach() & reduce()

productTotalPriceDivs.forEach(eachProductTotalPriceDiv => {
   subtotal += parseFloat(eachProductTotalPriceDiv.innerText)
});

reduce()
const subTotalAlternatif = [...productPriceDivs]; //reduce icin array a dönüstürmeliyiz
let subtotal = subTotalAlternatif.reduce((acc, curr) => {
  return acc + parseFloat(curr.innerText); //parseFloat  stringten float yapar
}, 0);

parseFloat

const taxPrice = parseFloat(subtotal * localStorage.getItem("taxRate")); parseFloat  stringten float yapar

if else - if - else conditions

Ternary

let shipping = (subtotal > 0 ? parseFloat(localStorage.getItem("shippingPrice")) : 0);

String Methods( toFixed() )

productTotalPriceDiv.innerText = (productQuantity * productPrice).toFixed(2);

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 and JS to complete this project.

div'in sag üst kösesine carpi butonu koymak icin ↩

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

css

css

img

img

js

js

README.md

README.md

crypto.js

crypto.js

index.html

index.html

Repository files navigation

Crypto Coin App

Project Skeleton

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

Feedback and Collaboration

Rest-Countries App

Once you clone the project

What is this project about ?

How does my project look

Feedback and Collaboration

Checkout_Page

Description

Problem Statement

Project Skeleton

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

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

Notes

About

Releases

Packages

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
css		css
img		img
js		js
README.md		README.md
crypto.js		crypto.js
index.html		index.html

kaplanh/Crypto-Coin-App

Folders and files

Latest commit

History

Repository files navigation

Crypto Coin App

Project Skeleton

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

Feedback and Collaboration

Rest-Countries App

Once you clone the project

What is this project about ?

How does my project look

Feedback and Collaboration

Checkout_Page

Description

Problem Statement

Project Skeleton

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

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

Notes

Footnotes

About

Topics

Resources

Stars

Watchers

Forks

Languages