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 ?
Crypto Coin App (folder)
|
|----img (folder)
|----index.html
|----css (folder)
|----style.css
|----crypto.js
|----js (folder)
|----aes.css
|----Extentions-custom-main.css
|----readme.md
-
API's
-
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 1
.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 );
-
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 ✍
What's used in this app ? | How to run ? | Author |
---|---|---|
|
|
|
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. |
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 ✍
The project aims to create a Checkout App using JS and Bootstrap.
- 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.
Checkout Page (folder)
|
|----readme.md
|----index.html
|----checkout.js
|----img (folder)
|----css (folder)
|----index.css
|----checkout.css
|----universal.css
- 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);
-
-
improve coding skills within HTML, CSS and JS
-
use git commands (push, pull, commit, add etc.) and Github as a Version Control System.
- You can use HTML, CSS and JS to complete this project.
Footnotes
-
div'in sag üst kösesine carpi butonu koymak icin ↩