[JAVASCRİPT] Basit Alert Kütüphanesi V1

Crackmeci

Katılımcı Üye
28 Haz 2020
308
169
Web
Merhaba, bu konumda kendimin javascript ,html ve css'le yazmış olduğu basit alert(uyarı) kütüphanesinin tanıtımını yapacağım.


alert.html:

HTML:
<!DOCTYPE html>
<html lang="en">
  <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>Alerts</title>
    <link rel="stylesheet" href="alert.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
  <body>
    <div class="container">
      <script src="alert.js"></script>
      <script>
        new UIAlert({
          type: "danger",
          text: "Bu bir tehlike mesajıdır",
          placeName: ".container",
          delayTime : 5
        });
        new UIAlert({
          type: "success",
          text: "Bu bir başarılı işlem mesajıdır.",
          placeName: ".container",
          delayTime : 5
        });
        new UIAlert({
          type: "error",
          text: "Bu bir hata mesajıdır",
          placeName: ".container",
          delayTime : 5
        });
        new UIAlert({
          type: "warning",
          text: "Bu bir uyarı mesajıdır.",
          placeName: ".container",
          delayTime : 5
        });
        new UIAlert({
          type: "info",
          text: "Bu bir bilgi mesajıdır.",
          placeName: ".container",
          delayTime : 5
        });
      </script>
    </div>
  </body>
</html>


alert.css :
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

::root{
    --transitionTime :  3s;
}

body {
    font-size: 14px;
    background: #ffffff;
}

.container {
    position: relative;
    display: block;
    width: 500px;
    margin: 0 auto;
    min-height: 100%;
}

.container-full {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    min-height: 100%;
}

.alert {
    width: calc(100% - 22px);
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 10px;
    word-wrap: break-word;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    margin-top: 3px;
    margin-bottom: 3px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.alert::after {
    content: '';
    background-color: #ffffff;
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    transition: .3s ease-in-out;
    animation: alert-animation var(--transitionTime) ease-in-out;
}

@keyframes alert-animation {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.alert-text {
    display: inline-block;
    width: 90%;
}

.close-side {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    width: 20%;
    height: 100%;
}

.alert-close {
    display: inline-block;
    outline: none;
    border: none;
    width: 20px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    color: #fff;
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
}

.alert-close::before {
    content: "\f00d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.alert.hidden {
    display: none;
}

.alert:hover {
    opacity: 0.8;
    animation: shake .2s linear;
    transition: 0.3s ease-in-out;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-5px);
    }

    20% {
        transform: translateX(5px);
    }

    30% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    50% {
        transform: translateX(-5px);
    }

    60% {
        transform: translateX(5px);
    }

    70% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(5px);
    }

    90% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

.alert.alert-success {
    border-left: 8px solid #4bb543;
    background-color: rgba(74, 181, 66, 0.8);
    color: #ffffff;
}

.alert.alert-success::before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
    font-size: 19px;
}

.alert.alert-danger {
    border-left: 8px solid #e74c3c;
    background-color: rgba(255, 14, 14, 0.8);
    color: #ffffff;
}

.alert.alert-danger::before {
    content: "\f071";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
    font-size: 19px;
}

.alert.alert-error {
    border-left: 8px solid #e74c3c;
    background-color: rgba(255, 14, 14, 0.8);
    color: #ffffff;
}



.alert.alert-error::before {
    content: "\f071";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
    font-size: 19px;
}

.alert.alert-warning {
    background-color: rgba(238, 210, 2, 0.8);
    border-left: 8px solid #f0c400;
    color: #ffffff;
}

.alert.alert-warning::before {
    content: "\f071";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
    font-size: 19px;
}

.alert.alert-info {
    background-color: rgba(0, 179, 255, 0.8);
    border-left: 8px solid #00bfff;
    color: #ffffff;
}

.alert.alert-info::before {
    content: "\f05a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
    font-size: 19px;
}


alert.js
JavaScript:
class UIAlert {
    constructor({ type, text, placeName, delayTime }) {
        this.placeName = document.querySelector(placeName);
        this.text = text;
        this.delayTime = delayTime;
        this.type = type;
        this.root = document.querySelector(":root");
        this.create();
    }

    hideAlert = (element) => {
        element.style.opacity = 0;
        setTimeout(() => {
            element.classList.add("hidden");
            element.remove();
        }, 1000);
    };

    create() {
        document.createElement("div");
        let alert = document.createElement("div");
        let alertType = "alert-" + this.type;
        alert.classList.add("alert", alertType);
        this.root.style.setProperty("--transitionTime", this.delayTime+ "s");

        let alertText = document.createElement("p");
        alertText.classList.add("alert-text");
        alertText.innerHTML = this.text;

        alert.appendChild(alertText);

        let closeSide = document.createElement("div");
        closeSide.classList.add("close-side");

        let closeButton = document.createElement("button");
        closeButton.classList.add("alert-close");
        closeButton.onclick = () => {
            this.hideAlert(alert);
        };

        closeSide.appendChild(closeButton);
        alert.appendChild(closeSide);
        this.placeName.appendChild(alert);
        setTimeout(() => {
            alert.style.opacity = 0;
            setTimeout(() => {
                alert.remove();
            }, 1000);
        }, (parseInt(this.delayTime) - 0.5) * 1000);
  }
}


Önizleme Görseli :

29tj67u.png


Kütüphanenin özellikleri:

Kod:
- Şık sayılabilecek tasarım
- Yazılan delaydan sonra kendini htmlden silme
- Fontawesome iconları
- Kapatma düğmesi
- Kolay kullanım

Şuan bana göre kütüphanemin kötü yanı kendini direkt girilen containerin sonuna ekliyor bu yüzden bir formda kullanırken ekstra bir div oluşturmak gerekiyor.


Bu kodları kaydetmekle falan uğraşmak istemiyorum diyenler için indirme linkleri:

logo.png

İndir alert rar


logo.png

alert.rar dosyasını indir - download


main_logo_inverted.png

alert.rar indir


github-icon-png-29.jpg


GitHub - Crackmeci/alertLibrary: A simple alert library


VirusTotal:

vt_logo.svg

VirusTotal
 
Son düzenleme:
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.